RSS

Infographics and Data Visualisations

infographics-title

My last post on dashboard design led to a few emails, comments and discussions about the role of infographics in dashboards, or why I didn’t consider any more elaborate data visualisation techniques.

The short answer is that these were throwaway wireframes for a blog post. The medium length answer is that I’ve yet to meet a start-up with enough spare time to prioritize rich data visuals on their own back end. The longer answer, is this blog post…

Your goal when designing with data is to make large volumes of information easy to digest. That doesn’t mean you hide details, it means you make it easy to find the important ones. If you don’t know which ones are important, then you need to find out before you tackle the design.

Infographics often sacrifice clarity for sexiness. In and of itself this is not a crime. Victorias Secret does something similar, and no one is criticizing them. Sexy has its place, it’s just not on a dashboard, well not for me anyway.

The goal of designing a dashboard is to surface actionable information that’s easy to understand, and hard to misunderstand. So let’s look at some regularly used visualisations in infographics…

Pretty Circles

infographics-1

The use of circles to denote quantity or proportionate size is widespread. Looking at the picture above you can clearly see that E is far bigger than A, but how much bigger? Have a guess. I’ll make it easier for you.

infographics-2

What if I said it’s either 5 or 10 times as big? Would you be confident you know which? It’s actually 16 times as big. It’s difficult to gauge relative size from circles, because of that πr² formula. Here’s another example…

infographics-3

If you could have the profits of company A, or those of B,C,D,and E combined, which would you take? By now you’re onto me, you’d take A as it’s total size is bigger than the rest combined.

Pie Charts

Pie Charts are hard to read for this very reason. They work okay for at-a-glance information, but there’s almost always a better way to do this. Thanks to Google Charts though, Pie Charts may be an easy solution, when other methods require more finesse. 3-D pie charts are a different case all together. Some enterprise clients see them, and immediately reach for their cheque book and scotch. They’re a brutal way to visualise though. Here’s an example…

infographics-4

What’s the second biggest slice here? It’s the pinkish slice labelled Other. It’s bigger, but because the Apple slice is in the foreground it gets extra pixels and thus appears bigger. If we dropped the rotation it’d be clearer that they’re close in size. At this point you might think the next step is to add labels, to show exactly how close, but that’s the path to chart junk. You’re adding labels because your graphics has failed you. People can’t judge area well. Especially with curved boundaries. Let’s have a look at the less sexy bar chart equivalent.

infographics-5

Unlike the pie chart, the bar chart leaves no doubt. Bar charts rely on your ability to follow a line. You know you’re good at following horizontal lines, you’re reading this post.

Sexy but meaningless

hilariousdataviz

Above is one picture from a set titled “What does 184 million gallons look like“. Obviously the idea was to show you 1 gallon and then let you imagine 184 million of them. Unfortunately many visualisations struggle with problems like these. For them to make sense they need to be capable of representing the full spectrum of possibilities without needing imagination from the reader.

Speed dials, thermometers, fuel gauges, all of these assume a minimum and maximum, and it’s rare that this is case. Sites like Groupon can use them to visualise what’s remaining in a deal, but the rest of us take every customer we can, thermometer be damned. Another typical dashboard demand is maps. An annotated map makes sense if you’re testing location specific marketing, or if you want to analyse word of mouth marketing based on locations. Beyond that, it’ll tell you what you already know. You’ve lots of customers in California. Me too.

Using visuals that are meaningless, not thought through leaves you producing Jessica Simpson style dashboards. It looks hot initially, but you won’t get anything meaningful from it.

Good Data Visualisation

The real genius in data analysis is knowing what questions to ask. Everyone wants sexy charts showing sales, or revenue. High and to the right, right? There are so many useful questions that go unanswered, and that’s where data visualisation can help.

For example, if your web application has tiers of service, and your profits hinge on people moving up through them, you’d like to see how this happens. Here’s a nice way to visualize that, borrowing from Markov chains.

infographics-6

What you see here is a weighted directed graph, showing you the rate of change from state to state. If, like half the web, you’re unsure if Freemium is right for you, data analysis and visualisation such as this will answer the question. Unfortunately it’s not as sexy as a flower with each leaf representing a customer, so people want it less.

If you were trying to categorise the different types of users you had, and couldn’t work out where to draw the line, some times plotting them against a scale can help. For example, if a photography sharing app wants to tell who its best users are (both creators and consumers) it helps to see how they cluster

infographics-7

This way you can identify the customers you’re losing, the ones you could probably charge more to, the ones you should mail to remind them about the service. By seeing it laid out you can estimate what your metrics should be (e.g. you can decide that “star customers” are those with >10 logins and >10 photos uploaded)

You can improve upon this in various ways, you show customer names on hover letting you target specific users, you could make it a motion chart so you can see if the activity grows gradually or in spikes, you could add a third dimension by either colouring the circles or changing the shape (to denote price plan or camera type for example). You can do any of these things once you’re confident you’re asking the right questions, and that you’re not just looking to make pretty charts. To quote Jason Fried, It’s better to be clear than to be clever.

Some good reading in this area

Follow @destraynor on Twitter.