IA 資訊架構

1. -1-
應用資訊架構觀念規劃網站
Richard Tsai 蔡明哲
悠識數位 首席資訊架構師
richard@userxper.com
2011-03-16

2. -2-
蔡明哲 Richard Tsai
• 首席資訊架構師 Chief Information Architect
– 專長
• 網站企劃，網路行銷, 專案管理, 系統分析, 資料庫行銷
– 過去
• 企劃顧問，專案總監，客服總監，技術總監，行銷企畫經理，知識研究部
經理，軟體工程師，專案經理，產品經理，廣告AE..
• 幫助客戶
– 找出網站設計或企劃的問題
– 提供網站Usability的建議
– 提供網站企劃及Prototype Design的服務
– 提供網站企劃的內功心法/秘笈/工具

3. -3-
1. 釐清資訊架構的意義及重要性
2. 資訊架構的工作流程及意義
3. 認識使用者尋找資訊的心態及意圖
4. 案例分析：搜尋與瀏覽的設計方式
5. 資訊架構與系統分析的銜接
參考書：資訊架構學第三版

4. 資訊架構學理的發展故事

5. -5-
Peter Morville
founder of Semantic Studios
a leading information architecture,
user experience, and findability
consultancy
• Rosenfeld Media.
• IAI co-founder
Information Architecture Institute
• UXnet, the User Experience Network
Louis Rosenfeld

6. -6-
The Three Circles of
Information Architecture
Peter Morville
Facets of the User Experience

7. -7-
隨意搜尋 Ambient Findability

8. -8-

9. -9-
http://iainstitute.org/
http://iainstitute.org

10. IAI 很利害嗎？
• 會員 > 1000
• 台灣 2 人
• 加入的好處是…

11. -11-
Rosenfeld Media
Publisher of user experience
design books and webinars

12. -12-http://schedule.sxsw.com/events/event_IAP7545

13. -13-
資訊架構學-網站應用
Information Architecture for the World Wide Web
• 第一版 1998年
• 第二版 2002年
• 第三版 2006年
• 第三版(中文版) 2007年
1

14. -14-
1998 internet發生什麼事情？
• 商業界才剛開始認識internet
• 以為取名為 入口網站 (Portal) 就可以上市 (IPO)

15. -15-
2008 internet發生什麼事情？
• 倒過一波2000年
• Web 2.0再次瘋狂

16. 2018 internet會發生什麼事情？
• 2018 ???

17. 現在internet 發生什麼事情？
• 現在出現什麼形式的網站，是2008年
的你無法想像的？

18. 請問，這些網站是否以「資訊架構」的
方法跟概念來設計？
• Wikipedia ?
• Digg ? (書籤網站)
• Twitter ?
• Facebook ?

19. 為什麼需要理解資訊架構？

20. -20-
符合以下狀況者，可以提早下課！
• 你做的網站，是給自己用的
• 你做的網站，可能只有短短的一頁或兩頁
• 你的網站本來就是故意做成「迷宮」

21. -21-
資訊架構跟什麼有關係?
• 認知
– 影響網站使用者的認知 (或印象)
• 移動
– 與使用者在資訊空間中的移動有關
• 我在哪裡？
• 能去哪裡？
• 如何回去？
• 這裡好走？還是哪裡好走？

22. -22-
資訊架構到處都有
• 交通系統的地圖 方位引導，怎麼去
• 百貨公司的樓層介紹 有什麼，怎麼去
• 電視遙控器的頻道選擇 (往前, 往後) 如何去 (導覽)
• 餐廳的菜單  有什麼，多少錢

23. -23-
樓層引導

24. -24-

25. -25-
菜單 – 我要點紅燒牛肉麵

26. -26-
information architecture (名詞)
1. The structural design of shared information environments. 共享
資訊環境的結構設計
2. The combination of organization, labeling, search, and
navigation systems within web sites and intranets. 網站內的組織,
歸類, 搜尋與導覽系統的組合。
3. The art and science of shaping information products and
experiences to support usability and findability. 構築資訊產品和
經驗的藝術與科學，用來提供可用性及可尋性。
4. An emerging discipline and community of practice focused on
bringing principles of design and architecture to the digital
landscape. 一種新興的實務學科與社群，專注於將設計與架構的原則
帶入數位領域中。
期待一句簡短的話就捕捉到資訊架構本質與範圍嗎？繼續做夢吧！

27. -27-
與IA相關的 基本概念
• 資訊 information
– 資料 data  資訊 info  知識 knowledge
• 結構 structuring, 組織organizing, 命名
labeling, 尋找 finding, 管理 managing
• 兼具藝術性與科學性
– 可用性工程, 行為研究: 科學性
– 依照經驗,直覺及創意: 藝術性

28. -28-
什麼是網站資訊架構?
• 動詞：多種方法的組合及運用的過程
– 構築資訊產品和經驗的方法(藝術與科學)，用來提供
可用性及可尋性。
– 將這些方法組合起來 (依其適用及邏輯)，來完成比較
有意義的資訊架構。
• 名詞：資訊架構的成品
– 網站內的資料組織, 命名, 搜尋與導覽系統的組合。
– 具體形式：網站架構圖，流程圖，中介資料(meta
data)的關聯性，導覽系統，搜尋的設計…

29. 什麼是網站資訊架構?
網站資訊的組織, 命名, 導覽與搜尋
資訊架構直接影響使用者認知

30. -30-
• 第一類問題：
不知道如何找到需要的資訊或功能
eg. 我想要一本書，進入網路書店網站，
不知道去哪裡找？
 User Task 1: Search
 User Task 2: Browse Directory
• 第二類問題：
找到需要的功能。卻不知道如何使用或
使用不易。
eg. 不知道如何完成購買？
 User Task : Browser or Search
Home
Page C
Page B
Page A
????
Page A
Task
Done
????
PROBLEMS

31. -31-
SOLUTIONS
• 第一類問題 ：
不知道如何找到需要的資訊或功
能 (屬於 IA 問題)
Design Solution:
Search+ Index + Taxonomy
• 第二類問題 ：
找到需要的功能。卻不知道如何
使用或使用不易。
(屬於介面及互動設計問題)
 Design Solution: UI, IxD, Flow
Home
Page C
Page B
Page A
Page A
Task
Done

32. -32-
Information Architecture
• 分類
– 主題式分類
– 按角色分類
– 按照關鍵字分類 (tags)
– 索引 (indexing)
– …
– Shared Bookmark
– Social Recommendation
– Rating
– User Defined Collection
– …
• 搜尋
• 導覽
• 輔助 (Wizard)
• 指南 (Guideline)
網站編輯
使用者

33. -33-
UI , IxD (Interaction Design), Flow
• UI 簡化
• UI 一致性
• Usability 5E原則
– Effective
– Efficient
– Engaging
– Error Tolerant
– Easy to Learn

34. -34-
什麼不是資訊架構
• 圖形設計不是資訊架構
• 軟體開發不是資訊架構
• 可用性工程不是資訊架構
• 互動設計不是資訊架構
• 經驗設計不是資訊架構
• 內容管理不是資訊架構
• 知識管理不是資訊架構