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
導覽之道 - 以iCook和Womany為例
Search
ChiaChia Lee
May 24, 2012
Design
4
160
導覽之道 - 以iCook和Womany為例
Information Architecture:Ch8 The Tao of Navigation
以iCook和Womany為例
ChiaChia Lee
May 24, 2012
Tweet
Share
More Decks by ChiaChia Lee
See All by ChiaChia Lee
Gloss-vector:semantic relatedness of concepts
chiachialee
0
49
Discovering Latent Factors from Movies Genres for Enhanced Recommendation
chiachialee
1
100
Search and Ye Shall Find
chiachialee
1
65
Git 簡介 & Perfect commit before push (10 cases)
chiachialee
2
130
Other Decks in Design
See All in Design
太田博三(@usagisan2020)
otanet
0
180
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
460
Haruki_Konaka_Portforio.pdf
haruki556
0
550
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
680
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
170
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
310
Minuto de Aventura
olgastoryboard
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
4
630
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
1
1.1k
Arborea Art Book
thebogheart
1
280
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
Slip N Slime - Character Design Ideation
thebogheart
0
300
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
Ruby is Unlike a Banana
tanoku
96
11k
The Invisible Side of Design
smashingmag
297
50k
Embracing the Ebb and Flow
colly
84
4.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Designing for humans not robots
tammielis
249
25k
Transcript
Ch8 The Tao of Navigation ChiaChia Lee Polydice, Inc. 1
12年5月24日星期四
導覽之道 2 12年5月24日星期四
以iCook & Womany為例 3 12年5月24日星期四
使用者尋求資訊的四種方式 • 已知項目搜尋known-item search • 探勘式尋求exploratory seeking • 不知道自己需要什麼don’t know
what I need to know • 重新尋找re-finding 4 12年5月24日星期四
已知項目搜尋 • 使用者明確知道在找什麼 • 也知道叫什麼 • 導覽和搜尋合作,讓他們抵達欲至之處 5 12年5月24日星期四
探勘式尋求 • 可能有所需求,但不確定該怎樣滿足 • 「我在找新的數位相機」 • 能知道這台是不是我要的 • 但永遠不知道還有沒有更好的 6
12年5月24日星期四
不知道自己需要什麼 • 買相機前要弄懂百萬像素、快閃記憶 體、光學變焦 • 想買新房子的女人發現要瞭解在該城市 或州內有哪些法律 • 都在找⼀一樣東西,卻發現其實需要知道 別的東西
7 12年5月24日星期四
重新尋找 • 使用者可能想回頭看看過去所發現的東 西 • 我們以為我的最愛或書籤可以顧及這種 需求 8 12年5月24日星期四
三種導覽類型 • 結構導覽 Structural navigation • 層級 • 分成全域導覽、局部導覽 •
關聯導覽 Associative navigation • 接下來呢?我該怎麼做?你還有什麼? • 工具性導覽 Utility navigation • 包括登入、個人檔案、書籤等 • 排除在內容外,但對網站功能至關重要 9 12年5月24日星期四
三種導覽類型 10 12年5月24日星期四
三種導覽類型 11 12年5月24日星期四
結構導覽 局部導覽 工具列導覽 關聯導覽 全域導覽 三種導覽 安全網 下⼀一步 outline 12
12年5月24日星期四
結構導覽 13 12年5月24日星期四
結構導覽 • 全域導覽 Global Navigation • 局部導覽 Local Navigation 14
12年5月24日星期四
全域導覽 • ⼀一組在網頁頂端能看到的連結 • 幾乎出現在每個頁面 • 如果有層級或sitemap,頂級類別 15 12年5月24日星期四
全域導覽 • 告訴你網站的主軸(這很重要) 16 12年5月24日星期四
全域導覽 • 告訴你網站的主軸(這很重要) 17 12年5月24日星期四
全域導覽 • 通常在網站頂端,但水平導覽空間有限 18 12年5月24日星期四
全域導覽 • 所以有的會用垂直 • 那為什麼大部分的網站還是把導覽列放在頂 端,而較少放在左邊? • 因為這樣會限制局部導覽,以及頁面內容的可 用空間 19
12年5月24日星期四
全域導覽 • 在哪並不重要,重要的是出現在每個頁面上 20 12年5月24日星期四
好險 21 12年5月24日星期四
局部導覽 • 次類別 22 12年5月24日星期四
局部導覽 • 幫助使用者投入探勘式尋求: • 使用者知道他們需要某樣東西,但不確定是什 麼,選擇全域導覽的連結後,局部導覽協助他 瀏覽更確切的主題 23 12年5月24日星期四
局部導覽 • 只要顯示該類別的子類別連結 • 局部導覽通常出現在全域導覽「底下」 • 1. 強化組織方式 • 2.
讓局部導覽離頁面內容近些,所以使用者若 要找其他可去之處,會先看局部導覽 24 12年5月24日星期四
局部導覽 • 出現⼀一組局部導覽就好 • 別讓使用者感到困惑 25 12年5月24日星期四
局部導覽 • 多少才算太多層? 26 12年5月24日星期四
局部導覽 1 2 3 4 27 12年5月24日星期四
局部導覽 • 建議 • 不要讓使用者崩潰 • 兩層 • 預先將設計擴充到第三層,沒用也沒關係 28
12年5月24日星期四
關聯導覽 29 12年5月24日星期四
關聯導覽 • 下⼀一步?What’s next? (互動成功) • 使用者和該頁面互動成功後該發生什麼事?接 下來呢? • 安全網
Safety nets (互動失敗) • 頁面並非使用者想要的,將發生什麼事?使用 者就快要離開你的網站了,你有什麼安全網可 以接住他? 30 12年5月24日星期四
關聯導覽 今天, 無論如何, 就是不要讓使用者離開! 31 12年5月24日星期四
下⼀一步 • 看完文章後 32 12年5月24日星期四
下⼀一步 • 看完食譜後 33 12年5月24日星期四
下⼀一步 • 看完youtube,直接把下⼀一步留在框框裡 34 12年5月24日星期四
下⼀一步 • 哇!產品沒貨了! 當有貨時通知我 35 12年5月24日星期四
下⼀一步 • 哇!產品沒貨了! 36 12年5月24日星期四
下⼀一步 永遠都要提供下⼀一步, 使用者總想要再做別的事。 37 12年5月24日星期四
安全網 • 如果不想讀文章,CNN準備好影片給你看 38 12年5月24日星期四
安全網 • Ask.com協助無法順利描述問題的使用者 39 12年5月24日星期四
安全網 紐約時報提供廣泛的 安全網,接住遊蕩的 使用者,把讀者留在 網站上。(P.210) 40 12年5月24日星期四
安全網 安全網設想可能的錯誤, 建立幫使用者解決該問題的機制。 41 12年5月24日星期四
以metadata驅動關聯導覽 • 依據時間:大約同時出版、下⼀一篇 • 依據類型 • 依據標題或主題 • 依據興趣 •
依據擁有人或群體:來自相同作者 • 依據社群:跟你相像的其他人都看些什麼 42 12年5月24日星期四
爹不疼娘不愛,工具性導覽 43 12年5月24日星期四
工具性導覽 • 例如:登入、聯絡我們、搜尋、協助、帳 號設定 • 也可以有職缺、部落格、新聞稿等奇怪的 東西,也可以有書籤、最愛、歷史 • 救生艇 44
12年5月24日星期四
工具性導覽 • 慣例:放在右上角 45 12年5月24日星期四
工具性導覽 • 卡爾巴赫:「工具性導覽連結著能協助使用 者使用網站的工具與功能」 46 12年5月24日星期四
設計導覽 - 自問三題 • 內容如何組織? • 使用者想做什麼? • 你想要使用者做什麼? 47
12年5月24日星期四
謝。 48 12年5月24日星期四