![EXAMPLES
MAY 2013
EXAMPLES OF UX DELIVERABLES
DISCOVER
DESIGNEVALUATE
CONTEXTUAL INQUIRIES [Workflows]
PERSONAS [Trees, Geo Maps, Rad Vis, Bar Charts, Word Cloud]
NARRATIVES [Storyboarding]
USER EVALUATIONS
[Storyboarding]
USER JOURNEY [Process map]
UX STRATEGY [Zone maps]
UX CONCEPT [Concept map]
EXPERIENCE MAP
USER SURVEY REPORT
[Bubble Chart, Bar Chart]](https://image.slidesharecdn.com/uxpa-presentation-2013-130603084812-phpapp02/85/UXPA-BOSTON-2013-Visual-Communication-in-UX-research-and-design-22-320.jpg)
![APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT
LAW OF CONTINUITY
& COMMON FATE
LAW OF SYMMETRY
[ ]{ }[ ]](https://image.slidesharecdn.com/uxpa-presentation-2013-130603084812-phpapp02/85/UXPA-BOSTON-2013-Visual-Communication-in-UX-research-and-design-42-320.jpg)
UXPA BOSTON 2013 - Visual Communication in UX research and design
- 1. VISUAL COMMUNICATION IN UX RESEARCH & DESIGN MAY 2013 UXPA MENG YANG | DORY A.AZAR KRONOS
- 2. SETTING THE STAGE We are Interaction Designers, we apply visualization research findings MAY 2013 :) Basically, we leave the brain-teasing work to researchers xkcd.com
- 3. SETTING THE STAGE Today, we shed light on research findings that helped us effectively communicate our UX deliverables MAY 2013 xkcd.com
- 4. SETTING THE STAGE MAY 2013 VISUAL COMMUNICATION VISUALIZATION :s ? !#! !#!
- 5. SETTING THE STAGE MAY 2013 COMMUNICATION EXPRESSED Transfer of information from a human being to another
- 6. SETTING THE STAGE MAY 2013 VISUAL COMMUNICATION REPRESENTED VISUALS Transfer of information through visuals from a human being to an- other
- 7. SETTING THE STAGE MAY 2013 VISUAL COMMUNICATION VISUALIZATION REPRESENTED VISUALS Transfer of information through visuals from a human being to another. The transfor- mation of information into visuals is visual- ization
- 10. MAY 2013 WHY VISUALIZATION? REVEAL INFORMATION
- 11. MAY 2013 WHY VISUALIZATION? REVEAL INFORMATION
- 12. MAY 2013 ART & INSPIRATION WHY VISUALIZATION?
- 13. MAY 2013 ART & INSPIRATION WHY VISUALIZATION?
- 14. VISUALIZATION FOR COMMUNICATION MAY 2013 WHAT WHERE & WHEN WHY WHO HOW WHAT IS THE INFORMATION THAT YOU ARE TRYING TO COMMUNICATE? (Relationships, Comparisons, Distributions, Compositions, Descriptions) NOT SURE? VISUALIZATION CAN HELP YOU REVEAL PATTERNS. SKETCH IT OUT, USE TOOLS AND LOOK AT THE SHAPE OF YOUR DATA CREATIVITY VISUAL COMMUNICATION FRAMEWORK
- 15. VISUALIZATION FOR COMMUNICATION MAY 2013 WHAT WHERE & WHEN WHY WHO HOW WHERE AND WHEN DID THIS INFORMATION TAKE PLACE? (In what context) CREATIVITY VISUAL COMMUNICATION FRAMEWORK
- 16. VISUALIZATION FOR COMMUNICATION MAY 2013 WHAT WHERE & WHEN WHY WHO HOW CREATIVITY VISUAL COMMUNICATION FRAMEWORK WHY DO I WANT TO COMMUNICATE THIS INFORMATION? (Informational/Reporting, Proposal, Request, Feedback, Justification, Convincing, etc.) KIM REES
- 17. VISUALIZATION FOR COMMUNICATION MAY 2013 WHAT WHERE & WHEN WHY WHO HOW CREATIVITY VISUAL COMMUNICATION FRAMEWORK WHO IS THE AUDIENCE WHO IS THE INFORMATION ABOUT KNOW YOUR TARGET AUDIENCE (Interests, Expectations, Physical/Mental charateristics, Age etc.) IS THE INFORMATION ABOUT LIVING AND BREATHING BEINGS? KNOW YOUR SUBJECT (Interests, Expectations, Physical/Mental charateristics, Age, Feelings, etc.) KIM REES
- 18. VISUALIZATION FOR COMMUNICATION MAY 2013 WHAT WHERE & WHEN WHY WHO HOW CREATIVITY VISUAL COMMUNICATION FRAMEWORK HOW DO I REPRESENT THE INFORMATION APPROPRIATELY? GREAT! CAN I DO BETTER? KNOW THE DESIGN PRINCIPLES, BEST PRACTICES, DOs & DONTs SELECT THE APPROPRIATE VISUAL REPRESENTATION USE THE TOOL OF YOUR CHOICE
- 19. YOU HAVE THE 5Ws USE WHAT YOU LEARNED FROM THEM VISUALIZATION FOR COMMUNICATION MAY 2013 WHAT WHERE & WHEN WHY WHO HOW CREATIVITY VISUAL COMMUNICATION FRAMEWORK HOW DO I MAKE THE VISUALIZATION MORE INTERESTING? USE PERTINENT METAPHORS (i.e. The Polar Bear) USE DESIGN TOOLS: AI, PS etc. SEARCH FOR INSPIRATIONS CREATIVITY CAN BE LEARNED
- 20. SELECTING THE VISUAL REPRESENTATION MAY 2013 A THOUGHT STARTER - A. ABELA
- 21. SELECTING THE VISUAL REPRESENTATION MAY 2013 A THOUGHT STARTER What would you like to show? COMPARISONS RELATIONSHIPS DESCRIPTIONS & STORY TELLING DISTRIBUTIONS TREES PROCESS MAPS CONCEPT MAPS WORK- FLOWS STORY- BOARDING PROCESS MAPS EXPERIENCE MAPS TIMELINES GEO MAPS WORD CLOUDS SEMANTIC NETWORKS BUBBLE CHARTS RADIAL VIS. ZONE MAPS over time over geolocation Any 2 dimensions Text 1 Dimension 1 Dimension N Dimensions Hierarchies and composition Logical sequence Connections Non-overlapping tasks Meaning oriented Abstraction of Details Logical Sequence One User Story
- 22. EXAMPLES MAY 2013 EXAMPLES OF UX DELIVERABLES DISCOVER DESIGNEVALUATE CONTEXTUAL INQUIRIES [Workflows] PERSONAS [Trees, Geo Maps, Rad Vis, Bar Charts, Word Cloud] NARRATIVES [Storyboarding] USER EVALUATIONS [Storyboarding] USER JOURNEY [Process map] UX STRATEGY [Zone maps] UX CONCEPT [Concept map] EXPERIENCE MAP USER SURVEY REPORT [Bubble Chart, Bar Chart]
- 23. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW Customers observed in their context of work (CI) Describe how customers use Kronos in their env. Audience: Designers Subject: 46 customers WorkflowsUnderstand the relation- ships between Kronos & env DISCOVER x 46
- 24. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW Aggregated feedback from observed customers (CI) Reveal the common main tasks that users perform Audience: Designers Subject: Capabilities WorkflowsCompare the frequency of use of Kronos capabilities DISCOVER
- 25. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW After contextual inquiries with users from different ind. Reduce the number of perso- nas Audience: All stakeholders Subject: Personas TreesUnderstand the relationships between persona of diff. ind. DISCOVER PERSONA FAMILIES • Michael Martin, the Department Manager • X-Vertical • Ryan Martin, the Retail Store Manager • Retail • Robert Martin, the Retail Communications Specialist (a.k.a Gatekeeper) • Retail • Nancy Martin, the Nurse Manager • Healthcare • Cindy Martin, the Central Staffing Manager • Healthcare & Retail Primary persona Secondary personas • Polly Martin, the Promotional Merchandising Mgr. • Retail • Manny Martin, the Manufacturing Manager • Manufacturing x 7
- 26. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW Based on CI and user research for Retail customers We want designers and stakeholders to use them Audience: PM & Designers Subject: Michael (Persona) Tree, Geo Maps, Rad Vis, Bar Charts, Word Cloud Reveal the primary character- istics of a Persona Customer & Employee Satisfaction Monitor attendance Legal compliance Ensure Coverage Stay within Budget Job GoalsExperience & Skill Job Experience: Familiarity with WFC: Technical Skill: Use of Mobile WFM: Low HighModerate Michael Martin Department Manager Herb Peterson Howard Edwards Peter Edwards Organizational Structure Age yrs yrs % 42 WFC Experience Hobbies Frequency of Use12 30 * Manager Michael Martin Headquarters San Francisco Michael’s Workforce Distribution Tasks Workforce < 50 50 - 100 >100 DefineYearly Budget CreateSchedule M onitor W orkload Record Worked Hours ManageAttendance Analyze Perform ance Develop ActionPlan 100% 75% 50% 25% 0 25% 50% 75% 100% 50min 45min 120 m in 45 min 60min 120m in 60 min
- 27. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW Customer interviews with Retail employees Identify (justify) opportuni- ties design improvements Audience: Designers Subject: Retail Employees Process mapsReveal the Retail Employee experience with Kronos tasks DISCOVER - EXPERIENCE MAP
- 28. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW Litterature review and own learnings after 3 releases Justification for selecting platforms for templates Audience: Stakeholders Subject: Kronos platforms Zone MapsCompare the effort needed to adapt design on diff. plat. DESIGN - UX STRATEGY: PLATFORM SELECTION PC BROWSER (WIDESCREEN)TABLET (Land.) LAYOUTADAPTATION INTERACTION ADAPTATIONMINIMUM MAXIMUM MAXIMUM BB & Reg. Smartphones (Portrait) (iOS and And.) Smartphones (Land.) (iOS and And.) TABLET (Portrait) EASIER TRANSITION HARDER TRANSITION DESIGN FOR
- 29. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW After capabilities and need assessment Describe a high-level infor- mation flow and architecture Audience: Designers Subject: Persona Intentions Workflow, Concept mapsReveal user intentions and implied connections RESPOND TRACK & MONITOR PLAN COMMUNITY COLLABORATE NOTIFICATIONS PROACTIVE RECOMMENDATIONS REMINDERS PLAN WORKT&M WORK AND PEOPLE MY PROFILE OTHER PROFILES POSTS ON TASKS COMMENT ON POSTS LIKE POSTS MESSAGES FIND PEOPLE REQUESTS REQUESTS (OS, Swap, TO etc.) DESIGN - UX CONCEPT
- 30. EXAMPLES MAY 2013 PLAN EFFECTIVELY WORK EFFICIENTLY (Today) COLLABORATE INTELLIGENTLY BELONG TO A COMMUNITY WHYWHEREWHO IN OFFICE ON THE MOVE HOWARD KRONOS MAKES YOU MORE PRODUCTIVE RESPOND QUICKLY WHYWHEREWHO IN OFFICE ON THE MOVE HOWARD KRONOS MAKES YOU MORE PRODUCTIVE scheduled? accepted? need cover? WHAT Monitor available shifts Sign-up for shift Shifts swappedSend request Check on schedule if shifts can be taken Check peers to swap with PLAN EFFECTIVELY Want shifts Schedule updated Want “Off” Ask for time-off decide when & where check weather, schedule etc. Submit time-off Find peer to cover Send request accepted? Want to change my availability on day Check the availability on record Change availability accepted? Send request What to do on day Check schedule Check Tasks Check details on task Who is working on day Check group schedule See peer schedule yes no yes no yes yes yes WHAT WHERE & WHEN WHY WHO HOW Outcome of analysis after Contextual Inquiries Proposal for a new way of performing a task Audience: Designers Subject: Howard (Persona) Process MapsDescribe the sequence of main tasks DESIGN - USER JOURNEY
- 31. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW More than 20% of cust. use regular phones Suggest a solution for regu- lar phone users Audience: All stakeholders Subject: Manufacturing emp Storyboarding and illustra- tions Describe transactional text messaging flow DESIGN - SOLUTION DEFINITION
- 32. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW one-on-one customer inter- views Suggest the integration of social features into Kronos Audience: Customers Subject: Social features Storyboarding and illustra- tions Get feedback on the useful- ness of social features EVALUATE - DESIGN PROBLEM STATEMENT
- 33. EXAMPLES MAY 2013 WHAT WHERE & WHEN WHY WHO HOW Survey for customers from different ind. Identify opportunities to improve “Search” Audience: PM & Designers Subject: Search engines Bubble chart, Bar ChartsReveal “Search” usage on the Web EVALUATE - USAGE SURVEY RESULTS (fake data) Desktop 70% E-Commerce sites Email 60% 45% Calendar 30% Using search frequently 70% 50% Likelihood to search Novice users Expert users Easiness to search in WFC UC3 UC4 UC5 UC7 UC2 UC8 UC1 UC6 100% 75% 50% 25% 0% 80% 75% 70% 65% 55% 55% 45% 27%
- 34. LESSONS LEARNED MAY 2013 DESIGN the visualization as you design any product KNOW THE MESSAGE you want to convey and why you want to communicate it KNOW YOUR TARGET AUDIENCE and tailor the visuals to their needs KNOW WHO/WHAT THE MESSAGE IS ABOUT and use related metaphors and visual language TEST & ITERATE...You never get it right the first time KEEP IT SIMPLE, you can always show more information effectively FOLLOW THE VISUALIZATION GUIDELINES, they are widely tested CREATIVITY CAN BE LEARNED, search and log your inspirations USE TEMPLATES, the Web is full of them or create your own
- 35. REFERENCES MAY 2013 DESIGN PRINCIPLES Bhowmick,T. (2006). Building an Exploratory Visual Analysis Tool for Qualitative Researchers. Proceedings of AutoCarto 2006. Retrieved from: http://www.cartogis.org/docs/proceedings/2006/bhowmick.pdf Few, S. (2004). Show me the Numbers: Designing Tables and Graphs to Enlighten. Oakland, CA:Analytics Press. Few, S. (2009). Now You See It: Simple Visualization Techniques for Quantitative Analysis. Oakland, CA: Analytics Press. Slone, D. (2009).Visualizing Qualitative Information. The Qualitative Report, 14(3). 489-497. Tufte, E. (2006). The Visual Display of Quantitative Information. Cheshire, CT: Graphics Press. Yau, N. (2011). Visualize This:The FlowingData Guide to Design,Visualization, and Statistics. Indianapolis, IN:Wiley.
- 36. REFERENCES MAY 2013 Visual.ly - http://visual.ly/ PLACES TO GET INSPIRED Flowing Data - http://flowingdata.com/ Information is beautiful award - http://www.informationisbeautifulawards.com/ Periscopic - http://www.periscopic.com/ - Kim Rees New York Times - Keywords: “new york times visualization”, “new york times infographics” Hint - http://hint.fm/ Fernanda Viegas, Martin Wattenberg Junk Chart (for bad examples)- http://junkcharts.typepad.com/
- 37. REFERENCES MAY 2013 Visual.ly - http://visual.ly/ TOOLS AND TEMPLATES Free infographics templates http://tailevents.com/technology/10-free-psd-infographics-templates/ Good infographics templates (not free) http://piktochart.com/ Many Eyes - http://www-958.ibm.com/software/analytics/manyeyes/
- 38. QUESTIONS? THANK YOU MAY 2013 dory.azar@kronos.com | meng.yang@kronos.com
- 39. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GESTALT - LAW OF PROXIMITY
- 40. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GESTALT - LAW OF SIMILARITY COLOR SHAPE INTENSITY AREA
- 41. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GESTALT - LAW OF CLOSURE
- 42. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GESTALT LAW OF CONTINUITY & COMMON FATE LAW OF SYMMETRY [ ]{ }[ ]
- 43. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GESTALT - LAW OF PAST EXPERIENCE
- 44. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GESTALT - LAW OF PAST EXPERIENCE
- 45. APPENDIX A: DESIGN PRINCIPLES MAY 2013 GRAPHICAL VOCABULARY NOMINAL (CATEGORIES) Households, Individuals, Family etc... LOW ACCURACY HIGH ORDINAL (RANKING) QUANTITATIVE (NUMBERS) Color Shape