Slide 1
Slide 1 text
Data visualisations and Dashboard Design
Slide 2
Slide 2 text
Des Traynor
@destraynor,
COO of @intercom
Slide 3
Slide 3 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TRO
Slide 4
Slide 4 text
We are drowning in data.
Slide 5
Slide 5 text
Useful
Readable
Meaningful
Better than
text
Adaptable
IT’S HARD TO MAKE VISUALS
Slide 6
Slide 6 text
Be clear first and clever
second. If you have to throw
one of those out, throw out
clever.
— Jason Fried
“
Slide 7
Slide 7 text
VISUALS CAN CONFUSE
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Visualising the Gulf Oil Spill...
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Okay, lets try with football...
Slide 17
Slide 17 text
If the Gulf of Mexico - the 7th largest body of water
in the world, containing approximately 660
quadrillion gallons of water (that's 660 with 15
zeros) - was represented by Cowboys Stadium in
Dallas - the largest domed stadium in the world -
how would the spill stack up? In this example, the
amount of oil spilled - if the Gulf of Mexico was the
size of Cowboys Stadium - would be about the size of
a 24 ounce can of beer. Cowboys stadium has an
internal volume of approximately 104 million cubic
feet, compared to the just over 50 cubic inches of
volume in a 24-ounce can.
Just like the can, the spilled oil represents only .
00000002788% of the liquid volume present in the
Gulf of Mexico, although as the oil is dispersed, the
amount of water affected becomes substantially
greater.
Slide 18
Slide 18 text
If the Gulf of Mexico - the 7th largest body of water
in the world, containing approximately 660
quadrillion gallons of water (that's 660 with 15
zeros) - was represented by Cowboys Stadium in
Dallas - the largest domed stadium in the world -
how would the spill stack up? In this example, the
amount of oil spilled - if the Gulf of Mexico was the
size of Cowboys Stadium - would be about the size of
a 24 ounce can of beer. Cowboys stadium has an
internal volume of approximately 104 million cubic
feet, compared to the just over 50 cubic inches of
volume in a 24-ounce can.
Just like the can, the spilled oil represents only .
00000002788% of the liquid volume present in the
Gulf of Mexico, although as the oil is dispersed, the
amount of water affected becomes substantially
greater.
Slide 19
Slide 19 text
The “anti-infographic
movement”
No data was harmed in the
making of these info-
graphics
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR AUDIENCE
Slide 22
Slide 22 text
WHO ARE WE DESIGNING FOR?
Slide 23
Slide 23 text
WHAT ROLE?
The role defines the level of abstraction required.
Slide 24
Slide 24 text
CEO Level Detail
Strategic view
Focus on the long term
High level overview
Simple summary
Slide 25
Slide 25 text
Query driven analysis
Precision required
Emphasis on trends,
and correlations
Analyst role
Slide 26
Slide 26 text
Operations/Logistics
Focus on current status
Issue & Event driven
e.g. Alerts, spikes, trouble
Slide 27
Slide 27 text
WHAT DEPARTMENT?
The department defines the domain knowledge
Slide 28
Slide 28 text
SALES DEPARTMENT
Leads, conversions, avg. value per sale, etc
Slide 29
Slide 29 text
MARKETING DEPARTMENT
Impressions, loyalty, awareness, share
Slide 30
Slide 30 text
NETWORK & IT
Issues, tickets, lead time, open cases, uptime
Slide 31
Slide 31 text
SALES MARKETING
CUSTOMER
SUPPORT
MANAGEMENT
* Satisfaction Rating
* Trend per quarter
* Comparison with
competitors
ANALYST
* My Active leads
* Value per lead
* Progress towards
target
OPERATIONS
* Active campaigns
* Current CPM/CPC
* Landing page
Role + Department = Information needed
Slide 32
Slide 32 text
SALES MARKETING
CUSTOMER
SUPPORT
MANAGEMENT
* Satisfaction Rating
* Trend per quarter
* Comparison with
competitors
ANALYST
* My Active leads
* Value per lead
* Progress towards
target
OPERATIONS
* Active campaigns
* Current CPM/CPC
* Landing page
Role + Department = Information needed
1st
Takeaway
Slide 33
Slide 33 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR DATA
Slide 34
Slide 34 text
$ Sales today
# Unit sales
Avg $ per sale
This period vs last
period
Us vs Competitor
Total this
month
Popular
products
% Change
in sales
Avg. $ per
customer
WHICH OF THESE?
Slide 35
Slide 35 text
WHICH OF THESE?
TOTAL SALES
$12,240.65
CHANGE
5.32%
Top grossing items
% TOTAL REV.
10
20
30
40
100
200
300
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
400
500
1 2 3 4 5 6 7 8 9 10
Top selling items
Item name Unit sales % of total
Oak tree (special edition) 803 16%
Pet Kitten 607 12%
Skyscraper (high rise) 511 11%
Sycamore tree 430 9%
Dancing disco. 203 4%
Other items 2495 52%
Change
11.52%
100%
1.52%
5.23%
1.20%
--
100
200
300
400
500
Ybarra Bow Broadsword Dagger Eclipse Mace BattleAxe Magic wand Crossbow Poison
Revenue
5
10
15
20
25
Unit sales
Slide 36
Slide 36 text
6 THINGS TO COMMUNICATE
Slide 37
Slide 37 text
1. COMMUNICATE A SINGLE FIGURE
Used when context is obvious, precision is required, and
past/future is irrelevant to user.
BALANCE
$23.00
BALANCE
$11.32
BALANCE
$11.32
Examples:
AA clerk with a waiting list
Checking bank balance
Sys admin checking current status
Notes:
Single numbers can have states
Slide 38
Slide 38 text
2. SINGLE FIGURE WITH CONTEXT
“How are we doing lately? Any problems on
horizon?”
Examples:
How were this months sales?
Is the network performing well?
Hows our user figures looking?
Notes:
Spark-lines can save space, and
READERS
12,247
CHANGE
0.32%
READERS
15,231
CHANGE
9.52%
Slide 39
Slide 39 text
3. ANALYSIS OF A PERIOD
“Show me all the key moments this month”
Examples:
Looking for patterns in longer data sets
Looking ahead based on current data
Comparison with previous period
Slide 40
Slide 40 text
10
20
30
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
40
50
1 2 3 4 5 6 7 8 9 10
Work best with precise data (e.g. day to day)
GOOD LINE CHART
Slide 41
Slide 41 text
10
20
30
40
50
Jan Feb Mar Apri May
BAD LINE CHART
Slide 42
Slide 42 text
10
20
30
40
50
Jan Feb Mar Apri May
BAR CHART
Never imply precision you don’t have.
Slide 43
Slide 43 text
10
20
30
40
50
Jan Feb Mar Apri May
BAR CHART
Never imply precision you don’t have.
2nd
Takeaway
Slide 44
Slide 44 text
4. ANALYSIS OF PERIOD, WITH TARGET
Did we hit our sales figures?
Are we fulfilling our five nines quota?
Examples:
Are sales were they should be?
Are all our employees performing okay?
Is our response time better than industry standard?
Slide 45
Slide 45 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Actual
Target
BAD LINE CHART
Slide 46
Slide 46 text
A common error in visualisation is leaving
all the processing to the reader. At a
glance it looks like we’re doing okay here.
In this case, we’re talking about a delta, but
we’re not showing the delta...
Slide 47
Slide 47 text
A common error in visualisation is leaving
all the processing to the reader. At a
glance it looks like we’re doing okay here.
In this case, we’re talking about a delta, but
we’re not showing the delta...
3rd
Takeaway
Slide 48
Slide 48 text
-40%
-30%
-20%
-10%
0%
10%
20%
Jan Feb Mar April May June July August September October November December
FOCUS ON THE DELTA
Same data, big difference
Slide 49
Slide 49 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAD LINE CHART
This guy is getting a bonus
Slide 50
Slide 50 text
-40%
-30%
-20%
-10%
0%
10%
20%
Jan Feb Mar April May June July August September October November December
FOCUS ON THE DELTA
This guy is getting fired.
Slide 51
Slide 51 text
JUL
JUN
MAY
APR
MAR
FEB
JAN
NOV
OCT
SEP
AUG
DEC
29%
100%
23%
38%
7%
28%
24%
100%
7%
100%
21%
100%
20%
23%
24%
31%
17%
17%
41%
27%
17%
21%
35%
40%
24%
34%
18%
18%
16%
100%
33%
22%
23%
23%
17%
33%
17%
16%
25%
18%
100%
15%
17%
21%
35%
100%
18%
26%
32%
20%
100%
26%
17%
100%
32%
19%
18%
100%
18% 17%
100%
22%
28%
1 2 3 4 5 6 7 8 9 10 11 12
48%
Showing: % of total % of prev. month Highlight drops over: 5%
A full cohort analysis
24% 23%
% Active in months after signup
Sign
Up
18% of January sign ups
are still active in July
Slide 52
Slide 52 text
23%
7%
24%
7%
21%
20%
23%
24%
17%
17%
27%
17%
21% 18%
18%
16%
22%
23%
23%
17%
17%
16%
18%
15%
17%
21% 18%
32%
20%
17%
19%
18%
18% 17%
22%
28%
4 5 6 7 8 9 10 11
signup
18% of January sign ups
are still active in July
Slide 53
Slide 53 text
JUL
JUN
MAY
APR
MAR
NOV
OCT
SEP
AUG
DEC
29%
23%
38%
28%
24%
100%
100%
21%
100%
23%
24%
31%
41%
27%
35%
40%
34%
100%
33%
23%
23%
33%
25%
100%
17%
21%
35%
100%
32%
100%
26%
100%
32%
19%
18%
100%
22%
28%
48%
Showing: % of total % of prev. month
Slide 54
Slide 54 text
How many stick around for a second month?
35%
30%
25%
20%
15%
10%
5%
January February March April
32.4%
Signed
up:
Slide 55
Slide 55 text
Retention using a cycle plot
35%
30%
25%
20%
15%
10%
5%
0%
Month 2
Retention
Month 3
Retention
Month 4
Retention
Month 5
Retention
Slide 56
Slide 56 text
35%
30%
25%
20%
Signups in April 2011
26% Still Active in June
101 retained - 290 lost.
Slide 57
Slide 57 text
5. BREAKDOWN OF A VARIABLE
“What age groups are buying our stuff? What countries
are we big in?”
Examples:
Who are our customers?
Whats our awareness like in each demographic?
What browsers are people using these days?
Slide 58
Slide 58 text
America
Ireland
U.K.
Canada
Australia
Spain
France
BAD PIE CHART
Slide 59
Slide 59 text
America
Ireland
U.K.
Canada
Australia
Spain
France
YOU COULD ADD THE DATA...
9%
15%
9%
11%
18%
23%
15%
Slide 60
Slide 60 text
0%
7.500%
15.000%
22.500%
30.000%
Ireland U.K. America Spain Canada Australia
SORTED BAR CHART
Slide 61
Slide 61 text
LYING WITH GROUPINGS
The 100K to 200k is where we need to tax!
Slide 62
Slide 62 text
LYING WITH GROUPINGS
Or maybe not...
Slide 63
Slide 63 text
O! "#$% &'?
http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor
LYING WITH GROUPINGS
Slide 64
Slide 64 text
LYING WITH ROTATIONS
Slide 65
Slide 65 text
LYING WITH DIMENSIONS
Slide 66
Slide 66 text
BAD: AREA PLOT
D
C
B
A
E
Slide 67
Slide 67 text
BAD: AREA PLOT
D
C
B
A
E
Which would you pick?
Slide 68
Slide 68 text
A B
BAD: AREA PLOT
- =
How “big” is this?
Slide 69
Slide 69 text
BAD: AREA PLOT
D
C
B
A
E
Slide 70
Slide 70 text
BAD UNIT PLOT
Slide 71
Slide 71 text
5. BREAKDOWN OF A VARIABLE
“Bar charts aren’t sexy, but they rely on an
innate skill, following a line. ”
Slide 72
Slide 72 text
If you had to fight one of them...
Slide 73
Slide 73 text
If you had to fight one of them...
4th
Takeaway
Slide 74
Slide 74 text
6. BREAKDOWN OVER TIME
“How has the composition changed over the
last year?”
Examples:
How has the browser market changed?
Has our revenue sources shifted recently?
Slide 75
Slide 75 text
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
STACKED BAR CHART
Slide 76
Slide 76 text
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
STACKED BAR CHART
A($!&)* +$,-$" &. J/01?
America peaked in July?
Slide 77
Slide 77 text
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
STACKED BAR CHART
A($!&)* +$,-$" &. J/01?
How has U.K. done?
Slide 78
Slide 78 text
0
17500
35000
52500
70000
Jan
Feb
Mar
April
May
June
July
August
September
October
November
December
LYING WITH DIMENSIONS
Lots more yellow pixels here now...
Slide 79
Slide 79 text
LET’S TRY A LINE CHART
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
Slide 80
Slide 80 text
LINE CHART OF SAME DATA?
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
A($!&)* #. 23$ 4+. 5K .$6$! 73*.8$"?
Same data. Different story.
Slide 81
Slide 81 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
Ireland U.K America
BAR CHARTS AGAIN?
Slide 82
Slide 82 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
Slide 83
Slide 83 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
Slide 84
Slide 84 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
BAR CHARTS AGAIN?
Slide 85
Slide 85 text
0
12500
25000
37500
50000
Jan Feb Mar April May June July August September October November December
INTERACTIVE, REMEMBER?
You can adapt based on Interctions
Slide 86
Slide 86 text
0
17500
35000
52500
70000
Jan Feb Mar April May June July August September October November December
STACKED BAR CHART
Why is it so hard to follow the U.K here?
Slide 87
Slide 87 text
If it was easy, we’d all be great at billiards
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR VISUALS
Slide 93
Slide 93 text
Visuals communicate 2 things.
Category Quantity
Slide 94
Slide 94 text
WAYS TO VISUALISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed
Slide 95
Slide 95 text
WAYS TO VISUALISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed
Slide 96
Slide 96 text
WAYS TO VISUALISE QUANTITY
Line length Line width Colour intensity
Size Quantity Speed5th
Takeaway
Slide 97
Slide 97 text
HOW TO VISUALISE CATEGORY
Le type Colr
Locn
Spe
Slide 98
Slide 98 text
You’ve just taken over a hotel. You’re
handed the accounts. Excel hell. Where
do we start?
HOW TO USE ALL THIS?
Slide 99
Slide 99 text
Q: Are we making any money?
Profit is the delta between costs and
revenue. Let’s see that for the year.
-€9,000.00
-€6,750.00
-€4,500.00
-€2,250.00
€0
€2,250.00
€4,500.00
€6,750.00
€9,000.00
Jan Feb Mar April May June July August September October November December
Profit and loss
Slide 100
Slide 100 text
Q: What makes us money?
Rms Wdgs Cfc
Buss
Rtaurt
B Gym/Spa
10%
20%
30%
40%
50%
Let’s compare the percentage of revenue
generated by each category.
Slide 101
Slide 101 text
King suite Junior Suite Standard Room Hostel
€50
€75
€100
€150
€175
Deluxe Room
Q: What sort of prices do we charge per room?
Let’s look at the price range the median value
Slide 102
Slide 102 text
REPORT
REVENUE
TYPE
ROOMS & EXTRAS
ROOM TYPE
KING SUITES
PERIOD
LAST YEAR
MIDWEST HOTELZ
PROFIT
LOYALTY
INCIDENTALS
GUEST REPORT
WEDDINGS
CONFERENCES
GUEST TYPE
ALL GUESTS
Design to support analyst queries...
Slide 103
Slide 103 text
Another example.
What the hell is going on in Europe?
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Credit: S. Few & Tom Watkins
Slide 110
Slide 110 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
KNOW YOUR STYLE
Slide 111
Slide 111 text
A WORD ON CONTEXT
Slide 112
Slide 112 text
This is a car.
Slide 113
Slide 113 text
This is a Nuclear power station.
Slide 114
Slide 114 text
This is a space shuttle
Slide 115
Slide 115 text
This is none of those things...
Slide 116
Slide 116 text
Chances are this is where your user is
Slide 117
Slide 117 text
The point is, we’re not
always fighting for
attention.
Slide 118
Slide 118 text
Top products
Product Orders $ Revenue
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Slide 119
Slide 119 text
Top products
Product Orders $ Revenue
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Let’s use this strawman
Slide 120
Slide 120 text
Let’s take 3 points from Tufte
Slide 121
Slide 121 text
Chart junk: the stuff that doesn’t change
when the data changes
Slide 122
Slide 122 text
Data Ink Ratio: what percentage of your ink
shows data
Slide 123
Slide 123 text
Smallest Effective Difference: the least you
can do to highlight
Slide 124
Slide 124 text
Smallest Effective Difference: the least you
can do to highlight
These colours would get very
loud. Unnecessarily so.
Slide 125
Slide 125 text
Smallest Effective Difference: the least you
can do to highlight
These are far quieter.
Slide 126
Slide 126 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
The girl who kicked the hornet's nest 15 54.05
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Gradients, shadows, colors, gridlines. All non-content
Slide 127
Slide 127 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
The girl who kicked the hornet's nest 15 54.05
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Let’s kill the gradients
Slide 128
Slide 128 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
The girl who kicked the hornet's nest 15 54.05
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Let’s kill the colours
Slide 129
Slide 129 text
HTML has a
tag but no
tag.
As a result, we
forget to think
about what’s less
important on the
screen.
— Ryan Singer
Slide 130
Slide 130 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
The girl who kicked the hornet's nest 15 54.05
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Let’s adjust the shading.
Slide 131
Slide 131 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
The girl who kicked the hornet's nest 15 54.05
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
Let’s add the necessary differences
Slide 132
Slide 132 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
Books Electronics Magazines Appliances e-goods Other
10
20
30
40
Revenue per product
Sales Report Jan 2012
ORDERS
12,247
CHANGE
0.32%
ACCOUNTS
7,343
CHANGE
4.32%
SITE LIVE
PAYMENT LIVE
FULFILLMENT ON
From here we could begin to style
Slide 133
Slide 133 text
This isn’t about visual design
Slide 134
Slide 134 text
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Books Electronics Magazines
Appliances
e-goods Other
10
20
30
40
Revenue per product
SALES REPORT MAY 2012
ORDERS
12,247
SITE
PAYMENT
FULFILLMENT
0.4%
ACCOUNTS
2,323 1.4%
Slide 135
Slide 135 text
40
Revenue per product
SALES REPORT MAY 2012
ORDERS
12,247
PA
FULFIL
0.4%
ACCOUNTS
2,323 1.4%
Slide 136
Slide 136 text
4 Points on Visual Design
1. Remove Chart Junk
2. Maximise your data ink ratio
3. Use the “least effective difference” to highlight
4. Remember to quieten down less important parts.
Slide 137
Slide 137 text
4 Points on Visual Design
1. Remove Chart Junk
2. Maximise your data ink ratio
3. Use the “least effective difference” to highlight
4. Remember to quieten down less important parts.
6th
Takeaway
Slide 138
Slide 138 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
CLOSING POINTS
Slide 139
Slide 139 text
1. VISUALS SHOULD SAY SOMETHING
The worst visualisations are the
ones you look at just think “Heh.”
Slide 140
Slide 140 text
Looks great, but makes very little sense.
Slide 141
Slide 141 text
2. DASHBOARDS & VISUALS EVOLVE
Revisit them as your data increases
Slide 142
Slide 142 text
VANITY DASHBOARDS
Slide 143
Slide 143 text
START WITH THE BASICS
Slide 144
Slide 144 text
ADD INSIGHT AS YOU NEED IT
Slide 145
Slide 145 text
ADD A YEARLY VIEW, AFTER A YEAR
Slide 146
Slide 146 text
INCLUDE INSIGHTS & ACTIONS
Slide 147
Slide 147 text
CONSIDER ADDING PROJECTIONS
Slide 148
Slide 148 text
GET INSIGHTS INTO ENGAGEMENT
What types of users do we have?
Slide 149
Slide 149 text
INSIGHTS INTO ENGAGEMENT
2 main clusters it appears.
Slide 150
Slide 150 text
INSIGHTS INTO BUSINESS MODELS
How’s that Freemium model working out for us?
Slide 151
Slide 151 text
3. PRESENTING AN ARGUMENT
It’s okay to add visuals if your goal is more than
the factual presentation of information
Slide 152
Slide 152 text
The world is not filled with
professional statisticians.
Many of us would like a quick glance
just to get a good idea of something.
If a graph is made easier to
understand by such irrelevancies as
a pile of oil cans or cars, then I say
all the better.
— Don Norman
Slide 153
Slide 153 text
0
5
10
15
J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec
Get your data first.
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
Bring the fancy shit afterwards.
Slide 156
Slide 156 text
Usability is not everything. If usability
engineers designed a nightclub, it would
be clean, quiet, brightly lit, with lots of
places to sit down, plenty of bartenders,
menus written in 18-point sans-serif,
and easy-to-find bathrooms. But nobody
would be there. They would all be down
the street at Coyote Ugly pouring beer on
each other.
— Joel Spolsky
Slide 157
Slide 157 text
4. THEY’RE NOT ALL FIRST TIMERS
Like chess players understand chessboards,
people can learn to understand visualisations
Slide 158
Slide 158 text
This isn’t immediately understandable for everyone.
Slide 159
Slide 159 text
For those used to it, it’s perfect.
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
No content
Slide 162
Slide 162 text
5. IMPLEMENTATION TOOLS
HTML for the win.
Slide 163
Slide 163 text
No content
Slide 164
Slide 164 text
Highcharts is excellent and worth the money
Slide 165
Slide 165 text
Flotr2 is new, but popular
Slide 166
Slide 166 text
D3 is Immense.
Slide 167
Slide 167 text
D3 is Immense.
Slide 168
Slide 168 text
Rickshaw (based on D3) is powerful
Slide 169
Slide 169 text
HTML Charting Libraries
1. Highcharts
2. D3
3. Rickshaw
4. Flotr 2
Slide 170
Slide 170 text
HTML Charting Libraries
1. Highcharts
2. D3
3. Rickshaw
4. Flotr 2
7th
Takeaway
Slide 171
Slide 171 text
6. REFERENCES
Where can I read more?
Slide 172
Slide 172 text
Books
Stephen Few - “Dashboard Design” & “Now you see it”
Brian Suda - “Designing with Data”
Edward Tufte - The first two.
Blogs
Stephen Few -> http://perceptualedge.com
Intercom (me) -> http://blog.intercom.io
Slide 173
Slide 173 text
TOPIC
TIME REMAINING
INTRO
KNOW YOUR AUDIENCE
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
FIN
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
Thanks everyone! – @destraynor