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.
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.
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
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
$ 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?
1. COMMUNICATE 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 (good,bad
2. SINGLE FIGURE & 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 provide context READERS 12,247 CHANGE 0.32% READERS 15,231 CHANGE 9.52%
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
$3.00 $3.25 $3.50 $3.75 $4.00 Feb April Jun Aug Oct Jan 3.14 3.76 3.6 3.58 3.41 3.37 Excellent, the cost of gas has been decreasing all year! MANIPULATING LINE CHARTS
4. ANALYSIS OF PERIOD+ 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?
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...
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
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
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?
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?
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?
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?
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...
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.
0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December INTERACTIVE, REMEMBER? You can adapt based on interactions
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?
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
Q: What makes us money? Rooms Weddings Conferences Businesses Restaurant Bar Gym/Spa 10% 20% 30% 40% 50% Let’s compare the percentage of revenue generated by each category.
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, with a Pareto plot €200
REPORT REVENUE TYPE ROOMS & EXTRAS ROOM TYPE KING SUITES PERIOD LAST YEAR Overview | Advanced REPORT TYPE MIDWEST HOTELZ PROFIT LOYALTY INCIDENTALS GUEST REPORT WEDDINGS CONFERENCES GUEST TYPE ALL GUESTS Design to support analyst queries... Drill down, Date Selector, Saved Filters, Daily reports etc
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
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
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
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
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
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.
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
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
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%
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.
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. 7th Takeaway
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
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
Books Stephen Few - “Dashboard Design” & “Now you see it” Edward Tufte - “The visual display of quantitative information” Brian Suda - “Designing with Data” - available at designingwithdata.com Blogs Stephen Few -> http://perceptualedge.com Intercom (me) -> http://blog.intercom.io These slides will be on http://speakerdeck.com/u/destraynor, I’ll tweet when they’re live.
destraynor
shoty_k2
okabemy
kubosaya
uxevents
hjmkth
sugiyama_sukedachi
stephaniewalter
sakito
lovchikov
xinyao
siteengine
hirokazu_oda
andyhume
jacobian
colly
chriscoyier
orderedlist
tanoku
maltzj
aarron
jasonvnalue
morganepeng
iamctodd
tmm1