導覽之道 - 以iCook和Womany為例

Information Architecture：Ch8 The Tao of Navigation
以iCook和Womany為例

Transcript

1. Ch8 The Tao of Navigation ChiaChia Lee Polydice, Inc. 1 12年5月24日星期四
2. 導覽之道 2 12年5月24日星期四
3. 以iCook & Womany為例 3 12年5月24日星期四
4. 使用者尋求資訊的四種方式 • 已知項目搜尋known-item search • 探勘式尋求exploratory seeking • 不知道自己需要什麼don’t know what I need to know • 重新尋找re-finding 4 12年5月24日星期四
5. 已知項目搜尋 • 使用者明確知道在找什麼 • 也知道叫什麼 • 導覽和搜尋合作，讓他們抵達欲至之處 5 12年5月24日星期四
6. 探勘式尋求 • 可能有所需求，但不確定該怎樣滿足 • 「我在找新的數位相機」 • 能知道這台是不是我要的 • 但永遠不知道還有沒有更好的 6 12年5月24日星期四
7. 不知道自己需要什麼 • 買相機前要弄懂百萬像素、快閃記憶 體、光學變焦 • 想買新房子的女人發現要瞭解在該城市 或州內有哪些法律 • 都在找⼀一樣東西，卻發現其實需要知道 別的東西 7 12年5月24日星期四
8. 重新尋找 • 使用者可能想回頭看看過去所發現的東 西 • 我們以為我的最愛或書籤可以顧及這種 需求 8 12年5月24日星期四
9. 三種導覽類型 • 結構導覽 Structural navigation • 層級 • 分成全域導覽、局部導覽 • 關聯導覽 Associative navigation • 接下來呢？我該怎麼做？你還有什麼？ • 工具性導覽 Utility navigation • 包括登入、個人檔案、書籤等 • 排除在內容外，但對網站功能至關重要 9 12年5月24日星期四
10. 三種導覽類型 10 12年5月24日星期四
11. 三種導覽類型 11 12年5月24日星期四
12. 結構導覽 局部導覽 工具列導覽 關聯導覽 全域導覽 三種導覽 安全網 下⼀一步 outline 12 12年5月24日星期四
13. 結構導覽 13 12年5月24日星期四
14. 結構導覽 • 全域導覽 Global Navigation • 局部導覽 Local Navigation 14 12年5月24日星期四
15. 全域導覽 • ⼀一組在網頁頂端能看到的連結 • 幾乎出現在每個頁面 • 如果有層級或sitemap，頂級類別 15 12年5月24日星期四
16. 全域導覽 • 告訴你網站的主軸(這很重要) 16 12年5月24日星期四
17. 全域導覽 • 告訴你網站的主軸(這很重要) 17 12年5月24日星期四
18. 全域導覽 • 通常在網站頂端，但水平導覽空間有限 18 12年5月24日星期四
19. 全域導覽 • 所以有的會用垂直 • 那為什麼大部分的網站還是把導覽列放在頂 端，而較少放在左邊？ • 因為這樣會限制局部導覽，以及頁面內容的可 用空間 19 12年5月24日星期四
20. 全域導覽 • 在哪並不重要，重要的是出現在每個頁面上 20 12年5月24日星期四
21. 好險 21 12年5月24日星期四
22. 局部導覽 • 次類別 22 12年5月24日星期四
23. 局部導覽 • 幫助使用者投入探勘式尋求： • 使用者知道他們需要某樣東西，但不確定是什 麼，選擇全域導覽的連結後，局部導覽協助他 瀏覽更確切的主題 23 12年5月24日星期四
24. 局部導覽 • 只要顯示該類別的子類別連結 • 局部導覽通常出現在全域導覽「底下」 • 1. 強化組織方式 • 2. 讓局部導覽離頁面內容近些，所以使用者若 要找其他可去之處，會先看局部導覽 24 12年5月24日星期四
25. 局部導覽 • 出現⼀一組局部導覽就好 • 別讓使用者感到困惑 25 12年5月24日星期四
26. 局部導覽 • 多少才算太多層？ 26 12年5月24日星期四
27. 局部導覽 1 2 3 4 27 12年5月24日星期四
28. 局部導覽 • 建議 • 不要讓使用者崩潰 • 兩層 • 預先將設計擴充到第三層，沒用也沒關係 28 12年5月24日星期四
29. 關聯導覽 29 12年5月24日星期四
30. 關聯導覽 • 下⼀一步？What’s next? (互動成功) • 使用者和該頁面互動成功後該發生什麼事？接 下來呢？ • 安全網 Safety nets (互動失敗) • 頁面並非使用者想要的，將發生什麼事？使用 者就快要離開你的網站了，你有什麼安全網可 以接住他？ 30 12年5月24日星期四
31. 關聯導覽 今天， 無論如何， 就是不要讓使用者離開！ 31 12年5月24日星期四
32. 下⼀一步 • 看完文章後 32 12年5月24日星期四
33. 下⼀一步 • 看完食譜後 33 12年5月24日星期四
34. 下⼀一步 • 看完youtube，直接把下⼀一步留在框框裡 34 12年5月24日星期四
35. 下⼀一步 • 哇！產品沒貨了！ 當有貨時通知我 35 12年5月24日星期四
36. 下⼀一步 • 哇！產品沒貨了！ 36 12年5月24日星期四
37. 下⼀一步 永遠都要提供下⼀一步， 使用者總想要再做別的事。 37 12年5月24日星期四
38. 安全網 • 如果不想讀文章，CNN準備好影片給你看 38 12年5月24日星期四
39. 安全網 • Ask.com協助無法順利描述問題的使用者 39 12年5月24日星期四
40. 安全網 紐約時報提供廣泛的 安全網，接住遊蕩的 使用者，把讀者留在 網站上。(P.210) 40 12年5月24日星期四
41. 安全網 安全網設想可能的錯誤， 建立幫使用者解決該問題的機制。 41 12年5月24日星期四
42. 以metadata驅動關聯導覽 • 依據時間：大約同時出版、下⼀一篇 • 依據類型 • 依據標題或主題 • 依據興趣 • 依據擁有人或群體：來自相同作者 • 依據社群：跟你相像的其他人都看些什麼 42 12年5月24日星期四
43. 爹不疼娘不愛，工具性導覽 43 12年5月24日星期四
44. 工具性導覽 • 例如：登入、聯絡我們、搜尋、協助、帳 號設定 • 也可以有職缺、部落格、新聞稿等奇怪的 東西，也可以有書籤、最愛、歷史 • 救生艇 44 12年5月24日星期四
45. 工具性導覽 • 慣例：放在右上角 45 12年5月24日星期四
46. 工具性導覽 • 卡爾巴赫：「工具性導覽連結著能協助使用 者使用網站的工具與功能」 46 12年5月24日星期四
47. 設計導覽 - 自問三題 • 內容如何組織？ • 使用者想做什麼？ • 你想要使用者做什麼？ 47 12年5月24日星期四
48. 謝。 48 12年5月24日星期四