Art and Science of Dashboard Design

The Art and Science of
Dashboard Design
Lee Lukehart
Chief Data Visualist
SavvyData

Why am *I* here?
§ data geek, interface & UX designer
§ trainer & curriculum author
§ dataviz enthusiast

Assumptions about You
§ Not a formally trained graphic designer
§ Do UI/UX design; perhaps also a DBA
§ Work for management vs. marketing*
*If the latter, see How to Lie with Charts, How to Lie with Statistics, etc.

This session…
will cover:
A bit of theory
Common “gotchas”
Useful resources
will not cover:
Schema design
Technique demos
Speciﬁc tools

First, a survey:
Do you…
…design for the desktop, mobile devices, or both?
…pull data locally, remotely from servers, or both?
…work with Big Data?
…have to satisfy multiple types of users?

First, a survey:
Do you…
…design for the desktop, mobile devices, or both?
…pull data locally, remotely from servers, or both?
…work with Big Data?
…have to satisfy multiple types of users?
Hmmm…

“I’ll pause
for a moment
so you can let
this information
sink in.”
New Yorker Magazine, 12/6/2010

The Visualization Landscape
http://www.visual-literacy.org/periodic_table/periodic_table.html

Visual is our dominant modality
§ We evolved biologically to rely primarily on sight
§ >50% of the brain is used for visual processing
§ We use visual metaphors to understand our world
§ Visualization is everywhere we look! (pun intended)

Common Data Graph Types
§ Bar
§ Horizontal Bar
§ Line
§ Area
§ Pie

Composite Data Graph Types
§ Bullet
§ Sparkline
§ Horizon
§ Gauge

Purpose of Data Graphs
§ Discern relationships between data points or series
§ Identify patterns, trends and exceptions
§ Evoke a story about the data
§ Engage » Inform » Induce Action/Decision
To be compelling displays of meaningful and unambiguous data

Purpose of Dashboards
“…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, Perceptual Edge

What is the objective?
1960 Plymouth vs. 1960 Corvette

2011 Tesla Model S

2008 Lamborghini Reventón

Purposes of Dashboards
§ Measure performance / conditions
§ Gauge progress toward business goals (KPIs)
§ Align execution with strategy
§ Engage » Inform/Indicate » Alert » Induce Action
To be actionable displays of meaningful and unambiguous data

Performance Dashboards, Wayne Eckerson
drilldowndrilldown

Strategic

Tactical

Operations
“The 3 Threes”

Strategic Dashboard
§ Monitor trends
§ NOT real-time

Tactical Dashboard
§ Manage performance against preset
target
§ Analyze — link results to actions
§ Discover problems & opportunities

Tactical Dashboard
§ Measure performance
§ Gauge progress toward business goals (KPIs)

Operations Dashboard
§ Measure performance
§ Detailed insights / respond as needed
§ Real-time (or almost so)

Potential Problems
§ Can be Confusing
§ Can be Boring
§ Can be Inaccurate and Misleading
§ Can be Ineffective and Worthless (or worse)

When I am working on a problem,
I never think about beauty.
But when I have finished
if the solution is not beautiful,
I know it is wrong.
– Buckminster Fuller
❞
❝

Effective Data Visualization
1.  Know when not to (a table or list may be preferable)
2.  Know your data (source, scope… clean & complete?)
3.  Consider your audience (their needs & familiarity)
4.  Determine chart’s message or focus
5.  Select an effective chart type (to best convey message)
6.  Construct data transforms (aggregate/augment, as needed)
7.  Conduct pre-ﬂight checklist (for QA & K.I.S.S. testing)

1.  Know when not to use graphs
52%*
of 2010 class is female
*dataset 98% complete
the chart in this example is a waste of space

2.  Know your data
§ Source
§ History
§ Scope & Scale
§ Hygiene
§ Aggregated
§ Atomic
Avoid GIGO (Garbage In, Garbage Out)
— How was data created/collected/imported; is it reliable?
Should include on chart for credibility? What is unit of measure?
— Have any parts been adjusted or converted? Have key attributes changed
(exchange rates, inﬂation-adjusted, remapped sales territories)?
— What are min/max, density, precision? Any collection shortfalls? Enough
data to be meaningful? Value extremes that complicate display?
— How clean, consistent, and normalized is it?
— Any data already totaled or averaged; trend line calc or data mart output?
— Sufﬁcient granularity to change sort for different types of summaries?

