本文件探讨了以用户为中心的设计（UCD）在网站开发中的重要性，强调在设计决策中融入用户的观察与反馈，以提高设计质量和用户满意度。作者分享了多种UCD方法，包括可用性测试和行为观察，并说明UCD不是单一方法，而是多种方法的结合。最后，文件鼓励设计团队借助用户的力量来推动有效的设计决策。

1. 借力使力的乾坤挪移大法
以使用者為中心的設計決策奧妙
蔡明哲 Richard Tsai
2013/1/12

2. 前言
網站開發設計最常遇到的問題是需求無法早
期釐清，團隊共識不易凝聚，對於什麼是好
網站缺少客觀衡量標準。
應用 User-Centered Design的觀念跟方法，
在網站開發設計的前後期，可以取得比較正
確的設計決策，獲得專案利害關係人與使用
者的肯定。

3. 蔡明哲 Richard Tsai
• 悠識 創辦人暨首席資訊架構師
– Chief Information Architect
– 16年網路行銷經驗及網站企劃與建置經驗
– 熱衷於 網站企劃, 網路行銷, 專案管理, 資料庫行銷, 使用者研究
• HPX社群 創辦人
– 嘗試創造出跨世代交流的環境
– 幫台灣培養更多人才（數位服務與產品企劃）
悠識數位 UserXper

4. Richard的工作歷程演化
資訊架構師
RD工程師
網路行銷總監
IT主管
專案部門主管
資料庫行銷顧問
網路廣告AE
AD Network
網路市場研究經理
產品經理
悠識數位 UserXper

5. 悠識數位
以「網站使用者經驗」為核心的5項服務
使用者
研究
RESEARCH
使用者經驗
USER
教育訓練 EXPERIENCE
TRAINING
軟體代理
Axure RP
SOFTWARE
原型規劃
PROTOTYPE
社群活動
COMMUNITY
悠識數位 UserXper

6. 贊助 WebConf 2013 抽獎
悠識數位 UserXper

7. HPX - 網路工作者交流社群
H
P
X
Crossing
Happy
• Planner
交流
快樂的
• Project Manager
• Product Manager
• Producer
• Prototyper (Designer)
• Programmer
• Professor
• …
悠識數位 UserXper

8. 實體聚會
網路社群
課程/顧問
HPX Party (大型網聚)
網站企劃 fb page
企劃/研究
Axure RP
HPX 讀書會(小組交流)
HPX 讀書會 fb社團
HPX Junior
HPX Junior社團
HPX 校園Campus
HPX Campus社團
HPX公益計畫
HPX 公益專案社團
HPX Senior
HPX Senior 社團
UX社群夥伴
悠識數位 UserXper

9. 悠識數位 UserXper

10. 設計決策的形成

11. 設計決策 Design Decision
從眾多的可能性，找出較佳的設計方式
悠識數位 UserXper

12. 取得共識
大象, 野馬, 蛇與蝴蝶，各自都在想些什麼？
悠識數位 UserXper

13. 舞龍
悠識數位 UserXper

14. 一般企業應用系統
老板需求
專案經理/SA
悠識數位 UserXper
图片来源 http://www.nipic.com/show/3/24/7e330d36f3285e5a.html

15. 現在的網際網路
使用者需求
網站企劃/
專案經理/
產品經理
悠識數位 UserXper
图片来源 http://www.nipic.com/show/3/24/7e330d36f3285e5a.html

16. 誰做決定？
悠識數位 UserXper

17. Boss-Centered Design
悠識數位 UserXper

18. Client-Centered Design
圖片來源：http://www.freedigitalphotos.net/images/Babies_g381-Hungry_Baby_p11039.html
悠識數位 UserXper

19. Developer-Centered Design
悠識數位 UserXper

20. Designer-Centered Design
悠識數位 UserXper

21. God-Centered Design
圖片來源： http://sucai.redocn.com/photo/2012-05-26/859515.html
悠識數位 UserXper

22. User-Centered Design
悠識數位 UserXper
圖片來源：http://www.syntagm.co.uk/design/elecamonglebat.htm

23. 利害關係/立場不同，影響溝通
悠識數位 UserXper

24. 以使用者為中心
UCD,
User-Centered Design

