Complementing Computation with Visualization in Genomics
VIZBI 2013 - UX design tutorial
1. UX design: insight, empathy and evaluation Vizbi 2013
User experience design
Insight, empathy and evaluation
Vizbi 2013 Tutorial
Francis Rowland
User experience designer
EMBL European Bioinformatics Institute
@francisrowland
Saturday, 23 March 2013
2. UX design: insight, empathy and evaluation Vizbi 2013
What we’ll do during this tutorial
Q&A (15)
Introductions (15 mins)
Round-up (5)
Setting the theme (5)
Activity 7 (15)
Activity 1 (20)
Hypothesis/
Experiment (5)
User
research(5)
Activity 6 (15)
Activity 2 (10)
Evaluation (10)
Activity 3 (20)
break
Activity 5 (15)
Users -> activities (5)
Activity 4 (20)
Saturday, 23 March 2013
3. UX design: insight, empathy and evaluation Vizbi 2013
So... who is this guy exactly?
User experience designer at EMBL-EBI
Background in web design
Distant background in environmental science
Organiser for EBI Interfaces and Cambridge
Usability Group
Francis Rowland
I try to help people identify and describe [design] problems,
connect with users, and deliver useful, usable services
Day-to-day, I do a lot of sketching and prototyping
Saturday, 23 March 2013
4. UX design: insight, empathy and evaluation Vizbi 2013
Ice-breaker
UX designer
F rancis exploring problems
sketching
playing the mandolin
Saturday, 23 March 2013
5. UX design: insight, empathy and evaluation Vizbi 2013
What is user experience (UX) design?
Let’s think about design as an approach to solving problems...
and striving to put things in context
Thank you to Dan Willis (@uxcrank) for permission to use this image
Saturday, 23 March 2013
6. UX design: insight, empathy and evaluation Vizbi 2013
...and what does it have to do
with data visualisation?
Your audience are your users
Borrowing concepts and approaches from UX design will help you
close the gap between your data visualisations and your “users”...
your audience.
Whether your visualisations are there to allow exploration, education
or persuasion, you need to know how to frame them in a way that is
meaningful and actionable for your audience
To paraphrase Nathan Yau:
“Approach your [audience] w a simple curiosity
ith
... and go from there.”
Saturday, 23 March 2013
7. UX design: insight, empathy and evaluation Vizbi 2013
The theme for today...
WEATHER DATA
Snow in Cambridge MA / evanzxcv (Flickr)
Saturday, 23 March 2013
8. UX design: insight, empathy and evaluation Vizbi 2013
The theme for today...
WEATHER DATA
precipitation
windspeed
wind direction
humidity
UV strength
pollen count
warnings & alerts
simple -> complex
Weather data on http://www.boston.com/weather/
Saturday, 23 March 2013
9. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Visualising a topic
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Zooming in: user research
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Zooming out: supporting activities
Activity 4: activity diagram: describing the activities people in your audience
perform
What is this visualisation for?
Activity 5: mission statement: what is this data visualisation for? (data-centric)
Evaluation: do people “get it”?
Activity 6: evaluation: a quick look at evaluating your visualisations
Framing requirements as hypotheses to be tested
Activity 7: Hypotheses: re-framing your visualisation in human- (or activity-)
centric terms
Saturday, 23 March 2013
10. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statement: what is this data visualisation
for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
11. UX design: insight, empathy and evaluation Vizbi 2013
Activity 1: exploring the topic (20 mins)
Making it more manageable
components people
scenarios features
Derived from the 4 Cs game / Gamestorming - http://www.gogamestorm.com/?p=503
Saturday, 23 March 2013
12. UX design: insight, empathy and evaluation Vizbi 2013
Activity 1: exploring the topic
Examples...
components people
radar map
sailor
symbols
meteorologist
temperature
interactive
planning a holiday
daily
scenarios features
Derived from the 4 Cs game / Gamestorming - http://www.gogamestorm.com/?p=503
Saturday, 23 March 2013
13. UX design: insight, empathy and evaluation Vizbi 2013
Zooming in: user research
curiosity -> insights -> empathy -> context
Talking to users will help you learn more about
activities
goals
pain points
opportunities
“Validate that the problem you are solving actually
exists ... [and remember] the user is giving you data,
not an expert opinion” - Elaine Wherry
Saturday, 23 March 2013
14. UX design: insight, empathy and evaluation Vizbi 2013
Be prepared to dig...
“WHY?”
“Can you tell me more about that?”
“When... ?” “How often... ?”
“Why is that important to you?”
Saturday, 23 March 2013
15. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statementmission statement: what is this
data visualisation for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
16. UX design: insight, empathy and evaluation Vizbi 2013
Activity 2: interviewing each other (10 mins)
Learning about your audience
• Take the time to listen to people (your audience)
• Use interviews to pursue “lines of enquiry”
• How do people talk about a topic?
• Body language?
• One person ask questions, the other is scribe
In this case, try to explore the following:
✓ What kind of weather data will be valuable?
✓ What do they need to be able to do?
✓ Motivations? Pain points? Plus points?
✓ Expose “latent needs”
Big thanks to Andrew Travers (@atrvrs) for advice & inspiration
Saturday, 23 March 2013
17. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statement: what is this data visualisation
for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
18. UX design: insight, empathy and evaluation Vizbi 2013
Activity 3: synthesising your findings (20 mins)
A couple of ways to visualise what you’ve learned
Nouns, verbs, adjectives Empathy map
N V A
Thinking
Hearing Seeing
Saying & Doing
Pain Gain
Pick out the nouns, verbs and adjectives from a discussion, Empathy map / Gamestorming: http://www.gogamestorm.com/?p=42
to see how people talk about a topic
Saturday, 23 March 2013
19. UX design: insight, empathy and evaluation Vizbi 2013
Activity 3: synthesising your findings (20 mins)
Nouns, verbs and adjectives
N V A
forecast update confident
map download reliable
symbols listen important
holiday
rain
Pick out the nouns, verbs and adjectives from a discussion,
to see how people talk about a topic
Saturday, 23 March 2013
20. UX design: insight, empathy and evaluation Vizbi 2013
Activity 3: synthesising your findings (20 mins)
Empathy map: mountaineer
Thinking
Can I trust this?
“these data are
updated hourly” animated radar maps
Hearing Seeing
zooming in on map
Saying & Doing
Pain Gain
not enough granularity updates from local guides
snow conditions?
Empathy map / Gamestorming: http://www.gogamestorm.com/?p=42
Saturday, 23 March 2013
21. UX design: insight, empathy and evaluation Vizbi 2013
Zooming out: supporting activities
Based on user research, can we see any patterns forming?
Let’s begin to look at how visualisation fits in with
activities, and how we can support them
task task
task goal
task
task
ACTIVITY
Your visualisation may just need
to support this part of the activity
Saturday, 23 March 2013
22. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statement: what is this data visualisation
for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
23. UX design: insight, empathy and evaluation Vizbi 2013
Activity 4: activity diagram (20 mins)
What are people doing?
Tools
Activity
Participants Goal
“ ... ”
Division of
Rules labour
Heavily adapted from Yrjö Engetröm’s activity diagram
Saturday, 23 March 2013
24. UX design: insight, empathy and evaluation Vizbi 2013
Activity 4: activity diagram
Example: planning a mountaineering trip
Tools
Met. website; mountain guide info;
radio; apps; weather reports
Activity
Participants Goal
Mountaineers “planning a mountaineering trip” Climbing a peak and
Guides being safe
Forecasters
Rules Division of labour
Must be up-to-date and accurate Mountaineers understand the data / info
Localised Guides provide up-to-date data
Snow conditions Meteorologists assess confidence
Heavily adapted from Yrjo Engetröm’s activity diagram
Saturday, 23 March 2013
25. UX design: insight, empathy and evaluation Vizbi 2013
Activity 4: activity diagram
Examples of goals you could consider...
Tools
...
Activity Goal
• Ski-ing
Participants • Going sailing
... “Planning a trip for • Camping with the kids
the coming weekend” • Hang-gliding
• ...
Division of labour
Rules ...
...
Heavily adapted from Yrjo Engetröm’s activity diagram
Saturday, 23 March 2013
26. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statement: what is this data visualisation
for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
27. UX design: insight, empathy and evaluation Vizbi 2013
Activity 5: mission statement (15 mins)
What is this visualisation for?
Noah Iliinsky (IBM) recommends writing a kind of “mission statement”
for your visualisation. In its basic form, this is a data-centric statement
but it can offer a useful global view of what your visualisation is for
Show the relationship between A and B
[and C...] across X [and Y] from m to n
Saturday, 23 March 2013
28. UX design: insight, empathy and evaluation Vizbi 2013
Activity 5: mission statement (15 mins)
Example: snow conditions at
Wachusett mountain ski area
“Show the relationship between snow fall and
ski conditions across the Watchusett ski area
from March 19 to March 24”
Saturday, 23 March 2013
29. UX design: insight, empathy and evaluation Vizbi 2013
Evaluation: do people “get it”?
Evaluate sketches and prototypes of visualisations early and often
Gather feedback from domain experts and your audience
Some ways to do this...
Critique
Speed dating sessions
Heuristics
Blur test
5/10 second test
Usability testing
Saturday, 23 March 2013
30. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statement: what is this data visualisation
for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
31. UX design: insight, empathy and evaluation Vizbi 2013
Activity 6: evaluation (15 mins)
A quick look at evaluating visualisations
Critique
Speed dating sessions
Heuristics
Blur test
5/10 second test
Usability testing
Saturday, 23 March 2013
32. UX design: insight, empathy and evaluation Vizbi 2013
Activity 6: evaluation (15 mins)
Blurring: what stands out?
Weather in Boston
Saturday, 23 March 2013
33. UX design: insight, empathy and evaluation Vizbi 2013
Activity 6: evaluation (15 mins)
Blurring: what stands out?
Weather at ski resort
Saturday, 23 March 2013
34. UX design: insight, empathy and evaluation Vizbi 2013
Activity 6: evaluation (15 mins)
Blurring: what stands out?
UK shipping forecast
Saturday, 23 March 2013
35. UX design: insight, empathy and evaluation Vizbi 2013
Activity 6: evaluation (15 mins)
5 second test: what do you remember?
Part of the boston.com weather page
Saturday, 23 March 2013
36. UX design: insight, empathy and evaluation Vizbi 2013
Activity 6: evaluation (15 mins)
10 second test: what do you remember?
NOAA National Weather Service homepage
Saturday, 23 March 2013
37. UX design: insight, empathy and evaluation Vizbi 2013
Testing design “hypotheses”
“Turning requirements into hypotheses”
These are human-centric statements
Test your visualisation design “hypotheses”
with “experiments”... this is evaluation
hypothesis
experiment
(evaluation)
http://www.flickr.com/photos/francisrowland/8281908252/
Saturday, 23 March 2013
38. UX design: insight, empathy and evaluation Vizbi 2013
Tutorial activities
Activity 1: describing the topic: breaking it down
(components, features, scenarios and people)
Activity 2: user research: interviewing each other
(learning about your audience)
Activity 3: user research: synthesising your findings
(e.g. nouns, verbs, adjectives; empathy map)
Activity 4: activity diagram: describing the activities people
in your audience perform
Activity 5: mission statement: what is this data visualisation
for? (data-centric)
Activity 6: evaluation: a quick look at evaluating your
visualisations
Activity 7: Hypotheses: re-framing your visualisation in
human- (or activity-) centric terms
Saturday, 23 March 2013
39. UX design: insight, empathy and evaluation Vizbi 2013
Activity 7: re-framing (15 mins)
Focusing our visualisations on the audience
and their activities
Look again at that your activity diagrams
Can you generate “hypotheses” to be tested?
We believe that If we...
creating this visualisation for these people Then...
will achieve Because...
this outcome
/ Jo Packer
we will consider this a success when
when something...
/ Jeff Gothelf
Saturday, 23 March 2013
40. UX design: insight, empathy and evaluation Vizbi 2013
Round-up
The important bits
✓ Data visualisation is about communication. This implies an audience
✓ Be curious. Talk to people - find the context of use for your visualisations
✓ Learn how your audience thinks and talks about your data
✓ Be prepared to dig: don’t take feedback at face value
✓ What goals do your audience have? What activities do they perform?
✓ Don’t leave “evaluation” until last
✓ Data visualisation is an iterative process; seek feedback [1]
✓ Don’t confuse iterative with incremental [2]
✓ Sketch, prototype, share and test. Ditch what doesn’t work
✓ Developing empathy will allow you to see your data from a new
perspective
[1] See the GA “Conversation with data visualization experts” http://bit.ly/XToBng
[2] Quoting @cyetain, on Twitter
Saturday, 23 March 2013
41. UX design: insight, empathy and evaluation Vizbi 2013
Q&A
How did it go?
Outstanding questions?
Was it what you expected?
Will it change any of the conversations
you have this week?
Saturday, 23 March 2013
42. UX design: insight, empathy and evaluation Vizbi 2013
Thank you
Keep in touch
Email: frowland@ebi.ac.uk
Web: flavors.me/francisrowland
Twitter: @francisrowland
THANKS
Andrew Cowley, Glen van Ginkel, Karyn Mégy and
Rui Wang for tutorial critique & feedback
Dan Willis, Noah Iliinsky, Andy Kirk, Andrew Travers,
Jo Packer and Jeff Gothelf for ideas & inspiration
Photo: whatknot (CC) / Flickr http://bit.ly/W7OeCG
Saturday, 23 March 2013
43. UX design: insight, empathy and evaluation Vizbi 2013
Suggested reading
READING
Data Visualization: a successful design process
Andy Kirk (ISBN: 1849693463)
Visualize This: The Flowing Data Guide to Design, Visualization, and Statistics
Nathan Yau (ISBN: 0470944889)
Design Study Methodology: Reflections from the Trenches and the Stacks
Michael Sedlmair, Miriah Meyer, and Tamara Munzner
(see http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/)
Designing data visualizations
Noah Iliinsky & Julie Steele (ISBN: 1449312284)
Lean UX: Applying Lean Principles to Improve User Experience
Jeff Gothelf & Josh Seiden
Interviewing for research
Andrew Travers (April 2013)
(see http://www.fivesimplesteps.com/products/interviewing-for-research)
Jakob Nielsen’s 10 usability heuristics for UI design
http://www.nngroup.com/articles/ten-usability-heuristics/
Ben Schneiderman’s 8 golden rules of interaction design
http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html
PRESENTATIONS
Minimum viable research (Jo Packer)
http://www.slideshare.net/badjuju/minimum-viable-research
From interview to insight (Andrew Travers)
https://speakerdeck.com/trvrs/from-interview-to-insights-interviewing-for-design-research
User research: the gentle art of not asking users what they want (Francis Rowland)
http://www.slideshare.net/francisrowlanduk/user-research-the-gentle-art-of-not-asking-users-what-they-want
Saturday, 23 March 2013