Your SlideShare is downloading. ×
0
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
UXPA BOSTON 2013 - Visual Communication in UX research and design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UXPA BOSTON 2013 - Visual Communication in UX research and design

959

Published on

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 …

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.

Published in: Design, Education, Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
959
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. VISUAL COMMUNICATIONIN UX RESEARCH & DESIGNMAY 2013UXPAMENG YANG | DORY A.AZARKRONOS
  • 2. SETTING THE STAGEWe are Interaction Designers,we apply visualizationresearch findingsMAY 2013:)Basically, we leave thebrain-teasing work toresearchersxkcd.com
  • 3. SETTING THE STAGEToday, we shed light on research findings that helped us effectivelycommunicate our UX deliverablesMAY 2013xkcd.com
  • 4. SETTING THE STAGEMAY 2013VISUAL COMMUNICATIONVISUALIZATION:s?!#!!#!
  • 5. SETTING THE STAGEMAY 2013COMMUNICATIONEXPRESSEDTransfer of informationfrom a human being toanother
  • 6. SETTING THE STAGEMAY 2013VISUAL COMMUNICATIONREPRESENTEDVISUALSTransfer of informationthrough visuals from ahuman being to an-other
  • 7. SETTING THE STAGEMAY 2013VISUAL COMMUNICATIONVISUALIZATIONREPRESENTEDVISUALSTransfer of informationthrough visuals from ahuman being toanother. The transfor-mation of informationinto visuals is visual-ization
  • 8. MAY 2013WHY VISUALIZATION?VISUALCOMMUNICATION
  • 9. MAY 2013WHY VISUALIZATION?VISUALCOMMUNICATION
  • 10. MAY 2013WHY VISUALIZATION?REVEAL INFORMATION
  • 11. MAY 2013WHY VISUALIZATION?REVEAL INFORMATION
  • 12. MAY 2013ART & INSPIRATIONWHY VISUALIZATION?
  • 13. MAY 2013ART & INSPIRATIONWHY VISUALIZATION?
  • 14. VISUALIZATION FOR COMMUNICATIONMAY 2013WHATWHERE & WHEN WHYWHO HOWWHAT IS THE INFORMATION THATYOU ARE TRYING TO COMMUNICATE?(Relationships, Comparisons, Distributions,Compositions, Descriptions)NOT SURE?VISUALIZATION CAN HELP YOUREVEAL PATTERNS. SKETCH IT OUT, USETOOLS AND LOOK AT THE SHAPE OF YOUR DATACREATIVITYVISUAL COMMUNICATIONFRAMEWORK
  • 15. VISUALIZATION FOR COMMUNICATIONMAY 2013WHATWHERE & WHEN WHYWHO HOWWHERE AND WHEN DID THISINFORMATION TAKE PLACE?(In what context)CREATIVITYVISUAL COMMUNICATIONFRAMEWORK
  • 16. VISUALIZATION FOR COMMUNICATIONMAY 2013WHATWHERE & WHEN WHYWHO HOWCREATIVITYVISUAL COMMUNICATIONFRAMEWORKWHY DO I WANT TO COMMUNICATETHIS INFORMATION?(Informational/Reporting, Proposal,Request, Feedback, Justification,Convincing, etc.)KIM REES
  • 17. VISUALIZATION FOR COMMUNICATIONMAY 2013WHATWHERE & WHEN WHYWHO HOWCREATIVITYVISUAL COMMUNICATIONFRAMEWORKWHO IS THE AUDIENCEWHO IS THE INFORMATION ABOUTKNOW YOUR TARGET AUDIENCE(Interests, Expectations, Physical/Mentalcharateristics, Age etc.)IS THE INFORMATION ABOUT LIVINGAND BREATHING BEINGS?KNOW YOUR SUBJECT(Interests, Expectations, Physical/Mentalcharateristics, Age, Feelings, etc.)KIM REES
  • 18. VISUALIZATION FOR COMMUNICATIONMAY 2013WHATWHERE & WHEN WHYWHO HOWCREATIVITYVISUAL COMMUNICATIONFRAMEWORKHOW DO I REPRESENTTHE INFORMATION APPROPRIATELY?GREAT!CAN I DO BETTER?KNOW THE DESIGN PRINCIPLES,BEST PRACTICES, DOs & DONTsSELECT THE APPROPRIATEVISUAL REPRESENTATIONUSE THE TOOL OF YOUR CHOICE
  • 19. YOU HAVE THE 5WsUSE WHAT YOU LEARNEDFROM THEMVISUALIZATION FOR COMMUNICATIONMAY 2013WHATWHERE & WHEN WHYWHO HOWCREATIVITYVISUAL COMMUNICATIONFRAMEWORKHOW DO I MAKE THE VISUALIZATIONMORE INTERESTING?USE PERTINENT METAPHORS(i.e. The Polar Bear)USE DESIGN TOOLS: AI, PS etc.SEARCH FOR INSPIRATIONSCREATIVITY CAN BE LEARNED
  • 20. SELECTING THE VISUAL REPRESENTATIONMAY 2013A THOUGHT STARTER - A. ABELA
  • 21. SELECTING THE VISUAL REPRESENTATIONMAY 2013A THOUGHT STARTERWhat would youlike to show?COMPARISONSRELATIONSHIPSDESCRIPTIONS & STORY TELLINGDISTRIBUTIONSTREESPROCESSMAPSCONCEPTMAPSWORK-FLOWSSTORY-BOARDINGPROCESSMAPSEXPERIENCEMAPSTIMELINESGEO MAPSWORDCLOUDSSEMANTICNETWORKSBUBBLECHARTSRADIALVIS.ZONEMAPSover timeovergeolocationAny 2dimensionsText1 Dimension1 Dimension N DimensionsHierarchies and compositionLogical sequenceConnectionsNon-overlapping tasksMeaning orientedAbstractionof DetailsLogicalSequenceOne UserStory
  • 22. EXAMPLESMAY 2013EXAMPLES OF UX DELIVERABLESDISCOVERDESIGNEVALUATECONTEXTUAL 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 MAPUSER SURVEY REPORT[Bubble Chart, Bar Chart]
  • 23. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWCustomers observed in theircontext of work (CI)Describe how customersuse Kronos in their env.Audience: DesignersSubject: 46 customersWorkflowsUnderstand the relation-ships between Kronos & envDISCOVERx 46
  • 24. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWAggregated feedback fromobserved customers (CI)Reveal the common maintasks that users performAudience: DesignersSubject: CapabilitiesWorkflowsCompare the frequency ofuse of Kronos capabilitiesDISCOVER
  • 25. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWAfter contextual inquirieswith users from different ind.Reduce the number of perso-nasAudience: All stakeholdersSubject: PersonasTreesUnderstand the relationshipsbetween persona of diff. ind.DISCOVERPERSONA FAMILIES• Michael Martin, the DepartmentManager• X-Vertical• Ryan Martin, theRetail StoreManager• Retail• Robert Martin, theRetailCommunicationsSpecialist (a.k.aGatekeeper)• Retail• Nancy Martin, theNurse Manager• Healthcare• Cindy Martin, theCentral StaffingManager• Healthcare & RetailPrimary personaSecondarypersonas• Polly Martin, thePromotionalMerchandising Mgr.• Retail• Manny Martin, theManufacturingManager• Manufacturingx 7
  • 26. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWBased on CI and userresearch for Retail customersWe want designers andstakeholders to use themAudience: PM & DesignersSubject: Michael (Persona)Tree, Geo Maps, Rad Vis, BarCharts, Word CloudReveal the primary character-istics of a PersonaCustomer & Employee SatisfactionMonitor attendanceLegal complianceEnsure Coverage Stay within BudgetJob GoalsExperience & SkillJob Experience:Familiarity with WFC:Technical Skill:Use of Mobile WFM:Low HighModerateMichael Martin Department ManagerHerb PetersonHoward EdwardsPeter EdwardsOrganizational StructureAgeyrs yrs %42 WFC ExperienceHobbiesFrequency of Use12 30*ManagerMichael MartinHeadquartersSan FranciscoMichael’s Workforce Distribution TasksWorkforce< 50 50 - 100 >100DefineYearlyBudgetCreateScheduleMonitorWorkloadRecordWorked HoursManageAttendanceAnalyzePerformanceDevelopActionPlan100% 75% 50% 25% 0 25% 50% 75% 100%50min45min120min45min60min120min60min
  • 27. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWCustomer interviews withRetail employeesIdentify (justify) opportuni-ties design improvementsAudience: DesignersSubject: Retail EmployeesProcess mapsReveal the Retail Employeeexperience with Kronos tasksDISCOVER - EXPERIENCE MAP
  • 28. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWLitterature review and ownlearnings after 3 releasesJustification for selectingplatforms for templatesAudience: StakeholdersSubject: Kronos platformsZone MapsCompare the effort neededto adapt design on diff. plat.DESIGN - UX STRATEGY: PLATFORM SELECTIONPC BROWSER (WIDESCREEN)TABLET (Land.)LAYOUTADAPTATIONINTERACTION ADAPTATIONMINIMUMMAXIMUMMAXIMUMBB & Reg.Smartphones (Portrait)(iOS and And.)Smartphones (Land.)(iOS and And.)TABLET (Portrait)EASIER TRANSITION HARDER TRANSITION DESIGN FOR
  • 29. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWAfter capabilities and needassessmentDescribe a high-level infor-mation flow and architectureAudience: DesignersSubject: Persona IntentionsWorkflow, Concept mapsReveal user intentions andimplied connectionsRESPONDTRACK & MONITOR PLANCOMMUNITYCOLLABORATENOTIFICATIONSPROACTIVE RECOMMENDATIONSREMINDERSPLAN WORKT&M WORK AND PEOPLEMY PROFILEOTHER PROFILESPOSTS ON TASKSCOMMENT ON POSTSLIKE POSTSMESSAGESFIND PEOPLEREQUESTSREQUESTS (OS, Swap, TO etc.)DESIGN - UX CONCEPT
  • 30. EXAMPLESMAY 2013PLANEFFECTIVELYWORKEFFICIENTLY(Today)COLLABORATEINTELLIGENTLYBELONG TO ACOMMUNITYWHYWHEREWHOIN OFFICEON THE MOVEHOWARDKRONOS MAKESYOU MORE PRODUCTIVERESPONDQUICKLYWHYWHEREWHOIN OFFICEON THE MOVEHOWARDKRONOS MAKESYOU MORE PRODUCTIVEscheduled?accepted?need cover?WHATMonitor availableshiftsSign-up for shiftShifts swappedSend requestCheck on schedule ifshifts can be takenCheck peersto swap withPLANEFFECTIVELYWant shiftsSchedule updatedWant “Off”Ask for time-offdecide when& wherecheck weather,schedule etc.Submit time-offFind peer to cover Send requestaccepted?Want to change myavailability on dayCheck the availabilityon recordChange availabilityaccepted?Send requestWhat to do on day Check schedule Check Tasks Check detailson taskWho isworking on dayCheck groupscheduleSee peerscheduleyesnoyesnoyesyesyesWHAT WHERE & WHEN WHY WHO HOWOutcome of analysis afterContextual InquiriesProposal for a new way ofperforming a taskAudience: DesignersSubject: Howard (Persona)Process MapsDescribe the sequence ofmain tasksDESIGN - USER JOURNEY
  • 31. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWMore than 20% of cust. useregular phonesSuggest a solution for regu-lar phone usersAudience: All stakeholdersSubject: Manufacturing empStoryboarding and illustra-tionsDescribe transactional textmessaging flowDESIGN - SOLUTION DEFINITION
  • 32. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWone-on-one customer inter-viewsSuggest the integration ofsocial features into KronosAudience: CustomersSubject: Social featuresStoryboarding and illustra-tionsGet feedback on the useful-ness of social featuresEVALUATE - DESIGN PROBLEM STATEMENT
  • 33. EXAMPLESMAY 2013WHAT WHERE & WHEN WHY WHO HOWSurvey for customers fromdifferent ind.Identify opportunities toimprove “Search”Audience: PM & DesignersSubject: Search enginesBubble chart, Bar ChartsReveal “Search” usage onthe WebEVALUATE - USAGE SURVEY RESULTS (fake data)Desktop70%E-CommercesitesEmail60% 45%Calendar30%Using search frequently70%50%Likelihood to searchNovice usersExpert usersEasiness to search in WFCUC3 UC4 UC5 UC7 UC2 UC8 UC1 UC6100%75%50%25%0%80%75%70%65%55%55%45%27%
  • 34. LESSONS LEARNEDMAY 2013DESIGN the visualization as you design any productKNOW THE MESSAGE you want to convey and why you want tocommunicate itKNOW YOUR TARGET AUDIENCE and tailor the visuals to their needsKNOW WHO/WHAT THE MESSAGE IS ABOUT and use related metaphorsand visual languageTEST & ITERATE...You never get it right the first timeKEEP IT SIMPLE, you can always show more information effectivelyFOLLOW THE VISUALIZATION GUIDELINES, they are widely testedCREATIVITY CAN BE LEARNED, search and log your inspirationsUSE TEMPLATES, the Web is full of them or create your own
  • 35. REFERENCESMAY 2013DESIGN PRINCIPLESBhowmick,T. (2006). Building an Exploratory Visual Analysis Tool for QualitativeResearchers. Proceedings of AutoCarto 2006.Retrieved from: http://www.cartogis.org/docs/proceedings/2006/bhowmick.pdfFew, 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 QuantitativeAnalysis. 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. REFERENCESMAY 2013Visual.ly - http://visual.ly/PLACES TO GET INSPIREDFlowing Data - http://flowingdata.com/Information is beautiful award - http://www.informationisbeautifulawards.com/Periscopic - http://www.periscopic.com/ - Kim ReesNew York Times - Keywords: “new york times visualization”,“new york times infographics”Hint - http://hint.fm/Fernanda Viegas, Martin WattenbergJunk Chart (for bad examples)- http://junkcharts.typepad.com/
  • 37. REFERENCESMAY 2013Visual.ly - http://visual.ly/TOOLS AND TEMPLATESFree infographics templateshttp://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 YOUMAY 2013dory.azar@kronos.com | meng.yang@kronos.com
  • 39. APPENDIX A: DESIGN PRINCIPLESMAY 2013GESTALT - LAW OF PROXIMITY
  • 40. APPENDIX A: DESIGN PRINCIPLESMAY 2013GESTALT - LAW OF SIMILARITYCOLOR SHAPEINTENSITY AREA
  • 41. APPENDIX A: DESIGN PRINCIPLESMAY 2013GESTALT - LAW OF CLOSURE
  • 42. APPENDIX A: DESIGN PRINCIPLESMAY 2013GESTALTLAW OF CONTINUITY& COMMON FATELAW OF SYMMETRY[ ]{ }[ ]
  • 43. APPENDIX A: DESIGN PRINCIPLESMAY 2013GESTALT - LAW OF PAST EXPERIENCE
  • 44. APPENDIX A: DESIGN PRINCIPLESMAY 2013GESTALT - LAW OF PAST EXPERIENCE
  • 45. APPENDIX A: DESIGN PRINCIPLESMAY 2013GRAPHICAL VOCABULARYNOMINAL (CATEGORIES)Households, Individuals, Familyetc...LOW ACCURACY HIGHORDINAL (RANKING) QUANTITATIVE (NUMBERS)Color Shape

×