資訊是以透過友善的資訊架構(IA)呈現給使用者

1. 資訊架構(part-1)
(information architecture)
張崑
hqw621hqw@gmail.com

2. First…
資訊架構(IA)只是一環

3. •這邊想跟大家分享的是每當有一個新議題…
大家會一窩蜂地鑽進, 但過程中卻忘了:
這個議題只是其中一環
•你不只是要把IA搞懂…如何把這一環扣
合到其他環節才是真正重要的…

4. 資訊技術
• 平台
• 伺服器端
• 前端
視覺傳達
• 介面設計
• 藝術指導
• 圖像化
資訊架構
• 導覽
• 資訊組織化
• 資訊結構化
別忘記…
我們提過體驗
是整合性的呈現

5. 資訊技術
• 平台
• 伺服器端
• 前端
視覺傳達
• 介面設計
• 藝術指導
• 圖像化
別忘記…
我們提過體驗
是整合性的呈現
資訊架構
• 導覽
• 資訊組織化
• 資訊結構化
How about
…….

6. 關於資訊架構
你得先知道…
甚麼叫做資訊

7. 資訊資料 整合
資訊是把散落的資料
集合成統一的標準格式

8. 資訊資料 整合
資訊是把散落的資料
集合成統一的標準格式
已經有統一的資訊…
資訊架構(IA)用在哪?

9. 隨著許多的網站的架構越來越複雜，
擁有很多的頁面與分類，而『麵包屑』(或稱導覽路徑)
則扮演了重要的導航角色，它提高使用者能夠更正確的
在網站各個層級裡遊走而不迷失方向，甚至更快速的前往各個頁面。
若發現點進的結果不是使用者所預期的，
麵包屑就能快速的帶領你回到正確的層級，
而不是只能靠著瀏覽器的上一頁重複click!
What is Information Architecture

10. The goal of Information Architecture
•方便用戶：麵包屑的層級連結可以有效的輔助使用者，
讓他們永遠找得到回頭的路徑，並且更加瞭解網站的分類架
構。
•減少點擊次數：對於架構複雜的網站，若正確的使用
麵包屑可以讓使用者容易的前往各個層級，也減少了使用者
點擊次數。
•降低跳出率：對首次訪問的使用者來說，麵包屑路徑也
是一種帶領使用者更進一步瀏覽各網頁的方式，降低了網站
的跳出率。

11. take an example

13. 查詢票卡搭乘紀錄
的服務在哪裡?

14. 查詢票卡搭乘紀錄
的服務在哪裡?
你開始猜
會在哪裡?

16. 你會發現:
• 使用者不知道甚麼叫麵包屑
影響使用者決定以『麵包屑』的方式找尋的關鍵因素是：
『麵包屑使用的連結文字與使用者尋找的內容有相關』，
這個具相關性的文字連結，會讓使用者願意嘗試、
賭賭運氣，看使用麵包屑是否可以用最快的速度，
帶領他們找到他們所想要的。
因此，對於使用者而言，
也許他們根本不知道什麼是麵包屑，
最主要的是它對使用者『說了什麼』

17. So…

18. 資訊資料 整合
資訊是以透過友善的
資訊架構呈現給使用者
IA登場
使用者從這開始接收你想傳達的內容

19. Second…
資訊架構(IA)的種類

20. 整體規範(上下)
個別網站(下上)
• 特色:
1.以集團為主的設計
2.維持品牌基調
3.例如:CMS
• 特色:
1.主題性強烈
2.更新頻率高
3.例如:活動頁(campaign)

21. take an example

24. Third…
資訊架構(IA)的準則

25. Level follows time : 依時間變動作分層
易變動
不易變動
地基: 網域
結構: 網站架構(IA)
服務: 規範(如:色系, 命名)
空間: 內容布局(如:RWD)
主體: 各頁面設計(page)

26. next issue…
IA如何融入UX design?