網路、行銷、使用者經驗設計

關於網路、行銷、使用者經驗設計：給學生入門的九件事

Transcript

1. 給學生入門的九件事 網路、行銷、使用者經驗設計 9 Things about Web, Marketing & UX Design for Students 陳啟亮 使用者經驗設計中心副總監 charles.chen@isobar.com 2012/09/04
2. 自我介紹
3. 陳 啟亮(XXC): UX in Marketing Agency wwwins isobar UX Center Associate Director 知世‧安索帕 使用經驗設計中心 副總監
4. 專案經歷 2008-2012
5. 這表示… 不是我經驗豐富，而是 我做過看過的設計蠢事特別多
6. 喔，這是滑鼠嘛，我當然知道...
7. Leap Motion
8. 我想告訴你的是: 蠢事不蠢，有一天就會是創新 但上帝沒有保證有一天會是哪一天 1
9. 設計一個網站 萬 貴不貴？
12. 厄 好像不需要視覺設計？ 你想可能有網站沒有視覺設計嗎？
13. 更進一步說… 這個網站希望傳達給誰？ 什麼樣的訊息？如何確保 這樣的溝通是準確且有效 的？ 只要做出來，自然就有人會來看嗎？
14. 我們公司想做個網站，你 們明天作個首頁來提案吧
15. 誰來規劃網站？
16. 只要有心… 規劃網站專業工作者從哪來的?
17. 誰來規劃網站？ 設計師: 視覺創作者 網站是一種互動視覺媒體的表現
18. 誰來規劃網站？ 作者: 文案、編劇、導演(作者論) 網站是一種數位敘事文體 設計師: 視覺創作者 網站是一種互動視覺媒體的表現
19. 誰來規劃網站？ 工程師 網站是一種資訊系統 作者: 文案、編劇、導演(作者論) 網站是一種敘事文體 設計師: 視覺創作者 網站是一種互動多媒體的表現
20. 誰來規劃網站？ 管理者: 專案經理/產品經理 網站是一種產品 工程師 網站是一種資訊系統 作者: 文案、編劇、導演(作者論) 網站是一種敘事文體 設計師: 視覺創作者 網站是一種互動多媒體的表現
21. 誰來規劃網站？ 行銷、傳播專業人士 網站是一種傳播媒體 工程師 網站是一種資訊系統 管理者: 專案經理/產品經理 網站是一種產品 作者: 文案、編劇、導演(作者論) 網站是一種敘事文體 設計師: 視覺創作者 網站是一種互動多媒體的表現
22. 誰來規劃網站？ 行銷、傳播專業人士 網站是一種傳播媒體 工程師: IA, SA, SD 網站是一種資訊系統 管理者: 專案經理/產品經理 網站是一種產品 作者: 文案、編劇、導演 網站是一種敘事形式 設計師: 視覺創作者 網站是一種互動多媒體的表現
23. 行銷、傳播專業人士 網站是一種傳播媒體 工程師: IA, SA, SD 網站是一種資訊系統 管理者: 專案經理/產品經理 網站是一種產品 作者: 文案、編劇、導演 網站是一種敘事形式 設計師: 視覺創作者 網站是一種互動多媒體的表現
24. 網站就像建築物， 需要各種專業合作 Website is an Architecture
25. 我們公司想做個網站，你 們明天作個首頁來提案吧
26. 客戶 不知道我要什麼， 你先做一個出來讓我看看 佳句 精選
27. 次提案的悲劇 溫馨 小品
28. 次提案的悲劇 感人 肺腑
29. 水電工 VS. 設計師
30. 我想告訴你的是: 解決問題才有價值 而不在你拿了幾張證照，會了幾套軟體或工具 2
31. 我想告訴你的是: 問題越大越急，收費越高 對於有獨到美感的客戶，你就不需要白費力氣了，因為他不覺得有什麼問題 2.5
32. 使用者經驗設計 為什麼？是什麼？ 最近偶爾聽到這個詞
33. Helen Adler 設計師 Deborah Adler 的祖母， 因為拿錯祖父Herman Adler 的藥而緊急送醫
34. 品牌名稱比 藥名還大 每一種藥的標籤 設計都不一致 曲面難以閱讀 字太小 顏色混亂 Deborah Adler School of Visual Arts MFA in Design program 數字單位不一
37. Target ClearRx Prescription System 標靶百貨 藥方系統
38. 2005, BusinessWeek - Best Product Design 2005, TIME magazine - Best Inventions 2005, MoMA - Safe Exhibit 2006, Cooper-Hewitt - National Design Triennial 2010, IDSA – Design of the Decade
39. Deborah Adler Designer Deborah Adler Design 設計，讓人活得更容易且更安全 設計應集中在以人為導向的產品創新，以及生活方 式的解決方案，這是設計師最擅長也有資格承擔的 責任。負責任的品牌應該瞭解人們與商業產品的互 動。不只在包裝上，還包括公共空間、商業空間及 戶外的資訊。
40. 設計是什麼? 能用的 不能用的 解決問題 造型風格 審美的 設計 純藝術
41. 2007 智慧手機市場四雄
43. Samsung Smart TV / Smart Hub (2011) 全長 3:10 請注意 1:26 以後的示範
45. Sir Jonathan Ive Senior vice-president, Design Apple 抽屜的背面也要做好 當你製作一個抽屜的時候，背面也要做好，你可以 說因為大家永遠都不會看到這裡，沒必要把它做得 很好，我很難清楚說明為什麼這樣做是重要的，但 我就是認為這件事很重要，唯有如此才能證明你是 真正關心使用者。 關懷人，而不是設計 當某種東西被大規模生產並且產業化後，會變得不 虔不義，而且缺乏對人的關懷。我認為關懷是重要 的這個觀點非常美好，但是我覺得你可以只做一件 不包含關懷的東西，同時也可以製作上百萬件包含 著關懷的物品。你真正關心與否，並不是由產品的 產量多少來決定的。 簡化，是聚焦於目的與定位 簡化(Simplicity)並不只是去除雜亂，那只過程的結 果。簡化是聚焦於產品的目標與定位。去除了雜亂， 僅僅只是一個整齊的產品。追求簡化是最基本的原 則，遍及整個過程中的每個部分。
46. 我想告訴你的是: 設計不只是風格，也要改善生活 但設計師該會些什麼? 3
47. 專注產品與服務的體驗，才能提 高品牌價值
48. UX = 使用者經驗 (用戶體驗) 使用者經驗設計: 當代的發展 User experience design
49. 怎麼做，該做些什麼 ? 那接下來
50. 流程派、方法派、訣竅派、結果派 使用者經驗設計的四門派
51. 使用者中心設計 規劃/設計解決方案 發現需求與問題
52. UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 UCD 使用者中心設計 持續地重複這樣的過程 Iterative Design
53. 史丹福設計學院 Stanford’s d.School 2003年成立的史丹福設計學院，簡稱「d.school」，不提 供學位文憑，也不隸屬任一學術部門，但如今每年入學人 數達700人，與創辦當年的100人相比成長可觀。 包括比爾與梅林達.蓋茲基金會、遊戲大廠藝電（EA）及思 愛普、Intuit、富達投資等都曾和該學院建立建教合作。 工商時報 設計學院正夯 http://news.chinatimes.com/world/11050401/122012070100346.html
54. 創新與設計思維 d.School: Innovation & Design Thinking 設計思考模式是在公司實際開發產品前就先展開。研發團隊最初只需使 用馬克筆或膠帶這類隨手可得的材料做出原型，就能讓使用者測試並加 以修改，不但節省成本也相對縮短產品研發時間，於是這門學問近年來 備受企業推崇，而大學院校也爭相開設相關課程。 工商時報 設計學院正夯 http://news.chinatimes.com/world/11050401/122012070100346.html http://www.fastcompany.com/magazine/146/the-idea-lab.html
55. 使用者經驗設計: 當代的發展 User experience design 在Facebook一個產品設計團隊(5-8人)的結構通常是這樣的： 一名設計師，負責互動、視覺，產品戰略(product strategy)，甚至一點前端。一名使用者 研究員。兩年前，Facebook只有為數較少的研究員，而且只負責大項目，如今，隨著對於 定性研究的重視逐步增加，基本上每個團隊都配一名。一至四個工程師。一個產品經理 (PM)，產品經理通常相當於團隊中的迷你CEO，需要對產品負責。不僅要保證產品的按時 完成、資源協調，還要保證產品品質。
56. 我想告訴你的是: 創新是源於勇於犯錯，積極改善 沒有風險就沒有創新 4
57. 流程派、方法派、訣竅派、結果派 使用者經驗設計的四門派
58. 使用者經驗 設計方法 UX Design Methodologies
59. 使用者經驗設計 方法 UX Design Methodologies 介入式探索/使用者 Stakeholder interview User Surveys User Interviews Contextual Inquiry User Observation Focus Groups Card Sorting 設計方法 ISO 13407 4D methodology RUP Agile XP Parallel design Participatory Design Rapid Prototyping 既有資料探索 Competitor Analysis Log Analysis Click Analysis Click-stream analysis 介入式探索/行為與情境 Scenarios of use Task Analysis Analyse context 設計規劃 Paper prototyping Storyboarding Evaluate prototype Wizard of OZ 評估 Heuristic evaluation Diagnostic evaluation Performance testing Subjective evaluation Critical incidence Technique Remote evaluation A/B testing 研究 設計 評估
60. 使用者經驗設計 方法 UX Design Methodologies 心理學 人因工程 媒體研究 傳播 設計 互動設計 資訊科學 社會網絡 分析 社會學 介入式探索/使用者 Stakeholder interview User Surveys User Interviews Contextual Inquiry User Observation Focus Groups Card Sorting 設計方法 ISO 13407 4D methodology RUP Agile XP Parallel design Participatory Design Rapid Prototyping 既有資料探索 Competitor Analysis Log Analysis Click Analysis Click-stream analysis 介入式探索/行為與情境 Scenarios of use Task Analysis Analyse context 設計規劃 Paper prototyping Storyboarding Evaluate prototype Wizard of OZ 評估 Heuristic evaluation Diagnostic evaluation Performance testing Subjective evaluation Critical incidence Technique Remote evaluation A/B testing
61. 我想告訴你的是: 條條大路通羅馬 從自己基礎的學科出發，學習與其他學科合作 5
62. 流程派、方法派、訣竅派、結果派 使用者經驗設計的四門派
63. 好的電腦維修人員， 會先檢查插頭插了沒 Basic thing first
64. 余虹儀，《愛。通用設計》作者
65. 訣竅：用使用者的設備看設計
66. 訣竅：用使用者的設備看設計 • 查清楚目標使用者族群的設備 • 一開始先問清楚客戶的設備 • 設備項目 • 作業系統 • 瀏覽器版本 • 螢幕大小 • 頻寬 • 查詢目前瀏覽器版本與螢幕寬度的使用比例 http://gs.statcounter.com/
67. 請看著螢幕的題目 不可用紙筆 設計訣竅 #練習範例
68. 請記住這個圖案 (計時4秒)
69. 請記住這個圖案 (計時4秒)
70. 單純與複雜 • 兩圖線條數量一樣 • 第一個容易辨識與記憶，第二個則否 以往認得的 單純且容易記憶 從沒看過的 複雜且難以記憶
71. 介面設計的應用 你認為按鈕會在哪裡? 跟你想像的位置一樣嗎?
72. 使用者經驗設計訣竅 1. 最小努力原則: 知覺、認知、記憶、運動、時間投資 2. 生理上可見/可用 3. 降低認知負荷: 簡化區域、減少混雜 4. 獲取注意力: 突出與顯著: 刺激引發或概念引發 5. 意義明確: 示意性、用大眾語言 6. 可預期的: 模仿外在現實、提供系統縮影、粒度均勻 7. 給予充分的動機 8. 明確清晰的下一步 9. 可學習性: 給予正面回饋、自我效能 10. 避免錯誤 11. 提供協助(初次/錯誤/理解)
73. 我想告訴你的是: 你只要記得一兩點就夠了 多學無益，要懂得運用時機… 6
74. 流程派、方法派、訣竅派、結果派 使用者經驗設計的四門派
76. 新店慈濟醫院
77. Bad 不清楚的導覽 Good 超互動導覽
78. 我想告訴你的是: 不是只有設計師才懂使用者經驗 使用者經驗是跨領域合作的結果… 7
79. 為什麼 ? 做行銷要重視使用者經驗設計 有自己的產品與服務， 是應該要重視使用者體驗與顧客滿意度，但
80. Donald Norman: 設計影響的三個層次 感性反應 我想擁有它！ 實際使用 我能操作它！ 品牌象徵 他就是我的代言人！
81. 例：統一與全家同時推出新的紅豆麵包
82. 線性媒體(linear) 與非線性媒體(non-linear) Seth Godin 《紫牛》《願者上鉤》作者 傳統媒體 • 線性的內容 • 固定次序的閱讀 • 打斷使用者閱讀內容， 才能引起注意 網路媒體 • 非線性的內容 • 跳耀的閱讀 • 切合讀者的情境與需求， 才能引起注意 例: TVC 例: SEO
83. 社群的力量是來自於”我們” 網路時代的群眾太厲害了 他們會用成千上萬的資訊淹沒你 你無法控制所有人的行為
84. 我想告訴你的是: 行銷也是一種使用者體驗設計 並不是只有設計師是新世界的神… 8
85. 若你有興趣想要往這條路走 這是個相當新穎的領域
86. 給學生們的最後忠告 • 至少精熟一種基本執行能力 (設計、工程、專案管理) • 實務經驗、實務經驗、實務經驗 • 體貼與同理心：從他人身人學習
87. 給學生入門的九件事 網路、行銷、使用者經驗設計 9 Things about Web, Marketing & UX Design for Students 陳啟亮 使用者經驗設計中心副總監 charles.chen@isobar.com 2012/09/04