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
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
210
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
480
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
Первая беседа о Карте реализации историй
ashapiro
0
290
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
110
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
200
Yahoo Newsletter Clicker Template
xuechunwu
0
290
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
Improve a service workshop
mastervicedesign
1
110
root COMPANY DECK / We are hiring!
root_recruit
1
15k
Haruki_Konaka_Portforio.pdf
haruki556
0
660
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
440
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
520
39k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Making Projects Easy
brettharned
115
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
KATA
mclloyd
29
14k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Facilitating Awesome Meetings
lara
50
6.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
How to Ace a Technical Interview
jacobian
276
23k
Agile that works and the tools we love
rasmusluckow
327
21k
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日星期四