data visualization and dashboard design
DESCRIPTION
A webinar I gave about some often neglected data visualization principles, as well as how to conduct a dashboard design project.TRANSCRIPT
Online Intelligence Solutions
Data Visualization and Dashboard Design
LIVE WEBINAR 04/04/2013
Jacques WARRENCEOWAO/MARKETING
Today’s Speaker
If you feel like it: #measure
You’re very lucky
You get 2 full training days in…
40 minutes!
DISCLOSURE
I belong to a cult.
Why Care About Visualisation? Analytics Governance
Data-Viz belong here
Why Care About Data Visualization?
You don’t make friends with this:
Why care about data visualization?
Or this:
Why care about data visualization?
- Believe it or not, creating efficient graphs is not easy, even with Excel!
- Confusion is the main problem.
- So, clarity then becomes the number one goal!
- Graphs are used to communicate a maximum of relevent information as immediately as possible.
Why care about data visualization?
- One major problem with analytics is adoption of its results and recommendations.
- Communicating clearly definitely increase analytics chances of success.
Why care about data visualization?
Fundamental Visualization Principles
In Information Visualization : Perception for Design, Colin Ware identifies several pre-cognitives attributes:
Color – Difference
Couleur - Intensity
Position – 2D
Form - Orientation
Form - Length
Form - Thickness
Form - Size
Form - Form
Form - Mark
Form - Enclosure
Movement - Blinking
Coulor – Contextual Perception
text text
Fundamental Visualization Principles
The Power of the Human Eye
Getsalt of visual perception (partial)Proximity Similarity
Enclosure and continuity
Linking
Fundamental Visualization Principles
The Power of the Human Eye
The power of the line
2000
2010
Sales Profits
Sales Profits
Sales Profits
Fundamental Visualization Principles
First Principle
Don’t visualize!!!
Fundamental Visualization Principles
Two General Types
Tables & Graphs
Fundamental Visualization Principles
Tables for valuesGraphs for trends/Overall comparison
Two General Types
Fundamental Visualization Principles
Facilitate understanding
Source : Système CRM
Or at least try not to hinder it!
Fundamental Visualization Principles
Central East West South
$0
$200,000
$400,000
$600,000
$800,000
$1,000,000
$1,200,000
$1,400,000
$1,600,000
Ventes en dollars canadiens
Ventes de meubles par région et profits - Juin 2012
($16,312) $48,937
Profit
Should be self-sufficient
Source : Our CRM
TITLE
UNITS
CATEGORYSOURCE
REFERENCE PERIOD
LEGEND
“The Central region had the best sales, while the East region had losses.”
Alternative Title
Fundamental Visualization Principles
Optimize attention time
Source : Système CRM
Visualization allows for immediate comparison (length), while color can be used to quickly bring attention.
Fundamental Visualization Principles
Basic Visual ElementsDots
Central East South West
$0
$500,000
$1,000,000
$1,500,000
$2,000,000
$2,500,000
$3,000,000
$3,500,000
$4,000,000
$4,500,000
Sales
Bars
January-2009 February-2009 March-2009 April-2009 May-2009 June-2009 July-2009August-2009September-2009
October-2009 November-2009 December-2009 January-2010 February-2010 March-2010 April-2010 May-2010 June-2010 July-2010August-2010September-2010
October-2010 November-2010 December-2010 January-2011 February-2011 March-2011 April-2011 May-2011 June-2011 July-2011August-2011September-2011
October-2011 November-2011 December-2011 January-2012 February-2012 March-2012 April-2012 May-2012 June-2012 July-2012August-2012September-2012
October-2012 November-2012 December-2012
$0
$50,000
$100,000
$150,000
$200,000
$250,000
$300,000
$350,000
$400,000
$450,000
$500,000
Sales
Lines 90%
Fundamental Visualization Principles
Amaretto Caffe Latte Caffe Mocha Chamomile Columbian DarjeelingDecaf Espresso ..Decaf Irish Crea
Earl Grey Green TeaLemon
Mint
Regular Espresso
($10,000)
($5,000)
$0
$5,000
$10,000
$15,000
$20,000
$25,000
$30,000
$35,000
$40,000
$45,000
Profit
January-2010 February-2010 March-2010 April-2010 May-2010 June-2010 July-2010August-2010
September-2010October-2010 November-2010 December-2010 January-2011 February-2011 March-2011 April-2011 May-2011 June-2011July-2011
August-2011September-2011
October-2011 November-2011 December-2011
$24,000
$26,000
$28,000
$30,000
$32,000
$34,000
$36,000
$38,000
SalesBasic Visual Elements - Dots
Fundamental Visualization Principles
January-2010 February-2010 March-2010April-2010May-2010June-2010July-2010August-2010
September-2010October-2010 November-2010 December-2010 January-2011 February-2011 March-2011April-2011May-2011June-2011July-2011
August-2011September-2011
October-2011 November-2011 December-2011
$24,000
$26,000
$28,000
$30,000
$32,000
$34,000
$36,000
$38,000
Sales
$0 $200 $400 $600 $800 $1,000 $1,200 $1,400
Advertising Costs
-$30K
-$20K
-$10K
$0K
$10K
$20K
$30K
$40K
Profit
Basic Visual Elements - Lines
Fundamental Visualization Principles
Amaretto Caffe Latte Caffe Mocha Chamom.. Columbian DarjeelingDecaf EspressoDecaf Irish CreamEarl Grey Green Tea Lemon Mint Regular Espresso
$0
$10,000
$20,000
$30,000
$40,000
$50,000
$60,000
$70,000
$80,000
$90,000
$100,000
$110,000
$120,000
$130,000
Sales
Product
$0 $20,000 $40,000 $60,000 $80,000 $100,000 $120,000
Ventes en dollars
Columbian
Lemon
Caffe Mocha
Decaf Espresso
Chamomile
Darjeeling
Earl Grey
Decaf Irish Cream
Caffe Latte
Mint
Green Tea
Amaretto
Regular Espresso
Basic Visual Elements - Bars
Fundamental Visualization Principles
Colors are semantically charged
Don’t forget color blind people!
Fundamental Visualization Principles
Semantic Charges of Colors – Bringing attention
Central East West South
$0
$200,000
$400,000
$600,000
$800,000
$1,000,000
$1,200,000
$1,400,000
$1,600,000
Ventes en dollars canadiens
Different Colors
Central East West South
$0
$200,000
$400,000
$600,000
$800,000
$1,000,000
$1,200,000
$1,400,000
$1,600,000
Ventes en dollars canadiens
Different Hues
Fundamental Visualization Principles
Choosing a Color Palette
Fundamental Visualization Principles
A B C
Company Specific
D
Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.
Graphical excellence is the well-designed presentation of interesting data”
Edward Tufte, The Visual Display of Quantitative Information, 1983
What is Graphical Excellence?
Fundamental Visualization Principles
The famous Data-Ink Ratio
“Above all, show the data” Edward Tufte
Août
Sept
embr
e
Octob
re
Novem
bre
Décem
bre
Janv
ier
Févr
ier
Mars
Avril
Mai0.0%
200.0%
400.0%
600.0%
800.0%
1000.0%
1200.0%
Août
Septe
mbre
Oct
obre
Novem
bre
Déce
mbre
Janvie
r
Févri
er
Mars
Avri
l
Mai
Juin
Juille
t
Août
Septe
mbre
Oct
obre
Novem
bre
Déce
mbre
32.0%33.0%34.0%35.0%36.0%37.0%38.0%39.0%40.0%41.0%42.0%
Fundamental Visualization Principles
Avoid Chart Junk
Fundamental Visualization Principles
Lower the Lie Factor
Fundamental Visualization Principles
The Ducks!
Fundamental Visualization Principles
And the infamous infographics…
Fundamental Principles of Design
Faulty, or Inefficient Visualization
Chaises Fauteuils Tables Lampes9000
9200
9400
9600
9800
10000
10200
10400
10600
10800
11000
Chaises Fauteuils Tables Lampes0
1000
2000
3000
4000
5000
6000
7000
8000
9000
10000
11000
Wrong scales
Faulty, or Inefficient Visualization
Wrong height/width ratio
Faulty, or Inefficient Visualization
12%
16%
22%20
%
15,5%
14,5%
Enough with pie charts!
22%
20%
16%
15,5%
14,5%
12%
Faulty, or Inefficient Visualization
12%
16%
22%20
%
15,5%
14,5%
22%
20%
16%
15,5%
14,5%
12%
Faulty, or Inefficient Visualization
Enough with pie charts!
Enough with 3-D!!!
Cosmetic (!) Several categories
Faulty, or Inefficient Visualization
Solution Examples From a Client
Examples from a client
The 3D effect doesn’t add anything
Examples from a client
Visualization was not necessary here
Examples from a client
Examples from a client
Examples from a client
New Visualization Types
Spark Lines
In Excel 2010
New Visualization Types
Heat Maps
New Visualization Types
Tree Maps
New Visualization Types
Animated bubbles
Introduced by Pr. Hans Rosling :
gapminder.org
Example : http://bit.ly/WZAxqL
New Visualization Types – Animated Bubbles
Bullet Graphs
Current Value
Target
Qualitative Thresholds
New Visualization Types
New Visualization Types
Bullet Graphs & Sparklines
Working horizontally
Dashboarding
In This Part
What is a dashboard?
Dashboard Design Project Main StepsDashboard Design Fundamental Principles
You should kow…
Dashboard Design:
- Design 30%
- Project Management 70%
What you see really is just the tip of the iceberg
You should kow…
“A visual display of the most important information needed to achieve one or more objectives which fits entirely on a single computer screen so it can be monitored at a glance”
Stephen Few
What is a dashboard?
So, a dashboard is a communication tool!
It is NOT an analytical tool
Strategic View
Operational View
What is a dashboard?
The Pilot Metaphor
What is a dashboard?
Dashboard Design & Production Steps
Preliminary Decisions
- Which metrics should be exposed?- What is the dashboard refresh frequency?
- Who is the audience?
- What platform to use (HighTech, Low Tech) ?
Project Stages- Writing functional specifications- Writing technical specifications- Making the wireframe
- Making the design
- Making the prototype
- Making the dashboard with real data
Dashboard Design & Production Steps
Writing specifications
- Never a very “sexy” stage
- Essential because of complexity of projects- Making modifications later than sooner always costs more money!
Dashboard Design & Production Steps
Writing the specifications
Dashboard Design & Production Steps
High Tech or Low Tech ?
Important factors to consider:- Time- Technical complexity- Budget
Dashboard Design & Production Steps
Writing the specifications
Making the wireframe
Putting the pieces together
Dashboard Design & Production Steps
Making the design
Get as close as possible to the final look & feel
Dashboard Design & Production Steps
Making the prototype
Excel is very good for prototypingCAVEAT:The chosen platform may have its own design limitations.
Dashboard Design & Production Steps
Making the dashboard with real data
Dashboard Design & Production Steps
You have to “sell” your project, and also insist on how important decisions are at each stage.
Go through the approval cycle
Dashboard Design & Production Steps
Breaking in period and training
Dashboard Design & Production Steps
First, some clarification
- You are limited by the platform you chose- Distribution has a strong impact on design
Elementary Principles of Dashboard Design
Fits entirely on a single screen/view
- We must see everything within the same screen
- Avoid creating dashboards that require scrolling
Elementary Principles of Dashboard Design
Organizing the area – Reading directions
Elementary Principles of Dashboard Design
Organizing the area – Separating the zones
Elementary Principles of Dashboard Design
Choosing Visualization – What & HowNO! Graphs Sparklines
Bullet Graphs
32%
Numbers!
Elementary Principles of Dashboard Design
Contextualising Results
Fundamental element which bears meaningDeterminng the comparison periods
Elementary Principles of Dashboard Design
Elementary Principles of Dashboard Design
Contextualising Results
Should you leave room for comments?
Elementary Principles of Dashboard Design
Neglecting to give context
Common Design Mistakes
Nord Sud Est Ouest - $
50,000.00 $
100,000.00 $
150,000.00 $
200,000.00 $
250,000.00 $
300,000.00 $
350,000.00 $
Nord Sud Est Ouest - $
50,000.00 $
100,000.00 $
150,000.00 $
200,000.00 $
250,000.00 $
300,000.00 $
350,000.00 $
Choosing the wrong kind of visualization
Common Design Mistakes
1 2 3 4 5 6 7 80 $
20,000 $
40,000 $
60,000 $
80,000 $
100,000 $
120,000 $
140,000 $
160,000 $
180,000 $
Ventes Budget
1 2 3 4 5 6 7 8
-15.0%
-10.0%
-5.0%
0.0%
5.0%
10.0%
15.0%
Ventes Budget
Using a non-optimized visualization
Common Design Mistakes
0 $20,000 $40,000 $60,000 $80,000 $
100,000 $120,000 $140,000 $160,000 $180,000 $
Sales
0 $
40,000 $
80,000 $
120,000 $
160,000 $
Costs
Profits
1
2
3
4
5
6
7
8
0 $ 50,000 $ 100,000 $ 150,000 $ 200,000 $
Projections
Introducing useless variety
Common Design Mistakes
Not showing everything on the same view
Common Design Mistakes
Cluttering graphs and the dashboard with useless decoration
Common Design Mistakes
Designing graphs and dashboards that are plain.. ugly!
Common Design Mistakes
Using off-putting colors !
Common Design Mistakes
Examples of “trendy” design
Examples of “trendy” design
Examples of “trendy” design
Examples of “trendy” design
Since I must conclude…
- Communicating efficiently is very hard- Design must not take the place of information.- There can be 10 solutions to the same design problem; always choose data first.
If the statistics are boring, then you’ve got the wrong numbers.
E. Tufte
Visualization is not about putting lipstick on a pig
Online Intelligence Solutions
www.waomarketing.com
om
Thank you!