界面設計黑魔法 - the dark art of interface design @ rgba 07
DESCRIPTION
TRANSCRIPT
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
設計不良的流程會造成流失
設計不良的版⾯面也造成流失
看到⽔水⻯⿓龍頭沒關緊，你會想辦法關緊
但網站流失是無形的，不容易看到
今天 拿到的訂單
今天應該要拿到的訂單
沒管理流失，流失就會這麼⼤大
讓我們再看⼀一眼你的網站
設計專業
量性研究
質性研究
界⾯面設計優化三板斧
倚靠設計專業可以找出問題
易⽤用性最難的⼀一課 你不是使⽤用者 - 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 ! 你會被⽤用⼾戶唾棄 跟惡魔交易都得付出額外的代價
