1. IA &
Usability
2008-11-23
陳啟亮 xxc.chen@gmail.com
知世網絡 網站資訊架構師

3. Information
Architecture
資訊架構
Usability research,
User-Centered Design &
Usability evaluation

4. 資訊架構是什麼

5. 1921

6. 1933

7. Content: 原本存在既有內容
Information: 為了特定目的被傳播的資
訊
User need: 使用者需求
User: 使用者
user User need information content

8. Content
Information
User need
User
所提供的資訊
遠多於預設的
使用者需求

9. Content
Information
User need
User
簡化資訊
幫助使用者需
求聚焦

10. Tips
Simple
Focus

11. 為甚麼要規劃資訊架構

12. 對使用者
更容易滿意
更不容易犯錯

13. 傻瓜介面的力量：
老貓學出版 | 傻瓜介面的力量：MOD VS. 有線電視 http://b-oo-k.net/blog/blog.php/2008/412
例：MOD
Photo by JackForFun http://www.flickr.com/photos/13423557@N00/2515667261/

14. 傻瓜介面的力量：
老貓學出版 | 傻瓜介面的力量：MOD VS. 有線電視 http://b-oo-k.net/blog/blog.php/2008/412
Photo by JackForFun http://www.flickr.com/photos/jackforfun/2515654447/in/set-72157605213370685/

15. 對開發者
減少無謂工作, 與來回修改
易維護
易學習

16. 對客戶
提昇品牌價值

17. Source: Forrester Research, June 9, 2005, Best Practices “How Brands Succeed Online”

18. 那我要怎麼進行資訊架構規劃

19. 1. Find them!
Information Architect (IA) 資訊架構師
Interaction Designer (ID) 互動設計師
Information Designer (ID too) 資訊設計師
User-centered Designer (UCD) 使用者中心設計師
User-interface Designer (UI) 使用者介面設計師
Usability/Usability Engineer (UE) 使用性工程師
User Experience Designer (UX, UXD) 使用者經驗設計
師

20. 2. Learn

21. 表層
骨幹
結構
範圍/限制
策略
Jesse James Garrett’s The Elements of User Experience

22. But…
這個這麼麻煩
反正還不是都會做出來
好煩 客戶看不懂 沒這麼多錢
沒有這麼多時間 好累
真的有用嗎
騙人的玩意兒

23. 客戶語錄
我不知道我要什麼，你先做一個出來讓
我看看
使用者講的，與真正的使用者需求是不
同的

24. OK…
You can do quick and “I feel lucky”

25. Adv.
Checklist. Only take you 1 hr

26. 策略
– 先問六個潛在使用者，要
的是什麼？
– 哪些是評估網站成功的具
Checklist 體指標？如：點閱數？下
載次數？
有哪些限制
– 成本？開發時間？技術能
力？系統環境？
內容清點
– 既有內容？未來會有內
容？內容更新頻率週期？
– 將內容的組織分類
規劃頁面間動線
– 寫下3-6個不同使用者最常
使用網站的故事

27. More Adv. skill
There are methods.

28. Site structure 網站架構
drawing by 洪湘潁, 2008

29. Card Sorting 卡片排序
Photo from Effective prototyping http://www.effectiveprototyping.com/

30. wireframe
Photo from Effective prototyping http://www.effectiveprototyping.com/

31. wireframe
Photo from Effective prototyping http://www.effectiveprototyping.com/

32. wireframe
Photo from Effective prototyping http://www.effectiveprototyping.com/

33. 說故事
Photo from Effective prototyping http://www.effectiveprototyping.com/

34. http://blogs.sun.com/MartinHardee/entry/design_comics_templates_1_0

35. Axure PR

36. http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

37. Tips
先提出問題
再講求方法
再決定工具

38. 討論
資訊架構/資訊設計是一種？
– 開發工具
– 設計方法
– 策略方法
資訊架構設計會失敗嗎？

39. Practice
card sorting
http://www.websort.net/
http://www.websort.net/s/7B3FE8/

