Des Traynor – "Creating Dashboards & Data Visualisations that Resonate"

This talk was held on the "beyond tellerrand – web" conference from November 20th to 22nd, 2011 in Düsseldorf.

Description:

The world is drowning in data. It always has been. Making sense of that data and deriving meaningful insights has been left to professional statisticians. Up until recently that is. Info-graphics & data visualisations are popping up everywhere and they don't always make sense. Many horrible acts have been committed in the name of "Making this chart seem a bit more fun"
Getting the right data, and then getting the data right is a significant design challenge that touches on more domains than a UX designer will initially be familiar with.
If you intend to work with large data sets to answer questions about your company or application, or if you are tasked with summarising large amounts of data, or even if you've just been told to "design the new dashboard" then this is the session for you.

Video of the talk:
http://vimeo.com/34784156

Transcript

1. Da vualn  web alicns
2. D Trayn @strayn, UX Dign & C @tcom
3. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F TRO
4. We e drowng  da.
5. Useful Rdab Mngful Be  text Adaptab IT ’S HARD TO MAKE VISUALS
6. Be clear first and clever second. If you have to throw one of those out, throw out clever. — Jason Fried “
7. VISUALS CAN CONFUSE
11. Visualising the Gulf Oil Spill...
13. Okay, lets try with football...
14. 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.
15. 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.
16. T!" “#$%&-&$'()*#+!&, -(."-"$%” N( /#%# 0#1 !#*-"/ &$ 2!" -34&$) 5 2!"1" &$'(-)*#+!&,1
18. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F KNOW YR AUDICE
19. WHO IS THE INFO FOR? Surpre surpre,  UX du  talkg abt knowg yr uss.
20. WHAT ROLE? T ro fin  v  abstrac quid.
21. CEO Lev tail Stregic view Focus   lg tm High v ovview Simp suy
22. * Qry driv alys * Psn quid * Emps  ts,  cs Analyst ro
23. Opns/Logcs Focus  cut stus I & Evt driv e.g. As, spik, trb
24. WHAT DEPARTMENT? T ptmt fin  doma knowdge
25. SALES DEPARTMENT Lds, cvsns, avg. val p sa, etc
26. MARKETING DEPARTMENT Impns, loyalty, aws, s
27. NETWORK & IT Is, ckets, ad me, op c, upme
28. 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
29. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F KNOW YR DATA
30. $ Sas day # Un sas Avg $ p sa Th pd vs st pd Us vs Comper Total  m Popur products % Cnge  sas Avg. $ p custom WHICH OF THESE?
31. 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
32. 6 THINGS TO COMMUNICATE
33. 1. COMMUNICATE A SINGLE FIGURE Us wn ctext  obvus, psn  quid,  pt/ futu  ievt  us. BALANCE $23.00 BALANCE $11.32 BALANCE $11.32 Examps:  crk wh a wag lt Cckg bk bae Sys adm cckg cut stus Not: Sg numbs c ve st (gd,bad etc)
34. 2. SINGLE FIGURE WITH CONTEXT “How e we dog ty? Any probms  hiz?” Examps: How we  ms sas? Is  netwk pfmg wl? Hows r us figus lkg? Not: Spk-l c save space,  provi ctext READERS 12,247 CHANGE 0.32% READERS 15,231 CHANGE 9.52%
35. 3. ANALYSIS OF A PERIOD “Show me a  key momts  m” Examps: Lkg f ptns  lg da sets Lkg aad b  cut da Comp wh pvus pd
36. 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 Wk bt wh pse da (e.g. day  day) GOOD LINE CHART
37. 10 20 30 40 50 Jan Feb Mar Apri May BAD LINE CHART
38. 10 20 30 40 50 Jan Feb Mar Apri May BAR CHART
39. 4. ANALYSIS OF PERIOD, WITH TARGET Did we h r sas figus? A we fulfig r five n quota? Examps: A sas we y shld be? A a r employs pfmg okay? Is r spse me be  dustry std?
40. 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December Actual Tget BAD LINE CHART
41. A co r  vualn  avg a  procsg   ar. At a ge  lks like we’ dog okay . In  ce, we’ talkg abt a lta, but we’ not showg  lta...
42. -40% -30% -20% -10% 0% 10% 20% Jan Feb Mar April May June July August September October November December FOCUS ON THE DELTA
43. 5. BREAKDOWN OF A VARIABLE “Wt age grps e buyg r stuff? Wt cri e we big ?” Examps: Who e r customs? Wts r aws like  ch mographic? Wt browss e peop usg se days?
44. Amica I U.K. Cada Austral Spa Frce BAD PIE CHART
45. Amica I U.K. Cada Austral Spa Frce YOU COULD ADD THE DATA... 9% 15% 9% 11% 18% 23% 15%
46. 0% 7.500% 15.000% 22.500% 30.000% Ireland U.K. America Spain Canada Australia SORTED BAR CHART
47. LYING WITH GROUPINGS T 1K  2k  w we nd  tax!
48. LYING WITH GROUPINGS Or maybe not...
49. O* /("1 &%? http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor LYING WITH GROUPINGS
50. LYING WITH ROTATIONS
51. LYING WITH DIMENSIONS
52. BAD: AREA PLOT D C B A E
53. BAD: AREA PLOT D C B A E Which would you pick?
54. A B BAD: AREA PLOT - = How “big”  ?
55. BAD: AREA PLOT D C B A E
56. BAD UNIT PLOT
57. 5. BREAKDOWN OF A VARIABLE “B cs ’t sexy, but y ly   ne ski, foowg a le. ”
58. If you had to fight one of them...
59. 6. BREAKDOWN OVER TIME “How s  compn cng ov  st yr?” Examps: How s  brows mket cng? H r v src shift ctly?
60. 0 17500 35000 52500 70000 Jan Feb Mar April May June July August September October November December I U.K Amica STACKED BAR CHART
61. 0 17500 35000 52500 70000 Jan Feb Mar April May June July August September October November December STACKED BAR CHART A-"*&,# 6"34"/ &$ J789? America peaked in July?
62. 0 17500 35000 52500 70000 Jan Feb Mar April May June July August September October November December STACKED BAR CHART A-"*&,# 6"34"/ &$ J789? How has U.K . done?
63. 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...
64. LET ’S TRY A LINE CHART 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December I U.K Amica
65. LINE CHART OF SAME DATA? 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December A-"*&,# ($ 2!" :6. ;K $"."* <!#$)"/? Same data. Different story.
66. 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December I U.K Amica BAR CHARTS AGAIN?
67. 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December I U.K Amica BAR CHARTS AGAIN?
68. 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December I U.K Amica BAR CHARTS AGAIN?
69. 0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December I U.K Amica BAR CHARTS AGAIN?
70. 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
71. 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?
72. If it was easy, we’d all be great snooker/ pool players
73. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F KNOW YR VUALS
74. Vuals counice 2 gs. Cegy Quty
75. WAYS TO VISUALISE QUANTITY Le ng Le wid Colr tsy Size Quty Spd
76. HOW TO VISUALISE CATEGORY Le type Colr Locn Spe
77. Y’ve just tak ov a hot. Y’   as. Exc . W do we stt? HOW TO USE ALL THIS?
78. Q: A we makg y mey? Pr   dtce betwn cts  v. Let’s s  f  yr. -€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
79. Q: Wt s do  mey come from? Rms Wdgs Cfc Buss Rtaurt B Gym/Spa 10% 20% 30% 40% 50% Let’s compe  pctage  v g by ch cegy.
80. King suite Junior Suite Standard Room Hostel €50 €75 €100 €150 €175 Deluxe Room Q: Wt st  pric do we crge p rm? Let’s lk   price rge  mn val
81. 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 Dign  sut alyst qri...
82. Anor examp. Wt    gog   Europe?
85. Cd: S. Few & Tom Wks
86. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F KNOW YR Y
87. A WORD ON CONTEXT
88. Th  a c.
89. Th  a Nuc pow stn.
90. Th  a space shu
91. Th  ne  e gs...
92. Th  w yr dhbod wi be us.
93. T pot , we’ not *always* fighng f t.
94. 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
95. 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
96. Let’s take 3 points from Tufte
97. C junk:  stuff  don’t cnge wn  da cng
98. Da Ink R: wt pctage  yr k shows da
99. Smat Effecve Diffce:  t y c do  highlight
100. Smat Effecve Diffce:  t y c do  highlight These colours would get very loud. Unnecessarily so.
101. Smat Effecve Diffce:  t y c do  highlight These are far quieter.
102. 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
103. 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
104. 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
105. 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
106. 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.
107. 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
108. 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
109. This isn’t about visual design
110. 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
111. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F CLOSG POTS
112. 1. THEY HAVE TO SAY SOMETHING T wst vualns e   y lk  just k “Heh.”
113. Lks g, but mak vy lt sse.
114. 2. DASHBOARDS & VISUALS EVOLVE Ty ly make sse wn y ve gh da
115. VANITY DASHBOARDS
116. START WITH THE BASICS
117. ADD INSIGHT AS YOU NEED IT
118. ADD A YEARLY VIEW, AFTER A YEAR
119. INCLUDE INSIGHTS & ACTIONS
120. CONSIDER ADDING PROJECTIONS
121. GET INSIGHTS INTO ENGAGEMENT What types of users do we have?
122. INSIGHTS INTO ENGAGEMENT 2 main clusters it appears.
123. INSIGHTS INTO BUSINESS MODELS How’s that Freemium model working out for us?
124. 3. PRESENTING AN ARGUMENT It’s okay  a vuals if yr goal  me  htly psng fo
125. 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
126. 0 5 10 15 J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec Get your data first.
128. Bring the fancy shit afterwards.
129. 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
130. 4. THEY’RE NOT ALL FIRST TIMERS Like c pys ust cbods, peop c n  ust vualns
131. This isn’t immediately understandable for everyone.
132. For those used to it, it’s perfect.
134. 5. IMPLEMENTATION TOOLS HTML f  w.
135. Google Chart Editor is a good easy start.
136. Highcharts is excellent and worth the money
137. 6. REFERENCES W c I ad me?
138. Bks Stepn Few - “Dhbod Dign” & “Now y s ” Brn Suda - “Digng wh Da” Edwd Tufte - T first two. Blogs Stepn Few -> hp://pceptuadge.com Icom (me) -> hp://blog.tcom.
139. PIC  MAG TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA KNOW YR VUALS KNOW YR Y CLOSG POTS F F
140. Tnks :) @strayn s@tcom.