Languages
Pages
Legal
善用視覺化的使用者體驗Time: 40mins
Ian Jang
以科技與人性體驗為主軸，來呈現一種態度，悠游堅定，如同遊石。
秉持設計者謙遜的態度，讓使用者的活動來圓滿設計。
讓客戶與使用者的滿意經驗，體現遊石價值。
現職遊石設計 使用者經驗設計顧問
經歷資策會 使用者體驗設計顧問 應用劇本實驗室 互動介面設計總監交通大學建築研究所 兼任助理教授台灣科技大學建築系 兼任助理教授超義科技事業暨產品企劃部 產品企劃經理英特維數位科技市場行銷部 產品副理趨勢科技人機介面工程部 使用者介面工程師Rational Software Corp. 使用者經驗部 使用者介面設計師
學歷 美國卡內基美侖大學 運算設計碩士
張群儀 Ian Jang
(M) 0987119025
Who am I?
遊石設計（ UXI Design ）
www.uxi-design.com
大綱
視覺化 視覺化與使用者體驗 資訊視覺化
資訊視覺化的使用者體驗設計案例
視覺化的趨勢
1 2 3 4 5
視覺化
65%視覺
10%其他
25%聽覺
人類的知覺經驗主要來在於視覺
圖像與真實總存在著歧異
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/
視覺傳遞的訊息可簡化也可以細緻
Elaborate
細緻化
Simplify簡單化
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 設計的工作中
• 設計開發過程– 觀察研究– 創意發想– 溝通協調– 快速原型– 設計驗證
• 物件互動形式– 功能預示性– 資訊視覺化
Source: http://tpc.k12.edu.tw/1001217590/14_main.htm
Taipei Service Jam 2012 視覺思考應用
GSJ 2013 （台北場）即將舉行臉書搜尋： Global Service Jam: Taipei
預示性（ Affordance ）結合視覺化與實體限制
Affordance
Visualization
Physical Constraint
s
標準插座的視覺化與實體限制
視覺化的資訊服務台：指引、物件、圖像與空間
賣場空間呈現商品的主要特性：尺寸、顏色與售價
Xerox Star GUI將過往生硬的文字介面進行視覺化
Windows 8 UI 雜誌般的閱讀經驗
Source: http://www.buzzmicro.fr
成為 UX 跨界新人才• 資料科學家• UX設計師• Hadoop工程師• 解決方案架構師• 專利工程師• 產品協作經理• 策展人• 故事管理師• 社群經理• 電子商務經理
善用資訊視覺化
資訊圖像的定義• 以概念化、符號化、系統化…的程序與方
法，傳達出複雜、量多的資料，或是文辭口語難解的事物，主要在呈現現象與事實，透過視覺設計的表現手法，以線條、色彩、塊面、圖形、箭頭、符號等加以傳達，以使受訊者能在短時間獲得多樣的資訊或易於理解。
～王秀如、陳俊宏
Ref: 王孝筠 , 資訊圖像應用於蘋果日報編排設計之研究
經典案例：拿破崙東征圖
Ref. Robert Spence, Information Visualization (2007)
資訊圖像常見的視覺元素
Ref. Dona M. Wong, 五分鐘打動人的視覺簡報 (2010)
資訊量少 資訊量多
資訊圖像應用於不同的抽象概念
Ref. Nacy Duarte, Slide:ology (2008)
視覺思考與五個 W 的配合
Ref. Dan Roan, 餐巾紙的背後 (2008)
四種最基本的資訊圖表
視覺因子的認知心理學基礎趨近性：眼睛會把彼此接近的東西認為相關。
顏色：眼睛會分辨顏色的差異，並根據類似的色澤來歸類。
大小：眼睛能輕易辨別大小的差異，會注意突出的個體。
方位：我們的眼睛能在瞬間分辨水平與垂直方位。
方向：對於方向的判斷，非常直覺。
形狀：眼睛對於形狀的辨識度相對較差。
明暗：眼睛能夠快速偵測光線的明暗，以判斷上下或內外。
Ref. Dan Roan, 餐巾紙的背後 (2008)
不同的表示法精確度有所不同
Ref. Robert Spence, Information Visualization (2007)
不當的資訊呈現令人困惑
8
6
4
2
01 2 3 4 5
80
60
40
20
0
A 區60%
其他 5%
C 區10%
B 區25%
12
9
6
3
01 2 3 4 5
60
50
40
30
20 ’04 ’05 ’06 ’07
A 區60%
其他 5%
C 區10%
B 區25%
Ref. Dona M. Wong, 五分鐘打動人的視覺簡報 (2010)
四月
四月
’04 ’05 ’06 ’07
？
更多中文資訊圖表相關資訊…
• 台灣資訊圖表討論社團 http://www.facebook.com/groups/479173598760888/
iBMSIntelligent Building Management
System
視覺化的使用者體驗設計案例
[iBMS 案例略 ]
特別感謝
資策會 前瞻科技研究所（ ARI ）副工程師 莊幼稜小姐以及 ARI iBMS 團隊
設計指導
我們需要更有意義的資訊才能夠學習、運用、管理
善用視覺化，增進使用者體驗
視覺化的趨勢
我是新手，我用電腦
Source: http://www.books.com.tw/products/N000212368
我是老闆，我用電腦
Source: http://t17.techbang.com/
我是兒童，我用電腦
Source: http://marianna-skvorcova.blogspot.com
Big Data / Open Data
Source: http://dongxiangzu.baike.com/article-118265.html
Environmental Defense FundPolar Bears
“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/
Top Related