UXPA BOSTON 2013 - Visual Communication in UX research and design

Download UXPA BOSTON 2013 - Visual Communication in UX research and design

Post on 22-Oct-2014

1.016 views

Category:

Design

6 download

Embed Size (px)

DESCRIPTION

Communicating strategies, concepts, ideas and user research data to key decision-makers is a major challenge that user experience designers continuously face in the product design cycle. A big part of this challenge lies in the fact that user experience deliverables need to be communicated to a wide audience with various skills and expertise at different stages of the product development. This presentation focuses on providing user experience researchers and designers with real examples on how infographics and information visualization methods have been used in the different stages of a user-centered design cycle to convey solutions to complex business problems in a visually more consumable format. According to various cognition and perception research literature, visualization has been proven to improve the reception of information and knowledge compared to text. The content of this presentation reinforces those findings by examining the different visualization techniques and principles invoked in the literature and adapting them to promote the user experience being designed. Various visual representations have been explored as a replacement to more traditional formats of conveying ideas such as text for example. Those include"day-in-a-life charts", experience maps, color-coded dashboards and many more. Best practices and lessons learned will be shared during the session such as how to best apply Tufte's design principles to improve the effectiveness of visual representation. The session will be an interactive discussion where the audience is encouraged to start thinking on how the knowledge around information visualization could be leveraged to help us, designers and UX researchers, better communicate design problems and solutions.

TRANSCRIPT

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