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

Slide 1

Slide 1 text

Da vualn  web alicns

Slide 2

Slide 2 text

D Trayn @ﬆrayn, UX Dign & C @tcom

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

We e drowng  da.

Slide 5

Slide 5 text

Useful Rdab Mngful Be  text Adaptab IT ’S HARD TO MAKE VISUALS

Slide 6

Slide 6 text

Be clear ﬁrst 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

Visualising the Gulf Oil Spill...

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Okay, lets try with football...

Slide 14

Slide 14 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 15

Slide 15 text

Slide 16

Slide 16 text

T!" “#$%&-&$'()*#+!&, -(."-"$%” N( /#%# 0#1 !#*-"/ &$ 2!" -34&$) 5 2!"1" &$'(-)*#+!&,1

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

WHO IS THE INFO FOR? Surpre surpre,  UX du  talkg abt knowg yr uss.

Slide 20

Slide 20 text

WHAT ROLE? T ro ﬁn  v  abﬆrac quid.

Slide 21

Slide 21 text

CEO Lev tail Stregic view Focus   lg tm High v ovview Simp suy

Slide 22

Slide 22 text

* Qry driv alys * Psn quid * Emps  ts,  cs Analyﬆ ro

Slide 23

Slide 23 text

Opns/Logcs Focus  cut ﬆus I & Evt driv e.g. As, spik, trb

Slide 24

Slide 24 text

WHAT DEPARTMENT? T ptmt ﬁn  doma knowdge

Slide 25

Slide 25 text

SALES DEPARTMENT Lds, cvsns, avg. val p sa, etc

Slide 26

Slide 26 text

MARKETING DEPARTMENT Impns, loyalty, aws, s

Slide 27

Slide 27 text

NETWORK & IT Is, ckets, ad me, op c, upme

Slide 28

Slide 28 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 29

Slide 29 text

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

Slide 30

Slide 30 text

$ Sas day # Un sas Avg $ p sa Th pd vs ﬆ pd Us vs Comper Total  m Popur products % Cnge  sas Avg. $ p cuﬆom WHICH OF THESE?

Slide 31

Slide 31 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 32

Slide 32 text

6 THINGS TO COMMUNICATE

Slide 33

Slide 33 text

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 ﬆus Not: Sg numbs c ve ﬆ (gd,bad etc)

Slide 34

Slide 34 text

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 ﬁgu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%

Slide 35

Slide 35 text

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

Slide 36

Slide 36 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 Wk bt wh pse da (e.g. day  day) GOOD LINE CHART

Slide 37

Slide 37 text

10 20 30 40 50 Jan Feb Mar Apri May BAD LINE CHART

Slide 38

Slide 38 text

10 20 30 40 50 Jan Feb Mar Apri May BAR CHART

Slide 39

Slide 39 text

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  duﬆry ﬆd?

Slide 40

Slide 40 text

0 12500 25000 37500 50000 Jan Feb Mar April May June July August September October November December Actual Tget BAD LINE CHART

Slide 41

Slide 41 text

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...

Slide 42

Slide 42 text

-40% -30% -20% -10% 0% 10% 20% Jan Feb Mar April May June July August September October November December FOCUS ON THE DELTA

Slide 43

Slide 43 text

5. BREAKDOWN OF A VARIABLE “Wt age grps e buyg r ﬆuﬀ? Wt cri e we big ?” Examps: Who e r cuﬆoms? Wts r aws like  ch mographic? Wt browss e peop usg se days?

Slide 44

Slide 44 text

Amica I U.K. Cada Auﬆral Spa Frce BAD PIE CHART

Slide 45

Slide 45 text

Amica I U.K. Cada Auﬆral Spa Frce YOU COULD ADD THE DATA... 9% 15% 9% 11% 18% 23% 15%

Slide 46

Slide 46 text

0% 7.500% 15.000% 22.500% 30.000% Ireland U.K. America Spain Canada Australia SORTED BAR CHART

Slide 47

Slide 47 text

LYING WITH GROUPINGS T 1K  2k  w we nd  tax!

Slide 48

Slide 48 text

LYING WITH GROUPINGS Or maybe not...

Slide 49

Slide 49 text