3.  Consider your audience
§ Appropriate prior subject knowledge
§ Expertise level: novice, general, or expert
§ Internal or external
§ Whether already motivated to view your chart
§ Explicit and unstated audience expectations
§ Presentation environment and conditions
Prepare for communication

4.  Determine data’s message & chart’s focus
§ Ranking comparison
§ Categorical/Nominal comparison
§ Time series, Ordered intervals
§ Proportion of the Whole (contribution/composition)
§ Variance/Deviation (to goal, historical or other benchmark)
§ Distribution (histograms, etc.)
§ Correlation (scatter plots, bubble charts, etc.)
§ GeoSpatial (maps with data overlays, linked to location)
Eight types of relationships between data

5.  Select best chart type for the message
§ Bar, Vertical
§ Bar, Horizontal
§ Line
§ Area
§ Pie
To rank items, show counts, magnitudes, discrete
frequency distributions; to compare different
categories or one category under varied conditions;
Horizontal especially suited for displaying many
categories or when category labels are lengthy
To show contiguous change and other functional
relationships over time; good for multiple data series;
slope of line between points conveys “shape”;
Area charts additionally suggest cumulative values
To represent proportions relative to the whole;
inherently conveys composition and contribution

5.  Select best chart type for the message
Dozens of guides are available; see resource page (at end) for examples and links.
Graph Selection Matrix
Time Series Ranking Part-to-Whole Deviation Distribution Correlation Nominal Comparison
Values display how some-
thing changed through
time (yearly, monthly, etc.)
Values are ordered
by size (descending
or ascending)
Values represent
parts (ratios) of a
whole (for example,
regional portions of
total sales)
The difference between
two sets of values (for
example, the variance
between actual and
budgeted expenses)
Counts of values per interval
from lowest to highest (for
example, counts of people in
an organization by age
intervals of 10 years each)
Comparison of two paired
sets of values (for example,
the heights and weights of
several people) to deter-
mine if there is a relation-
ship between them
A simple comparison of
values for a set of unor-
dered items (for example,
products or regions)
Bar Graph
(vertical)
Yes (to feature individual
values and support their
comparisons; quantitative
scale must begin at zero)
Yes (quantitative
scale must begin at
zero)
Yes Yes (quantitative scale
must begin at zero)
must begin at zero)
Bar Graph
(horizontal)
Yes (quantitative
scale must begin at
zero)
must begin at zero)
must begin at zero)
Line Graph
Yes (to feature overall
trends and patterns and
support their comparisons)
Yes (only when also
featuring a time series
or single distribution)
Yes (to feature the overall
shape of the distribution)
Dot Plot
(vertical)
Yes (when you do not
have a value for every
interval of time)
Yes Yes
Dot Plot
(horizontal)
Yes Yes
Strip Plot
(single)
Yes
Strip Plot
(multiple)
Yes (only when also fea-
turing distributions)
Yes (when comparing multiple
distributions and you want
Scatter Plot
Yes
Box Plot
(vertical)
Yes (only when also fea-
turing distributions)
distributions)
Box Plot
(horizontal)
distributions)
Graph
R
elationship
perceptual
edge
Copyright © Stephen Few 2009
(quantitative
scale must begin at
zero)
(quantitative
scale must begin at
zero)
www.PerceptualEdge.com (Derived from the book Show Me the Numbers, Stephen Few, Analytics Press, 2004)
to see each value)
(when you want to see
each value)
along a quantitative scale
(quantitative scale must
begin at zero)
(quantitative scale must
begin at zero)

6.  Construct data transforms as needed
§ Aggregate: summarized total, count, average, running average
§ Segment: derive subset attributes (e.g. month name, price tier)
§ Factor: inﬂation-adjusted, year-to-year change, time-shifting
§ Augment: extend data with truly new data (via WSDLs, etc.)
§ Find: full year, by category, include/omit “others”
§ Organize/Sort: for display, e.g. multiple years by month
Derive new data to tell the real story

§ Human factors
§ Data integrity
§ Data sorting
§ Scaling / precision
§ Data labeling
7.  Conduct pre-ﬂight checklist
Inspect for top ten common design errors:
§ Chart type choice
§ Single über-chart
§ Chart title & legend
§ Visual formatting
§  ChartJunk*

