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
40
Discovering Latent Factors from Movies Genres for Enhanced Recommendation
chiachialee
1
86
Search and Ye Shall Find
chiachialee
1
59
Git 簡介 & Perfect commit before push (10 cases)
chiachialee
2
120
Other Decks in Design
See All in Design
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.1k
Resolving text accessibility dilemmas in UIs
romanshamin
0
110
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
270
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
280
B/43プラスカードができるまで
putchomsmartbank
0
430
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo
yasuhiroyokota
2
1k
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
今日から始めるDesignOpsのヒント
isaikaori
1
390
Ride or Die Animatics
warwatkar
0
130
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.2k
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
230
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Music & Morning Musume
bryan
39
5.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Writing Fast Ruby
sferik
619
59k
The Mythical Team-Month
searls
214
42k
Statistics for Hackers
jakevdp
789
220k
Infographics Made Easy
chrislema
237
18k
Typedesign – Prime Four
hannesfritz
36
2k
Code Review Best Practice
trishagee
54
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
What the flash - Photography Introduction
edds
64
11k
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日星期四