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.
善用視覺化的使用者體驗                       Time: 40mins                           Ian Jang以科技與人性體驗為主軸,來呈現一種態度,悠游堅定,如同遊石。秉持設計者謙遜的態度,...
Who am I?                         現職                           遊石設計 使用者經驗設計顧問                         經歷                  ...
遊石設計(UXI Design)
www.uxi-design.com
大綱 1      2       3       4      5                      資訊視覺化      視覺化與使                   視覺化的趨視覺化           資訊視覺化   的使用者...
視覺化
人類的知覺經驗主要來在於視覺         10%         其他   25%   聽覺          65%               視覺
圖像與真實總存在著歧異Source: http://www.learner.org/courses/globalart/work/205/index.html
水果報利用視覺來說故事Source: http://blog.xuite.net/cookie713/kelly/43417132
有圖有真相:速食文化的觀點Source: http://hardmouse.pixnet.net/
還記得這個故事嗎?Source: http://boo100boa.pixnet.net/
簡化的蛇吞象,不是草帽Source: http://boo100boa.pixnet.net/
視覺傳遞的訊息可簡化也可以細緻 Simplify   Elaborate  簡單化         細緻化
1931年Harry Beck繪製                的經典地鐵圖原型                 Harry Beck (1931)Source: http://harrybeck.com/
更容易被了解的倫敦地鐵系統Source: http://travel.sina.com.hk/news/386/3/2/150995/1.html?l=263027
視覺化的設計更勝於真實的再現Source: http://www.flickr.com/photos/3...00/3971788353
以使用者為中心的視覺化特性•   以使用者為中心        系統•   系統化的資訊安排              效率         明確•   明確資訊內容的提供•   清晰易讀的表現        使用者•   客觀公正的呈現   ...
視覺化與使用者體驗
我們時常運用視覺化             在我們UX設計的工作中• 設計開發過程    – 觀察研究    – 創意發想    – 溝通協調    – 快速原型    – 設計驗證• 物件互動形式    – 功能預示性    – 資訊視覺化S...
Taipei Service Jam 2012     視覺思考應用
GSJ 2013(台北場)即將舉行         臉書搜尋:         Global Service Jam: Taipei
預示性(Affordance)結合        視覺化與實體限制                              PhysicalVisualization                             Constrain...
標準插座的視覺化與實體限制
視覺化的資訊服務台:指引、物件、圖像與空間
賣場空間呈現商品的主要特性:   尺寸、顏色與售價
Xerox Star GUI將過往生硬的文字介面進行視覺化
Windows 8 UI 雜誌般的閱讀經驗Source: http://www.buzzmicro.fr
成為UX跨界新人才     •   資料科學家     •   UX設計師     •   Hadoop工程師     •   解決方案架構師     •   專利工程師     •   產品協作經理     •   策展人     •   故...
善用資訊視覺化
資訊圖像的定義• 以概念化、符號化、系統化…的程序與方  法,傳達出複雜、量多的資料,或是文辭  口語難解的事物,主要在呈現現象與事  實,透過視覺設計的表現手法,以線條、  色彩、塊面、圖形、箭頭、符號等加以傳  達,以使受訊者能在短時間獲得...
經典案例:拿破崙東征圖Ref. Robert Spence, Information Visualization (2007)
資訊圖像常見的視覺元素     資訊量少                               資訊量多Ref. Dona M. Wong, 五分鐘打動人的視覺簡報 (2010)
資訊圖像應用於不同的抽象概念Ref. Nacy Duarte, Slide:ology (2008)
視覺思考與五個W的配合Ref. Dan Roan, 餐巾紙的背後 (2008)
四種最基本的資訊圖表
視覺因子的認知心理學基礎趨近性:眼睛會把彼此接近的東西認為相關。顏色:眼睛會分辨顏色的差異,並根據類似的色澤來歸類。大小:眼睛能輕易辨別大小的差異,會注意突出的個體。方位:我們的眼睛能在瞬間分辨水平與垂直方位。方向:對於方向的判斷,非常直覺。形...
不同的表示法精確度有所不同Ref. Robert Spence, Information Visualization (2007)
不當的資訊呈現令人困惑                                                     其他 5%  12                  60                             ...
更多中文資訊圖表相關資訊…•   台灣資訊圖表討論社團    http://www.facebook.com/groups/479173598760888/
視覺化的使用者體驗設計案例                 iBMS Intelligent Building Management System
[iBMS案例略]
特別感謝
我們需要更有意義的資訊才能夠學習、運用、管理
善用視覺化,增進使用者體驗
視覺化的趨勢
我是新手,我用電腦Source: http://www.books.com.tw/products/N000212368
我是老闆,我用電腦Source: http://t17.techbang.com/
我是兒童,我用電腦Source: http://marianna-skvorcova.blogspot.com
Big Data / Open DataSource: http://dongxiangzu.baike.com/article-118265.html
Environmental Defense Fund       Polar Bears
“It feels like we’re all suffering from information overload, or data glut,…The good news is that there is a solution to t...
Thank you… ian@uxi-design.com Slideshare: Ian Jang     FB: Ian Jang
2013 善用視覺化的使用者體驗設計
Upcoming SlideShare
Loading in …5
×

