VIZBI 2013 - UX design tutorial

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


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)



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



Ice-breaker

UX designer
F rancis exploring problems

sketching

playing the mandolin



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



...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.”



The theme for today...
WEATHER DATA

Snow in Cambridge MA / evanzxcv (Flickr)


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/



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



Tutorial activities
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



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



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



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



Be prepared to dig...

“WHY?”
“Can you tell me more about that?”
“When... ?” “How often... ?”
“Why is that important to you?”



Tutorial activities
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



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



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




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




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



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



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



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



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



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



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”



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



Activity 6: evaluation (15 mins)

A quick look at evaluating visualisations

Critique
Speed dating sessions
Heuristics
Blur test
5/10 second test
Usability testing




Blurring: what stands out?

Weather in Boston




Weather at ski resort




UK shipping forecast




5 second test: what do you remember?
Part of the boston.com weather page




10 second test: what do you remember?
NOAA National Weather Service homepage



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/



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



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



Q&A
How did it go?

Outstanding questions?

Was it what you expected?

Will it change any of the conversations
you have this week?



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



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


VIZBI 2013 - UX design tutorial

More Related Content

Similar to VIZBI 2013 - UX design tutorial (20)

More from Francis Rowland (20)

VIZBI 2013 - UX design tutorial