16. O k a y , l ets t r y w i t h fo ot b a l l . . .
17. 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.
18. 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.
31. CUSTOMER
SALES MARKETING
SUPPORT
* Satisfaction Rating
* Trend per quarter
MANAGEMENT * Comparison with
competitors
* My Active leads
* Value per lead
ANALYST * Progress towards
target
* Active campaigns
* Current CPM/CPC
OPERATIONS * Landing page
Role + Department = Information needed
32. CUSTOMER
SALES MARKETING
SUPPORT
* Satisfaction Rating
* Trend per quarter
MANAGEMENT * Comparison with
competitors
* My Active leads
* Value per lead
ANALYST * Progress towards
1st
target
Takeaway
* Active campaigns
* Current CPM/CPC
OPERATIONS * Landing page
Role + Department = Information needed
33. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC
34. # Unit sales
$ Sales today Avg $ per sale
Us vs Competitor
WHICH OF THESE?
Avg. $ per This period vs last
customer period
Total this % Change Popular
month in sales products
35. Top selling items
TOTAL SALES CHANGE Item name Unit sales % of total Change
$12,240.65 5.32% Oak tree (special edition)
Pet Kitten
803
607
16%
12%
11.52%
100%
Skyscraper (high rise) 511 11% 1.52%
Sycamore tree 430 9% 5.23%
Top grossing items
Dancing disco. 203 4% 1.20%
Other items 2495 52% --
40
% TOTAL REV.
30
20
10
WHICH OF THESE?
500
400
300
200
100
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
500 25
400 20
Unit sales
Revenue
300 15
200 10
100 5
Ybarra Bow Broadsword Dagger Eclipse Mace BattleAxe Magic wand Crossbow Poison
37. 1. COMMUNICATE A SINGLE FIGURE
Used when context is obvious, precision is required, and
past/future is irrelevant to user.
Examples: BALANCE
AA clerk with a waiting list
Checking bank balance $23.00
BALANCE
Sys admin checking current status
$11.32
Notes: BALANCE
Single numbers can have states
$11.32
38. 2. SINGLE FIGURE WITH CONTEXT
“How are we doing lately? Any problems on
horizon?”
Examples: READERS CHANGE
12,247 0.32%
How were this months sales?
Is the network performing well?
Hows our user figures looking? READERS CHANGE
15,231 9.52%
Notes:
Spark-lines can save space, and
39. 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
40. GOOD LINE CHART
50
40
30
20
10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Work best with precise data (e.g. day to day)
41. BA D L I N E C H A R T
50
40
30
20
10
Jan Feb Mar Apri May
42. BA R C H A R T
50
40
30
20
10
Jan Feb Mar Apri May
Never imply precision you don’t have.
43. BA R C H A R T
50
40
30
20
10 2nd
Takeaway
Jan Feb Mar Apri May
Never imply precision you don’t have.
44. 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?
46. 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...
47. 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
48. FOCUS ON THE DELTA
20%
10%
0%
-10%
-20%
-30%
-40%
Jan Feb Mar April May June July August September October November December
Same data, big difference
50. FOCUS ON THE DELTA
20%
10%
0%
-10%
-20%
-30%
-40%
Jan Feb Mar April May June July August September October November December
This guy is getting fired.
51. A full cohort analysis
% Active in months after signup
Sign
Up 1 2 3 4 5 6 7 8 9 10 11 12
JAN 100% 24% 23% 21% 20% 18% 18% 17% 17% 17% 17%
18% of January sign ups
FEB 100% 26% 24% 22% 20% 18% 17% are still 7% 7%
active in July 16%
MAR 100% 29% 25% 23% 21% 18% 18% 17% 17%
APR 100% 32% 26% 23% 21% 17% 15% 16%
MAY 100% 33% 33% 28% 24% 22% 18%
JUN 100% 34% 28% 24% 23% 19%
JUL 100% 35% 31% 27% 23%
AUG 100% 40% 35% 32%
SEP 100% 41% 38%
OCT 100% 48%
NOV 100%
DEC
Showing: % of total % of prev. month Highlight drops over: 5%
52. signup
4 5 6 7 8 9 10 11
21% 20% 18% 18% 17% 17% 17% 17%
18% of January sign ups
22% 20% 18% 17% are still 7% 7%
active in July 16%
23% 21% 18% 18% 17% 17%
23% 21% 17% 15% 16%
28% 24% 22% 18%
24% 23% 19%
27% 23%
32%
53. MAR 100% 29% 25% 23% 21% 18%
APR 100% 32% 26% 23% 21% 17%
MAY 100% 33% 33% 28% 24% 22%
JUN 100% 34% 28% 24% 23% 19%
JUL 100% 35% 31% 27% 23%
AUG 100% 40% 35% 32%
SEP 100% 41% 38%
OCT 100% 48%
NOV 100%
DEC
Showing: % of total % of prev. month
54. How many stick around for a second month?
35%
32.4%
30%
25%
20%
15%
10%
5%
Signed
January February March April
up:
56. 35%
30%
25%
Signups in April 2011
26% Still Active in June
20% 101 retained - 290 lost.
57. 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?
58. BAD PIE CHART
America
Ireland
U.K.
Canada
Australia
Spain
France
59. YOU COULD ADD THE DATA...
America
9% 15%
Ireland
15%
U.K.
23%
9%
Canada
11%
18% Australia
Spain
France
73. 4th
Takeaway
If you had to fight one of them...
74. 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?
76. STACKED BAR CHART
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
A($!&)* +$,-$" &. J/01? u l y ?
America peaked in J
77. STACKED BAR CHART
70000
52500
35000
17500
0
Jan Feb Mar April May June July August September October November December
A($!&)* s U . K &. d o n e ?
How ha +$,-$" . J/01?
78. LYING WITH DIMENSIONS
70000
52500
35000
Jan
Feb 17500
Mar
April
May
June
July
August
September
October 0
November
December
Lots more yellow pixels here now...
79. LET’S TRY A LINE CHART
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
Ireland U.K America
80. LINE CHART OF SAME DATA?
50000
37500
25000
12500
0
Jan Feb Mar April May June July August September October November December
A($!&)* #. 23$ 4+. 5K .$6$! 73*.8$"?
Same data. Different story.
94. Line length Line width Colour intensity
WAYS TO VISUALISE QUANTITY
Size Quantity Speed
95. Line length Line width Colour intensity
WAYS TO VISUALISE QUANTITY
Size Quantity Speed
96. Line length Line width Colour intensity
WAYS TO VISUALISE QUANTITY
Size Quantity Speed5th
Takeaway
97. Le type Colr Spe
HOW TO VISUALISE CATEGORY
Locn
98. HOW TO USE ALL THIS?
You’ve just taken over a hotel. You’re
handed the accounts. Excel hell. Where
do we start?
99. Q: Are we making any money?
Profit is the delta between costs and
revenue. Let’s see that for the year.
Profit and loss
€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
100. Q: What makes us money?
Let’s compare the percentage of revenue
generated by each category.
50%
40%
30%
20%
10%
Rms Wdgs B Gym/Spa Rtaurt Buss Cfc
101. Q: What sort of prices do we charge per room?
Let’s look at the price range the median value
€175
€150
€100
€75
€50
King suite Junior Suite Deluxe Room Standard Room Hostel
102. Design to support analyst queries...
MIDWEST HOTELZ
REPORT TYPE ROOM TYPE PERIOD GUEST TYPE
REVENUE ROOMS & EXTRAS KING SUITES LAST YEAR ALL GUESTS
PROFIT
LOYALTY
INCIDENTALS
GUEST REPORT
WEDDINGS
CONFERENCES
117. The point is, we’re not
always fighting for
attention.
118. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
119. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Let’s use this strawman
Product Orders $ Revenue
126. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
G r a d i e n tInception a d o w s , c o l o r s , g r i d l i n e s . 9A l l 72.50 n - c o n t e n t
s, sh no
The girl who kicked the hornet's nest 15 54.05
127. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception
L e t ’ s k i l l t h e g r a d i e n t9s 72.50
The girl who kicked the hornet's nest 15 54.05
128. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
Let’s kill the colours
The girl who kicked the hornet's nest 15 54.05
129. HTML has a
<strong>tag but no
<weak> tag.
As a result, we
forget to think
about what’s less
important on the
screen.
— Ryan Singer
130. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
Inception 9 72.50
Let’s adjust the shading.
The girl who kicked the hornet's nest 15 54.05
131. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
L e t ’ s a d d Inceptionn e c e s s a r y d i f f e r e n c e s
the 9 72.50
The girl who kicked the hornet's nest 15 54.05
132. Sales Report Jan 2012
ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE
12,247 0.32% 7,343 4.32% PAYMENT LIVE
FULFILLMENT ON
Revenue per product
40
30
20
10
Books Electronics Magazines Appliances e-goods Other
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
F r o m h e r eInception c o u l d b e g i n t o s t y l e
we 9 72.50
134. SALES REPORT MAY 2012
ORDERS ACCOUNTS SITE
12,247 0.4% 2,323 1.4% PAYMENT
FULFILLMENT
Revenue per product
40
30
20
10
e-goods Books Electronics Appliances Other Magazines
Top products
Product Orders $ Revenue
The girl with the dragon tattoo 11 88.50
135. SALES REPORT MAY 2012
ORDERS ACCOUNTS
12,247 0.4% 2,323 1.4% PA
FULFIL
Revenue per product
40
136. 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.
137. 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
138. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC
139. 1. VISUALS SHOULD SAY SOMETHING
The worst visualisations are the
ones you look at just think “Heh.”
151. 3. PRESENTING AN ARGUMENT
It’s okay to add visuals if your goal is more than
the factual presentation of information
152. 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
153. 15
10
5
0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Get your data first.
156. 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
157. 4. THEY’RE NOT ALL FIRST TIMERS
Like chess players understand chessboards,
people can learn to understand visualisations
172. 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
173. INTRO
KNOW YOUR AUDIENCE
TIME REMAINING
KNOW YOUR DOMAIN
KNOW YOUR DATA
KNOW YOUR VISUALS
KNOW YOUR STYLE
CLOSING POINTS
FIN
TOPIC