O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

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

16.405 visualizações

Publicada em

Publicada em: 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

×