Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Use information space design principles to make web pages better understood
Search
Sean Hsieh
February 20, 2021
Design
0
27
Use information space design principles to make web pages better understood
HPX meetup February 2021
Sean Hsieh
February 20, 2021
Tweet
Share
More Decks by Sean Hsieh
See All by Sean Hsieh
Use Organization Structures to Achieve Better Navigation Experiences for Users
ofalpha
0
31
How to Set and Manage OKR for Side projects with Trello and Notion?
ofalpha
0
100
Experience to migrate JS modules to different bundler system
ofalpha
1
350
Design A Dark Traffic System With GoReplay
ofalpha
1
1.4k
Other Decks in Design
See All in Design
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
340
プロダクトデザインは子育て/Product design is parenting
medley
0
510
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
For My Dad- teaser
pdqsketch
PRO
0
170
Installing and Running decksh/pdfdeck
ajstarks
1
570
Speed Design
sergeychernyshev
9
270
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.5k
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
100
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
1
130
アクセシビリティのはじめかた デザイナー編
tokimari
2
750
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
The Invisible Customer
myddelton
117
13k
The Invisible Side of Design
smashingmag
294
50k
4 Signs Your Business is Dying
shpigford
178
21k
How GitHub (no longer) Works
holman
305
140k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Transcript
1 HPX meetup Feb 2021 謝任軒, Sean Hsieh
[email protected]
Software
engineer @ Garmin International Use information space design principles to make web pages better understood
2 Agenda • Introduction • 簡述資訊空間設計原則的概念 • 嘗試實際套用資訊空間設計原則
3 Introduction • 資訊空間設計原則旨在塑造人們對於資訊空間的感知- 使用者身在哪裡? 能做什麼? 能期待尋找什麼? • 由定義可知,產品開發團隊可以期望掌握設計原則後,
提升使用者對於服務的理解程度以提高服務使用率及 品質。 • 那麼如何套用資訊空間設計原則呢?
4 資訊空間設計原則的概念
5 1. 實體空間的空間營造 人類如何理解當下所處空間的where/how/ what的呢? • 實體空間是由具備實體空間的物件組合, 如牆壁、屋頂、 家具等
• 在實體空間中,使用者可以從特定的傢 俱、符號、事物在特定空間的配置方式 中截取片段線索,因此使用者不需要付 出太多注意力去確認身在何處。 source: 台北和平國中籃球館
6 2. 資訊空間的空間營造-資訊架構設計 所以人類是如何理解資訊空間的where/ how/what呢? • 當人類所處的環境由實體轉到資訊空間 的時候,是將對實體片段線索轉移到語 意元素(導覽選單名稱、主標題、次標題、 單元標題、關鍵字等),資訊元素,語意
特徵理解網站所呈現的資訊 • 資訊空間設計原則(資訊架構設計)就是安 排語意元素的原則
7 嘗試實際套用資訊空間設計原則
8 • 接著要研究的是有哪些資訊空間設計原則是開發時可 以注意的 (以下由抽象到具體排序) • 實際套用於正在開發的專案試試看 嘗試實際套用資訊空間設計原則 定義資訊空
間類型 模組化 與延伸 語意結構
9 1.定義資訊空間類型 (對應建築類型學) 定義或是找到對應的抽象的資訊空間類型相當重要 1. 同個產業的網頁,主功能的導覽列都有相同的主功能 →使用者弄清楚身在何方,有助於使用者理解與移動 2. 符合某種典型網站的架構,僅改變非結構性的差異
→有助於與同性質網頁產生區隔 因此在這個階段所要做的事情是找到對應的抽象資訊空間作為樣板 (或框架)
10 尋找對應的網頁類型並套用 Daily Learning讓使用者以自己的偏好挑選文章學習自學軟體工程, 對應到實體空間的建築物比較像圖書館或書店
11 2.模組化與延伸 • shearing layers越內層的變動 速率越高,而相對穩定的階層 如結構或外觀通常是建築的主 導。 •
拆解使變動速率不同的地方獨 立出來,依據變動速率拆分的 子區域組成整體架構例如子網 站或子服務。
12 依據變動速率獨立服務 獨立成單獨的網路服務的好處: 1. 對Crawler server的修改將不會影響到Web server 2.
對前端頁面上的修改也不會影響Crawler server的運作
13 3.語意結構 • 語意結構是指每個元素在空間 中的相對重要性 (即資訊階層) • 第一階層導覽列的資訊元素可 定義資訊空間被外界認知的形 式
• 可以用Sitemap作為溝通的工 具
14 調整網頁的韻律 • Daily Learning在主頁面上 的文章排版方式在還未搜尋 前屬於Gallery的形式 • 套用韻律及慣用模式的概念:
可以改變搜尋後的排版方式, 讓使用者感到網站的巧思以 及差異化
15 References • 資訊架構學:網站、App與資訊生態系統規劃(第四版) • Web design — Use information
space design principles to make web pages better understood • Day 18 of #100DaysOfCode: Create Sitemap to Improve SEO
16 Thanks! Any questions? You can find me at:
[email protected]