1. The Dark Art of Interface Design
界⾯面設計⿊黑魔法
Hans - 20140709
@ RGBA 這裡有⼀一群⼈人研究 Layout

2. ERP 系統與電信網路監控程式設計 使⽤用者經驗
物
流
管
理
系
統
⼈人
⼒力
派
遣
管
理
系
統
項
⺫⽬目
管
理
報
告
系
統
供
貨
商
信
息
查
詢
系
統
內
部
教
育
訓
練
講
師
新
⼈人
招
募
與
教
育
訓
練
電
信
網
絡
成
本
管
理
系
統
電
信
網
管
⼯工
作
管
理
系
統
電
信
障
礙
告
修
管
理
系
統
客
⼾戶
IP
管
理
系
統
員
⼯工
數
據
管
理
系
統
網
路
中
⼼心
⼯工
作
流
程
模
塊
建
置
Ｉ
Ｐ
Ｖ
Ｐ
Ｎ
網
絡
實
時
監
控
系
統
Ｖ
Ｄ
Ｓ
Ｌ
網
絡
實
時
監
控
系
統
客
⼾戶
數
據
管
理
系
統
質
性
研
究
量
性
研
究
＋

3. Garena @ Player Experience

4. Player Experience
三個部分、兩個⺫⽬目標

5. 網站分析 遊戲數據
體驗研究

6. 網站分析 遊戲數據
體驗研究
1. 滿意度!
Satisfaction

7. 玩家滿意是我們回家唯⼀一的路

8. 網站分析 遊戲數據
體驗研究
2. 轉換率!
Conversion

9. Player Experience
遊戲⽣生命歷程⼯工作項⺫⽬目

10. Players
形
象
官
網
正
式
官
網
Time
營
運
活
動
ＣＢ前 CB OB/正式上市
遊
戲
改
版
活
動
網
⾴頁
營
運
活
動
遊
戲
改
版
活
動
網
⾴頁
網站分析：Google Analytics
體驗研究：滿意度、Kano Model、玩家訪談、易⽤用性測試、情感研究
遊戲數據：分析 ARPU、流失率、⽇日活躍、同上⼈人數 etc.
準備期 成⻑⾧長期 成熟期 衰退期 瀕死期
遊戲⽣生命歷程

11. 網站分析
今天聚會的主題是版⾯面設計
界⾯面設計優化建議也是網站分析的⼀一部份

12. 在分析師眼中
許多網站常常⻑⾧長得像這樣

14. 訂單跟⽤用⼾戶像瀑布⼀一樣不停流失

15. Step 1
Step 2
Step 3
Step 4
Step 5
設計不良的流程會造成流失

16. 設計不良的版⾯面也造成流失

17. 看到⽔水⻯⿓龍頭沒關緊，你會想辦法關緊

18. 但網站流失是無形的，不容易看到

19. 今天
拿到的訂單
今天應該要拿到的訂單
沒管理流失，流失就會這麼⼤大

20. 讓我們再看⼀一眼你的網站

22. 設計專業
量性研究
質性研究
界⾯面設計優化三板斧

23. 倚靠設計專業可以找出問題

24. 但就算是專家
也只能找出 30% ~ 50% 的易⽤用性問題
References：http://goo.gl/o3AyYU

25. 易⽤用性最難的⼀一課
你不是使⽤用者
- Jakob Nielsen

26. 界⾯面設計優化三板斧
設計專業
量性研究
質性研究
多做研究，Happy User Research !

27. 透過使⽤用者研究⽅方法找出問題

28. 案例挑戰
試試看！在以下案例發現問題

29. Case 1：某知名網站⽐比賽報名網⾴頁

30. 這是⼀一個捲軸滾動式網站
報名⽐比賽 最新消息 聯絡我們

31. 這是什麼？

32. 可以按嗎？

33. 按了會怎樣？

34. 這是⼀一個往上捲動的按鈕
網⾴頁畫⾯面停在頂端時按了不會有反應
往下捲動後，按它才會往上捲
不符合使⽤用者 Mental Models

35. Norman, D. A. (1988). The Design of Everyday Things
Mental Models

36. Case 1 很簡單，試試看 Case 2

37. Case 2：某國政府網站

38. 這在版⾯面設計上會造成什麼問題？

44. 需增加 Banner 辨識所在地

45. ⼀一樣是 Banner，但格式變了，不⼀一致

46. 哪⼀一個才是主題？即時景點、台灣看透透、APP?

47. 沒有明顯指⽰示，容易讓⽤用⼾戶迷路

48. 會造成的問題是：
1. ⽤用⼾戶辨別不同服務的困難度增加
2. 需要額外指⽰示⽤用⼾戶，例如增加 Banner
3. 但是增加版位空間會影響其他版位
4. 其他衍⽣生的問題

49. 如果有⼀一本書專⾨門收集設計問題

50. 書名應該會叫做我的 E 政府

51. 但是設計有問題，可能不是設計師的錯

52. 壞設計很少是由設計師造成的。
多數時候，原因在於壞的組織架構。 - Don Norman

53. 壞的組織架構

54. Case 3：某知名電商網站

55. 這兩個都是導覽列，會有問題嗎？
最新產品 專家推薦 近期熱⾨門
最新產品 專家推薦 近期熱⾨門

