Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Dashboards & Data Visualisations in Web Apps

Des Traynor
October 11, 2011

Designing Dashboards & Data Visualisations in Web Apps

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

I have given variations of this presentation at conferences such as WebVisions 12, Beyond Tellerand, MIX 11, MidwestUX.

You can find a video recording of it at
http://vimeo.com/34784156
http://channel9.msdn.com/Events/MIX/MIX11/OPN04

Des Traynor

October 11, 2011
Tweet

More Decks by Des Traynor

Other Decks in Design

Transcript

  1. Data visualisations and Dashboard Design

    View full-size slide

  2. Des Traynor
    @destraynor,
    COO of @intercom

    View full-size 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 full-size slide

  4. We are drowning in data.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. VISUALS CAN CONFUSE

    View full-size slide

  8. Visualising the Gulf Oil Spill...

    View full-size slide

  9. Okay, lets try with football...

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. WHO ARE WE DESIGNING FOR?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. WHAT DEPARTMENT?
    The department defines the domain knowledge

    View full-size slide

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

    View full-size slide

  21. MARKETING DEPARTMENT
    Impressions, loyalty, awareness, share

    View full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. $ 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 full-size slide

  27. 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 full-size slide

  28. 6 THINGS TO COMMUNICATE

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. -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 full-size slide

  41. 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 full-size slide

  42. -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 full-size slide

  43. 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 full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. LYING WITH GROUPINGS
    Or maybe not...

    View full-size slide

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

    View full-size slide

  56. LYING WITH ROTATIONS

    View full-size slide

  57. LYING WITH DIMENSIONS

    View full-size slide

  58. BAD: AREA PLOT
    D
    C
    B
    A
    E

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. BAD: AREA PLOT
    D
    C
    B
    A
    E

    View full-size slide

  62. BAD UNIT PLOT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. 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 full-size slide

  70. 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 full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

  73. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. 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 full-size slide

  78. 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 full-size slide

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

    View full-size slide

  80. 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 full-size slide

  81. Visuals communicate 2 things.
    Category Quantity

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. 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 full-size slide

  88. 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 full-size slide

  89. 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 full-size slide

  90. 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 full-size slide

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

    View full-size slide

  92. Credit: S. Few & Tom Watkins

    View full-size slide

  93. 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 full-size slide

  94. A WORD ON CONTEXT

    View full-size slide

  95. This is a car.

    View full-size slide

  96. This is a Nuclear power station.

    View full-size slide

  97. This is a space shuttle

    View full-size slide

  98. This is none of those things...

    View full-size slide

  99. Chances are this is where your user is

    View full-size slide

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

    View full-size slide

  101. 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 full-size slide

  102. 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 full-size slide

  103. Let’s take 3 points from Tufte

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  109. 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 full-size slide

  110. Top products
    Product Orders $ Revenue
    The girl with the dragon tattoo 11 88.50
    Inception 9 72.50
    The girl who kicked the hornet's nest 15 54.05
    Books Electronics Magazines Appliances e-goods Other
    10
    20
    30
    40
    Revenue per product
    Sales Report Jan 2012
    ORDERS
    12,247
    CHANGE
    0.32%
    ACCOUNTS
    7,343
    CHANGE
    4.32%
    SITE LIVE
    PAYMENT LIVE
    FULFILLMENT ON
    Let’s kill the gradients

    View full-size slide

  111. 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 full-size slide

  112. 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 full-size slide

  113. 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 full-size slide

  114. 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 full-size slide

  115. 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 full-size slide

  116. This isn’t about visual design

    View full-size slide

  117. 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 full-size slide

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

    View full-size slide

  119. 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 full-size slide

  120. 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 full-size slide

  121. 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 full-size slide

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

    View full-size slide

  123. Looks great, but makes very little sense.

    View full-size slide

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

    View full-size slide

  125. VANITY DASHBOARDS

    View full-size slide

  126. START WITH THE BASICS

    View full-size slide

  127. ADD INSIGHT AS YOU NEED IT

    View full-size slide

  128. ADD A YEARLY VIEW, AFTER A YEAR

    View full-size slide

  129. INCLUDE INSIGHTS & ACTIONS

    View full-size slide

  130. CONSIDER ADDING PROJECTIONS

    View full-size slide

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

    View full-size slide

  132. INSIGHTS INTO ENGAGEMENT
    2 main clusters it appears.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  135. 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 full-size slide

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

    View full-size slide

  137. Bring the fancy shit afterwards.

    View full-size slide

  138. 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 full-size slide

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

    View full-size slide

  140. This isn’t immediately understandable for everyone.

    View full-size slide

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

    View full-size slide

  142. 5. IMPLEMENTATION TOOLS
    HTML for the win.

    View full-size slide

  143. Highcharts is excellent and worth the money

    View full-size slide

  144. Flotr2 is new, but popular

    View full-size slide

  145. D3 is Immense.

    View full-size slide

  146. D3 is Immense.

    View full-size slide

  147. Rickshaw (based on D3) is powerful

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  150. 6. REFERENCES
    Where can I read more?

    View full-size slide

  151. 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 full-size slide

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

    View full-size slide

  153. Thanks everyone! – @destraynor

    View full-size slide