Post on 02-Nov-2014
description
善用視覺化的使用者體驗Time: 40mins
Ian Jang
以科技與人性體驗為主軸,來呈現一種態度,悠游堅定,如同遊石。
秉持設計者謙遜的態度,讓使用者的活動來圓滿設計。
讓客戶與使用者的滿意經驗,體現遊石價值。
現職遊石設計 使用者經驗設計顧問
經歷資策會 使用者體驗設計顧問 應用劇本實驗室 互動介面設計總監交通大學建築研究所 兼任助理教授台灣科技大學建築系 兼任助理教授超義科技事業暨產品企劃部 產品企劃經理英特維數位科技市場行銷部 產品副理趨勢科技人機介面工程部 使用者介面工程師Rational Software Corp. 使用者經驗部 使用者介面設計師
學歷 美國卡內基美侖大學 運算設計碩士
張群儀 Ian Jang
(E) ian@uxi-design.com
(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/