Designing and Building Great Dashboards - Data Visualisations

Posted by Gareth Wilson

Jul 18, 2012 11:56:00 AM

This is the second post in the series 'Designing and Building Great Dashboards'. The First Post - 6 Golden Rules of Dashboard Design introduced some high level Dashboard Design Rules. In this post I explain the importance of relevant data visualisations and why 'Keeping It Simple' is the best way of approaching the design and development of your Dashboard.

Dashboard designers are like kids in Candy Stores

There are many ways of presenting data. From the very basic tabular format to the highly elaborate radar graph format, it seems we are continually searching for new ways of visualising data.And, like the proverbial 'kid in a candy store', the dashboard designer often appears to have got so excited with the many ways of presenting their data, that they have lost sight of the objective of the dashboard they are designing.

Microsoft Excel has over 70 different data visualisations! - The screenshot on the left shows the options available to us for use as a Bar Chart - Do we really need stacked 3-D cones?

With so much choice on the market, it is no wonder that most Dashboards you see have been totally over-designed and are horrible to look at.

Dashboards are not an appropriate venue for artistic impression - Stephen Few

The importance of Stephen Few's quote should never be under-estimated.  A Dashboard's primary purpose is to provide relevant and timely information to it's audience and should never be used by the developer or designer as a method of displaying technical or artistic capability.

At the very heart of good dashboard design there are a finite number of appropriate data visualisations. This blog post discusses those visualisations and describes appropriate situations for their use.

Keep it Simple

If you take 1 item away from this article, it should be this one - Keep it simple. A well-designed dashboard should focus on the message that the dashboard is trying to convey. Any component or visualisation that is not directly contributing to the message should be removed.

This includes;

    • Logos - In some instances Logo's are required, but does the Operations Manager really need to be reminded of the company he is working for?
    • Navigation - If you need to include navigation options on your dashboard have you really designed the dashboard correctly?
    • Non-essential text - Keep labelling and instructions to an absolute minimum
    • Too much colour - Use subtle shades of the same colour when presenting multiple data series. Don't force the user to wear sun-glasses to read your dashboard!
    • 3-Dimensional objects - I've never seen a dashboard where 3-D enhances the message. Avoid at all costs.
    • Horizontal or vertical guide lines - In some instances guide lines are useful, but over using them detracts from the data
    • Too much detail  - displaying revenue in the format $1,254,345.67 to the CEO - surely he simply wants to see $1.25m?

A brief overview of useful data visualisations

Number + Secondary Stat

This is perhaps the simplest way of displaying a single metric. No fancy graphic, just the metric. Exceedingly simple and very impactful. By displaying a secondary number you provide some context, so the user knows if the number is good or bad.

In this example we can see that we have 520 people in trial and that this is up 0.58% on the previous period.

When to Use: When displaying a single measure.

When not to Use: To display multiple related measures 

Top Tip: Always show a comparative value. This provides the user with context (is the number good or bad). In this example the comparative value is expressed as a percentage of a previous period's measure, however it could be an absolute number and it could also be compared to a target or forecast.

Bar Charts

The Bar Chart is one of the best ways of visualising single (or multiple) series of data. And yet, because it's such a simple solution many people either overlook it in favour of something more elaborate or implement it in such a way as to reduce its impact (for example making it 3-dimensional). In the example above, the Bar Chart is displaying Top Products this week using a horizontal layout. It's instantly clear that Sproket A is the best seller and that Sproket E sold fewest. Nothing detracts from the important message.

The Bar Chart on the right tells a remarkably simply yet powerful message. Nothing detracts from that message.

(When creating this piece I was tempted to include examples of bad data visualisations, however I decided against doing this, simply because they will detract from the message I am trying to convey in this article.)

When to Use: When displaying data over a number of related series (Time, Region, Product)

When not to Use: When you have more than 1 series of data that have no relationship to each other.

Top Tip: Keep the colour for each series the same. Use subtle shades of the same colour to represent different data series. Do NOT be tempted to use 3-D!

