1. 24/04/14 pag. 1
Information visualization lecture 7
information dashboards
Katrien Verbert
Department of Computer Science
Faculty of Science
Vrije Universiteit Brussel
katrien.verbert@vub.ac.be
2. 24/04/14 pag. 2
Most information dashboards that are used in business today fall far
short of their potential (Stephen Few)
Root of the problem: poor visual design
17. 24/04/14 pag. 17
What is a dashboard?
A dashboard is a visual display of the most important
information needed to achieve one or more objectives;
consolidated and arranged on a single screen so the information
can be monitored at a glance.
Stephen
Few,
"Dashboard
Confusion,"
Intelligent
Enterprise,
March
20,
2004.
18. 24/04/14 pag. 18
Characteristics
• Dashboards are visual displays.
• Dashboards display information needed to achieve specific objectives.
• A dashboard fits on a single computer screen.
• Dashboards are used to monitor information at a glance.
• Dashboards have small, concise, clear, intuitive display mechanisms.
• Dashboards are customized.
19. 24/04/14 pag. 19
Categorizing dashboards
Variable
Values
Role
Strategic
OperaConal
AnalyCcal
Type
of
data
QuanCtaCve
Non-‐quanCtaCve
Data
domain
Sales
Finance
MarkeCng
Manufacturing
Human
resources
Learning
…
Type
of
measures
Balanced
score
cards
Six
sigma
Non-‐performance
Variable
Values
Span
of
data
Enterprise
wide
Departmental
Individual
Update
frequency
Monthly
Weekly
Daily
Hourly
Real-‐Cme
InteracCvity
StaCc
display
InteracCve
display
Mechanisms
of
display
Primarily
graphical
Primarily
text
IntegraCon
of
graphics
and
text
Portal
funcConality
Conduit
to
addiConal
data
No
portal
funcConality
22. 24/04/14 pag. 22
Fragmenting data into separate screens
Information that appears on dashboards is often fragmented in
one of two ways:
• Separated into discrete screens to which one must navigate
• Separated into different instances of a single screen that are
accessed through some form of interaction
23. 24/04/14 pag. 23
This
dashboard
fragments
the
data
in
a
way
that
undermines
the
viewer's
ability
to
see
meaningful
relaConships.
24. 24/04/14 pag. 24
This
dashboard
requires
viewers
to
click
on
a
desired
product
and
view
informaCon
for
only
one
product
at
a
Cme.
38. 24/04/14 pag. 38
Other types of graphs can be equally ineffective
This
graph
uses
the
two-‐dimensional
area
of
circles
to
encode
their
values,
which
needlessly
obscures
the
data
Assuming
that
operaCng
costs
of
February
equal
$10.000,
what
is
the
revenue
value?
$10.000
39. 24/04/14 pag. 39
This bar graph does a good job of displaying a time series
of actual versus budgeted revenue values
40. 24/04/14 pag. 40
This radar graph obscures the straightforward
data that it's trying to convey.
41. 24/04/14 pag. 41
This bar graph effectively compares actual to
budgeted revenue data
42. 24/04/14 pag. 42
This display uselessly encodes quantitative values
on a map of the United States
43. 24/04/14 pag. 43
This table provides a more appropriate display of the
regional revenue data
48. 24/04/14 pag. 48
Issues
• A legend was used to label and assign values to the slices of
the pie. This forces our eyes to bounce back and forth
between the graph and the legend to glean meaning, which is
a waste of time and effort when the slices could have been
labeled directly.
• The order of the slices and the corresponding labels appears
random. Ordering them by size would have provided useful
information that could have been assimilated instantly.
• The bright colors of the pie slices produce sensory overkill.
Bright colors ought to be reserved for specific data that
should stand out from the rest.
57. 24/04/14 pag. 57
• The most important data ought to be prominent.
• Data that require immediate attention ought to stand out.
• Data that should be compared ought to be arranged and visually
designed to encourage comparisons.
70. 24/04/14 pag. 70
Strategies to create effective dashboards
• Characteristics of a well designed dashboard
• Reducing the non data pixels
• Enhancing the data pixels
• Designing dashboards for usability
71. 24/04/14 pag. 71
Characteristics of a well designed dashboard
The fundamental challenge of dashboard design is to effectively display a great deal of often disparate
data in a small amount of space.
73. 24/04/14 pag. 73
Well-designed dashboards deliver information
that is …
• exceptionally well organized.
• condensed, primarily in the form of summaries and exceptions
• specific to and customized for the dashboard's audience and objectives
• displayed using concise and often small media that communicate the
data and its message in the clearest and most direct way possible
74. 24/04/14 pag. 74
Condensing information
• Summarization
– Represent
a
set
of
numbers
(oen
a
large
set)
as
a
single
number.
– The
two
most
common
summaries
are
sums
and
averages.
• Exception
– Why
make
someone
wade
through
hundreds
of
values
when
only
one
or
two
require
a^enCon?
– We
call
these
criCcal
values
excepCons.
79. 24/04/14 pag. 79
Eliminate all unnecessary non-data pixels
Unnecessary borders around sections of data fragment the display.
80. 24/04/14 pag. 80
Eliminate all unnecessary non-data pixels
Fill colors to separate sections of the display are unnecessary
81. 24/04/14 pag. 81
Eliminate all unnecessary non-data pixels
Gradients of color both on the bars of this graph and across the entire background add distracting non-
data pixels.
82. 24/04/14 pag. 82
Eliminate all unnecessary non-data pixels
Grid lines in graphs are rarely useful. They are one of the most prevalent forms of distracting non-data
pixels found in dashboards.
83. 24/04/14 pag. 83
Eliminate all unnecessary non-data pixels
Grid lines in tables can make otherwise simple displays difficult to look at.
84. 24/04/14 pag. 84
Eliminate all unnecessary non-data pixels
Fill colors should be used to delineate rows in a table only when this is necessary to help viewers' eyes
track across the rows.
85. 24/04/14 pag. 85
Eliminate all unnecessary non-data pixels
A
complete
border
around
the
data
region
of
a
graph
should
be
avoided
when
a
single
set
of
axes
would
adequately
define
the
space.
86. 24/04/14 pag. 86
Eliminate all unnecessary non-data pixels
3D should always be avoided when the added dimension of depth doesn't represent actual data.
87. 24/04/14 pag. 87
Eliminate all unnecessary non-data pixels
This
dashboard
is
filled
with
visual
components
and
a^ributes
that
serve
the
sole
purpose
of
simulaCng
real
physical
objects.
88. 24/04/14 pag. 88
De-emphasize and regularize the non-data
pixels that remain
Axis lines used to define the data region of a graph are almost always useful, but they can be
muted, like those on the right.
89. 24/04/14 pag. 89
De-emphasize and regularize the non-data
pixels that remain
Lines
can
be
used
effecCvely
to
delineate
adjacent
secCons
of
the
display
from
one
another,
but
the
weight
of
these
lines
can
be
kept
to
a
minimum.
91. 24/04/14 pag. 91
De-emphasize and regularize the non-data
pixels that remain
Grid lines and fill colors can be used in tables to clearly distinguish some columns from others, but this
should be done in the muted manner seen below rather than the heavy-handed manner seen above.
92. 24/04/14 pag. 92
De-emphasize and regularize the non-data
pixels that remain
Fill colors can be used to delineate rows in a table when necessary to help viewers' eyes scan across the
rows, but this should always be done in the muted manner seen below rather than the visually weighty
manner seen above.
93. 24/04/14 pag. 93
De-emphasize and regularize the non-data
pixels that remain
This
dashboard
gives
navigaConal
and
data
selecCon
controls
far
more
dominance
and
space
than
they
deserve.
96. 24/04/14 pag. 96
Highlight the most important data pixels
• The most important information can be divided into two
categories:
1. InformaCon
that
is
always
important
2. InformaCon
that
is
only
important
at
the
moment
• Second category requires dynamic means of emphasis
97. 24/04/14 pag. 97
Highlight the most important data pixels
Different
degrees
of
visual
emphasis
are
associated
with
different
regions
of
a
dashboard.
98. Highlight the most important data pixels
The most valuable real estate on this dashboard is dedicated to a company logo and
meaningless decoration.
99. 24/04/14 pag. 99
Highlight the most important data pixels
Simple symbols can be used along with varying color intensities to dynamically highlight data.
100. 24/04/14 pag. 100
Designing dashboards for usability
Organize
the
informaCon
to
support
its
meaning
and
use
Make
the
viewing
experience
aestheCcally
pleasing
Design
for
use
as
a
launch
pad
101. 24/04/14 pag. 101
Organize information to support meaning and use
• Organize groups according to business functions, entities, and use.
• Co-locate items that belong to the same group.
• Delineate groups using the least visible means.
• Support meaningful comparisons.
• Discourage meaningless comparisons.
102. 24/04/14 pag. 102
Delineate groups using the least visible means
The
four
tables
on
the
previous
slide
have
been
separated
effecCvely
using
white
space.
103. 24/04/14 pag. 103
Delineate groups using the least visible means
four
tables
have
been
separated
using
light
borders
104. 24/04/14 pag. 104
Support meaningful comparisons
• You can encourage meaningful comparisons by:
– Combining
items
in
a
single
table
or
graph
(if
appropriate)
– Placing
items
close
to
one
another
– Linking
items
in
different
groups
using
a
common
color
– Including
comparaCve
values
(for
example,
raCos,
percentages,
or
actual
variances)
whenever
useful
for
clarity
and
efficiency
108. 24/04/14 pag. 108
Discourage meaningless comparisons
• You can discourage meaningless comparisons by
– separaCng
items
from
one
another
spaCally
(if
appropriate).
– using
different
colors.
109. 24/04/14 pag. 109
Designing dashboards for usability
Organize
the
informaCon
to
support
its
meaning
and
use
Make
the
viewing
experience
aestheCcally
pleasing
Design
for
use
as
a
launch
pad
110.
111. 24/04/14 pag. 111
Choose colors appropriately
Avoid
the
use
of
bright
colors
except
to
highlight
parCcular
data.
SCck
with
more
subdued
colors
for
most
of
what's
displayed.
113. 24/04/14 pag. 113
Designing dashboards for usability
Organize
the
informaCon
to
support
its
meaning
and
use
Make
the
viewing
experience
aestheCcally
pleasing
Design
for
use
as
a
launch
pad
114. 24/04/14 pag. 114
Design for use as a launch pad
• Dashboards should almost always be designed for interaction.
The most common types of dashboard interaction are:
– Drilling
down
into
the
details
– Slicing
the
data
to
narrow
the
field
of
focus
116. A sample sales dashboard that puts into
practice the principles
117. 24/04/14 pag. 117
Comments example 1
• Color has been used sparingly.
• The prime real estate on the screen has been used for the most
important data.
• Small, concise display media have been used to support the display
of a dense set of data in a small amount of space.
• Some measures have been presented both graphically and as text.
• The display of quarter-to-date revenue per region combines the
actual and pipeline values in the form of stacked bars.
• White space alone has been used to delineate and group data.
• The dashboard has not been cluttered with instructions and
descriptions that will seldom be needed.
118.
119. 24/04/14 pag. 119
Comments example 2
• Relies almost entirely on text to communicate, using visual means only in the
form of green, light red, and vibrant red hues.
– Dashboards
are
meant
to
provide
immediate
insight
– Text
requires
reading
a
serial
process
that
is
much
slower
than
the
parallel
processing
of
a
visually
oriented
dashboard
that
makes
good
use
of
the
pre-‐a^enCve
a^ributes.
• To compare actual measures to their targets, mental math is required.
• Numbers have been center-justified, rather than right-justified. This makes
them harder to compare when scanning up and down a column.
• All four quarters of the current year have been given equal emphasis.
– A
sales
manager
would
have
greater
interest
in
the
current
quarter.
– The
design
of
the
dashboard
should
have
focused
on
the
current
quarter
and
comparaCvely
reduced
emphasis
on
the
other
quarters.
• The subdued shade of red and the equally subdued shade of green might not
be distinguishable for colorblind people.
• The numbers that ought to stand out most are the hardest to read against
the dark red background.
120.
121. 24/04/14 pag. 121
Comments example 3
• The grid lines that appear in the tables are not needed at all. Even if they
were needed, they should have been muted visually.
• The grid lines that appear in the graphs are also unnecessary. They distract
from the data. Especially in the context of a dashboard, you can't afford to
include any unnecessary visual content.
• The drop shadows on the bars and lines in two of the graphs and on the pie
chart are visual fluff. These elements serve only to distract.
• All of the numbers in the tables have been expressed as percentages. If those
who use this dashboard only care about performance relative to targets, this
is fine, but it is likely that they will want a sense of the actual amounts as
well.
• The pie chart is not the most effective display medium. Assuming that it is
worthwhile to display how the 90% probability portion of the revenue
pipeline is distributed among the regions, a bar graph with the regions in
ranked order would have communicated this information more effectively.
• Overall, this dashboard exhibits too many bright colors. The dashboard as a
whole is visually overwhelming and fails to feature the most important data.
• There is no comparison of trends in the revenue history. The 12-month
revenue history shown in the line graph is useful, but it would also have
been useful to see this history per region and per product, to allow the
comparison of trends.
122.
123. 24/04/14 pag. 123
Comments example 4
• The display media were not well chosen.
– The
circular
representaCons
of
Cme-‐series
data
using
hues
to
encode
states
of
performance
(good,
saCsfactory,
and
poor)
are
clever
– but
for
the
purpose
of
showing
history,
these
are
not
as
intuiCve
or
informaCve
as
a
linear
display,
such
as
a
line
graph.
• None of the measures that appear on the left side of the
dashboard is revealed beyond its performance state. Knowing
the actual revenue amount and more about how it compares to
the target would certainly be useful to a sales manager.
• The circular display mechanisms treat all periods of time equally.
There is no emphasis on the current quarter.
• Gradient fill colors in the bar graphs add meaningless visual
interest. They also influence perception of the values encoded by
the bars in subtle ways. Bars that extend into the darker sections
of the gradient appear slightly different from those that extend
only into the lighter sections. Dashboard designers should be
conscious of even these subtle effects and avoid them.
