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