56. 最新產品 專家推薦 近期熱⾨門
改版前
改版後
改版後點擊率下降
!
研究發現，⽤用⼾戶對新版導覽的點擊辨識度下降
最新產品 專家推薦 近期熱⾨門

57. Case 3 ⽐比較難⽤用設計專業確定問題

58. 使⽤用者研究⽅方法
無法確定？試試看這些⽅方法吧 ＝）

59. 設計問題看多了壽命會減少
來談談更有趣的東⻄西

60. ⼈人的決定很容易被影響
今天早上買的那杯咖啡，是你決定買的嗎？

61. Case 1. 歐洲各國願意捐贈器官⽐比例

62. Johnson＆Goldstein 研究
丹⿆麥 荷蘭 英國 德國 奧地利 ⽐比利時 法國 匈⽛牙利 波蘭 葡萄⽛牙 瑞典

63. 因為結果受到問題設計的影響

64. 如果您願意參與器官捐贈計劃請在框框打勾
左側國家
如果您不願意參與器官捐贈計劃請在框框打勾
右側國家
問題越複雜，⼈人們越傾向使⽤用 Default 選項

65. Case 2. 經濟學⼈人訂閱
Dan Ariely ⾏行為經濟學家的實驗

66. 訂閱經濟學⼈人
線上訂閱 59 美元
紙本訂閱 125 美元
線上＋紙本 也是125 美元

67. 訂閱經濟學⼈人
線上訂閱 59 美元
紙本訂閱 125 美元
線上＋紙本 也是125 美元
16%
0%
84%

68. 中間那⼀一項 0%，拿掉沒關係，對吧？

69. 兩種都訂閱的⽐比率從 84% 降到 32%
中間選項會影響⽤用⼾戶決策
訂閱經濟學⼈人
線上訂閱 59 美元
紙本訂閱 125 美元
線上＋紙本 125 美元
68%
0%
32%

70. 你今天早上買的那杯咖啡
真的是⾃自⼰己的決定嗎？

71. 你是說那個決定不是我做的嗎

72. 設計可以透過很多⽅方式影響使⽤用者
Affordance
對⽐比
⼤大⼩小
顏⾊色
格式塔
!
排版
字型
圖像
流程
呈現順序

73. 有些設計師⽤用設計讓世界變得更好

74. 但有⼀一些設計師

75. 為了追求⾼高轉換率
把⾃自⼰己的靈魂賣給惡魔

76. 他們將設計原則變成 Dark Patterns

77. The Dark Art of Interface Design
界⾯面設計⿊黑魔法

78. Dark Pattern 1. 替⽤用⼾戶預設

79. 我要訂閱、安裝、下載、付費
我不要訂閱、安裝、下載、付費
替⽤用⼾戶預設：兩個都是我要訂閱
決定越複雜，⼈人們越傾向使⽤用 Default 選項

80. Dark Pattern 2. ⼀一致性陷阱

81. 第⼀一個問題：不要訂閱請打勾
第⼆二個問題：如要訂閱請打勾

82. 這是⼀一個要騙你訂閱的 Tempo
要訂閱：Skip Skip
不訂閱：Click Click
要訂閱：Skip Skip
要訂閱：Click Click

83. Dark Pattern 3. 假按鈕

85. 真正下載點
⼀一堆假載點

86. Dark Pattern 4. 退訂困難

87. ⼀一次可訂閱多個項⺫⽬目
我要訂閱電⼦子報

88. 但個別項⺫⽬目的廣告信要⼀一封⼀一封退訂
我要退訂 我要退訂 我要退訂
精選好康旅遊度假 熱⾨門宅配

89. 到網站退訂流程也很複雜，退訂很難找
退訂
訂閱

90. Dark Pattern 5. App 引導評分

91. 引導去 App Store 評分
寄 Email 回饋給開發商
正⾯面評語
負⾯面評語
降低負評，提⾼高正⾯面評分，吃河蟹

92. Dark Pattern 6. 強迫轉換

93. 「到了免費試⽤用期 30 天屆滿後，Spotify Premium 將⾃自動從
你提供的付款卡扣除每⽉月 149.00 TWD 的訂閱費。」

94. Dark Pattern 7. ⾃自動加購

95. 相機⼀一台（限時特價） 1
結賬
精選鏡頭擦拭布 99元加購
NT:25400
結賬前系統⾃自動加上沒選擇的項⺫⽬目

96. Dark Pattern 8. Friend Spam

97. 按下 Add connection(s) 按鈕時
⽤用⼾戶以為⾃自⼰己在連結已經有 LinkedIn 帳號的朋友
但實際上 LinkedIn 會把邀請信寄給所有 Email 聯絡⼈人
現在已經不會了

98. Dark Pattern 9. 同意條款

99. 就是那份看都不看就點確認的同意條款

100. 仔細閱讀，否則會變⼈人形蜈蚣

101. 偶爾⽤用 Dark Patterns 應該不會有問題吧
My Lord 我也想知道

102. 不⽤用擔⼼心，怎麼會有問題呢

103. ⽤用⼾戶不會覺得怎樣的，快點來⽤用吧

104. No ! 你會被⽤用⼾戶唾棄
跟惡魔交易都得付出額外的代價

105. Thanks for your attention
!
Email：oort.shih@gmail.com
Blog : www.hansshih.com
Facebook : Hans Shih