designing dashboards & data visualisations in web apps

Da vualn web alicns

D Trayn

@strayn,UX Dign,C Icom,

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

F

TRO

UsefulRdab

Mngful

Be textAdaptab

I T ’ S H A R D T O M A K E V I S U A L S

Be clear first and clever second. If you have to throw one of those out, throw out clever.— Jason Fried

“

V I S U A L S C A N C O N F U S E

A 3 w a y t i e fo r 1 9 3 % . . .

To o m u c h n o i s e

H u h ?

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 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.Y e a h , I t h i n k e v e ry o n e g et ’s t h at

T!" “#$%&-&$'()*#+!&, -(."-"$%”

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

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

F

KNOW YR AUDICE

W H O I S T H E I N F O F O R ?Surpre surpre, UX du talkg abt knowg yr uss.

W H A T RO L E ?

CEO Lev tail

Stregic viewFocus lg tmHigh v ovviewSimp suy

* Qry driv alys* Psn quid* Emps ts, cs

Analyst ro

Opns/LogcsFocus cut stusI & Evt driv

e.g. As, spik, trb

W H A T D E PA R T M E N T ?

S A L E S D E PA R T M E N TLds, cvsns, avg. val p sa, etc

M A R K E T I N G D E PA R T M E N TImpns, loyalty, aws, s

N E T W O R K & I TIs, ckets, ad me, op c, upme

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

D 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

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

F

KNOW YR DATA

$ Sas day# Un sas

Avg $ p sa

Th pd vs st pd

Us vs Comper

Total m

Popur products

% Cnge sas

Avg. $ p custom

W H I C H O F T H E S E ?

W H I C H O F T H E S E ?

TOTAL SALES$12,240.65

CHANGE 5.32%

Top grossing items

% T

OTA

L RE

V.

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

Rev

enue

5

10

15

20

25

Uni

t sa

les

6 T H I N G S T O C O M M U N I C A T E

1 . C O M M U N I C A T E A S I N G L E F I G U R E

Us wn ctext obvus, psn quid, pt/futu ievt us.

BALANCE

$23.00BALANCE

$11.32BALANCE

$11.32

Examps: crk wh a wag ltCckg bk baeSys adm cckg cut stus

Not: Sg numbs c ve st (gd,bad etc)

2 . S I N G L E F I G U R E W I T H C O N T E X T

“How e we dog ty? Any probms hiz?”

Examps: How we ms sas?Is netwk pfmg wl?Hows r us figus lkg?

Not: Spk-l c save space, provi ctext

READERS12,247

CHANGE 0.32%

READERS15,231

CHANGE 9.52%

3 . A N A L Y S I S O F A P E R I O D“Show me a key momts m”

Examps: Lkg f ptns lg da setsLkg aad b cut daComp wh pvus pd

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

Wk bt wh pse da (e.g. day day)

G O O D L I N E C H A R T

Wo r k s b e st w i t h p re c i s e u n i ts ( e . g . d a y s )

10

20

30

40

50

Jan Feb Mar Apri May

BA D L I N E C H A R T

L 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

10

20

30

40

50

Jan Feb Mar Apri May

BA R C H A R T

T 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

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 sas figus? A we fulfig r five n quota?

Examps: A sas we y shld be?A a r employs pfmg okay?Is r spse me be dustry std?

0

12500

25000

37500

50000

Jan Feb Mar April May June July August September October November December

Actual Tget

BA D L I N E C H A R T

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 ?

A co r vualn avg a procsg ar. At a ge

lks like we’ dog okay .

In ce, we’ talkg abt a lta, but we’ not showg lta...

-40%

-30%

-20%

-10%

0%

10%

20%


F O C U S O N T H E D E LTA

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

4 . B R E A K D O W N O F A V A R I AB L E“Wt age grps e buyg r stuff? Wt cri e we big ?”

Examps: Who e r customs?Wts r aws like ch mographic?Wt browss e peop usg se days?

AmicaIU.K .CadaAustralSpaFrce

BA D P I E C H A R T

W h e re a re w e m o st r e l e v a n t ?

AmicaIU.K .CadaAustralSpaFrce

Y O U C O U L D A D D T H E DA TA . . .

