2013 善用視覺化的使用者體驗設計
•Download as PPTX, PDF•
34 likes•6,815 views
從文字輸入的介面開始，應用軟體的使用經驗歷經了多次的轉變。從桌面的隱喻、圖示的使用，到各種資訊內容的整合與呈現。我們使用視覺化來傳情表意，達到更好的使用者體驗。透過與資策會合作的案例分享，讓我們開始來思考如何善用”視覺化”。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 2013 善用視覺化的使用者體驗設計
Similar to 2013 善用視覺化的使用者體驗設計 (20)
More from Ian Jang
2013 善用視覺化的使用者體驗設計
- 1. 善用視覺化的使用者體驗 Time: 40mins Ian Jang 以科技與人性體驗為主軸，來呈現一種態度，悠游堅定，如同遊石。 秉持設計者謙遜的態度，讓使用者的活動來圓滿設計。 讓客戶與使用者的滿意經驗，體現遊石價值。
- 2. Who am I? 現職 遊石設計 使用者經驗設計顧問 經歷 資策會 使用者體驗設計顧問 應用劇本實驗室 互動介面設計總監 交通大學建築研究所 兼任助理教授 台灣科技大學建築系 兼任助理教授 超義科技事業暨產品企劃部 產品企劃經理 英特維數位科技市場行銷部 產品副理 趨勢科技人機介面工程部 使用者介面工程師 Rational Software Corp.使用者經驗部 使用者介面設計師 張群儀 Ian Jang 學歷 (E) ian@uxi-design.com 美國卡內基美侖大學 運算設計碩士 (M) 0987119025
- 5. 大綱 1 2 3 4 5 資訊視覺化 視覺化與使 視覺化的趨 視覺化 資訊視覺化 的使用者體 用者體驗 勢 驗設計案例
- 6. 視覺化
- 7. 人類的知覺經驗主要來在於視覺 10% 其他 25% 聽覺 65% 視覺
- 13. 視覺傳遞的訊息可簡化也可以細緻 Simplify Elaborate 簡單化 細緻化
- 14. 1931年Harry Beck繪製 的經典地鐵圖原型 Harry Beck (1931) Source: http://harrybeck.com/
- 17. 以使用者為中心的視覺化特性 • 以使用者為中心 系統 • 系統化的資訊安排 效率 明確 • 明確資訊內容的提供 • 清晰易讀的表現 使用者 • 客觀公正的呈現 理解 易讀 • 協助使用者的理解 • 提昇使用上的效率 客觀
- 18. 視覺化與使用者體驗
- 19. 我們時常運用視覺化 在我們UX設計的工作中 • 設計開發過程 – 觀察研究 – 創意發想 – 溝通協調 – 快速原型 – 設計驗證 • 物件互動形式 – 功能預示性 – 資訊視覺化 Source: http://tpc.k12.edu.tw/1001217590/14_main.htm
- 20. Taipei Service Jam 2012 視覺思考應用
- 21. GSJ 2013（台北場）即將舉行 臉書搜尋： Global Service Jam: Taipei
- 22. 預示性（Affordance）結合 視覺化與實體限制 Physical Visualization Constraints Affordance
- 23. 標準插座的視覺化與實體限制
- 25. 賣場空間呈現商品的主要特性： 尺寸、顏色與售價
- 27. Windows 8 UI 雜誌般的閱讀經驗 Source: http://www.buzzmicro.fr
- 28. 成為UX跨界新人才 • 資料科學家 • UX設計師 • Hadoop工程師 • 解決方案架構師 • 專利工程師 • 產品協作經理 • 策展人 • 故事管理師 • 社群經理 • 電子商務經理
- 29. 善用資訊視覺化
- 30. 資訊圖像的定義 • 以概念化、符號化、系統化…的程序與方 法，傳達出複雜、量多的資料，或是文辭 口語難解的事物，主要在呈現現象與事 實，透過視覺設計的表現手法，以線條、 色彩、塊面、圖形、箭頭、符號等加以傳 達，以使受訊者能在短時間獲得多樣的資 訊或易於理解。 ～王秀如、陳俊宏 Ref: 王孝筠, 資訊圖像應用於蘋果日報編排設計之研究
- 31. 經典案例：拿破崙東征圖 Ref. Robert Spence, Information Visualization (2007)
- 32. 資訊圖像常見的視覺元素 資訊量少 資訊量多 Ref. Dona M. Wong, 五分鐘打動人的視覺簡報 (2010)
- 33. 資訊圖像應用於不同的抽象概念 Ref. Nacy Duarte, Slide:ology (2008)
- 34. 視覺思考與五個W的配合 Ref. Dan Roan, 餐巾紙的背後 (2008)
- 35. 四種最基本的資訊圖表
- 37. 不同的表示法精確度有所不同 Ref. Robert Spence, Information Visualization (2007)
- 38. 不當的資訊呈現令人困惑 其他 5% 12 60 C區 9 50 10% 6 40 B區 25% 3 30 A區 0 20 60% 1 2 3 4 5 ’04 ’05 ’06 ’07 四月 ？ 8 80 B區 25% 6 60 4 40 C區 2 20 10% A區 60% 0 0 1 2 3 4 5 ’04 ’05 ’06 ’07 其他5% 四月 Ref. Dona M. Wong, 五分鐘打動人的視覺簡報 (2010)
- 39. 更多中文資訊圖表相關資訊… • 台灣資訊圖表討論社團 http://www.facebook.com/groups/479173598760888/
- 40. 視覺化的使用者體驗設計案例 iBMS Intelligent Building Management System
- 41. [iBMS案例略]
- 42. 特別感謝
- 44. 善用視覺化，增進使用者體驗
- 45. 視覺化的趨勢
- 49. Big Data / Open Data Source: http://dongxiangzu.baike.com/article-118265.html
- 50. Environmental Defense Fund Polar Bears
- 52. “It feels like we’re all suffering from information overload, or data glut,…The good news is that there is a solution to that: using our eyes more.” ~ David McCandless Source: http://www.smashingmagazine.com/
- 53. Thank you… ian@uxi-design.com Slideshare: Ian Jang FB: Ian Jang