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

15,098 views

Published on

Published in: Design
2 Comments
182 Likes
Statistics
Notes
No Downloads
Views
Total views
15,098
On SlideShare
0
From Embeds
0
Number of Embeds
6,245
Actions
Shares
0
Downloads
249
Comments
2
Likes
182
Embeds 0
No embeds

No notes for slide

界面設計黑魔法 - 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

×