§ Human factors
§ Data integrity
§ Data sorting
§ Scaling / precision
§ Data labeling
7.  Conduct pre-ﬂight checklist
Inspect for top ten common design errors:
§ Chart type choice
§ Single über-chart
§ Chart titling
§ Visual formatting
§  ChartJunk*

Human Factors in Visual Perception
§ Optical perception issues
§ Cognitive illusions
§ Automatic (pre-attentive) behaviors
§ Cultural biases

Optical Perception Issues
8% of population is
red-green color-blind
Simulation: What the color-blind see…
(An Ishihara plate: What do you see?)
Full-range
Color Vision
Can see the
number “74”
Protan
Subtype
Reads the
number as “21”
Deutan
Subtype
Cannot read
any number
Normal
eyesight
88%
Other
3%
Deuteranomaly
5%
Protanomaly
1%
Protanopia
1%
Deuteranopia
1%

Normal vision Simulated red-green blind
Usability resources: Photoshop CS4+
Vischeck.com
Colorschemedesigner.com
Etre.com

Relative color hue Relative color density
Q: Which square is the darkest?Q: Which 2 swirls are the same color?

Relative color hue Relative color density
A: Trick question. All 3 are identical.
Q: Which square is the darkest?Q: Which 2 swirls are the same color?
universally perceived due to “proximity effect”
A: The “green” and “blue” swirls
are actually the same color.

Cognitive Illusions
Compensation Light direction and perspective
“Yes – 5 bumps and 1 dimple.”
We will now rotate the image 180°…
“Obviously not!”
Q: Are there more bumps
or more dimples?
Q: Are squares A & B
the same shade?

Cognitive Illusions
Light direction and perspective
“Now there are more dimples.”
or more dimples?
“Of course not!”
Compensation
the same shade?

Cognitive Illusions
Compensation Light direction and perspective
“Now there are more dimples.”
Actually, this is the same image rotated 180°.
“Ahem, I mean,
Yes.”
or more dimples?
the same shade?
universally perceived due to real-world experience

Judgment Errors
We are poor at determining volumes and angles
How easily can you
rank the following slices?
How about the bars?
Note: Slice ‘B’ should be easy… it is 25% — a right angle.
But the 3D Pie makes it impossible to perceive it as such.

Automatic Behaviors
Awareness/Attention
Consciously attentive
Count the “F” characters:

Automatic Behaviors
Awareness/Attention
Pre-attentive recognition of Color
Now count the “F” characters:
“Pre-attentive” came from cognitive psychology and
is meant to describe those attributes we notice
before noticing that we’ve noticed them.

Automatic Behaviors
Awareness/Attention
“Pre-attentive” came from cognitive psychology
and is meant to describe those attributes we notice
Pre-attentive recognition of Position
Pre-attentive recognition of Size

Automatic Behaviors
Awareness/Attention
“Pre-attentive” came from cognitive psychology
and is meant to describe those attributes we notice
Pre-attentive recognition of Position
Pre-attentive recognition of Size
Pre-attentive patterns, trends and exceptions in the data will out at you

Perception vs. Implied Attributes

Perception vs. Implied Attributes
non-zero Y-axis scale minimum
Misleading Accurate and Truthful

Charting Pre-ﬂight Checklist
¨ Human factors considered
¨ Data checked for integrity
¨ Data sort correct
¨ Min/Max scales match plotted data
¨ Data labels are adequate and accurate
¨ Chart type choice matches message
¨ Multiple charts considered
¨ Chart title is fully informative
¨ Visual formatting
¨ Appropriate font face
¨ Pie charts have <6 slices
¨ Appealing to target audience
¨ Useful legend, if needed
¨ Source explained, if needed
¨ Last update & author info noted
¨ Good use of basic design principles
¨ Color is used consistently
¨ Text is appropriately large and legible
¨ No added chartjunk
¨ Color enhances rather than distracts
¨ Each element used serves a clear purpose

Resources
§ Slide deck, via this session’s SVCC page:
http://siliconvalley-codecamp.com/Sessions.aspx?id=902
§ Slide deck & links list, via shared Evernote notebook:
https://www.evernote.com/pub/savvydata/SVCC-dashboard-design
§ Contact me at Lee Lukehart <lee@savvydata.com>

Art and Science of Dashboard Design

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Art and Science of Dashboard Design

Semelhante a Art and Science of Dashboard Design (20)

Último

Último (20)

Art and Science of Dashboard Design