9%

15%

9%

11%18%

23%

15%

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

0%

7.500%

15.000%

22.500%

30.000%

Ireland U.K. America Spain Canada Australia

S O R T E D BA R C H A R T

We l l t h at ’s a g o o d b i t c l e a re r : )

L Y I N G W I T H G RO U P I N G S

T 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

O* /("1 &%?A s e c o n d g r o u p i n g s h o w s 2 0 0 K i s m a s s i v e .


O* /("1 &%?h t tp : / /m ot h e r j o n e s . c o m / k e v i n - d ru m / 2 0 1 1 / 0 5 / fu n -c h a r ts - m a k i n g - r i c h - l o o k -p o o r


http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor

http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor

B 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

L Y I N G W I T H RO TA T I O N S

I t ’ s c l e a re r i n t h i s c h a r t w h e re A p p l e i s

L Y I N G W I T H D I M E N S I O N S

BA D : A R E A P LO T

D

C

BA

E

B u b b l e p l ots a re t r i c k y to w o r k w i t h .


D

C

BA

E

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


D

C

BA

E

W h i c h w o u l d y o u p i c k ?

A B


- =How “big” ?

We c a n ’ t m e a s u re t h e d i f fe re n c e


D

C

BA

E

A 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 : )

BA D U N I T P LO T

S o 3 x 8 m i n u s 1 = 2 3 . 8 + 1 i s 9 . . . .

BA D U N I T P LO T

W 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 V A R I AB L E“B cs ’t sexy, but y ly ne ski, foowg a le. ”

We 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 : )

I f y o u h a d to f i g h t o n e o f t h e m . . .

4 . B R E A K D O W N O V E R T I M E

“How s compn cng ov st yr?”

Examps: How s brows mket cng?H r v src shift ctly?

0

17500

35000

52500

70000


I U.K Amica

S TA C K E D BA R C H A R T

0

17500

35000

52500

70000



A-"*&,# 6"34"/ &$ J789?A m e r i c a p e a k e d i n J u l y ?

0

17500

35000

52500

70000



A-"*&,# 6"34"/ &$ J789?H o w h a s U . K . d o n e ?

0

17500

35000

52500

70000

JanFeb

Mar April

MayJune

JulyAugust

SeptemberOctober

November December

L Y I N G W I T H D I M E N S I O N S

L ots m o re y e l l o w p i x e l s h e re n o w . . .

L E T ’ S T R Y A L I N E C H A R T

0

12500

25000

37500

50000


I U.K Amica

L I N E C H A R T O F S A M E DA TA ?

0

12500

25000

37500

50000


A-"*&,# ($ 2!" :6. ;K $"."* <!#$)"/?S a m e d ata . D i f fe re n t sto ry .

0

12500

25000

37500

50000


A-"*&,# ($ 2!" :6. ;K $"."* <!#$)"/?U . k . N e v e r c h a n g e d . I r e l a n d p e a k e d i n J u l y .

L E T S T R Y A L I N E C H A R T

0

12500

25000

37500

50000


I U.K Amica

BA R C H A R T S A G A I N ?

0

12500

25000

37500

50000


I N T E R A C T I V E , R E M E M B E R ?

Yo u c a n a d a pt b a s e d o n I n te r ct i o n s

0

17500

35000

52500

70000



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 re ?

0

17500

35000

52500

70000



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 re ?B e c a u s e m e a s u r i n g t h e c o n s i ste n c y o f t h e w i d t h o f a n a n g l e d l i n e i s v e r y h a rd .

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 r s

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

F

KNOW YR VUALS

C O M M U N I C A T I N G 2 T H I N G S .

W H A T T Y P E ? H O W M A N Y ?

WAY S T O V I S U A L I S E Q UA N T I T Y

Le ng Le wid Colr tsy

Size Quty Spd

T 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 ? ”

H O W T O V I S U A L I S E C A T EG O R Y

Le type Colr

Locn

Spe

T 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 ? ”

Y’ve just tak ov a hot. Y’ as. Exc . W do we stt?

H O W T O U S E A L L T H I S ?

Q: A we makg y mey?

Pr dtce betwn cts v. Let’s s f yr.

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


