Designing Dashboards & Data Visualisations in Web Apps

Transcript

1. Data visualisations and Dashboard Design
   

   View Slide

2. Des Traynor
   @destraynor,
   COO of @intercom
   

   View Slide

3. TOPIC
   TIME REMAINING
   INTRO
   KNOW YOUR AUDIENCE
   KNOW YOUR DOMAIN
   KNOW YOUR DATA
   KNOW YOUR VISUALS
   KNOW YOUR STYLE
   CLOSING POINTS
   FIN
   TRO
   

   View Slide

4. We are drowning in data.
   

   View Slide

5. Useful
   Readable
   Meaningful
   Better than
   text
   Adaptable
   IT’S HARD TO MAKE VISUALS
   

   View Slide

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

   View Slide

7. VISUALS CAN CONFUSE
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. Visualising the Gulf Oil Spill...
    

    View Slide

15. View Slide

16. Okay, lets try with football...
    

    View Slide

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

    View Slide

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

    View Slide

19. The “anti-infographic
    movement”
    No data was harmed in the
    making of these info-
    graphics
    

    View Slide

20. View Slide

21. TOPIC
    TIME REMAINING
    INTRO
    KNOW YOUR AUDIENCE
    KNOW YOUR DOMAIN
    KNOW YOUR DATA
    KNOW YOUR VISUALS
    KNOW YOUR STYLE
    CLOSING POINTS
    FIN
    KNOW YOUR AUDIENCE
    

    View Slide

22. WHO ARE WE DESIGNING FOR?
    

    View Slide

23. WHAT ROLE?
    The role defines the level of abstraction required.
    

    View Slide

24. CEO Level Detail
    Strategic view
    Focus on the long term
    High level overview
    Simple summary
    

    View Slide

25. Query driven analysis
    Precision required
    Emphasis on trends,
    and correlations
    Analyst role
    

    View Slide

26. Operations/Logistics
    Focus on current status
    Issue & Event driven
    e.g. Alerts, spikes, trouble
    

    View Slide

27. WHAT DEPARTMENT?
    The department defines the domain knowledge
    

    View Slide

28. SALES DEPARTMENT
    Leads, conversions, avg. value per sale, etc
    

    View Slide

29. MARKETING DEPARTMENT
    Impressions, loyalty, awareness, share
    

    View Slide

30. NETWORK & IT
    Issues, tickets, lead time, open cases, uptime
    

    View Slide

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

    View Slide

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

    View Slide

33. TOPIC
    TIME REMAINING
    INTRO
    KNOW YOUR AUDIENCE
    KNOW YOUR DOMAIN
    KNOW YOUR DATA
    KNOW YOUR VISUALS
    KNOW YOUR STYLE
    CLOSING POINTS
    FIN
    KNOW YOUR DATA
    

    View Slide

34. $ 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?
    

    View Slide

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

    View Slide

36. 6 THINGS TO COMMUNICATE
    

    View Slide

37. 1. COMMUNICATE A 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
    

    View Slide

38. 2. SINGLE FIGURE WITH 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
    READERS
    12,247
    CHANGE
    0.32%
    READERS
    15,231
    CHANGE
    9.52%
    

    View Slide

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

    View Slide

40. 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
    Work best with precise data (e.g. day to day)
    GOOD LINE CHART
    

    View Slide

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

    View Slide

42. 10
    20
    30
    40
    50
    Jan Feb Mar Apri May
    BAR CHART
    Never imply precision you don’t have.
    

    View Slide

43. 10
    20
    30
    40
    50
    Jan Feb Mar Apri May
    BAR CHART
    Never imply precision you don’t have.
    2nd
    Takeaway
    

    View Slide

44. 4. ANALYSIS OF PERIOD, WITH 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?
    

    View Slide

45. 0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    Actual
    Target
    BAD LINE CHART
    

    View Slide

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

    View Slide

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

    View Slide

48. -40%
    -30%
    -20%
    -10%
    0%
    10%
    20%
    Jan Feb Mar April May June July August September October November December
    FOCUS ON THE DELTA
    Same data, big difference
    

    View Slide

49. 0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    BAD LINE CHART
    This guy is getting a bonus
    

    View Slide

50. -40%
    -30%
    -20%
    -10%
    0%
    10%
    20%
    Jan Feb Mar April May June July August September October November December
    FOCUS ON THE DELTA
    This guy is getting fired.
    

    View Slide

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

    View Slide

52. 23%
    7%
    24%
    7%
    21%
    20%
    23%
    24%
    17%
    17%
    27%
    17%
    21% 18%
    18%
    16%
    22%
    23%
    23%
    17%
    17%
    16%
    18%
    15%
    17%
    21% 18%
    32%
    20%
    17%
    19%
    18%
    18% 17%
    22%
    28%
    4 5 6 7 8 9 10 11
    signup
    18% of January sign ups
    are still active in July
    

    View Slide