O* /("1 &%? http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor LYING WITH GROUPINGS

Slide 50

Slide 50 text

LYING WITH ROTATIONS

Slide 51

Slide 51 text

LYING WITH DIMENSIONS

Slide 52

Slide 52 text

BAD: AREA PLOT D C B A E

Slide 53

Slide 53 text

BAD: AREA PLOT D C B A E Which would you pick?

Slide 54

Slide 54 text

A B BAD: AREA PLOT - = How “big”  ?

Slide 55

Slide 55 text

BAD: AREA PLOT D C B A E

Slide 56

Slide 56 text

BAD UNIT PLOT

Slide 57

Slide 57 text

5. BREAKDOWN OF A VARIABLE “B cs ’t sexy, but y ly   ne ski, foowg a le. ”

Slide 58

Slide 58 text

If you had to fight one of them...

Slide 59

Slide 59 text

6. BREAKDOWN OVER TIME “How s  compn cng ov  ﬆ yr?” Examps: How s  brows mket cng? H r v src shift ctly?

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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?

Slide 62

Slide 62 text

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?

Slide 63

Slide 63 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 64

Slide 64 text

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

Slide 65

Slide 65 text

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 $"."*

Slide 66

Slide 66 text

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?

Slide 67

Slide 67 text

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?

Slide 68

Slide 68 text

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?

Slide 69

Slide 69 text

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?

Slide 70

Slide 70 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 71

Slide 71 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 72

Slide 72 text

If it was easy, we’d all be great snooker/ pool players

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Vuals counice 2 gs. Cegy Quty

Slide 75

Slide 75 text

WAYS TO VISUALISE QUANTITY Le ng Le wid Colr tsy Size Quty Spd

Slide 76

Slide 76 text

HOW TO VISUALISE CATEGORY Le type Colr Locn Spe

Slide 77

Slide 77 text

Y’ve juﬆ tak ov a hot. Y’   as. Exc . W do we ﬆt? HOW TO USE ALL THIS?

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

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

Slide 81

Slide 81 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 Dign  sut alyﬆ qri...

Slide 82

Slide 82 text

Anor examp. Wt    gog   Europe?

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Cd: S. Few & Tom Wks

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

A WORD ON CONTEXT

Slide 88

Slide 88 text

Th  a c.

Slide 89

Slide 89 text

Th  a Nuc pow ﬆn.

Slide 90

Slide 90 text

Th  a space shu

Slide 91

Slide 91 text

Th  ne  e gs...

Slide 92

Slide 92 text

Th  w yr dhbod wi be us.

Slide 93

Slide 93 text

T pot , we’ not *always* ﬁghng f t.

Slide 94

Slide 94 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 95

Slide 95 text

Slide 96

Slide 96 text

Let’s take 3 points from Tufte

Slide 97

Slide 97 text

C junk:  ﬆuﬀ  don’t cnge wn  da cng

Slide 98

Slide 98 text

Da Ink R: wt pctage  yr k shows da

Slide 99

Slide 99 text

Smat Eﬀecve Diﬀce:  t y c do  highlight

Slide 100

Slide 100 text

Smat Eﬀecve Diﬀce:  t y c do  highlight These colours would get very loud. Unnecessarily so.

Slide 101

Slide 101 text

Smat Eﬀecve Diﬀce:  t y c do  highlight These are far quieter.

Slide 102

Slide 102 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 103

Slide 103 text

Slide 104

Slide 104 text

Slide 105

Slide 105 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 106

Slide 106 text

Slide 107

Slide 107 text

Slide 108

Slide 108 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 109

Slide 109 text

This isn’t about visual design

Slide 110

Slide 110 text

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

1. THEY HAVE TO SAY SOMETHING T wﬆ vualns e   y lk  juﬆ k “Heh.”

Slide 113

Slide 113 text

Lks g, but mak vy lt sse.

Slide 114

Slide 114 text

2. DASHBOARDS & VISUALS EVOLVE Ty ly make sse wn y ve gh da

Slide 115

Slide 115 text

VANITY DASHBOARDS

Slide 116

Slide 116 text

START WITH THE BASICS

Slide 117

Slide 117 text

ADD INSIGHT AS YOU NEED IT

Slide 118

Slide 118 text

ADD A YEARLY VIEW, AFTER A YEAR

Slide 119

Slide 119 text

INCLUDE INSIGHTS & ACTIONS

Slide 120

Slide 120 text

CONSIDER ADDING PROJECTIONS

Slide 121

Slide 121 text

GET INSIGHTS INTO ENGAGEMENT What types of users do we have?

Slide 122

Slide 122 text

INSIGHTS INTO ENGAGEMENT 2 main clusters it appears.

Slide 123

Slide 123 text

INSIGHTS INTO BUSINESS MODELS How’s that Freemium model working out for us?

Slide 124

Slide 124 text

3. PRESENTING AN ARGUMENT It’s okay  a vuals if yr goal  me  htly psng fo

Slide 125

Slide 125 text

The world is not ﬁlled 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 126

Slide 126 text

0 5 10 15 J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec Get your data first.

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

Bring the fancy shit afterwards.

Slide 129

Slide 129 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-ﬁnd bathrooms. But nobody would be there. They would all be down the street at Coyote Ugly pouring beer on each other. — Joel Spolsky

Slide 130

Slide 130 text

4. THEY’RE NOT ALL FIRST TIMERS Like c pys uﬆ cbods, peop c n  uﬆ vualns

Slide 131

Slide 131 text

This isn’t immediately understandable for everyone.

Slide 132

Slide 132 text

For those used to it, it’s perfect.

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

5. IMPLEMENTATION TOOLS HTML f  w.

Slide 135

Slide 135 text

Google Chart Editor is a good easy start.

Slide 136

Slide 136 text

Highcharts is excellent and worth the money

Slide 137

Slide 137 text

6. REFERENCES W c I ad me?

Slide 138

Slide 138 text

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 ﬁrﬆ two. Blogs Stepn Few -> hp://pceptuadge.com Icom (me) -> hp://blog.tcom.

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

Tnks :) @ﬆrayn s@tcom.