40. Research:
card sorting
Explorative 探索式 Qualitative 質性取向
Evaluative 評估式 Quantitative 量化取
向

41. Usability, UCD,
UXD
使用性, 使用者中心設計, 使用者經
驗設計

42. UCD:
User-centered
UXD:
User-experience

43. 與IA不同之處

44. is User Experience

45. #1 慈濟醫院

46. Bad Good
不清楚的導覽 超互動導覽

47. #1 Philippe Starck

48. Bad Good
難用且昂貴 炫耀話題

49. Good
User Experience
不僅僅只是 比「好用」還要多
– 對的顏色
– 對的位置
– 對的按鈕大小
– 容易找的連結

50. Website need User Experience

51. 自我實現需求 Aesthetic / Needs fulfilled
UCD
自尊需求
Personalization / 1-to-1
Accessibility / SEO
被接納的需求
Semantic-web
Information-security
安全需求
IA / Findability
生存需求 Basic-technical-enability
Maslow-UE 需求金字塔

52. 2005
Source: June 9, 2005, Best Practices “How Brands Succeed Online”

53. TV AD? Website? Product(TV)?

54. 2008
Source: June 9, 2005, Best Practices “How Brands Succeed Online”

55. 使用者經驗設計，所費不貲
– 因此，以往使用者經驗設計與研究，多應用在空間
設計、工業設計、軟體設計領域
但
– 越往產品側傾斜，網站越來越與使用者日常生活發
生關係
– 越與日常生活發生關係，越需要關注使用者經驗

56. We do User Experience Design

57. User Centered Design
使用者中心設計
並不是什麼新鮮事，每個人都會講

58. 你開的使用者需求有 沒有人會用這麼複雜 好，我會把「容易使
四百項功能… 的產品，你知道嗎？ 用」這項功能加上去

59. 好的介面設計不是
從圖開始，而是從
瞭解人們開始。
(Tidwell, 操作介面設計模式)

60. 但是
雖然 我們都以為很了解使用者

61. Jakob Nielsen(2006)
Enquiro (2006)

62. Think Eyetracking (2008)

63. Reader
don’t
Read!!
Jakob Nielsen (2008)
On the average Web page, users have time to read at
most 28% of the words during an average visit;
20% is more likely.

64. 其實
我們並不了解「使用者」
需要
– 探索使用者的真實行為
– 提出設計
– 評估設計是否符合行為

65. User experience
research

66. Jan
Chipchase
Jan Chipchase
Principal Researcher at
Mobile HCI Group of Nokia
Research
has a Master degree of
User Interface Design in UK
has a Blog
http://www.janchipchase.co
m/
is living and working in
Tokyo

67. Jan
Chipchase
Working
50% of my time is on field study
related activities
and 50% is on concept development.

68. Jan
Chipchase
Photos: Selection of field research photos: Jan Chipchase: Tehran, Tokyo, skies over Tibet, Ji Lin City in China, New Delhi, New York City, Indri Tulusan:
Indonesia, 2004 – 2007.

69. Jan
Chipchase
Field teams
concept/industrial designers,
psychologists,
usability experts,
sociologists,
and ethnographers

70. Jan
Chipchase
Methodology
observational techniques (observations,
shadowing, diaries, logging) to
interactive techniques (in-depth or ad-
hoc interviews, walk-throughs, role play)
engage participants in the design
process

71. Usability
evaluation

72. 正規版
evaluation
徵募既有或潛在的真實使用者，進行一
對一的實機測試

73. 成本:
– 招募受測者
– 場地設置：設備、軟體
– 測試規劃、執行、分析、結論與報告
– 時間：每一輪測試約3-4週
– 費用：昂貴
成效

74. But….
大部分案子…
– 沒錢
– 沒時間
– 進入點太晚
– 利害關係人有先入之見

75. Discount
Evaluation
Fast, Cheap, and Good
– 少量(受測者)
– 多次
– 直接觀察，非量化
– in-house staff of usability specialists

76. 討論與問題
陳啟亮 xxc.chen@gmail.com
知世網絡 網站資訊架構師