Profit and loss

V i s u a l i s e t h e d e l ta

Q: Wt s do mey come from?

Rms Wdgs CfcBussRtaurtB Gym/Spa

10%

20%

30%

40%

50%

Let’s compe pctage v g by ch cegy.

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 ry

King suite Junior Suite Standard Room Hostel

€50

€75

€100

€150

€175

Deluxe Room

Q: Wt st pric do we crge p rm?

Let’s lk price rge mn val

W h y a re 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 ?

REPORT

REVENUE TYPE

ROOMS & EXTRASROOM TYPE

KING SUITESPERIOD

LAST YEAR Overview | AdvancedREPORT TYPE

MIDWEST HOTELZ

PROFITLOYALTYINCIDENTALSGUEST REPORTWEDDINGSCONFERENCES

GUEST TYPE

ALL GUESTS

Dign sut alyst qri...

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

F

KNOW YR Y

A W O R D O N C O N T E X T

Th a c.

Th a Nuc pow stn.

Th a space shu

Th ne e gs...

Th w yr dhbod wi be us.

T pot , we’ not *always* fighng f t.

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

Iron Man 2 8 45.25

Max Payne 2 6 32.75

Books Electronics Magazines Appliances e-goods Other

10

20

30

40

Revenue per product

Sales Report Jan 2012

ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%

SITE LIVEPAYMENT LIVEFULFILLMENT ON

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


L et ’s u s e t h i s st r a w m a n

L et ’s ta k e 3 p o i n ts f r o m Tu f te

C junk: stuff don’t cnge wn da cng

Da Ink R: wt pctage yr k shows da

Smat Effecve Diffce: t y c do highlight


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


T h e s e a re fa r q u i ete r .

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


G ra 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

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


L et ’s k i l l t h e g r a d i e n ts

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


L et ’s k i l l t h e c o l o u r s

HTML doesn’t 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

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


L et ’s a d j u st t h e s h a d i n g .

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


L et ’s c o m p a re w i t h w h e re w e c a m e f r o m .

Top products



Inception 9 72.50


Iron Man 2 8 45.25

Max Payne 2 6 32.75


10

20

30

40

Revenue per product


ORDERS12,247

CHANGE 0.32%

ACCOUNTS7,343

CHANGE 4.32%


We c a n ta k e t h i s fu r t h e r . B ut t h i s i s n ’ t a b o ut v i s u a l d e s i g n .

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

F

CLOSG POTS

1 . T H E Y H AV E T O S A Y S O M E T H I N GT wst vualns e y lk just

k “h.”

Lks g, but mak vy lt sse.

2 . DAS H B O A R D S & V I S U A L S E V O LV E

Ty ly make sse wn y ve gh da

VA N I T Y DAS H B O A R D S

S TA R T W I T H T H E BAS I C S

A D D I N S I G H T A S Y O U N E E D I T

A D D A Y E A R L Y V I E W , A F T E R A Y E A R

I N C L U D E I N S I G H T S & A C T I O N S

C O N S I D E R A D D I N G P RO J E C T I O N S

G E T I N S I G H T S I N T O E N G A G E M E N T

W h at ty p e s o f u s e r s d o w e h a v e ?

I N S I G H T S I N T O E N G A G E M E N T

2 m a i n c l u ste r s i t a p p e a r s .

I N S I G H T S I N T O B U S I N E S S M O D E L S

H o w s t h at F re 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 T

It’s okay a vuals if yr goal me htly psng fo

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

0

5

10

15

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 rw a rd s .

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

4 . T H E Y ’ R E N O T A L L F I R S T T I M E R SLike c pys ust cbods, peop c n

ust vualns

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 ry o n e .

Fo r t h o s e u s e d to i t , i t ’ s p e r fe ct .

5 . I M P L E M E N TA T I O N T O O L S

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

PIC

MAG

TROKNOW YR AUDICE

KNOW YR DOMA

KNOW YR DATA

KNOW YR VUALS

KNOW YR YCLOSG POTS

FF

If y joy , pe t me know

@strayn s@tcom.

mailto:[email protected]

mailto:[email protected]

Use Icom.

designing dashboards & data visualisations in web apps

Design