Art and Science of Dashboard Design

60 %
40 %
Information about Art and Science of Dashboard Design
Design

Published on March 13, 2014

Author: SavvyData

Source: slideshare.net

Description

To correctly portray complex data a developer must utilize modern data visualization techniques. This session describes how to create data graphics (charts) and dashboards that are concise, attractive and usable. Learn the practical design principles that apply to every data graphic you produce. Without this firsthand knowledge one can innocently construct visuals that erroneously represent data and mislead viewers. I cover Important Visual Perception Patterns to Know and the Top Common Chart Design Errors. I will also share the knowledge framework for creating effective graphical data dashboards. Apply the best design pattern every time using the "3 threes" — a convenient memory hook representing the distinctions between systems that “monitor, measure, and manage” performance metrics for “operations, tactical or strategic” purposes. Become a hero of interactive data visualization. Copious examples included.

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 Specific 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

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

Why so many types?

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

What is the objective? 2011 Tesla Model S

What is the objective? 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 § Align execution with strategy § NOT real-time

Strategic Dashboard

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) § Align execution with strategy

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

Operations Dashboard

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

Dashboard Example

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-flight checklist (for QA & K.I.S.S. testing)

Effective Data Visualization 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, inflation-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? — Sufficient granularity to change sort for different types of summaries? Effective Data Visualization

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 Effective Data Visualization

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 Effective Data Visualization

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 Effective Data Visualization

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) Yes Yes (quantitative scale must begin at zero) Bar Graph (horizontal) Yes (quantitative scale must begin at zero) Yes Yes (quantitative scale must begin at zero) Yes Yes (quantitative scale 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) Yes (when comparing multiple distributions) Box Plot (horizontal) Yes (when comparing multiple 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) Effective Data Visualization

6.  Construct data transforms as needed § Aggregate: summarized total, count, average, running average § Segment: derive subset attributes (e.g. month name, price tier) § Factor: inflation-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 Effective Data Visualization

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

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

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%

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

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

Optical Perception Issues 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.” Q: Are there more bumps      or more dimples? “Of course not!” Compensation Q: Are squares A & B      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.” Q: Are there more bumps      or more dimples? Q: Are squares A & B      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 Consciously attentive Pre-attentive recognition of Color Count the “F” characters: 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 Consciously attentive Pre-attentive recognition of Color Count the “F” characters: 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. Pre-attentive recognition of Position Now count the “F” characters: Pre-attentive recognition of Size Now count the “F” characters:

Automatic Behaviors Awareness/Attention Consciously attentive Pre-attentive recognition of Color Count the “F” characters: 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. Pre-attentive recognition of Position Now count the “F” characters: Pre-attentive recognition of Size Now count the “F” characters: 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-flight 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>   

Add a comment

Related presentations

Related pages

The Art and Science of Effective Dashboard Design ...

By Jen Underwood and Jaimie Fox. Dashboards can be a powerful way to communicate insights. All too often dashboard potential is not fully realized as a ...
Read more

The Art and Science of Effective Dashboard Design - The ...

The Cloud Network; About. Predict Data; Visualize Data; Consulting. ... Comments Off on The Art and Science of Effective Dashboard Design; Best Practices, ...
Read more

The Art & Science of Mobile Dashboard Design - ÄKTA ...

The Art & Science of Mobile Dashboard Design . What Humanistic Experience Design can teach us about designing the “right” business & user dashboards.
Read more

The Art & Science of Dashboard Design - Vidyard

Suyog Deshpande and Kaushik Ruparel share best practices of dashboard design. ... The Art & Science of Dashboard Design ABOUT.
Read more

Data Visualization and Dashboard Design - Is it an Art or ...

In this webinar, you will discover whether Data Visualization is an Art, Science, or BOTH! The purpose of data visualization is to display data ...
Read more

Dashboard.de

Dashboard.de . Impressum; Datenschutz; Über Uns; Blog; Glossar; Kontakt © Dashboard.de 2016. Designed & developed by Daniel Mühlhause Queries[1] Time[0 ...
Read more

The Art and History of Floral Design - - UCOP A-G

A-G Course Lists. Loading... © 2016 Regents of the University of California A-G Guide | A-G Course Lists | Contact us ...
Read more

Pratt Institute

Center for Art, Design, ... Pratt Institute (John Koga Exposed) ... The Fusion of Art and Science Watch Video. Pratt Institute.
Read more