Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Dark Art of Interface Design
界⾯面設計⿊黑魔法
Hans - 20140709
@ RGBA 這裡有⼀一群⼈人研究 Layout
ERP 系統與電信網路監控程式設計 使⽤用者經驗
物
流
管
理
系
統
⼈人
⼒力
派
遣
管
理
系
統
項
⺫⽬目
管
理
報
告
系
統
供
貨
商
信
息
查
詢
系
統
內
部
教
育
訓
練
講
師
新
⼈人
招
募
與
教
育
...
Garena @ Player Experience
Player Experience
三個部分、兩個⺫⽬目標
網站分析 遊戲數據
體驗研究
網站分析 遊戲數據
體驗研究
1. 滿意度!
Satisfaction
玩家滿意是我們回家唯⼀一的路
網站分析 遊戲數據
體驗研究
2. 轉換率!
Conversion
Player Experience
遊戲⽣生命歷程⼯工作項⺫⽬目
Players
形
象
官
網
正
式
官
網
Time
營
運
活
動
CB前 CB OB/正式上市
遊
戲
改
版
活
動
網
⾴頁
營
運
活
動
遊
戲
改
版
活
動
網
⾴頁
網站分析:Google Analytics
體驗研究:滿...
網站分析
今天聚會的主題是版⾯面設計
界⾯面設計優化建議也是網站分析的⼀一部份
在分析師眼中
許多網站常常⻑⾧長得像這樣
訂單跟⽤用⼾戶像瀑布⼀一樣不停流失
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
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07
Upcoming SlideShare
Loading in …5
×

界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07

15,997 views

Published on

Published in: Design

