Practical Visualization

One of UX Australia 2014 topics
Spoke by Yu Ming Li

Transcript

1. Practical Visualization UX Australia 2014, Aug 28th Let’s talk about Yu Ming Li
2. California, USA UX Australia 2014 Citrix Systems, Inc. 24 Traveling Time Hrs. Sydney, Australia
3. ux + ui
5. ty·pog·ra·phy
6. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand Organize Distinguish Sketch Metaphor Graphic Attributes
7. Design Brief Customer Need Problem Statement ... “ ”
8. What’s the problem we need to solve?
9. About 96,500,000 results (0.28 seconds) design brief
10. Goal Audiences Context Central Message 1 2 4 3
11. Goal Audiences Context Central Message 1 2 4 3
12. central message audiences specific context reach certain goal 3 2 4 1 Share to in in order to
13. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand Organize Distinguish Sketch Metaphor Graphic Attributes
14. What do we need to visualize?
15. 1 3 Understand Organize Distinguish 2
17. L A T C H Location Alphabetic 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
18. Citrix Data Center Customized Data Center Location Time Category Hierarchy Data Center Distribution
19. Location Time Category Hierarchy EXPLORE Customer Journey Become Aware Learn Try Purchase Roll-out Use & Value Renew & Expand Advocate BUY LOVE
20. 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
21. Location Time Category Hierarchy Manufacturing Roles in IT ecosystem Shipping coordinator Daphne Engineer Adda Line worker Thomas Secret leaker John Business unit manager Mario End users Help Desk CIO Roscoe IT admin Nigel Truck driver David BWM
22. Project Task Group Yu Ming Shwetangi Erick Ryan Steve Mukul Matt Terate Abi Julien Shane Rama Martha Tienfeng Vikas Shyam Location Time Category Hierarchy
23. 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
24. But, combining attributes?
25. 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
26. 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
27. 1 2 3 Understand Location Time Category Hierarchy Mixed Organize Distinguish
30. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand Organize Distinguish Sketch Metaphor Graphic Attributes
31. How do we visualize?
32. Sketch Metaphor Graphic Attributes 1 2 3
33. What do you want to eat tonight?
34. Credit: Ekami
38. Technologies = Ingredients Example of Metaphor
39. Solutions = Meals Example of Metaphor
40. Sketch Metaphor Graphic Attributes 1 2 3
41. Graphic Attributes Shape geometrics Physical objects font layout font Color Texture
42. Line 26 AUG 26 29 28
43. Triangle
44. Circle
45. Rectangle
47. + + =
48. Objects / Context
49. or free icons
50. TEXT
51. Example of Simple Text 9.9% 22 have signed up in 2 days Conversion Rate Pilot End Users 221 views, 8 shares, 22 signups
52. Example of Text + Simple Shape Innovation Project Reality Original Plan 20% In Reality So no time to sleep... >40% >120% 20 %
53. Gill Sans “ i ”, Regular Futura1234567890, Medium Citrix Sans, Light Segoe UI, Semibold Myriad Pro, Regular Helvetica Neue, Light Times New Roman, Bold
54. B B Content Notation Title A A B 1 1/2 1/3 size text Tracking -20 Leading x1 Hy·phen·ate one line phrase Paragraph tips A B Leading x1.5
55. How to arrange? THOR 49er
56. Grid
57. reading habit
58. Content Title
59. Content Title
61. Contrast Size Color
62. Color
63. 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
64. 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
65. 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
68. Learn Practice
69. Iteration
70. Analysis Presentation Design Brief Goal Audiences Central Message Context Understand Organize Distinguish Sketch Metaphor Graphic Attributes
71. References Visual.ly visual.ly GOV.UK www.gov.uk/performance/prototypes Statistics Netherlands www.cbs.nl/en-gb/menu/publicaties/webpublicaties/interactief Mint® www.mint.com Information Graphics Sandra Rendgen, Julius Wiedemann
72. 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
73. Yu Ming Li yumingli.thor@gmail.com www.linkedin.com/in/thorlee Thor
74. Thank you