Information Architecture & The Elements of User Experience analysis of iOS HCI guideline

1. IOS ⼈人機指南
- 資訊架構篇
呂呂旺洲 (Kinda)
2016.7

2. 關於我
• 程式設計師
• 設計程式 ⼀一> 設計別⼈人
• HPX 78 資訊架構讀書會

3. ⼤大綱
• 資訊架構(IA)？(10m)
• 分組整理理 iOS & tvOS & watchOS 指南(20m)
• 使⽤用者經驗分層(15m)
• ⼼心得討論 (20m)
• 讀書會的 UXD (optional)

4. 資訊架構學？
• 為什什麼要資訊架構？(Why?)
• 例例⼦子？(What?)
• 怎麼設計？(How?)

5. 理理解、記憶、層次、社會學
Simplicity is the prerequisite for reliability — by Dijkstra.
Why?

6. 例例⼀一：程式碼的資訊架構
別⼈人的 Code 為什什麼都看不懂...
What?

7. 例例⼆二：廚房的資訊架構
世界的真理理：東⻄西不整理理，你就找不到
What?

8. 例例三：網站的資訊架構
找到想要的資訊、遇到有興趣的資訊
What?

9. 如何建立資訊架構？
How?
內容分析使⽤用者分析 背景分析

10. 開放/封閉卡片分類法
• 模組化
• 卡片化
• 分群組
• 加上標籤
• 描述群組間的關係
How?

11. 被媽媽整理理過的房間...

12. 建「⼈人機指南」的資訊架構
• 分兩兩組
• ⽣生產線 - 卡片化
• 開放卡片分類法
• 分組報告

13. 使⽤用者經驗分層/元素
#CH2The Elements of User Experience by Jesse James Garrett

14. 使⽤用者經驗分層/元素

15. 確保使⽤用者經歷的體驗，不
會發⽣生在你「明確有意識的
意圖」之外。

16. 抽象階梯
由下往上
原⼦子
-> ⾙貝⻄西的特性
-> ⾙貝⻄西
-> ⽜牛
-> 牲畜
-> 農場的資產
-> 資產
-> 財富

17. 五個層⾯面
• 表現層
• 框架層
• 結構層
• 範圍層
• 策略略層

18. 餐廳廚房的 UX 設計
https://www.youtube.com/watch?
v=BSQFbS0hRws

19. 餐廚 UX 的五個層⾯面
• 表現層：
明亮、簡單風
• 框架層：
系統櫃、流理理台、餐桌椅、長凳
• 結構層：
做菜的流程、櫃⼦子上下層、蛋糕器材類
• 範圍層：
餐具、廚具、食物、瓦斯桶
• 策略略層：
三代七⼈人⽤用餐、⼩小朋友可奔跑、⽣生⽇日會

20. APP UX 的五個層⾯面
表現層 框架層

21. APP UX 的五個層⾯面
結構層 範圍層
策略略層
和朋友有趣的溝通
傳送訊息&圖片
新增朋友
購買貼圖
創建群組

22. 封閉式卡片分類法

23. 三個 IOS ⼈人機指南的資訊架構
• Apple 網⾴頁的
• 開放式卡片分類的
• 使⽤用者經驗元素分層的

24. 討論 (20分鐘)
• 寫下兩兩個⼼心得 (發現、優缺點、感想、任何事...)
• 寫下兩兩個問題
• 計時五分鐘
• 輪輪流發表

25. 參參考資料
• Information Architecture 100：100個網站規劃必
備的知識 (Part1: 基礎)
• ⽤用⼾戶體驗要素：以⽤用⼾戶為中⼼心的產品設計 (第
⼆二章)

26. 導讀時間、範圍分配
(約 70-90 ⾴頁)

27. 讀書會的體驗設計 (OPT)
• 寫三個⽬目的(五分鐘)：群
組化、標籤、投票
• 寫三個功能/內容(五分
鐘)：群組化、標籤、投
票