How do you provide meaningful insights that lead to action? When designing a UI, we need to consider what data to display, how to display it in a way that helps users interpret its meaning, and how best to indicate what can be done based on the data and its meaning. Good design can help users quickly grasp a situation, make better decisions, and take productive actions. We will provide a framework that describes a progressive evolution of data displays and actions, and share a broad range of examples, from consumer products to enterprise web applications, to discuss ways to design effective data displays and integrate actions.
Lisa Battle and Laura Chessman, Design for Context, 01-Sept-2021, UXPA.org, Baltimore. More at https://d4c.link/UXPA21action Video available from https://uxpa.org.
Guiding Users Towards Action: Empowering Decisions Through Effective Data Design
1. @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
5. @design4context Guiding Users Towards Action UXPA2021 5
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
6. @design4context Guiding Users Towards Action UXPA2021 6
LEVEL 4
LEVEL 3
LEVEL 2
LEVEL 1
A progression in data display
More meaningful interpretation
More specific, relevant actions
7. @design4context Guiding Users Towards Action UXPA2021 7
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
8. @design4context Guiding Users Towards Action UXPA2021 8
LEVEL 4
LEVEL 3
LEVEL 1
A (slightly) hypothetical example
Comparison with normal driving
speed, or target driving speed
Indicators of known problems
LEVEL 2
9. @design4context Guiding Users Towards Action UXPA2021 9
LEVEL 4
LEVEL 1
A (slightly) hypothetical example
Recommend alternate routes
User can tap to change the route
LEVEL 2
LEVEL 3
10. @design4context Guiding Users Towards Action UXPA2021 10
LEVEL 1
A (slightly) hypothetical example
LEVEL 2
LEVEL 3
LEVEL 4
https://commons.wikimedia.org/wiki/File:Google%27s_Lexus_RX_450h_Self-Driving_Car.jpg
11. @design4context Guiding Users Towards Action UXPA2021 11
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?
28. @design4context Guiding Users Towards Action UXPA2021
@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
29. @design4context Guiding Users Towards Action UXPA2021 29
LEVEL 4
LEVEL 3
LEVEL 1
Data Summaries
+ Interpretation
LEVEL
30. @design4context Guiding Users Towards Action UXPA2021 30
● 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
44. @design4context Guiding Users Towards Action UXPA2021
@design4context
UX DESIGN CONSIDERATIONS
● 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
45. @design4context Guiding Users Towards Action UXPA2021 45
LEVEL 4
LEVEL 2
LEVEL 1
Data Summaries
+ Recommend Actions
LEVEL
46. @design4context Guiding Users Towards Action UXPA2021 46
● 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
47. @design4context Guiding Users Towards Action UXPA2021
@design4context 47
LEVEL 3 EXAMPLE: SALES DATA
No recommended actions?
48. @design4context Guiding Users Towards Action UXPA2021
@design4context 48
LEVEL 3 EXAMPLE: WEATHER DATA
https://www.airnow.gov/?city=Oakland&state=CA&country=USA
LEVEL 3 EXAMPLE: WEATHER DATA
61. @design4context Guiding Users Towards Action UXPA2021
@design4context
UX DESIGN CONSIDERATIONS
● 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
67. @design4context Guiding Users Towards Action UXPA2021
@design4context 67
LEVEL 4 EXAMPLE: MARKETING DATA
The marketing system
automatically sends requests
for review, when the user
marks the job as done.
68. @design4context Guiding Users Towards Action UXPA2021
@design4context 68
LEVEL 4 EXAMPLE: SHIPPING LOGISTICS
The shipping system
automatically creates a change
to the planned loads to
compensate for a delay in
transit.
69. @design4context Guiding Users Towards Action UXPA2021
@design4context 69
The travel system books the
flight when it reaches the price
range the user specified,
following the user’s
preferences for luggage.
LEVEL 4 EXAMPLE: TRAVEL DATA
70. @design4context Guiding Users Towards Action UXPA2021
@design4context 70
LEVEL 4 EXAMPLE: SECURITY DATA
The folders containing risky
data are auto quarantined. An
admin can look there at their
convenience to decide what to
do with the contents.
71. @design4context Guiding Users Towards Action UXPA2021
@design4context 71
LEVEL 4 EXAMPLE: STOCK DATA
The trading system buys or
sells based on a price
threshold or other criteria the
user specified
72. @design4context Guiding Users Towards Action UXPA2021
@design4context
UX DESIGN CONSIDERATIONS
● 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
73. @design4context Guiding Users Towards Action UXPA2021 73
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