Line Graph

Line charts are excellent at showing the relationship of a set of data when measured against a series of values. The line 'ties' the current value with the previous and so in a scenario where you want to show how a value has changed over time, the line chart is the only serious option. Line charts can show a number of data-sets across the same series. For example a line chart is ideal for showing stock price over time where you can also show multiple stock prices and see how they compare to each other over time.

When to Use: When displaying data over a number of related series where it's important to show the relationship between data in the same series (most typically this is 'time')

When not to Use: In a situation where you want to draw attention to the individual values for each period' a line graph can often hide this.

Top Tip: Keep the colour for each series the same. Use subtle shades of the same colour to represent different data series. Do NOT be tempted to use 3-D!

Sparklines

Spark lines are an incredibly simple yet powerful way of visualising data trends in as small a space as possible.

The example shown on the left shows the trend of unique website visitors over the last 30-days. You can immediately see that the trend is upward - especially over the last week or so. You can also see a pattern in weekly visits, with a drop off in uniques over the weekends.

Sparklines should not include unnecessary detail - for example X and Y axis labels and keys. They should simply be used to display trends in related data.

When to Use: To display the trend of a single set of data

When not to Use: When more detail is needed. When the requirement is to show trends for multiple series of data. 

Top Tip: Great for showing trends over website visitors, pageviews, ave time on site, revenue, costs, sales etc. (The author is a big fan ;:)

For more on the inventor of Sparklines (Edward Tufte) - visit his wikipedia entry here

Bullet Graphs

The bullet graph is a fantastic visualisation for showing multiple relationships between a set of data in as small a space as possible.

The bullet graph above shows Year To Date Revenue in $000's. Point A shows current YTD rev ($120k), Point B shows Target (£225k) and Point C shows Forecasted ($230k). The different coloured sections in the graph (Red/Orange/Green) represent 'Poor, Average and Good' revenue figures.

As you can see, the bullet graph really does show a lot of data in a small space and is perfectly suited to displaying many different data types including;

    • Financial (revenues, cost and profit)
    • Headcount (actual, target, forecast)
    • Customer Engagement metrics (actual, target, forecast)


When to Use: When you need to display multiple data points in as small a space as possible

When not to Use: Not appropriate for series of data

Top Tip: The bullet Graph is a perfect visualisation for any data which has an actual value, a target value and a forecasted value.

For more information on Bullet Graphs - Check out Stephen Fews Blog

 

Pie Charts

The traditional Pie chart is often the most abused and mis-used data visualisation technique. The two most common scenarios are 1) Making the chart 3-Dimensional and 2) The sum of the slices does not equal 100%.

However, even when a Pie-Chart is used as intended (such as the example here) it is often still not the most relevant visualisation. In this example we can see the there are more returning visitors than new visitors, but we can only really guess by how much (it is 55% or 60% - it's hard to tell).

In this scenario a simple bar chart would have been more appropriate.

When to Use: If you must use a pie-chart, then it's most appropriate to use when the sum of the parts equal 100%

When not to Use: Most the time....

Top Tip: In most circumstances a bar chart is more relevant, however if you must use a pie-chart, then keep the number of items to less than 5 and do not over-use colour. And, please, no 3-D!!

 

In Summary

This is by no means a definitive guide to data visualisations, many visualisations are not included in the article (scatter charts, bubble graphs, stacked line and bar charts, combination charts, meters and gauges, to name but a few) - However almost every dashboard requirement can be satisfied by using the visualisations presented above.

Dashboard design is not about using as many different visualisations as possible, its about conveying the right message to the right people at the right time and anything that that interferes with this objective should play no part in your dashboard.

In the next article in the series I am going to create some hypothetical dashboards based on the points I've covered in this post and the previous post (6 Golden Rules of Dashboard Design).

Topics: Data Visualisation, dashboard, data, Blog, Data Driven, Dashboard Design, design, visualise

Subscribe to Email Updates

Posts by Topic

see all