Many SaaS and enterprise applications today provide dashboards giving users an overview of how their business is performing and summarizing the work that needs to be done. Dashboards present a great opportunity to improve user experience by providing quick answers to users’ common questions, but they are also full of potential pitfalls for design. As UX design consultants, we are frequently asked to design (or redesign) dashboards for applications, and through that experience we have established best practices for dashboard design. We will discuss our approach to ensuring a good user experience for dashboards, focusing on 9 principles of UX design that are particularly relevant and illustrating them with real project examples.
Designing Great Dashboards for SaaS and Enterprise Applications
1. Lisa Battle
President and Principal Consultant
lisa@designforcontext.com
@design4context
Designing
Great Dashboards
for SaaS and Enterprise
Applications
UXPA 2016 Conference • 3 June 2016
5. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
What is a
dashboard?
(in modern enterprise and SaaS applications)
6. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 6
A starting
point for
important
tasks
My
“To Do”
list
Problems I
need to know
about
How am I
doing?
What’s
going on?
Trends
in my
business
Recent
activity
21. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Alerts
Highest priority alerts
Second
priority
alerts
Other alerts
in context
62. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
SearchAlerts
Task Starting
Points
Action
Social
Components Recent Activity News, Events,
Announcements Push Content
Headline
“To Do” Items Performance
Statistics Current Status
Amount
2512%
63. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
How do we
ensure a good user
experience for
dashboards?
65. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 65
Who is the user?
What are they responsible for?
What is most important for them to
know?
What do they need to take action
on?
What will cause a problem for them
if it does not go well?
74. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Use visualization
metaphors that fit
the type of data
3
75. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Metaphors
75
Place
in
Space,
AKA
How
to
Create
a
Conceptual
Model
Stephen
Anderson,
IA
Summit
2016
presenta=on
h>p://www.slideshare.net/stephenpa/place-‐in-‐space-‐aka-‐how-‐to-‐design-‐a-‐concept-‐model
86. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Balance rollups vs
instance level data4
87. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Instance-level data
87
12
Instance-level data Rollup
12
98. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
User Configuration
98
Can
I
turn
off
the
Invoice
Summary?
100. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
User Configuration
100
Easy to create new dashboards
and widgets
103. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Accessibility
103
Readability
• Font size
• Redundant cues – don’t rely on color alone
• Contrast
Add text equivalents
• For all that isn’t text
• Don’t rely on images or styles alone
Support all input methods
• Keyboard, touch, speech
• Make content order logical
Use proper semantic structure
• Makes navigating easier
• Communicates what each item is, and its state
From:
Red
Alert!
Communica=ng
status
through
great
UX,
graphics
and
accessibility.
Ba>le,
Bergel,
Chaffee,
UXPA
2014
Give users control
Don’t:
• Override pinch-zoom
• Hard code fonts
• Require timed responses
that users can’t extend
104. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Responsive
104
What will people
really be doing on
mobile?
Understand the user
Keep it simple,
relevant and
timely.
106. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Mobile
106
Quick access to
timely, high
level
information
and alerts
107. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Plan for scalability
and full lifecycle8
108. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
First-Time Use
108
No
forwards
found.
No
orders
found.
113. @design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67 113
Answer meaningful questions
Provide relevant role-based views
Use visualization metaphors that fit the data
Balance rollups vs instance level data
Prioritize and eliminate unnecessary details
Give users some control over the display
Accessible, mobile and responsive
Plan for scalability and full lifecycle
1
2
3
4
5
6
7
8
114. Lisa Battle
President and Principal Consultant
lisa@designforcontext.com
@design4context
Presentation is on Slideshare – Go to www.designforcontext.com/insights
Designing
Great Dashboards
for SaaS and Enterprise
Applications
UXPA 2016 Conference • 3 June 2016