53. JUL
    JUN
    MAY
    APR
    MAR
    NOV
    OCT
    SEP
    AUG
    DEC
    29%
    23%
    38%
    28%
    24%
    100%
    100%
    21%
    100%
    23%
    24%
    31%
    41%
    27%
    35%
    40%
    34%
    100%
    33%
    23%
    23%
    33%
    25%
    100%
    17%
    21%
    35%
    100%
    32%
    100%
    26%
    100%
    32%
    19%
    18%
    100%
    22%
    28%
    48%
    Showing: % of total % of prev. month
    

    View Slide

54. How many stick around for a second month?
    35%
    30%
    25%
    20%
    15%
    10%
    5%
    January February March April
    32.4%
    Signed
    up:
    

    View Slide

55. Retention using a cycle plot
    35%
    30%
    25%
    20%
    15%
    10%
    5%
    0%
    Month 2
    Retention
    Month 3
    Retention
    Month 4
    Retention
    Month 5
    Retention
    

    View Slide

56. 35%
    30%
    25%
    20%
    Signups in April 2011
    26% Still Active in June
    101 retained - 290 lost.
    

    View Slide

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

    View Slide

58. America
    Ireland
    U.K.
    Canada
    Australia
    Spain
    France
    BAD PIE CHART
    

    View Slide

59. America
    Ireland
    U.K.
    Canada
    Australia
    Spain
    France
    YOU COULD ADD THE DATA...
    9%
    15%
    9%
    11%
    18%
    23%
    15%
    

    View Slide

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

    View Slide

61. LYING WITH GROUPINGS
    The 100K to 200k is where we need to tax!
    

    View Slide

62. LYING WITH GROUPINGS
    Or maybe not...
    

    View Slide

63. O! "#$% &'?
    http://motherjones.com/kevin-drum/2011/05/fun-charts-making-rich-look-poor
    LYING WITH GROUPINGS
    

    View Slide

64. LYING WITH ROTATIONS
    

    View Slide

65. LYING WITH DIMENSIONS
    

    View Slide

66. BAD: AREA PLOT
    D
    C
    B
    A
    E
    

    View Slide

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

    View Slide

68. A B
    BAD: AREA PLOT
    - =
    How “big” is this?
    

    View Slide

69. BAD: AREA PLOT
    D
    C
    B
    A
    E
    

    View Slide

70. BAD UNIT PLOT
    

    View Slide

71. 5. BREAKDOWN OF A VARIABLE
    “Bar charts aren’t sexy, but they rely on an
    innate skill, following a line. ”
    

    View Slide

72. If you had to fight one of them...
    

    View Slide

73. If you had to fight one of them...
    4th
    Takeaway
    

    View Slide

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

    View Slide

75. 0
    17500
    35000
    52500
    70000
    Jan Feb Mar April May June July August September October November December
    Ireland U.K America
    STACKED BAR CHART
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. LET’S TRY A LINE CHART
    0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    Ireland U.K America
    

    View Slide

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

    View Slide

81. 0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    Ireland U.K America
    BAR CHARTS AGAIN?
    

    View Slide

82. 0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    BAR CHARTS AGAIN?
    

    View Slide

83. 0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    BAR CHARTS AGAIN?
    

    View Slide

84. 0
    12500
    25000
    37500
    50000
    Jan Feb Mar April May June July August September October November December
    BAR CHARTS AGAIN?
    

    View Slide

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

    View Slide

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

    View Slide

87. If it was easy, we’d all be great at billiards
    

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. TOPIC
    TIME REMAINING
    INTRO
    KNOW YOUR AUDIENCE
    KNOW YOUR DOMAIN
    KNOW YOUR DATA
    KNOW YOUR VISUALS
    KNOW YOUR STYLE
    CLOSING POINTS
    FIN
    KNOW YOUR VISUALS
    

    View Slide

93. Visuals communicate 2 things.
    Category Quantity
    

    View Slide

94. WAYS TO VISUALISE QUANTITY
    Line length Line width Colour intensity
    Size Quantity Speed
    

    View Slide

95. WAYS TO VISUALISE QUANTITY
    Line length Line width Colour intensity
    Size Quantity Speed
    

    View Slide

96. WAYS TO VISUALISE QUANTITY
    Line length Line width Colour intensity
    Size Quantity Speed5th
    Takeaway
    

    View Slide

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

    View Slide

98. You’ve just taken over a hotel. You’re
    handed the accounts. Excel hell. Where
    do we start?
    HOW TO USE ALL THIS?
    

    View Slide

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

    View Slide

100. Q: What makes us money?
     Rms Wdgs Cfc
     Buss
     Rtaurt
     B Gym/Spa
     10%
     20%
     30%
     40%
     50%
     Let’s compare the percentage of revenue
     generated by each category.
     

     View Slide

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

     View Slide

102. 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
     Design to support analyst queries...
     

     View Slide

103. Another example.
     What the hell is going on in Europe?
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. Credit: S. Few & Tom Watkins
     

     View Slide