25. 借用戶之力來使力
• 以權力地位來做設計決策 -- 呃？
• 以經驗/以專業來做決策 -- ㄟ！！
• 借用使用者的眼睛跟思維，
獲得使用者的力量 -- 讚！
悠識數位 UserXper

26. 「我也是使用者」的迷宮
• 我們都太熟悉自己開發的產品跟系統
• 我們都是Super User，不是⼀一般User
悠識數位 UserXper

27. UCD不是用嘴巴講講，
而是使用者多元面向的了解
文化
使用者
情境
習性
眼 / 腦 / 手
悠識數位 UserXper

28. 介紹⼀一些有趣UCD方法

29. Usability Test 易用性測試
悠識數位 UserXper

30. ⼀一個價值3億美金的按鈕
允許結帳的時候跳過註冊
悠識數位 UserXper

31. Data-Driven Design (A/B Test)
悠識數位 UserXper

32. 行為觀察 (WaClick–點擊熱圖)
悠識數位 UserXper

33. 眼動研究 Eye Tracking (人因工程)
video
悠識數位 UserXper

34. 眼動研究 Eye Tracking
悠識數位 UserXper

35. 眼動研究 Eye Tracking
悠識數位 UserXper

36. Banner Blindness 廣告視盲
研究發現：
「當使用者在網站上尋找特定的目標時，他們
會在預期放該資訊的位置上找尋文字或者是連
結。
人們很常忽略那些色彩繽紛、視覺化的頁面元
素，以避免看到的是廣告。」
http://www.hpx-party.com/archives/4604
悠識數位 UserXper

37. 費茲定律Fitts’ Law (人因工程)
電流急急棒
悠識數位 UserXper

38. 使用者心理 (刪除FB帳號)
We’re sorry you’re leaving. Tell us why Facebook was not useful
• 創意點子: 讓朋友照片出來跟你說再見
• 降低關閉帳號比率 (deactivation rate) 7%
悠識數位 UserXper

39. 資訊圖表的設計
維基百科中的古老的Pie chart（年代：1801）
http://www.webconf.tw/registration-statistics.html
悠識數位 UserXper

40. 圓餅圖的幕後（使用者因素）
優：從 12 點鐘方向開始
劣
https://www.facebook.com/notes/max-chen/圓形圖（pie chart）的使用/4136881954799 by陳書儀
悠識數位 UserXper

41. 探索使用者的認知(卡片分類 )
悠識數位 UserXper
-41-

42. 刺激創意點子 (脈絡訪查及人物誌)
悠識數位 UserXper

43. 探索每⼀一個層次使用者經驗
The Elements Of
User Experience
By JJG (AJAX之父)
悠識數位 UserXper

44. 觀念釐清
UCD是什麼？不是什麼？

45. UCD是甚麼?
UCD不是甚麼?
• 是許多方法的適當組合
• 不是⼀一種方法
• 是設計決策模式，設計 • 不是單指視覺設計/網
原則或團隊文化
頁設計等的設計工作
• 所有開發設計參與者都 • 不是特定研究/設計人
應該負責其中⼀一部分
員的工作
• 是觀察及探索使用者的 • 不是調查使用者主觀偏
行為脈絡
好，更不是問卷調查
• 可以提高成功機率
• 不是成功的保證
• 可以幫助創新進行驗證
• 不是墨守成規/沿用
Design Pattern
• 與其他專業共創價值
• 不是取代其他專業能力
悠識數位 UserXper

46. 關於UCD 學習管道
• 網站企劃粉絲頁
http://facebook.com/web.plan
• HPX 讀書會
http://www.hpx-party.com/hpx-reading-club
• HPX 活動 (每月), HPX Life講座 (每月)
http://www.hpx-party.com/hpx-events
• 悠識數位課程
http://userxper.com/
悠識數位 UserXper

47. 悠識數位 UserXper

48. 悠識數位 UserXper

49. Axure RP 校園教學免費授權
http://userxper.com/axure/axure_rp_for_classroom
悠識數位 UserXper

50. WaClick 點擊熱圖試用申請
http://waclick.com/trial/
悠識數位 UserXper

51. 願使用者原力與你同在
悠識數位 UserXper