1.
善用視覺化的使用者體驗 Time: 40mins Ian Jang以科技與人性體驗為主軸，來呈現一種態度，悠游堅定，如同遊石。秉持設計者謙遜的態度，讓使用者的活動來圓滿設計。讓客戶與使用者的滿意經驗，體現遊石價值。

2.
Who am I? 現職 遊石設計 使用者經驗設計顧問 經歷 資策會 使用者體驗設計顧問 應用劇本實驗室 互動介面設計總監 交通大學建築研究所 兼任助理教授 台灣科技大學建築系 兼任助理教授 超義科技事業暨產品企劃部 產品企劃經理 英特維數位科技市場行銷部 產品副理 趨勢科技人機介面工程部 使用者介面工程師 Rational Software Corp.使用者經驗部 使用者介面設計師張群儀 Ian Jang 學歷(E) ian@uxi-design.com 美國卡內基美侖大學 運算設計碩士(M) 0987119025

3.
遊石設計（UXI Design）

4.
www.uxi-design.com

5.
大綱 1 2 3 4 5 資訊視覺化 視覺化與使 視覺化的趨視覺化 資訊視覺化 的使用者體 用者體驗 勢 驗設計案例

6.
視覺化

7.
人類的知覺經驗主要來在於視覺 10% 其他 25% 聽覺 65% 視覺

8.
圖像與真實總存在著歧異Source: http://www.learner.org/courses/globalart/work/205/index.html

9.
水果報利用視覺來說故事Source: http://blog.xuite.net/cookie713/kelly/43417132

10.
有圖有真相：速食文化的觀點Source: http://hardmouse.pixnet.net/

11.
還記得這個故事嗎？Source: http://boo100boa.pixnet.net/

12.
簡化的蛇吞象，不是草帽Source: http://boo100boa.pixnet.net/

13.
視覺傳遞的訊息可簡化也可以細緻 Simplify Elaborate 簡單化 細緻化

14.
1931年Harry Beck繪製 的經典地鐵圖原型 Harry Beck (1931)Source: http://harrybeck.com/

15.
更容易被了解的倫敦地鐵系統Source: http://travel.sina.com.hk/news/386/3/2/150995/1.html?l=263027

16.
視覺化的設計更勝於真實的再現Source: http://www.flickr.com/photos/3...00/3971788353

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）結合 視覺化與實體限制 PhysicalVisualization Constraints Affordance

23.
標準插座的視覺化與實體限制

24.
視覺化的資訊服務台：指引、物件、圖像與空間

25.
賣場空間呈現商品的主要特性： 尺寸、顏色與售價

26.
Xerox Star GUI將過往生硬的文字介面進行視覺化

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.
四種最基本的資訊圖表

36.
視覺因子的認知心理學基礎趨近性：眼睛會把彼此接近的東西認為相關。顏色：眼睛會分辨顏色的差異，並根據類似的色澤來歸類。大小：眼睛能輕易辨別大小的差異，會注意突出的個體。方位：我們的眼睛能在瞬間分辨水平與垂直方位。方向：對於方向的判斷，非常直覺。形狀：眼睛對於形狀的辨識度相對較差。明暗：眼睛能夠快速偵測光線的明暗，以判斷上下或內外。Ref. Dan Roan, 餐巾紙的背後 (2008)

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.
特別感謝

43.
我們需要更有意義的資訊才能夠學習、運用、管理

44.
善用視覺化，增進使用者體驗

45.
視覺化的趨勢

46.
我是新手，我用電腦Source: http://www.books.com.tw/products/N000212368

47.
我是老闆，我用電腦Source: http://t17.techbang.com/

48.
我是兒童，我用電腦Source: http://marianna-skvorcova.blogspot.com

49.
Big Data / Open DataSource: http://dongxiangzu.baike.com/article-118265.html

50.
Environmental Defense Fund Polar Bears

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.
Thank you… ian@uxi-design.com Slideshare: Ian Jang FB: Ian Jang