110. TOPIC
     TIME REMAINING
     INTRO
     KNOW YOUR AUDIENCE
     KNOW YOUR DOMAIN
     KNOW YOUR DATA
     KNOW YOUR VISUALS
     KNOW YOUR STYLE
     CLOSING POINTS
     FIN
     KNOW YOUR STYLE
     

     View Slide

111. A WORD ON CONTEXT
     

     View Slide

112. This is a car.
     

     View Slide

113. This is a Nuclear power station.
     

     View Slide

114. This is a space shuttle
     

     View Slide

115. This is none of those things...
     

     View Slide

116. Chances are this is where your user is
     

     View Slide

117. The point is, we’re not
     always fighting for
     attention.
     

     View Slide

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

     View Slide

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

     View Slide

120. Let’s take 3 points from Tufte
     

     View Slide

121. Chart junk: the stuff that doesn’t change
     when the data changes
     

     View Slide

122. Data Ink Ratio: what percentage of your ink
     shows data
     

     View Slide

123. Smallest Effective Difference: the least you
     can do to highlight
     

     View Slide

124. Smallest Effective Difference: the least you
     can do to highlight
     These colours would get very
     loud. Unnecessarily so.
     

     View Slide

125. Smallest Effective Difference: the least you
     can do to highlight
     These are far quieter.
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

129. HTML has a
     tag but no
     tag.
     As a result, we
     forget to think
     about what’s less
     important on the
     screen.
     — Ryan Singer
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

133. This isn’t about visual design
     

     View Slide

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

     View Slide

135. 40
     Revenue per product
     SALES REPORT MAY 2012
     ORDERS
     12,247
     PA
     FULFIL
     0.4%
     ACCOUNTS
     2,323 1.4%
     

     View Slide

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

     View Slide

137. 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.
     6th
     Takeaway
     

     View Slide

138. TOPIC
     TIME REMAINING
     INTRO
     KNOW YOUR AUDIENCE
     KNOW YOUR DOMAIN
     KNOW YOUR DATA
     KNOW YOUR VISUALS
     KNOW YOUR STYLE
     CLOSING POINTS
     FIN
     CLOSING POINTS
     

     View Slide

139. 1. VISUALS SHOULD SAY SOMETHING
     The worst visualisations are the
     ones you look at just think “Heh.”
     

     View Slide

140. Looks great, but makes very little sense.
     

     View Slide

141. 2. DASHBOARDS & VISUALS EVOLVE
     Revisit them as your data increases
     

     View Slide

142. VANITY DASHBOARDS
     

     View Slide

143. START WITH THE BASICS
     

     View Slide

144. ADD INSIGHT AS YOU NEED IT
     

     View Slide

145. ADD A YEARLY VIEW, AFTER A YEAR
     

     View Slide

146. INCLUDE INSIGHTS & ACTIONS
     

     View Slide

147. CONSIDER ADDING PROJECTIONS
     

     View Slide

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

     View Slide

149. INSIGHTS INTO ENGAGEMENT
     2 main clusters it appears.
     

     View Slide

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

     View Slide

151. 3. PRESENTING AN ARGUMENT
     It’s okay to add visuals if your goal is more than
     the factual presentation of information
     

     View Slide

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

     View Slide

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

     View Slide

154. View Slide

155. Bring the fancy shit afterwards.
     

     View Slide

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

     View Slide

157. 4. THEY’RE NOT ALL FIRST TIMERS
     Like chess players understand chessboards,
     people can learn to understand visualisations
     

     View Slide

158. This isn’t immediately understandable for everyone.
     

     View Slide

159. For those used to it, it’s perfect.
     

     View Slide

160. View Slide

161. View Slide

162. 5. IMPLEMENTATION TOOLS
     HTML for the win.
     

     View Slide

163. View Slide

164. Highcharts is excellent and worth the money
     

     View Slide

165. Flotr2 is new, but popular
     

     View Slide

166. D3 is Immense.
     

     View Slide

167. D3 is Immense.
     

     View Slide

168. Rickshaw (based on D3) is powerful
     

     View Slide

169. HTML Charting Libraries
     1. Highcharts
     2. D3
     3. Rickshaw
     4. Flotr 2
     

     View Slide

170. HTML Charting Libraries
     1. Highcharts
     2. D3
     3. Rickshaw
     4. Flotr 2
     7th
     Takeaway
     

     View Slide

171. 6. REFERENCES
     Where can I read more?
     

     View Slide

172. Books
     Stephen Few - “Dashboard Design” & “Now you see it”
     Brian Suda - “Designing with Data”
     Edward Tufte - The first two.
     Blogs
     Stephen Few -> http://perceptualedge.com
     Intercom (me) -> http://blog.intercom.io
     

     View Slide

173. TOPIC
     TIME REMAINING
     INTRO
     KNOW YOUR AUDIENCE
     KNOW YOUR DOMAIN
     KNOW YOUR DATA
     KNOW YOUR VISUALS
     KNOW YOUR STYLE
     CLOSING POINTS
     FIN
     FIN
     

     View Slide

174. View Slide

175. Thanks everyone! – @destraynor
     

     View Slide