Guiding Users Towards Action: Empowering Decisions Through Effective Data Design

@design4context Guiding Users Towards Action UXPA2021 1
Guiding Users Towards Action:
Empowering Decisions
Through Effective Data Design
UXPA 2021 • September 1, 2021
! #UXPA2021 @design4context
slides will be posted at: www.designforcontext.com/insights
Lisa Battle
President & Principal Consultant
lisa@designforcontext.com
Laura Chessman
Senior UX Designer
laura@designforcontext.com

Really?
I can fix that.
Data Action

Huh? Hmm…
Data Inaction

As UX designers,
what can we do to make
data actionable?

What do they need to know in order to be successful?
What decisions do they need the data to inform?
What is most critical for them to see at a glance?
What potential problems should be immediately apparent if they arise?
What actions might they need to take?
What will they feel good about accomplishing?
Understanding the user’s perspective

LEVEL 4
LEVEL 3
LEVEL 2
LEVEL 1
A progression in data display
More meaningful interpretation
More specific, relevant actions

LEVEL 4
LEVEL 3
LEVEL 2
LEVEL 1
A (slightly) hypothetical example
A table listing roads and current
driving speeds
+ show the speed in a map view

LEVEL 4
LEVEL 3
LEVEL 1
Comparison with normal driving
speed, or target driving speed
Indicators of known problems
LEVEL 2

LEVEL 4
LEVEL 1
Recommend alternate routes
User can tap to change the route
LEVEL 2
LEVEL 3

LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
https://commons.wikimedia.org/wiki/File:Google%27s_Lexus_RX_450h_Self-Driving_Car.jpg

LEVEL 4
LEVEL 3
LEVEL 2
LEVEL 1
What are the best practices for my
current level?
Are there opportunities to move to the
next level?

LEVEL 4
LEVEL 3
LEVEL 2
Data Summaries
LEVEL

Just the data, and basic tools to analyze it
13

@design4context Guiding Users Towards Action UXPA2021
@design4context 14
LEVEL 1 EXAMPLE: SALES DATA

@design4context 15

@design4context 16

@design4context 17

@design4context 18
LEVEL 1 EXAMPLE: BUDGET DATA

@design4context 19
LEVEL 1 EXAMPLE: FILTERS

@design4context 20
https://www.localconditions.com/weather-columbia-maryland/21044/forecast.php
LEVEL 1 EXAMPLE: WEATHER DATA
Air quality
50
Air quality
64

@design4context 21
https://www.google.com/search?q=maryland+coronavirus&oq=maryland+coronavirus&aqs=chrome
LEVEL 1 EXAMPLE: COVID DATA

@design4context 22

@design4context 23

@design4context 24
Anonymized
LEVEL 1 EXAMPLE: SHIPPING LOGISTICS

@design4context 25

@design4context 26
LEVEL 1 EXAMPLE: STOCK DATA
Tradingview

@design4context 27
LEVEL 1 EXAMPLE: SECURITY DATA

@design4context
UX DESIGN CONSIDERATIONS
● Tables with ability to sort, link to more details, customize columns.
● Useful ways to summarize data: totals, averages.
● Signposting the time period and origin of the data.
● Visualizing with charts, graphs, timelines, and maps to help the user
understand the data.
● Let users manipulate the data by “slicing” it in different ways, filtering,
and changing their display.
28

LEVEL 4
LEVEL 3
LEVEL 1
Data Summaries
+ Interpretation
LEVEL

● Compare with …
● a generic goal, or the user’s goal
● an industry average, or the average for companies of this type, or the
user’s average
● yesterday, last month, last year, or this same month last year
● the user’s friends, or competitors
● Categorize
● a degree of success
● a degree of severity
● a rating
A meaningful comparison
30

@design4context 31

@design4context
https://www.airnow.gov/?city=Columbia&state=MD&country=USA 32

@design4context
https://www.airnow.gov/?city=Oakland&state=CA&country=USA 33

@design4context 34
New York Times

@design4context 35
LEVEL 2 EXAMPLE: HEALTH TRACKER

@design4context 36
LEVEL 2 EXAMPLE: REAL ESTATE DATA

@design4context 37
LEVEL 2 EXAMPLE: MARKETING DATA

@design4context 38

@design4context 39
LEVEL 2 EXAMPLE: TRAVEL DATA

@design4context 40

@design4context 41

@design4context 42

@design4context 43

@design4context
● Choose meaningful points of comparison.
● Show progress against a generic goal, a competitor, or a user’s own
goal.
● Display a trend indicator using a sparkline, arrow, etc.
● Highlight anomalies, outliers, and exception situations.
● Draw users’ attention to patterns.
● Assign a qualitative value, rating, or category based on the data.
44

LEVEL 4
LEVEL 2
LEVEL 1
Data Summaries
+ Recommend Actions
LEVEL

● possible actions to take
● a recommended action
● access to the recommended action, where possible
● reasons for the recommendation
What can I do about it?
46

@design4context 47
No recommended actions?

@design4context 48
https://www.airnow.gov/?city=Oakland&state=CA&country=USA

@design4context 49

@design4context 50

@design4context 51

@design4context 52

@design4context 53

@design4context 54
Kayak

@design4context 55
Kayak

@design4context 56

@design4context 57

@design4context 58

@design4context 59
Tradingview

@design4context 60
LEVEL 3 EXAMPLE: BUDGET DATA

@design4context
● Display recommended actions in context with the data table or
visualization to ensure that they are not overlooked.
● Choose appropriate UI controls, such as buttons, links, expansion
areas, and overlays, to initiate action within the system, and
notifications via email and text for actions outside the system.
● Make recommended actions conditional based on status or other
factors.
● Allow users to take a non-recommended action.
● Explain why the recommendations were made.
61

LEVEL 3
LEVEL 2
LEVEL 1
Automate actions
+ Inform users
LEVEL

@design4context 63
Can’t automate?

@design4context 64
Can’t automate?

@design4context
New York Times
65
Can’t automate?

@design4context 66

@design4context 67
The marketing system
automatically sends requests
for review, when the user
marks the job as done.

@design4context 68
The shipping system
automatically creates a change
to the planned loads to
compensate for a delay in
transit.

@design4context 69
The travel system books the
flight when it reaches the price
range the user specified,
following the user’s
preferences for luggage.

@design4context 70
The folders containing risky
data are auto quarantined. An
admin can look there at their
convenience to decide what to
do with the contents.

@design4context 71
The trading system buys or
sells based on a price
threshold or other criteria the
user specified

@design4context
● Weigh the risks and benefits of automated actions.
● Allow the user to try what if scenarios.
● Give users an escape hatch.
● Communicate with the user about automated actions.
72

Guiding Users Towards Action:
Empowering Decisions
Through Effective Data Design
UXPA 2021 • September 1, 2021
! #UXPA2021 @design4context
slides will be posted at: www.designforcontext.com/insights
Lisa Battle
President & Principal Consultant
lisa@designforcontext.com
Laura Chessman
Senior UX Designer
laura@designforcontext.com

Guiding Users Towards Action: Empowering Decisions Through Effective Data Design

More Related Content

What's hot

Similar to Guiding Users Towards Action: Empowering Decisions Through Effective Data Design

More from Design for Context

Recently uploaded

Guiding Users Towards Action: Empowering Decisions Through Effective Data Design