uxpa boston 2013 - visual communication in ux research and design
Post on 22-Oct-2014
1.038 views
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
VISUAL COMMUNICATION IN UX RESEARCH & DESIGN
MAY 2013
UXPA
MENG YANG | DORY A.AZARKRONOS
SETTING THE STAGE
We are Interaction Designers, we apply visualization research findings
MAY 2013
:) Basically, we leave the brain-teasing work toresearchers
xkcd.com
SETTING THE STAGE
Today, we shed light on research findings that helped us effectively communicate our UX deliverables
MAY 2013
xkcd.com
SETTING THE STAGE
MAY 2013
VISUAL COMMUNICATION
VISUALIZATION
:s
?
!#!
!#!
SETTING THE STAGE
MAY 2013
COMMUNICATION
EXPRESSED
Transfer of information from a human being to another
SETTING THE STAGE
MAY 2013
VISUAL COMMUNICATION
REPRESENTED
VISUALS
Transfer of information through visuals from a human being to an-other
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
MAY 2013
WHY VISUALIZATION?
VISUAL COMMUNICATION
MAY 2013
WHY VISUALIZATION?
VISUAL COMMUNICATION
MAY 2013
WHY VISUALIZATION?
REVEAL INFORMATION
MAY 2013
WHY VISUALIZATION?
REVEAL INFORMATION
MAY 2013
ART & INSPIRATION
WHY VISUALIZATION?
MAY 2013
ART & INSPIRATION
WHY VISUALIZATION?
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 YOUREVEAL PATTERNS. SKETCH IT OUT, USE TOOLS AND LOOK AT THE SHAPE OF YOUR DATA
CREATIVITY
VISUAL COMMUNICATION FRAMEWORK
VISUALIZATION FOR COMMUNICATION
MAY 2013
WHAT
WHERE & WHEN WHY
WHO HOW
WHERE AND WHEN DID THISINFORMATION TAKE PLACE?(In what context)
CREATIVITY
VISUAL COMMUNICATION FRAMEWORK
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
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 LIVINGAND BREATHING BEINGS?KNOW YOUR SUBJECT(Interests, Expectations, Physical/Mental charateristics, Age, Feelings, etc.)
KIM REES
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 APPROPRIATEVISUAL REPRESENTATION
USE THE TOOL OF YOUR CHOICE
YOU HAVE THE 5WsUSE WHAT YOU LEARNEDFROM 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 INSPIRATIONSCREATIVITY CAN BE LEARNED
SELECTING THE VISUAL REPRESENTATION
MAY 2013
A THOUGHT STARTER - A. ABELA
SELECTING THE VISUAL REPRESENTATION
MAY 2013
A THOUGHT STARTER
What would you like to show?
COMPARISONS
RELATIONSHIPS
DESCRIPTIONS & STORY TELLING
DISTRIBUTIONS
TREES
PROCESSMAPS
CONCEPTMAPS
WORK-FLOWS
STORY-BOARDING
PROCESSMAPS
EXPERIENCEMAPS
TIMELINES
GEO MAPS
WORD CLOUDS
SEMANTICNETWORKS
BUBBLECHARTS
RADIALVIS.
ZONEMAPS
over time
over geolocation
Any 2 dimensions
Text1 Dimension
1 Dimension N Dimensions
Hierarchies and composition
Logical sequence
Connections
Non-overlapping tasks
Meaning oriented
Abstractionof Details
LogicalSequence
One UserStory
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]
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWCustomers observed in their context of work (CI)
Describe how customers use Kronos in their env.
Audience: DesignersSubject: 46 customers
WorkflowsUnderstand the relation-ships between Kronos & env
DISCOVER
x 46
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWAggregated feedback from observed customers (CI)
Reveal the common main tasks that users perform
Audience: DesignersSubject: Capabilities
WorkflowsCompare the frequency of use of Kronos capabilities
DISCOVER
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWAfter contextual inquiries with users from different ind.
Reduce the number of perso-nas
Audience: All stakeholdersSubject: Personas
TreesUnderstand the relationshipsbetween 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
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWBased on CI and user research for Retail customers
We want designers and stakeholders to use them
Audience: PM & DesignersSubject: 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 complianceEnsure Coverage Stay within Budget
Job GoalsExperience & Skill
Job Experience:
Familiarity with WFC:
Technical Skill:
Use of Mobile WFM:
Low High Moderate
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
De�
ne Y
early
Budg
etCr
eate
Sche
dule
Monitor
Workload
Record
Worked HoursManageAttendance
Analyze
Performance
Develop
Action Plan
100% 75% 50% 25% 0 25% 50% 75% 100%50 m
in
45min
120min
45min
60min
120min
60min
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWCustomer interviews with Retail employees
Identify (justify) opportuni-ties design improvements
Audience: DesignersSubject: Retail Employees
Process mapsReveal the Retail Employee experience with Kronos tasks
DISCOVER - EXPERIENCE MAP
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWLitterature review and own learnings after 3 releases
Justification for selecting platforms for templates
Audience: StakeholdersSubject: Kronos platforms
Zone MapsCompare the effort needed to adapt design on diff. plat.
DESIGN - UX STRATEGY: PLATFORM SELECTION
PC BROWSER (WIDESCREEN)TABLET (Land.)
LAYO
UT
ADAP
TATI
ON
INTERACTION ADAPTATIONMINIMUM
MAXIMUM
MAXIMUM
BB & Reg. Smartphones (Portrait)(iOS and And.)
Smartphones (Land.)(iOS and And.)
TABLET (Portrait)
EASIER TRANSITION HARDER TRANSITION DESIGN FOR
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWAfter capabilities and need assessment
Describe a high-level infor-mation flow and architecture
Audience: DesignersSubject: Persona Intentions
Workflow, Concept mapsReveal user intentions and implied connections
RESPOND
TRACK & MONITOR PLAN
COMMUNITYCOLLABORATE
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
EXAMPLES
MAY 2013
PLANEFFECTIVELY
WORK EFFICIENTLY
(Today)
COLLABORATEINTELLIGENTLY
BELONG TO ACOMMUNITY
WHYWHEREWHO
IN OFFICE
ON THE MOVE
HOWARD
KRONOS MAKES YOU MORE PRODUCTIVE
RESPONDQUICKLY
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
PLANEFFECTIVELY
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 requestaccepted?
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 peerschedule
yes
no
yes
no
yes
yes
yes
WHAT WHERE & WHEN WHY WHO HOWOutcome of analysis after Contextual Inquiries
Proposal for a new way of performing a task
Audience: DesignersSubject: Howard (Persona)
Process MapsDescribe the sequence of main tasks
DESIGN - USER JOURNEY
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWMore than 20% of cust. use regular phones
Suggest a solution for regu-lar phone users
Audience: All stakeholdersSubject: Manufacturing emp
Storyboarding and illustra-tions
Describe transactional text messaging flow
DESIGN - SOLUTION DEFINITION
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWone-on-one customer inter-views
Suggest the integration of social features into Kronos
Audience: CustomersSubject: Social features
Storyboarding and illustra-tions
Get feedback on the useful-ness of social features
EVALUATE - DESIGN PROBLEM STATEMENT
EXAMPLES
MAY 2013
WHAT WHERE & WHEN WHY WHO HOWSurvey 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
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%
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
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.
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/
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/
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF PROXIMITY
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF SIMILARITY
COLOR SHAPE
INTENSITY AREA
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF CLOSURE
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT
LAW OF CONTINUITY & COMMON FATE
LAW OF SYMMETRY
[ ]{ }[ ]
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF PAST EXPERIENCE
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GESTALT - LAW OF PAST EXPERIENCE
APPENDIX A: DESIGN PRINCIPLES
MAY 2013
GRAPHICAL VOCABULARY
NOMINAL (CATEGORIES)Households, Individuals, Familyetc...
LOW ACCURACY HIGH
ORDINAL (RANKING) QUANTITATIVE (NUMBERS)
Color Shape