界面設計黑魔法 - The Dark Art of Interface Design @ RGBA 07

  1. 1. The Dark Art of Interface Design 界⾯面設計⿊黑魔法 Hans - 20140709 @ RGBA 這裡有⼀一群⼈人研究 Layout
  2. 2. ERP 系統與電信網路監控程式設計 使⽤用者經驗 物 流 管 理 系 統 ⼈人 ⼒力 派 遣 管 理 系 統 項 ⺫⽬目 管 理 報 告 系 統 供 貨 商 信 息 查 詢 系 統 內 部 教 育 訓 練 講 師 新 ⼈人 招 募 與 教 育 訓 練 電 信 網 絡 成 本 管 理 系 統 電 信 網 管 ⼯工 作 管 理 系 統 電 信 障 礙 告 修 管 理 系 統 客 ⼾戶 IP 管 理 系 統 員 ⼯工 數 據 管 理 系 統 網 路 中 ⼼心 ⼯工 作 流 程 模 塊 建 置 I P V P N 網 絡 實 時 監 控 系 統 V D S L 網 絡 實 時 監 控 系 統 客 ⼾戶 數 據 管 理 系 統 質 性 研 究 量 性 研 究 +
  3. 3. Garena @ Player Experience
  4. 4. Player Experience 三個部分、兩個⺫⽬目標
  5. 5. 網站分析 遊戲數據 體驗研究
  6. 6. 網站分析 遊戲數據 體驗研究 1. 滿意度! Satisfaction
  7. 7. 玩家滿意是我們回家唯⼀一的路
  8. 8. 網站分析 遊戲數據 體驗研究 2. 轉換率! Conversion
  9. 9. Player Experience 遊戲⽣生命歷程⼯工作項⺫⽬目
  10. 10. Players 形 象 官 網 正 式 官 網 Time 營 運 活 動 CB前 CB OB/正式上市 遊 戲 改 版 活 動 網 ⾴頁 營 運 活 動 遊 戲 改 版 活 動 網 ⾴頁 網站分析:Google Analytics 體驗研究:滿意度、Kano Model、玩家訪談、易⽤用性測試、情感研究 遊戲數據:分析 ARPU、流失率、⽇日活躍、同上⼈人數 etc. 準備期 成⻑⾧長期 成熟期 衰退期 瀕死期 遊戲⽣生命歷程
  11. 11. 網站分析 今天聚會的主題是版⾯面設計 界⾯面設計優化建議也是網站分析的⼀一部份
  12. 12. 在分析師眼中 許多網站常常⻑⾧長得像這樣
  13. 13. 訂單跟⽤用⼾戶像瀑布⼀一樣不停流失
  14. 14. Step 1 Step 2 Step 3 Step 4 Step 5 設計不良的流程會造成流失
  15. 15. 設計不良的版⾯面也造成流失
  16. 16. 看到⽔水⻯⿓龍頭沒關緊,你會想辦法關緊
  17. 17. 但網站流失是無形的,不容易看到
  18. 18. 今天 拿到的訂單 今天應該要拿到的訂單 沒管理流失,流失就會這麼⼤大
  19. 19. 讓我們再看⼀一眼你的網站
  20. 20. 設計專業 量性研究 質性研究 界⾯面設計優化三板斧
  21. 21. 倚靠設計專業可以找出問題
  22. 22. 但就算是專家 也只能找出 30% ~ 50% 的易⽤用性問題 References:http://goo.gl/o3AyYU
  23. 23. 易⽤用性最難的⼀一課 你不是使⽤用者 - Jakob Nielsen
  24. 24. 界⾯面設計優化三板斧 設計專業 量性研究 質性研究 多做研究,Happy User Research !
  25. 25. 透過使⽤用者研究⽅方法找出問題
  26. 26. 案例挑戰 試試看!在以下案例發現問題
  27. 27. Case 1:某知名網站⽐比賽報名網⾴頁
  28. 28. 這是⼀一個捲軸滾動式網站 報名⽐比賽 最新消息 聯絡我們
  29. 29. 這是什麼?
  30. 30. 可以按嗎?
  31. 31. 按了會怎樣?
  32. 32. 這是⼀一個往上捲動的按鈕 網⾴頁畫⾯面停在頂端時按了不會有反應 往下捲動後,按它才會往上捲 不符合使⽤用者 Mental Models
  33. 33. Norman, D. A. (1988). The Design of Everyday Things Mental Models
  34. 34. Case 1 很簡單,試試看 Case 2
  35. 35. Case 2:某國政府網站
  36. 36. 這在版⾯面設計上會造成什麼問題?
  37. 37. 需增加 Banner 辨識所在地
  38. 38. ⼀一樣是 Banner,但格式變了,不⼀一致
  39. 39. 哪⼀一個才是主題?即時景點、台灣看透透、APP?
  40. 40. 沒有明顯指⽰示,容易讓⽤用⼾戶迷路
  41. 41. 會造成的問題是: 1. ⽤用⼾戶辨別不同服務的困難度增加 2. 需要額外指⽰示⽤用⼾戶,例如增加 Banner 3. 但是增加版位空間會影響其他版位 4. 其他衍⽣生的問題
  42. 42. 如果有⼀一本書專⾨門收集設計問題
  43. 43. 書名應該會叫做我的 E 政府
  44. 44. 但是設計有問題,可能不是設計師的錯
  45. 45. 壞設計很少是由設計師造成的。 多數時候,原因在於壞的組織架構。 - Don Norman
  46. 46. 壞的組織架構
  47. 47. Case 3:某知名電商網站
  48. 48. 這兩個都是導覽列,會有問題嗎? 最新產品 專家推薦 近期熱⾨門 最新產品 專家推薦 近期熱⾨門
  49. 49. 最新產品 專家推薦 近期熱⾨門 改版前 改版後 改版後點擊率下降 ! 研究發現,⽤用⼾戶對新版導覽的點擊辨識度下降 最新產品 專家推薦 近期熱⾨門
  50. 50. Case 3 ⽐比較難⽤用設計專業確定問題
  51. 51. 使⽤用者研究⽅方法 無法確定?試試看這些⽅方法吧 =)
  52. 52. 設計問題看多了壽命會減少 來談談更有趣的東⻄西
  53. 53. ⼈人的決定很容易被影響 今天早上買的那杯咖啡,是你決定買的嗎?
  54. 54. Case 1. 歐洲各國願意捐贈器官⽐比例
  55. 55. Johnson&Goldstein 研究 丹⿆麥 荷蘭 英國 德國 奧地利 ⽐比利時 法國 匈⽛牙利 波蘭 葡萄⽛牙 瑞典
  56. 56. 因為結果受到問題設計的影響
  57. 57. 如果您願意參與器官捐贈計劃請在框框打勾 左側國家 如果您不願意參與器官捐贈計劃請在框框打勾 右側國家 問題越複雜,⼈人們越傾向使⽤用 Default 選項
  58. 58. Case 2. 經濟學⼈人訂閱 Dan Ariely ⾏行為經濟學家的實驗
  59. 59. 訂閱經濟學⼈人 線上訂閱 59 美元 紙本訂閱 125 美元 線上+紙本 也是125 美元
  60. 60. 訂閱經濟學⼈人 線上訂閱 59 美元 紙本訂閱 125 美元 線上+紙本 也是125 美元 16% 0% 84%
  61. 61. 中間那⼀一項 0%,拿掉沒關係,對吧?
  62. 62. 兩種都訂閱的⽐比率從 84% 降到 32% 中間選項會影響⽤用⼾戶決策 訂閱經濟學⼈人 線上訂閱 59 美元 紙本訂閱 125 美元 線上+紙本 125 美元 68% 0% 32%
  63. 63. 你今天早上買的那杯咖啡 真的是⾃自⼰己的決定嗎?
  64. 64. 你是說那個決定不是我做的嗎
  65. 65. 設計可以透過很多⽅方式影響使⽤用者 Affordance 對⽐比 ⼤大⼩小 顏⾊色 格式塔 ! 排版 字型 圖像 流程 呈現順序
  66. 66. 有些設計師⽤用設計讓世界變得更好
  67. 67. 但有⼀一些設計師
  68. 68. 為了追求⾼高轉換率 把⾃自⼰己的靈魂賣給惡魔
  69. 69. 他們將設計原則變成 Dark Patterns
  70. 70. The Dark Art of Interface Design 界⾯面設計⿊黑魔法
  71. 71. Dark Pattern 1. 替⽤用⼾戶預設
  72. 72. 我要訂閱、安裝、下載、付費 我不要訂閱、安裝、下載、付費 替⽤用⼾戶預設:兩個都是我要訂閱 決定越複雜,⼈人們越傾向使⽤用 Default 選項
  73. 73. Dark Pattern 2. ⼀一致性陷阱
  74. 74. 第⼀一個問題:不要訂閱請打勾 第⼆二個問題:如要訂閱請打勾
  75. 75. 這是⼀一個要騙你訂閱的 Tempo 要訂閱:Skip Skip 不訂閱:Click Click 要訂閱:Skip Skip 要訂閱:Click Click
  76. 76. Dark Pattern 3. 假按鈕
  77. 77. 真正下載點 ⼀一堆假載點
  78. 78. Dark Pattern 4. 退訂困難
  79. 79. ⼀一次可訂閱多個項⺫⽬目 我要訂閱電⼦子報
  80. 80. 但個別項⺫⽬目的廣告信要⼀一封⼀一封退訂 我要退訂 我要退訂 我要退訂 精選好康旅遊度假 熱⾨門宅配
  81. 81. 到網站退訂流程也很複雜,退訂很難找 退訂 訂閱
  82. 82. Dark Pattern 5. App 引導評分
  83. 83. 引導去 App Store 評分 寄 Email 回饋給開發商 正⾯面評語 負⾯面評語 降低負評,提⾼高正⾯面評分,吃河蟹
  84. 84. Dark Pattern 6. 強迫轉換
  85. 85. 「到了免費試⽤用期 30 天屆滿後,Spotify Premium 將⾃自動從 你提供的付款卡扣除每⽉月 149.00 TWD 的訂閱費。」
  86. 86. Dark Pattern 7. ⾃自動加購
  87. 87. 相機⼀一台(限時特價) 1 結賬 精選鏡頭擦拭布 99元加購 NT:25400 結賬前系統⾃自動加上沒選擇的項⺫⽬目
  88. 88. Dark Pattern 8. Friend Spam
  89. 89. 按下 Add connection(s) 按鈕時 ⽤用⼾戶以為⾃自⼰己在連結已經有 LinkedIn 帳號的朋友 但實際上 LinkedIn 會把邀請信寄給所有 Email 聯絡⼈人 現在已經不會了
  90. 90. Dark Pattern 9. 同意條款
  91. 91. 就是那份看都不看就點確認的同意條款
  92. 92. 仔細閱讀,否則會變⼈人形蜈蚣
  93. 93. 偶爾⽤用 Dark Patterns 應該不會有問題吧 My Lord 我也想知道
  94. 94. 不⽤用擔⼼心,怎麼會有問題呢
  95. 95. ⽤用⼾戶不會覺得怎樣的,快點來⽤用吧
  96. 96. No ! 你會被⽤用⼾戶唾棄 跟惡魔交易都得付出額外的代價
  97. 97. Thanks for your attention ! Email:oort.shih@gmail.com Blog : www.hansshih.com Facebook : Hans Shih

×