Da vualn  web alicns
D Trayn@strayn,UX Dign,C  Icom,
Icom.
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
AdaptabBe  textIT ’S HARD TO MAKE VISUALSUseful                        Mngful               Rdab
“ Be clear first and clever  second. If you have to throw  one of those out, throw out  clever.  — Jason Fried
VISUALS CAN CONFUSE
A 3 w a y t i e fo r 1 9 3 % . . .
To o m u c h n o i s e
Huh?
H e y J o e , w e n e e d to v i s u a l i s e 1 8 4 m i l l i o n g a l l o n s . W h at ’y a g ot ?
O k a y , l ets t r y w i t h fo ot b a l l . . .
If the Gulf of Mexico - the 7th largest body of waterin the world, containing approximately 660quadrillion gallons of wate...
If the Gulf of Mexico - the 7th largest body of waterin the world, containing approximately 660quadrillion gallons of wate...
If the Gulf of Mexico - the 7th largest body of waterin the world, containing approximately 660quadrillion gallons of wate...
T!" “#$%&-&$()*#+!&,-(."-"$%”N( /#%# 0#1 !#*-"/&$ 2!" -34&$) 5 2!"1"&$(-)*#+!&,1
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
WHO IS THE INFO FOR?Surpre surpre,  UX du  talkg abt knowg yr uss.
W H A T RO L E ?
CEO Lev tailStregic viewFocus   lg tmHigh v ovviewSimp suy
Analyst ro* Qry driv alys* Psn quid* Emps  ts,   cs
Opns/LogcsFocus  cut stusI & Evt drive.g. As, spik, trb
W H AT D E PA R T M E N T ?
S A L E S D E PA R T M E N TLds, cvsns, avg. val p sa, etc
M A R K E T I N G D E PA R T M E N T    Impns, loyalty, aws, s
NETWORK & ITIs, ckets, ad me, op c, upme
CUSTOMER                      SALES             MARKETING                                                              SUP...
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
# Un sas    $ Sas day                       Avg $ p saUs vs Comper             WHICH OF THESE? Avg. $ p          ...
Top selling itemsTOTAL SALES   CHANGE     Item name                                       Unit sales    % of total     Cha...
6 THINGS TO COMMUNICATE
1. COMMUNICATE A SINGLE FIGUREUs wn ctext  obvus, psn  quid,  pt/futu  ievt  us.Examps:              ...
2. SINGLE FIGURE WITH CONTEXT“How e we dog ty? Any probms  hiz?”Examps:                                  READERS ...
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 setsLkg aad b  cut daCo...
GOOD LINE CHART5040302010     1   2   3   4   5   6   7   8   9   10 11 12   13   14   15   16   17   18   19   20   21   ...
BA D L I N E C H A R T5040302010         Jan         Feb           Mar          Apri        MayL i n e c h a r ts fo r l a...
BA R C H A R T 50 40 30 20 10         Jan       Feb         Mar        Apri       MayT h i s i s t h e s a m e d ata b ut ...
4 . A N A L Y S I S O F P E R I O D , W I T H T A RG E T Did we h r sas figus? A we fulfig r five n quota? Examps:...
BA D L I N E C H A R T50000375002500012500   0        Jan    Feb   Mar   April   May       June   July      August   Septe...
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...
F O C U S O N T H E D E LT A   20%   10%    0%   -10%   -20%   -30%   -40%          Jan    Feb   Mar   April   May   June ...
4 . B R E A K D O W N O F A VA R I AB L E“Wt age grps e buyg r stuff? Wt cri e webig ?”Examps:Who e r customs?...
BA D P I E C H A R T                                    Amica                                    I                    ...
Y O U C O U L D A D D T H E DATA . . .                                                Amica               9%    15%      ...
S O R T E D BA R C H A R T30.000%22.500%15.000%7.500%    0%          Ireland    U.K.    America    Spain     Canada   Aust...
L Y I N G W I T H G RO U P I N G ST h i s c h a r t s h o w s t h at $ 1 0 0 - 2 0 0 K i s h u g e
L Y I N G W I T H G RO U P I N G SA s e c o n d g r o u p i n g s h o w&%? 2 0 0 K i s m a s s i v e .                    ...
L Y I N G W I T H G RO U P I N G Sh t tp : / /m ot h e r j o n e s . c o m / k e v i n - dO* / /("15 &%?n -c h a r ts - m ...
L Y I N G W I T H RO T A T I O N SB y p ut t i n g A p p l e at f r o n t a n d t i l t i n g b a c k ,             y o u ...
LYING WITH DIMENSIONSI t ’s c l e a r e r i n t h i s c h a r t w h e r e A p p l e i s
BA D : A R E A P L O T                    B                                A              E                               ...
BA D : A R E A P L O T                     B                                 A                E                           ...
BA D : A R E A P L O T      B              A  E                  D          CWhich would you pick?
BA D : A R E A P L O T  A             -           B                                    =                                  ...
BA D : A R E A P L O T                    B                               A              E                                ...
BA D U N I T P L O TSo 3 x 8 minus 1 = 23. 8 + 1 is 9....
BA D U N I T P L O TW h y a m I d o i n g m at h s to w o r k t h i s o ut ?
4 . B R E A K D O W N O F A VA R I AB L E“B cs ’t sexy, but y ly   ne ski,foowg a le. ” W e c a n fo l l o ...
I f y o u h a d to f i g h t o n e o f t h e m . . .
4. 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 ...
S T A C K E D BA R C H A R T70000525003500017500   0        Jan   Feb   Mar   April   May   June    July   August    Septe...
S T A C K E D BA R C H A R T70000525003500017500   0        Jan   Feb   Mar    April   May   June   July   August   Septem...
S T A C K E D BA R C H A R T70000525003500017500   0        Jan   Feb   Mar    April   May   June   July   August   Septem...
LYING WITH DIMENSIONS                                                                                                     ...
LET ’S TRY A LINE CHART50000375002500012500   0        Jan    Feb   Mar   April   May   June     July   August    Septembe...
L I N E C H A R T O F S A M E DATA ?50000375002500012500   0        Jan    Feb   Mar   April   May   June   July   August ...
LETS TRY A LINE CHART 50000 37500 25000 12500    0         Jan     Feb   Mar   April   May   June   July   August   Septem...
BA R C H A R T S A G A I N ?50000375002500012500   0        Jan   Feb   Mar   April   May   June   July   August   Septemb...
BA R C H A R T S A G A I N ?50000375002500012500   0        Jan   Feb   Mar   April     May   June   July   August   Septe...
BA R C H A R T S A G A I N ?50000375002500012500   0        Jan   Feb   Mar   April   May   June    July   August    Septe...
BA R C H A R T S A G A I N ?50000375002500012500   0        Jan   Feb   Mar   April   May   June   July   August   Septemb...
INTERACTIVE, REMEMBER?50000375002500012500   0        Jan      Feb   Mar   April   May   June   July   August   September ...
S T A C K E D BA R C H A R T70000525003500017500   0        Jan      Feb   Mar   April   May   June   July   August   Sept...
S T A C K E D BA R C H A R T70000525003500017500   0        Jan   Feb    Mar    April   May   June   July   August   Septe...
I f i t w a s e a s y , w e ’d a l l b e g r e at s n o o k e r/                       p o o l p l a y e rs
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
COMMUNICATING 2 THINGS.WHAT TYPE?    HOW MANY?
Le ng               Le wid                Colr tsy  WAYS T O V I S UA L I S E Q UA N T I T Y   Size              ...
Le type                Colr                     Spe  HOW TO VISUALISE CATEGORY  LocnT h i s i s h o w y o u c o m m u...
HOW TO USE ALL THIS?Y’ve just tak ov a hot. Y’   as.Exc . W do we stt?
Q: A we makg y mey?    Pr   dtce betwn cts  v. Let’s s     f  yr.                                   ...
Q: Wt s do  mey come from?Let’s compe  pctage  v g by chcegy.50%40%30%20%10%      Rms   Wdgs   B ...
Q: Wt st  pric do we crge p rm?Let’s lk   price rge  mn val€175€150€100€75€50       King suite   Junior Sui...
Dign  sut alyst qri...MIDWEST HOTELZREPORT           TYPE            ROOM TYPE     PERIOD      GUEST TYPE REVENUE   ...
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
A WORD ON CONTEXT
Th  a c.
Th  a Nuc pow stn.
Th  a space shu
Th  ne  e gs...
Th  w yr dhbod wi be us.
T pot , we’ not *always*    fighng f t.
Sales Report Jan 2012ORDERS       CHANGE           ACCOUNTS CHANGE            SITE LIVE12,247         0.32%          7,343...
Sales Report Jan 2012ORDERS       CHANGE           ACCOUNTS CHANGE            SITE LIVE12,247         0.32%          7,343...
L et ’s ta k e 3 p o i n ts f r o m Tu f te
C junk:  stuff  don’t cnge wn  da cng
Da Ink R: wt pctage  yr k shows da
Smat Effecve Diffce:  t y c do  highlight
Smat Effecve Diffce:  t y c do  highlightT h e s e c o l o u r s w o u l d g et v e r y l o u d . U n n e c e s s...
Smat Effecve Diffce:  t y c do  highlight                T h e s e a r e fa r q u i ete r.
Sales Report Jan 2012               ORDERS        CHANGE            ACCOUNTS CHANGE             SITE LIVE               12...
Sales Report Jan 2012ORDERS        CHANGE            ACCOUNTS CHANGE             SITE LIVE12,247          0.32%           ...
Sales Report Jan 2012ORDERS        CHANGE            ACCOUNTS CHANGE             SITE LIVE12,247          0.32%           ...
HTML doesn’t hasa <strong>tag butno <weak> tag.As a result, weforget to thinkabout what’s lessimportant on thescreen.— Rya...
Sales Report Jan 2012ORDERS         CHANGE           ACCOUNTS CHANGE             SITE LIVE12,247           0.32%          ...
Sales Report Jan 2012ORDERS        CHANGE            ACCOUNTS CHANGE             SITE LIVE12,247          0.32%           ...
Sales Report Jan 2012ORDERS        CHANGE            ACCOUNTS CHANGE             SITE LIVE12,247          0.32%           ...
L et ’s c o m p a r e w i t h w h e r e w e c a m e f r o m .
Sales Report Jan 2012              ORDERS         CHANGE            ACCOUNTS CHANGE             SITE LIVE              12,...
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
1 . T H E Y H AV E T O S A Y S O M E T H I N G   T wst vualns e   y lk  just                  k “h.”
Lks g, but mak vy lt sse.
2 . D A S H B O A R D S & V I S U A L S E V O LV E       Ty ly make sse wn y ve gh da
VA N I T Y DAS H B OA R D S
S T A R T W I T H T H E BA S I C S
A D D I N S I G H T AS Y O U N E E D I T
ADD A YEARLY VIEW, AFTER A          YEAR
INCLUDE INSIGHTS & ACTIONS
C O N S I D E R A D D I N G P RO J E C T I O N S
GET INSIGHTS INTO ENGAGEMENT     W h at ty p e s o f u s e r s d o w e h a v e ?
INSIGHTS INTO ENGAGEMENT    2 m a i n c l u ste r s i t a p p e a r s .
INSIGHTS INTO BUSINESS MODELS H o w s t h at F r e e m i u m m o d e l w o r k i n g o ut fo r u s ?
3 . P R E S E N T I N G A N A RG U M E N TIt’s okay  a vuals if yr goal  me  htly psng fo
The world is not filled withprofessional statisticians.Many of us would like a quick glancejust to get a good idea of somet...
15105 0   J   Feb M    Apr May Jun Jul Aug Sep Oct Nov Dec                 G et y o u r d ata f i r st.
B r i n g t h e fa n c y s h i t a f te r w a rd s .
Usability is not everything. If usabilityengineers designed a nightclub, it wouldbe clean, quiet, brightly lit, with lots ...
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
T h i s i s n ’ t i m m e d i ate l y u n d e r sta n d a b l e fo r e v e r y o n e .
F o r t h o s e u s e d to i t, i t ’s p e r fe ct.
5. IMPLEMENTATION TOOLS        HTML f  w.
G o o g l e C h a r t E d i to r i s a g o o d e a s y sta r t.
H i g h c h a r ts i s e x c e l l e n t a n d w o r t h t h e m o n e y
TRO                   KNOW YR AUDICE                          KNOW YR DOMA                                  KNOW YR ...
If y joy ,   pe t me know@strayn   s@tcom.
Use Icom.
Designing Dashboards & Data Visualisations in Web Apps
Designing Dashboards & Data Visualisations in Web Apps
Upcoming SlideShare
Loading in …5
×

Designing Dashboards & Data Visualisations in Web Apps

1,839 views

Published on

Supporting blog post : http://blog.intercom.io/data-visualisation-in-web-apps/

I have given variations of this presentation at conferences such as MIX11, MidwestUX, ReMix. You can find a video recording of it at http://channel9.msdn.com/Events/MIX/MIX11/OPN04

Published in: Design, Business, Technology

Designing Dashboards & Data Visualisations in Web Apps

  1. 1. Da vualn  web alicns
  2. 2. D Trayn@strayn,UX Dign,C  Icom,
  3. 3. Icom.
  4. 4. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  5. 5. AdaptabBe  textIT ’S HARD TO MAKE VISUALSUseful Mngful Rdab
  6. 6. “ Be clear first and clever second. If you have to throw one of those out, throw out clever. — Jason Fried
  7. 7. VISUALS CAN CONFUSE
  8. 8. A 3 w a y t i e fo r 1 9 3 % . . .
  9. 9. To o m u c h n o i s e
  10. 10. Huh?
  11. 11. H e y J o e , w e n e e d to v i s u a l i s e 1 8 4 m i l l i o n g a l l o n s . W h at ’y a g ot ?
  12. 12. O k a y , l ets t r y w i t h fo ot b a l l . . .
  13. 13. If the Gulf of Mexico - the 7th largest body of waterin the world, containing approximately 660quadrillion gallons of water (thats 660 with 15zeros) - was represented by Cowboys Stadium inDallas - the largest domed stadium in the world -how would the spill stack up? In this example, theamount of oil spilled  - if the  Gulf of Mexico  was thesize of Cowboys Stadium - would be about the size ofa 24 ounce  can of beer. Cowboys stadium has aninternal volume of approximately 104 million cubicfeet, compared to the just over 50 cubic inches ofvolume in a 24-ounce can.Just like the can, the spilled oil represents only .00000002788% of the liquid volume present in theGulf of Mexico, although as the oil is dispersed, theamount of water affected  becomes substantiallygreater.
  14. 14. If the Gulf of Mexico - the 7th largest body of waterin the world, containing approximately 660quadrillion gallons of water (thats 660 with 15zeros) - was represented by Cowboys Stadium inDallas - the largest domed stadium in the world -how would the spill stack up? In this example, theamount of oil spilled  - if the  Gulf of Mexico  was thesize of Cowboys Stadium - would be about the size ofa 24 ounce  can of beer. Cowboys stadium has aninternal volume of approximately 104 million cubicfeet, compared to the just over 50 cubic inches ofvolume in a 24-ounce can.Just like the can, the spilled oil represents only .00000002788% of the liquid volume present in theGulf of Mexico, although as the oil is dispersed, theamount of water affected  becomes substantiallygreater.
  15. 15. If the Gulf of Mexico - the 7th largest body of waterin the world, containing approximately 660quadrillion gallons of water (thats 660 with 15zeros) - was represented by Cowboys Stadium inDallas - the largest domed stadium in the world -how would the spill stack up? In this example, theamount of oil spilled  - if the  Gulf of Mexico  was thesize of Cowboys Stadium - would be about the size ofa 24 ounce  can of beer. Cowboys stadium has aninternal volume of approximately 104 million cubicfeet, compared to the just over 50 cubic inches ofvolume in a 24-ounce can.Just like the can, the spilled oil represents only .00000002788% of the liquid volume present in theGulf of Mexico, although as the oil is dispersed, theamount of water affected  becomes substantially Y e a h , I t h i n k e v e r y o n e g et ’s t h atgreater.
  16. 16. T!" “#$%&-&$()*#+!&,-(."-"$%”N( /#%# 0#1 !#*-"/&$ 2!" -34&$) 5 2!"1"&$(-)*#+!&,1
  17. 17. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  18. 18. WHO IS THE INFO FOR?Surpre surpre,  UX du  talkg abt knowg yr uss.
  19. 19. W H A T RO L E ?
  20. 20. CEO Lev tailStregic viewFocus   lg tmHigh v ovviewSimp suy
  21. 21. Analyst ro* Qry driv alys* Psn quid* Emps  ts,  cs
  22. 22. Opns/LogcsFocus  cut stusI & Evt drive.g. As, spik, trb
  23. 23. W H AT D E PA R T M E N T ?
  24. 24. S A L E S D E PA R T M E N TLds, cvsns, avg. val p sa, etc
  25. 25. M A R K E T I N G D E PA R T M E N T Impns, loyalty, aws, s
  26. 26. NETWORK & ITIs, ckets, ad me, op c, upme
  27. 27. CUSTOMER SALES MARKETING SUPPORT * Satisfaction Rating * Trend per quarterMANAGEMENT * Comparison with competitors * My Active leads * Value per leadANALYST * Progress towards target * Active campaigns * Current CPM/CPCOPERATIONS * Landing pageD ata r e q u i r e d d e p e n d s o n r o l e & d e p a r t m e n t
  28. 28. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  29. 29. # Un sas $ Sas day Avg $ p saUs vs Comper WHICH OF THESE? Avg. $ p Th pd vs st pd custom Total  % Cnge Popur m  sas products
  30. 30. Top selling itemsTOTAL 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
  31. 31. 6 THINGS TO COMMUNICATE
  32. 32. 1. COMMUNICATE A SINGLE FIGUREUs wn ctext  obvus, psn  quid,  pt/futu  ievt  us.Examps: BALANCE crk wh a wag ltCckg bk bae $23.00Sys adm cckg cut stus BALANCENot: $11.32Sg numbs c ve st (gd,bad etc) BALANCE $11.32
  33. 33. 2. SINGLE FIGURE WITH CONTEXT“How e we dog ty? Any probms  hiz?”Examps: READERS CHANGEHow we  ms sas? 12,247 0.32%Is  netwk pfmg wl?Hows r us figus lkg? READERS CHANGE 15,231 9.52%Not:Spk-l c save space,  provi ctext
  34. 34. 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 setsLkg aad b  cut daComp wh pvus pd
  35. 35. GOOD LINE CHART5040302010 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 Wk bt wh pse da (e.g. day  day) W o r k s b e st w i t h p r e c i s e u n i ts ( e . g . d a y s )
  36. 36. BA D L I N E C H A R T5040302010 Jan Feb Mar Apri MayL i n e c h a r ts fo r l a r g e p e r i o d s c a n m i s l e a d
  37. 37. BA R C H A R T 50 40 30 20 10 Jan Feb Mar Apri MayT h i s i s t h e s a m e d ata b ut o n l y s h o w s fa ct
  38. 38. 4 . A N A L Y S I S O F P E R I O D , W I T H T A RG E T 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?
  39. 39. BA D L I N E C H A R T50000375002500012500 0 Jan Feb Mar April May June July August September October November December Actual Tget T h i s g u y i s m e et i n g h i s ta r g et, r i g h t ?
  40. 40. 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...
  41. 41. F O C U S O N T H E D E LT A 20% 10% 0% -10% -20% -30% -40% Jan Feb Mar April May June July August September October November DecemberS a m e g u y . S a m e d ata . H e ’s g et t i n g f i r e d .
  42. 42. 4 . B R E A K D O W N O F A VA R I AB L E“Wt age grps e buyg r stuff? Wt cri e webig ?”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?
  43. 43. BA D P I E C H A R T Amica I U.K. Cada Austral Spa FrceW h e r e a r e w e m o st r e l e v a n t ?
  44. 44. Y O U C O U L D A D D T H E DATA . . . Amica 9% 15% I 15% U.K. 23% Cada 9% Austral 11% 18% Spa FrceA h , n o w I s e e , S p a i n & A m e r i c a a re e q u a l . . .
  45. 45. S O R T E D BA R C H A R T30.000%22.500%15.000%7.500% 0% Ireland U.K. America Spain Canada Australia W e l l t h at ’s a g o o d b i t c l e a r e r : )
  46. 46. L Y I N G W I T H G RO U P I N G ST h i s c h a r t s h o w s t h at $ 1 0 0 - 2 0 0 K i s h u g e
  47. 47. L Y I N G W I T H G RO U P I N G SA s e c o n d g r o u p i n g s h o w&%? 2 0 0 K i s m a s s i v e . O* /("1 s
  48. 48. L Y I N G W I T H G RO U P I N G Sh t tp : / /m ot h e r j o n e s . c o m / k e v i n - dO* / /("15 &%?n -c h a r ts - m a k i n g - r i c h - l o o k -p o o r r u m 2 0 1 1 / 0 / fu
  49. 49. L Y I N G W I T H RO T A T I O N SB y p ut t i n g A p p l e at f r o n t a n d t i l t i n g b a c k , y o u s e e m o re g re e n p i x e l s
  50. 50. LYING WITH DIMENSIONSI t ’s c l e a r e r i n t h i s c h a r t w h e r e A p p l e i s
  51. 51. BA D : A R E A P L O T B A E D CB u b b l e p l ots a r e t r i c k y to w o r k w i t h .
  52. 52. BA D : A R E A P L O T B A E D CI f y o u c o u l d h a v e ‘a ’ o r a l l t h e r e st. . .
  53. 53. BA D : A R E A P L O T B A E D CWhich would you pick?
  54. 54. BA D : A R E A P L O T A - B = How “big”  ?W e c a n ’ t m e a s u r e t h e d i f fe r e n c e
  55. 55. BA D : A R E A P L O T B A E D CA i s b i g g e r t h a n a l l t h e r e st. Y e a h : )
  56. 56. BA D U N I T P L O TSo 3 x 8 minus 1 = 23. 8 + 1 is 9....
  57. 57. BA D U N I T P L O TW h y a m I d o i n g m at h s to w o r k t h i s o ut ?
  58. 58. 4 . B R E A K D O W N O F A VA R I AB L E“B cs ’t sexy, but y ly   ne ski,foowg a le. ” W e c a n fo l l o w l i n e s . I t ’s a s u r v i v a l t h i n g : )
  59. 59. I f y o u h a d to f i g h t o n e o f t h e m . . .
  60. 60. 4. 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?
  61. 61. S T A C K E D BA R C H A R T70000525003500017500 0 Jan Feb Mar April May June July August September October November December I U.K Amica
  62. 62. S T A C K E D BA R C H A R T70000525003500017500 0 Jan Feb Mar April May June July August September October November December A-"*&,# p e a k e d &$nJ789? ? America 6"34"/ i J u l y
  63. 63. S T A C K E D BA R C H A R T70000525003500017500 0 Jan Feb Mar April May June July August September October November December A-"*&,# a s U . K . &$oJ789? How h 6"34"/ d n e ?
  64. 64. LYING WITH DIMENSIONS 70000 52500 35000Jan Feb 17500 Mar April May June July August September October 0 November December L ots m o r e y e l l o w p i x e l s h e r e n o w . . .
  65. 65. LET ’S TRY A LINE CHART50000375002500012500 0 Jan Feb Mar April May June July August September October November December I U.K Amica
  66. 66. L I N E C H A R T O F S A M E DATA ?50000375002500012500 0 Jan Feb Mar April May June July August September October November December A-"*&,# ($ata . :6.f;K r$"."*sto r y . Same d 2!" D i fe e n t <!#$)"/?
  67. 67. LETS TRY A LINE CHART 50000 37500 25000 12500 0 Jan Feb Mar April May June July August September October November DecemberU.k. A-"*&,#h($ 2!"d :6.r e l a n d p e a k e d i n J u l y . Never c ange . I ;K $"."* <!#$)"/?
  68. 68. BA R C H A R T S A G A I N ?50000375002500012500 0 Jan Feb Mar April May June July August September October November December I U.K Amica
  69. 69. BA R C H A R T S A G A I N ?50000375002500012500 0 Jan Feb Mar April May June July August September October November December I U.K Amica
  70. 70. BA R C H A R T S A G A I N ?50000375002500012500 0 Jan Feb Mar April May June July August September October November December I U.K Amica
  71. 71. BA R C H A R T S A G A I N ?50000375002500012500 0 Jan Feb Mar April May June July August September October November December I U.K Amica
  72. 72. INTERACTIVE, REMEMBER?50000375002500012500 0 Jan Feb Mar April May June July August September October November December Y o u c a n a d a pt b a s e d o n I n te r ct i o n s
  73. 73. S T A C K E D BA R C H A R T70000525003500017500 0 Jan Feb Mar April May June July August September October November December W h y i s i t s o h a rd to fo l l o w t h e U . K h e r e ?
  74. 74. S T A C K E D BA R C H A R T70000525003500017500 0 Jan Feb Mar April May June July August September October November December BW h y ui s e i tm e a s h a irdg to h fo lcl o n s itste n U .yK ohfe rteh?e eca s ur n t e ow he c s o a n a n g l e d l i n e i s v e r y h a rd . width of
  75. 75. I f i t w a s e a s y , w e ’d a l l b e g r e at s n o o k e r/ p o o l p l a y e rs
  76. 76. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  77. 77. COMMUNICATING 2 THINGS.WHAT TYPE? HOW MANY?
  78. 78. Le ng Le wid Colr tsy WAYS T O V I S UA L I S E Q UA N T I T Y Size Quty SpdT h i s i s h o w y o u c o m m u n i c ate “ H o w m a n y ? ”
  79. 79. Le type Colr Spe HOW TO VISUALISE CATEGORY LocnT h i s i s h o w y o u c o m m u n i c ate “ W h at ty p e ? ”
  80. 80. HOW TO USE ALL THIS?Y’ve just tak ov a hot. Y’   as.Exc . W do we stt?
  81. 81. Q: A we makg y mey? Pr   dtce betwn cts  v. Let’s s  f  yr. 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 V i s u a l i s e t h e d e l ta
  82. 82. Q: Wt s do  mey come from?Let’s compe  pctage  v g by chcegy.50%40%30%20%10% Rms Wdgs B Gym/Spa Rtaurt Buss Cfc C o m p a r i s o n o f q u a n t i ty b a s e d o n c ate g o r y
  83. 83. Q: Wt st  pric do we crge p rm?Let’s lk   price rge  mn val€175€150€100€75€50 King suite Junior Suite Deluxe Room Standard Room Hostel W h y a r e j u n i o r s u i te s a v e r a g i n g s o l o w ?
  84. 84. Dign  sut alyst qri...MIDWEST HOTELZREPORT TYPE ROOM TYPE PERIOD GUEST TYPE REVENUE ROOMS & EXTRAS KING SUITES LAST YEAR ALL GUESTS PROFIT LOYALTY INCIDENTALS GUEST REPORT WEDDINGS CONFERENCES
  85. 85. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  86. 86. A WORD ON CONTEXT
  87. 87. Th  a c.
  88. 88. Th  a Nuc pow stn.
  89. 89. Th  a space shu
  90. 90. Th  ne  e gs...
  91. 91. Th  w yr dhbod wi be us.
  92. 92. T pot , we’ not *always* fighng f t.
  93. 93. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop productsProduct Orders $ Revenue
  94. 94. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop products L et ’s u s e t h i s st r a w m a nProduct Orders $ Revenue
  95. 95. L et ’s ta k e 3 p o i n ts f r o m Tu f te
  96. 96. C junk:  stuff  don’t cnge wn  da cng
  97. 97. Da Ink R: wt pctage  yr k shows da
  98. 98. Smat Effecve Diffce:  t y c do  highlight
  99. 99. Smat Effecve Diffce:  t y c do  highlightT h e s e c o l o u r s w o u l d g et v e r y l o u d . U n n e c e s s a r i l y s o .
  100. 100. Smat Effecve Diffce:  t y c do  highlight T h e s e a r e fa r q u i ete r.
  101. 101. 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.50G r a d i e n ts , s h a d o w s , c o l o r s , g r i d l i n e s . A l l n o n -c o n te n t Inception 9 72.50 The girl who kicked the hornets nest 15 54.05
  102. 102. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop productsProduct Orders $ RevenueThe girl with the dragon tattoo 11 88.50Inception L et ’s k i l l t h e g r a d i e n 9ts 72.50The girl who kicked the hornets nest 15 54.05
  103. 103. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop productsProduct Orders $ RevenueThe girl with the dragon tattoo 11 88.50Inception L et ’s k i l l t h e c o l o u r s9 72.50The girl who kicked the hornets nest 15 54.05
  104. 104. HTML doesn’t hasa <strong>tag butno <weak> tag.As a result, weforget to thinkabout what’s lessimportant on thescreen.— Ryan Singer
  105. 105. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop productsProduct Orders $ RevenueThe girl with the dragon tattoo 11 88.50Inception L et ’s a d j u st t h e s h a d i n g . 9 72.50The girl who kicked the hornets nest 15 54.05
  106. 106. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop productsProduct Orders $ RevenueThe girl with the dragon tattoo 11 88.50Inception 9 72.50The girl who kicked the hornets nest 15 54.05
  107. 107. Sales Report Jan 2012ORDERS CHANGE ACCOUNTS CHANGE SITE LIVE12,247 0.32% 7,343 4.32% PAYMENT LIVE FULFILLMENT ONRevenue per product40302010 Books Electronics Magazines Appliances e-goods OtherTop productsProduct Orders $ RevenueThe girl with the dragon tattoo 11 88.50Inception 9 72.50
  108. 108. L et ’s c o m p a r e w i t h w h e r e w e c a m e f r o m .
  109. 109. 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 $ RevenueW e c a n taInception h i s fu r t h e r. B ut t h i s i s n ’ t72.50 b o ut v i s u a l ke t The girl with the dragon tattoo a 11 88.50 design. 9 The girl who kicked the hornets nest 15 54.05
  110. 110. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  111. 111. 1 . T H E Y H AV E T O S A Y S O M E T H I N G T wst vualns e   y lk  just k “h.”
  112. 112. Lks g, but mak vy lt sse.
  113. 113. 2 . D A S H B O A R D S & V I S U A L S E V O LV E Ty ly make sse wn y ve gh da
  114. 114. VA N I T Y DAS H B OA R D S
  115. 115. S T A R T W I T H T H E BA S I C S
  116. 116. A D D I N S I G H T AS Y O U N E E D I T
  117. 117. ADD A YEARLY VIEW, AFTER A YEAR
  118. 118. INCLUDE INSIGHTS & ACTIONS
  119. 119. C O N S I D E R A D D I N G P RO J E C T I O N S
  120. 120. GET INSIGHTS INTO ENGAGEMENT W h at ty p e s o f u s e r s d o w e h a v e ?
  121. 121. INSIGHTS INTO ENGAGEMENT 2 m a i n c l u ste r s i t a p p e a r s .
  122. 122. INSIGHTS INTO BUSINESS MODELS H o w s t h at F r e e m i u m m o d e l w o r k i n g o ut fo r u s ?
  123. 123. 3 . P R E S E N T I N G A N A RG U M E N TIt’s okay  a vuals if yr goal  me  htly psng fo
  124. 124. The world is not filled withprofessional statisticians.Many of us would like a quick glancejust to get a good idea of something.If a graph is made easier tounderstand by such irrelevancies asa pile of oil cans or cars, then I sayall the better.— Don Norman
  125. 125. 15105 0 J Feb M Apr May Jun Jul Aug Sep Oct Nov Dec G et y o u r d ata f i r st.
  126. 126. B r i n g t h e fa n c y s h i t a f te r w a rd s .
  127. 127. Usability is not everything. If usabilityengineers designed a nightclub, it wouldbe clean, quiet, brightly lit, with lots ofplaces to sit down, plenty of bartenders,menus written in 18-point sans-serif,and easy-to-find bathrooms. But nobodywould be there. They would all be downthe street at Coyote Ugly pouring beer oneach other.— Joel Spolsky
  128. 128. 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
  129. 129. T h i s i s n ’ t i m m e d i ate l y u n d e r sta n d a b l e fo r e v e r y o n e .
  130. 130. F o r t h o s e u s e d to i t, i t ’s p e r fe ct.
  131. 131. 5. IMPLEMENTATION TOOLS HTML f  w.
  132. 132. G o o g l e C h a r t E d i to r i s a g o o d e a s y sta r t.
  133. 133. H i g h c h a r ts i s e x c e l l e n t a n d w o r t h t h e m o n e y
  134. 134. TRO KNOW YR AUDICE KNOW YR DOMA KNOW YR DATA MAG KNOW YR VUALS KNOW YR Y CLOSG POTS F PIC
  135. 135. If y joy , pe t me know@strayn s@tcom.
  136. 136. Use Icom.

×