Designing Great Dashboards UXPA 2016

Lisa Battle
President and Principal Consultant
lisa@designforcontext.com
@design4context
Designing
Great Dashboards
for SaaS and Enterprise
Applications
UXPA 2016 Conference • 3 June 2016

@design4context Designing Great Dashboards UXPA 2016http://www.uxpa2016.org/sessionsurvey/67
Dashboards

What is a
dashboard?
(in modern enterprise and SaaS applications)

@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

What is NOT a
dashboard?

Is this a dashboard?
8

9

10

11

Does my
application need
a dashboard?

An application with only one task
13

An application to create things for my own use
14

Membership management system
15
Primary Navigation Tabs
Secondary Navigation Ribbon
Tertiary
(and beyond)
Navigation:
Actions
Search
Recent
Favorites
Blank
when the
user ﬁrst
logs in

Multi-user order entry & workﬂow system
16
Logo

Dashboard
patterns

Alerts

Alerts
Highest priority alerts
Second
priority
alerts
Other alerts
in context

Alerts
23

Alerts “To Do” Items

“To Do” Items

Alerts “To Do” Items Performance
Statistics

Performance Statistics

30

32
Type
A
Type
B

Performance
Statistics
Alerts “To Do” Items Current Status
Amount
2512%

Balances
34

Stats
35

Visual Indicators of Status
36

37

38

Current Status
Amount
2512%
Performance
Statistics
Alerts “To Do” Items Search

Search

SearchCurrent Status
Amount
2512%
Performance
Statistics
Task Starting
Points
Action

Task Starting Points

Task Starting
Points
Action
Amount
2512%
Performance
Statistics
Social
Components

Social Components

Social Components
My Team’s Progress Leader Board

Social
Components
Task Starting
Points
Action
Amount
2512%
Performance
Statistics
Recent Activity

Recent Activity

Recent Activity
54

Recent ActivitySocial
Components
Task Starting
Points
Action
Amount
2512%
Performance
Statistics
News, Events,
Announcements

News, Events, Announcements

News, Events,
Announcements
Recent ActivitySocial
Components
Task Starting
Points
Action
Amount
2512%
Performance
Statistics
Push Content
Headline

“Push” Content

SearchAlerts
Task Starting
Points
Action
Social
Components Recent Activity News, Events,
Announcements Push Content
Headline
“To Do” Items Performance
Statistics Current Status
Amount
2512%

How do we
ensure a good user
experience for
dashboards?

Answer meaningful
questions1

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?

User Research
66

Organizational Values
67

Exceptions
68

Provide relevant
role-based views2

Learner
Instructor

Instructor
72

Learner
73

Use visualization
metaphors that ﬁt
the type of data
3

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

Comparison of Quantity
76

Relative Proportions of Things
77

Progress Towards a Goal
78
39%

Trends Over Time
79

Activity Over Time
80

Percentages
81

Tables vs Graphs
82

Familiar Metaphors
83

Fads
84

Sensitive Information
85

Balance rollups vs
instance level data4

Instance-level data
87
12

Instance-level data Rollup
12

Instance-level data
Logo

Logo

Instance-level data
89

Rollups
90

Rollups
91

Prioritize and
eliminate
unnecessary
details
5

Prioritize
93

Hover or Expand
94

Asking “Why?”
95

Give users/clients
(some) control over
the display
6

User Conﬁguration
97

User Conﬁguration
98
Can
I
turn
oﬀ
the

Invoice
Summary?

User Conﬁguration
99

User Conﬁguration
100
Easy to create new dashboards
and widgets

Client Conﬁguration
101

Accessible and
responsive7

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,
Chaﬀee,
UXPA
2014

Give users control
Don’t:
•  Override pinch-zoom
•  Hard code fonts
•  Require timed responses
that users can’t extend

Responsive
104
What will people
really be doing on
mobile?
Understand the user
Keep it simple,
relevant and
timely.

Responsive
105

Mobile
106
Quick access to
timely, high
level
information
and alerts

Plan for scalability
and full lifecycle8

First-Time Use
108
No
forwards
found.
No
orders
found.

No Data
109

No Data
110

No Data
111

Evolve Over Time
112

Answer meaningful questions
Provide relevant role-based views
Use visualization metaphors that ﬁt 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

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

Designing Great Dashboards UXPA 2016

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Destaque

Destaque (20)

Semelhante a Designing Great Dashboards UXPA 2016

Semelhante a Designing Great Dashboards UXPA 2016 (20)

Mais de Design for Context

Mais de Design for Context (19)

Último

Último (20)

Designing Great Dashboards UXPA 2016