界面設計黑魔法 - the dark art of interface design @ rgba 07

The Dark Art of Interface Design

界⾯面設計⿊黑魔法

Hans - 20140709 @ RGBA 這裡有⼀一群⼈人研究 Layout

ERP 系統與電信網路監控程式設計 使⽤用者經驗

物流管理系統

⼈人⼒力派遣管理系統

項⺫⽬目管理報告系統

供貨商信息查詢系統

內部教育訓練講師

新⼈人招募與教育訓練

電信網絡成本管理系統

電信網管⼯工作管理系統

電信障礙告修管理系統

客⼾戶IP管理系統

員⼯工數據管理系統

網路中⼼心⼯工作流程模塊建置

ＩＰＶＰＮ網絡實時監控系統

ＶＤＳＬ網絡實時監控系統

客⼾戶數據管理系統

質性研究

量性研究

＋

Garena @ Player Experience

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

網站分析 遊戲數據

體驗研究

網站分析 遊戲數據

體驗研究

1. 滿意度!Satisfaction

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

網站分析 遊戲數據

體驗研究

2. 轉換率!Conversion

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

Players

形象官網

正式官網

Time

營運活動

ＣＢ前 CB OB/正式上市

遊戲改版

活動網⾴頁

營運活動

遊戲改版

活動網⾴頁

網站分析：Google Analytics

體驗研究：滿意度、Kano Model、玩家訪談、易⽤用性測試、情感研究

遊戲數據：分析 ARPU、流失率、⽇日活躍、同上⼈人數 etc.

準備期 成⻑⾧長期 成熟期 衰退期 瀕死期

遊戲⽣生命歷程

網站分析

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

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

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

Step 1

Step 2

Step 3

Step 4

Step 5

設計不良的流程會造成流失

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

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

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

今天 拿到的訂單

今天應該要拿到的訂單

沒管理流失，流失就會這麼⼤大

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

設計專業

量性研究

質性研究

界⾯面設計優化三板斧

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

但就算是專家 也只能找出 30% ~ 50% 的易⽤用性問題

References：http://goo.gl/o3AyYU

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

界⾯面設計優化三板斧

設計專業

量性研究

質性研究

多做研究，Happy User Research !

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

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

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

這是⼀一個捲軸滾動式網站

報名⽐比賽 最新消息 聯絡我們

這是什麼？

可以按嗎？

按了會怎樣？

這是⼀一個往上捲動的按鈕

網⾴頁畫⾯面停在頂端時按了不會有反應

往下捲動後，按它才會往上捲

不符合使⽤用者 Mental Models

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

Mental Models

Case 1 很簡單，試試看 Case 2

Case 2：某國政府網站

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

需增加 Banner 辨識所在地

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

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

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

會造成的問題是：

1. ⽤用⼾戶辨別不同服務的困難度增加

2. 需要額外指⽰示⽤用⼾戶，例如增加 Banner

3. 但是增加版位空間會影響其他版位

4. 其他衍⽣生的問題

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

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

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

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

壞的組織架構

Case 3：某知名電商網站

這兩個都是導覽列，會有問題嗎？

最新產品 專家推薦 近期熱⾨門

最新產品 專家推薦 近期熱⾨門

最新產品 專家推薦 近期熱⾨門

改版前

改版後

改版後點擊率下降 !

研究發現，⽤用⼾戶對新版導覽的點擊辨識度下降

最新產品 專家推薦 近期熱⾨門

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

使⽤用者研究⽅方法

無法確定？試試看這些⽅方法吧 ＝）

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

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

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

Johnson＆Goldstein 研究

丹⿆麥 荷蘭 英國 德國 奧地利 ⽐比利時 法國 匈⽛牙利 波蘭 葡萄⽛牙 瑞典

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

如果您願意參與器官捐贈計劃請在框框打勾

左側國家

如果您不願意參與器官捐贈計劃請在框框打勾

右側國家

問題越複雜，⼈人們越傾向使⽤用 Default 選項

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

訂閱經濟學⼈人 線上訂閱 59 美元

紙本訂閱 125 美元

線上＋紙本 也是125 美元

訂閱經濟學⼈人 線上訂閱 59 美元

紙本訂閱 125 美元

線上＋紙本 也是125 美元

16%

0%

84%

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

兩種都訂閱的⽐比率從 84% 降到 32% 中間選項會影響⽤用⼾戶決策

訂閱經濟學⼈人 線上訂閱 59 美元

紙本訂閱 125 美元

線上＋紙本 125 美元

68%

0%

32%

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

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

設計可以透過很多⽅方式影響使⽤用者

Affordance 對⽐比 ⼤大⼩小 顏⾊色

格式塔 !

排版 字型 圖像 流程

呈現順序

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

但有⼀一些設計師

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

他們將設計原則變成 Dark Patterns

The Dark Art of Interface Design

界⾯面設計⿊黑魔法

Dark Pattern 1. 替⽤用⼾戶預設

我要訂閱、安裝、下載、付費我不要訂閱、安裝、下載、付費

替⽤用⼾戶預設：兩個都是我要訂閱 決定越複雜，⼈人們越傾向使⽤用 Default 選項

Dark Pattern 2. ⼀一致性陷阱

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

這是⼀一個要騙你訂閱的 Tempo

要訂閱：Skip Skip 不訂閱：Click Click 要訂閱：Skip Skip 要訂閱：Click Click

Dark Pattern 3. 假按鈕

真正下載點

⼀一堆假載點

Dark Pattern 4. 退訂困難

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

但個別項⺫⽬目的廣告信要⼀一封⼀一封退訂

我要退訂 我要退訂 我要退訂

精選好康旅遊度假 熱⾨門宅配

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

退訂

訂閱

Dark Pattern 5. App 引導評分

引導去 App Store 評分

寄 Email 回饋給開發商

正⾯面評語

負⾯面評語

降低負評，提⾼高正⾯面評分，吃河蟹

Dark Pattern 6. 強迫轉換

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

Dark Pattern 7. ⾃自動加購

相機⼀一台（限時特價） 1

結賬

精選鏡頭擦拭布 99元加購

NT:25400

結賬前系統⾃自動加上沒選擇的項⺫⽬目

Dark Pattern 8. Friend Spam

按下 Add connection(s) 按鈕時

⽤用⼾戶以為⾃自⼰己在連結已經有 LinkedIn 帳號的朋友

但實際上 LinkedIn 會把邀請信寄給所有 Email 聯絡⼈人 現在已經不會了

Dark Pattern 9. 同意條款

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

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

偶爾⽤用 Dark Patterns 應該不會有問題吧

My Lord 我也想知道

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

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

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

Thanks for your attention !

Email：oort.shih@gmail.com

Blog : www.hansshih.com

Facebook : Hans Shih