2013 善用視覺化的使用者體驗設計

7,484 views

Published on

從文字輸入的介面開始,應用軟體的使用經驗歷經了多次的轉變。從桌面的隱喻、圖示的使用,到各種資訊內容的整合與呈現。我們使用視覺化來傳情表意,達到更好的使用者體驗。透過與資策會合作的案例分享,讓我們開始來思考如何善用”視覺化”。

Published in: Design

2013 善用視覺化的使用者體驗設計

  1. 1. 善用視覺化的使用者體驗 Time: 40mins Ian Jang以科技與人性體驗為主軸,來呈現一種態度,悠游堅定,如同遊石。秉持設計者謙遜的態度,讓使用者的活動來圓滿設計。讓客戶與使用者的滿意經驗,體現遊石價值。
  2. 2. Who am I? 現職 遊石設計 使用者經驗設計顧問 經歷 資策會 使用者體驗設計顧問 應用劇本實驗室 互動介面設計總監 交通大學建築研究所 兼任助理教授 台灣科技大學建築系 兼任助理教授 超義科技事業暨產品企劃部 產品企劃經理 英特維數位科技市場行銷部 產品副理 趨勢科技人機介面工程部 使用者介面工程師 Rational Software Corp.使用者經驗部 使用者介面設計師張群儀 Ian Jang 學歷(E) ian@uxi-design.com 美國卡內基美侖大學 運算設計碩士(M) 0987119025
  3. 3. 遊石設計(UXI Design)
  4. 4. www.uxi-design.com
  5. 5. 大綱 1 2 3 4 5 資訊視覺化 視覺化與使 視覺化的趨視覺化 資訊視覺化 的使用者體 用者體驗 勢 驗設計案例
  6. 6. 視覺化
  7. 7. 人類的知覺經驗主要來在於視覺 10% 其他 25% 聽覺 65% 視覺
  8. 8. 圖像與真實總存在著歧異Source: http://www.learner.org/courses/globalart/work/205/index.html
  9. 9. 水果報利用視覺來說故事Source: http://blog.xuite.net/cookie713/kelly/43417132
  10. 10. 有圖有真相:速食文化的觀點Source: http://hardmouse.pixnet.net/
  11. 11. 還記得這個故事嗎?Source: http://boo100boa.pixnet.net/
  12. 12. 簡化的蛇吞象,不是草帽Source: http://boo100boa.pixnet.net/
  13. 13. 視覺傳遞的訊息可簡化也可以細緻 Simplify Elaborate 簡單化 細緻化
  14. 14. 1931年Harry Beck繪製 的經典地鐵圖原型 Harry Beck (1931)Source: http://harrybeck.com/
  15. 15. 更容易被了解的倫敦地鐵系統Source: http://travel.sina.com.hk/news/386/3/2/150995/1.html?l=263027
  16. 16. 視覺化的設計更勝於真實的再現Source: http://www.flickr.com/photos/3...00/3971788353
  17. 17. 以使用者為中心的視覺化特性• 以使用者為中心 系統• 系統化的資訊安排 效率 明確• 明確資訊內容的提供• 清晰易讀的表現 使用者• 客觀公正的呈現 理解 易讀• 協助使用者的理解• 提昇使用上的效率 客觀
  18. 18. 視覺化與使用者體驗
  19. 19. 我們時常運用視覺化 在我們UX設計的工作中• 設計開發過程 – 觀察研究 – 創意發想 – 溝通協調 – 快速原型 – 設計驗證• 物件互動形式 – 功能預示性 – 資訊視覺化Source: http://tpc.k12.edu.tw/1001217590/14_main.htm
  20. 20. Taipei Service Jam 2012 視覺思考應用
  21. 21. GSJ 2013(台北場)即將舉行 臉書搜尋: Global Service Jam: Taipei
  22. 22. 預示性(Affordance)結合 視覺化與實體限制 PhysicalVisualization Constraints Affordance
  23. 23. 標準插座的視覺化與實體限制
  24. 24. 視覺化的資訊服務台:指引、物件、圖像與空間
  25. 25. 賣場空間呈現商品的主要特性: 尺寸、顏色與售價
  26. 26. Xerox Star GUI將過往生硬的文字介面進行視覺化
  27. 27. Windows 8 UI 雜誌般的閱讀經驗Source: http://www.buzzmicro.fr
  28. 28. 成為UX跨界新人才 • 資料科學家 • UX設計師 • Hadoop工程師 • 解決方案架構師 • 專利工程師 • 產品協作經理 • 策展人 • 故事管理師 • 社群經理 • 電子商務經理
  29. 29. 善用資訊視覺化
  30. 30. 資訊圖像的定義• 以概念化、符號化、系統化…的程序與方 法,傳達出複雜、量多的資料,或是文辭 口語難解的事物,主要在呈現現象與事 實,透過視覺設計的表現手法,以線條、 色彩、塊面、圖形、箭頭、符號等加以傳 達,以使受訊者能在短時間獲得多樣的資 訊或易於理解。 ~王秀如、陳俊宏Ref: 王孝筠, 資訊圖像應用於蘋果日報編排設計之研究
  31. 31. 經典案例:拿破崙東征圖Ref. Robert Spence, Information Visualization (2007)
  32. 32. 資訊圖像常見的視覺元素 資訊量少 資訊量多Ref. Dona M. Wong, 五分鐘打動人的視覺簡報 (2010)
  33. 33. 資訊圖像應用於不同的抽象概念Ref. Nacy Duarte, Slide:ology (2008)
  34. 34. 視覺思考與五個W的配合Ref. Dan Roan, 餐巾紙的背後 (2008)
  35. 35. 四種最基本的資訊圖表
  36. 36. 視覺因子的認知心理學基礎趨近性:眼睛會把彼此接近的東西認為相關。顏色:眼睛會分辨顏色的差異,並根據類似的色澤來歸類。大小:眼睛能輕易辨別大小的差異,會注意突出的個體。方位:我們的眼睛能在瞬間分辨水平與垂直方位。方向:對於方向的判斷,非常直覺。形狀:眼睛對於形狀的辨識度相對較差。明暗:眼睛能夠快速偵測光線的明暗,以判斷上下或內外。Ref. Dan Roan, 餐巾紙的背後 (2008)
  37. 37. 不同的表示法精確度有所不同Ref. Robert Spence, Information Visualization (2007)
  38. 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. 39. 更多中文資訊圖表相關資訊…• 台灣資訊圖表討論社團 http://www.facebook.com/groups/479173598760888/
  40. 40. 視覺化的使用者體驗設計案例 iBMS Intelligent Building Management System
  41. 41. [iBMS案例略]
  42. 42. 特別感謝
  43. 43. 我們需要更有意義的資訊才能夠學習、運用、管理
  44. 44. 善用視覺化,增進使用者體驗
  45. 45. 視覺化的趨勢
  46. 46. 我是新手,我用電腦Source: http://www.books.com.tw/products/N000212368
  47. 47. 我是老闆,我用電腦Source: http://t17.techbang.com/
  48. 48. 我是兒童,我用電腦Source: http://marianna-skvorcova.blogspot.com
  49. 49. Big Data / Open DataSource: http://dongxiangzu.baike.com/article-118265.html
  50. 50. Environmental Defense Fund Polar Bears
  51. 51. “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 McCandlessSource: http://www.smashingmagazine.com/
  52. 52. Thank you… ian@uxi-design.com Slideshare: Ian Jang FB: Ian Jang

×