Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical Visualization (Workshop)

Yu Ming Li
November 14, 2014

Practical Visualization (Workshop)

Workshop in User Friendly 2014, UXPA China, presented by Yu Ming Li

Yu Ming Li

November 14, 2014
Tweet

More Decks by Yu Ming Li

Other Decks in Design

Transcript

  1. ൖᙂʷணࠇ Practical Visualization User Friendly 2014, Nov 15th Yu Ming

    Li Let’s talk about ҽԃთ User Friendly 2014
  2. Citrix ʻ14 ʻ15 ʻ13 ʻ12 ʻ11 ʻ10 ʻ09 ʻ08 ʻ07

    ʻ06 ʻ05 ʻ04 ʻ03 ʻ02 Corel Cyberlink HTC Freelance ASUS Teaching Assistant Military Service Commercial Design B.A. Chung Yuan Christian University Sr. Product Designer Sr. UI Designer Sr. GUI Designer UI Designer Specialist California, USA San Francisco Taiwan Taipei years USA Adventure 3 & years Taiwan 6 User Friendly 2014
  3. Visualization is the process of representing abstract business or scientific

    data as images that can aid in understanding the meaning of the data. - Defined by Google User Friendly 2014
  4. Terminology Data Information Interaction Iteration Research User Experience Visualization 數據

    資訊 互動 迭代 研究 使用者經驗 視覺化 数据 信息 交互 迭代 调研 用户体验 可视化 English 繁體中文 简体中文 User Friendly 2014
  5. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand

    Organize Distinguish Sketch Metaphor Graphic Attributes ணࠇᔊజ яତ ʱؓ User Friendly 2014
  6. Goal Audiences Context Central Message 1 2 4 3 ͦᅺ

    ࿁൥ ৃࢹ ᐑྤ User Friendly 2014
  7. Goal 1 Audiences Context Central Message 2 4 3 ͦᅺ

    ࿁൥ ৃࢹ ᐑྤ User Friendly 2014
  8. Goal Audiences 1 2 Context Central Message 4 3 ͦᅺ

    ࿁൥ ৃࢹ ᐑྤ User Friendly 2014
  9. Goal Audiences Central Message 1 2 3 Context 4 ͦᅺ

    ࿁൥ ৃࢹ ᐑྤ User Friendly 2014
  10. Goal Audiences Context Central Message 1 2 4 3 ͦᅺ

    ࿁൥ ৃࢹ ᐑྤ User Friendly 2014
  11. reach certain goal audiences central message specific context 1 2

    3 4 In order to to share in ͦᅺ ࿁൥ ৃࢹ ᐑྤ User Friendly 2014
  12. Audiences Beginner Winery / Poster Happy Hour / Sign Meet

    up / Slide Tasting event / DM Restaurant / Menu Pairing Alcoholic Tasting, not drinking Potential wine Getting started Domain knowledge Professional Amateur Collector ڋኪ٫ ৢ৺ ਖ਼࢕ ุቱ ϗᔛ࢕ ໧ൃۜ၇ ϋ΅ ࠬɺૢ΁ അা ᄆࣸ ၳึ तᄆࣛݬ ᎛ᝂ ৢᅀ ۜৢึ ɝژ ۜৢڢைৢ ਖ਼ุٝᗆ ภৣ ϗᔛϞᆑɢٙৢ Central Message Goal Context Grape varieties Taking Note Regions/Terroir Vintage Price User Friendly 2014
  13. Analysis Understand Organize Distinguish Presentation Design Brief Goal Audiences Central

    Message Context Sketch Metaphor Graphic Attributes ணࠇᔊజ яତ ʱؓ User Friendly 2014
  14. L A T C H Location Alphabet Time Category Hierarchy

    Information may be infinite, however… The organization of information is finite as it can only be organized by LATCH... Richard Saul Wurman, architect Зໄ ο͎ ࣛග ᗳй චᄴ User Friendly 2014
  15. Location Time Category Hierarchy EXPLORE Customer Journey Become Aware Learn

    Try Purchase Roll-out Use & Value Renew & Expand Advocate BUY LOVE User Friendly 2014
  16. Location Time Category Hierarchy Cubefree End Users Finding place to

    work, Connect w/ others, Free SaaS trial Efficient promotion $0 Free, raw data $ Usage Discounts $ Subscription SaaS tools Data Consumers Cafes, coworking spaces... etc. Multi-sided Market Revenue Flow $$$ Fund $ Advertising, broker raw data Raw data, acquiring end user to SaaS trial $$$ Selling data Mobility data/info User Friendly 2014
  17. Location Time Category Hierarchy Industry Metrics BYOD (37) Increase Security

    (113) BYOD (11) Increase Security (9) BYOD (20) Increase Security (20) Financial (772) Work from anywhere (205) Better IT agility & Responsiveness (105) Reducing Cost (167) Better desktop management (145) Non-Profit (128) Work from anywhere (37) Better IT agility & Responsiveness (23) Reducing Cost (28) Better desktop management (20) Telecommunications (205) Work from anywhere (59) Better IT agility & Responsiveness (28) Reducing Cost (47) Better desktop management(31) Government (689) Work from anywhere (181) Better IT agility & Responsiveness (84) Reducing Cost (141) BYOD (56) Increase Security (82) Professional Services (279) Work from anywhere (108) Better IT agility & Responsiveness (48) Reducing Cost (40) Better desktop management (48) BYOD (16) Increase Security (19) Transportation (135) Work from anywhere (31) Better IT agility & Responsiveness (32) Reducing Cost (38) Better desktop management (19) BYOD (6) Increase Security (9) Manufacturing (516) Work from anywhere (131) Better IT agility & Responsiveness (84) Reducing Cost (133) Better desktop management (73) BYOD (30) Increase Security (65) Technology (781) Work from anywhere (297) Better IT agility & Responsiveness (80) Reducing Cost (175) Better desktop management (88) BYOD (62) Increase Security (79) Work from anywhere (32) Better IT agility & Responsiveness (10) Reducing Cost (19) Better desktop management (7) BYOD (6) Increase Security (6) Entertainment (80) Healthcare (544) Work from anywhere (149) Better IT agility & Responsiveness (98) Reducing Cost (104) Better desktop management (103) BYOD (33) Increase Security (57) Retail (208) Work from anywhere (54) Better IT agility & Responsiveness (27) Reducing Cost (61) Better desktop management (46) BYOD (9) Increase Security (11) Work from anywhere (133) Better IT agility & Responsiveness (67) Reducing Cost (127) Better desktop management (114) BYOD (56) Increase Security (24) Education (521) User Friendly 2014
  18. Project Task Group Yu Ming Shwetangi Erick Ryan Steve Mukul

    Matt Terate Abi Julien Shane Rama Martha Tienfeng Vikas Shyam Location Time Category Hierarchy User Friendly 2014
  19. Location Time Category Hierarchy Where Identity Connection Power Outlet Noise

    Level Internet levels of the hierarchy of Mobile Worker Needs on finding ideal work space 3 MVP Goal User Friendly 2014
  20. Location Time Category Mixed Category + Location Hierarchy tasks teams

    geolocations 3 designers 16 Yu Ming User Management Role Management Migration Shwetangi Erick Ryan Steve Mukul Matt Terate Abi Julien Shane Rama Martha Tienfeng Vikas Shyam User Friendly 2014
  21. Location Time Category Mixed Location + Time Hierarchy Industry cloud

    service Foundational technologies User Friendly 2014
  22. Location Time Category Mixed Time + Category + Hierarchy Hierarchy

    EXPLORE Decision influence flow & data collection on customer journey Become Aware Learn Need Try Purchase Roll-out Use & Value Renew & Expand Advocate BUY LOVE Roles Involved CIO Indirect involved Direct involved: light Direct involved: middle Direct involved: heavy IT Admin End User Data Sales Consulting Customer Support Heat Map Emotion Big Data (Agent) Prerequisite & Dependences Hardware Setup Licensing Initial Installation Flow Database Setup Configuration Provisioning Policies Role Management User Management Monitoring Logging & Maintenance Support 3rd Party Setup & Support Update Backup & Restore Upgrade Edition System Help Quantity: involved products under middle rating <3 4-5 >6 จᗆ ኪ୦ ྒྷ༊ ᒅ൯ ቗ක ౤ࡇ Դ͜  ᄆ࠽ һอ  ᓒɽ User Friendly 2014
  23. 1 2 3 Understand Location Time Category Hierarchy Mixed Organize

    Distinguish ə༆ ଡ଼ᔌ ਜй User Friendly 2014
  24. Audiences Beginner Winery / Poster Happy Hour / Sign Meet

    up / Slide Tasting event / DM Restaurant / Menu Pairing Alcoholic Tasting, not drinking Potential wine Getting started Domain knowledge Professional Amateur Collector ڋኪ٫ ৢ৺ ਖ਼࢕ ุቱ ϗᔛ࢕ ໧ൃۜ၇ ϋ΅ ࠬɺૢ΁ അা ᄆࣸ ၳึ तᄆࣛݬ ᎛ᝂ ৢᅀ ۜৢึ ɝژ ۜৢڢைৢ ਖ਼ุٝᗆ ภৣ ϗᔛϞᆑɢٙৢ Central Message Goal Context Grape varieties Taking Note Regions/Terroir Vintage Price User Friendly 2014
  25. Audiences Beginner Winery / Poster Happy Hour / Sign Meet

    up / Slide Tasting event / DM Restaurant / Menu Pairing Alcoholic Tasting, not drinking Potential wine Getting started Domain knowledge Professional Amateur Collector ڋኪ٫ ৢ৺ ਖ਼࢕ ุቱ ϗᔛ࢕ ໧ൃۜ၇ ϋ΅ ࠬɺૢ΁ അা ᄆࣸ ၳึ तᄆࣛݬ ᎛ᝂ ৢᅀ ۜৢึ ɝژ ۜৢڢைৢ ਖ਼ุٝᗆ ภৣ ϗᔛϞᆑɢٙৢ Central Message Goal Context Grape varieties Taking Note Regions/Terroir Vintage Price Location + Hierarchy + Time Category + Time User Friendly 2014
  26. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand

    Organize Distinguish Sketch Metaphor Graphic Attributes ணࠇᔊజ яତ ʱؓ User Friendly 2014
  27. Example of Simple Text 9.9% 22 have signed up in

    2 days Conversion Rate Pilot End Users 221 views, 8 shares, 22 signups User Friendly 2014
  28. Example of Text + Simple Shape Innovation Project Reality Original

    Plan 20% In Reality So no time to sleep... >40% >120% 20 % User Friendly 2014
  29. Gill Sans “ i ”, Regular Futura1234567890, Medium Citrix Sans,

    Light Segoe UI, Semibold Myriad Pro, Regular Helvetica Neue, Light Times New Roman, Bold User Friendly 2014
  30. B B Content Notation Title A A B 1 1/2

    1/3 size text An example of presentation slide... Tracking -20 Leading x1 Hy·phen·ate One line phrase Paragraph tips usage A B Leading x1.5 ᅺᕚ ʫ˖ ൗ༆ User Friendly 2014
  31. Practical Color Coordinate System v Vivid s Strong b Bright

    dp Deep lt Light sf Soft d Dull dk Dark p Pale p Saturation Brightness Hue High High Low Low g Grayish dkg Dark Grayish ltg Light Grayish Pale ltGy Light Gray mGy Medium Gray dkGy Dark Gray BK Black PCCS User Friendly 2014
  32. Vivid Light Dark Grayscale { v Vivid s Strong b

    Bright dp Deep lt Light sf Soft d Dull dk Dark p Pale p Saturation Brightness Hue High High Low Low g Grayish dkg Dark Grayish ltg Light Grayish Pale ltGy Light Gray mGy Medium Gray dkGy Dark Gray BK Black Tone User Friendly 2014
  33. Vivid Light Dark Grayscale { v Vivid s Strong b

    Bright dp Deep lt Light sf Soft d Dull dk Dark p Pale p Saturation Brightness Hue High High Low Low g Grayish dkg Dark Grayish ltg Light Grayish Pale ltGy Light Gray mGy Medium Gray dkGy Dark Gray BK Black Tone Key Elements User Friendly 2014
  34. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand

    Organize Distinguish Sketch Metaphor Graphic Attributes ணࠇᔊజ яତ ʱؓ User Friendly 2014
  35. Resources Getty Images www.gettyimages.com The 200 Best Graphic, App &

    Web Design Tools & Resources (Categorized) dailytekk.com/2012/07/31/200-graphic-app-web-design-tools-resources The Noun Project thenounproject.com Entypo www.entypo.com Shutterstock www.shutterstock.com 45 Free Small Symbols Vector Icon Sets www.thedesignwork.com/45-free-small-symbols-vector-icon-sets User Friendly 2014