2013 善用視覺化的使用者體驗設計
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 5,513 views

從文字輸入的介面開始,應用軟體的使用經驗歷經了多次的轉變。從桌面的隱喻、圖示的使用,到各種資訊內容的整合與呈現。我們使用視覺化來傳情表...

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

Statistics

Views

Total Views
5,513
Views on SlideShare
3,846
Embed Views
1,667

Actions

Likes
22
Downloads
113
Comments
0

5 Embeds 1,667

http://uxidesign.wordpress.com 1662
https://www.facebook.com 2
http://translate.googleusercontent.com 1
https://m.facebook.com&_=1385597525605 HTTP 1
http://www.justaple.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 善用視覺化的使用者體驗 Time: 40mins Ian Jang以科技與人性體驗為主軸,來呈現一種態度,悠游堅定,如同遊石。秉持設計者謙遜的態度,讓使用者的活動來圓滿設計。讓客戶與使用者的滿意經驗,體現遊石價值。
  • Who am I? 現職 遊石設計 使用者經驗設計顧問 經歷 資策會 使用者體驗設計顧問 應用劇本實驗室 互動介面設計總監 交通大學建築研究所 兼任助理教授 台灣科技大學建築系 兼任助理教授 超義科技事業暨產品企劃部 產品企劃經理 英特維數位科技市場行銷部 產品副理 趨勢科技人機介面工程部 使用者介面工程師 Rational Software Corp.使用者經驗部 使用者介面設計師張群儀 Ian Jang 學歷(E) ian@uxi-design.com 美國卡內基美侖大學 運算設計碩士(M) 0987119025
  • 遊石設計(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設計的工作中• 設計開發過程 – 觀察研究 – 創意發想 – 溝通協調 – 快速原型 – 設計驗證• 物件互動形式 – 功能預示性 – 資訊視覺化Source: http://tpc.k12.edu.tw/1001217590/14_main.htm
  • Taipei Service Jam 2012 視覺思考應用
  • GSJ 2013(台北場)即將舉行 臉書搜尋: Global Service Jam: Taipei
  • 預示性(Affordance)結合 視覺化與實體限制 PhysicalVisualization Constraints Affordance
  • 標準插座的視覺化與實體限制
  • 視覺化的資訊服務台:指引、物件、圖像與空間
  • 賣場空間呈現商品的主要特性: 尺寸、顏色與售價
  • 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)
  • 不當的資訊呈現令人困惑 其他 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)
  • 更多中文資訊圖表相關資訊…• 台灣資訊圖表討論社團 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 that: using our eyes more.” ~ David McCandlessSource: http://www.smashingmagazine.com/
  • Thank you… ian@uxi-design.com Slideshare: Ian Jang FB: Ian Jang