Infographics are a way to deliver data visualisation to an audience. They’re not just about data visualisation though; the data is presented within a story to communicate a specific message.
They can spread like wildfire online and there are a few reasons for this. First of all, visual data is more memorable and has more impact than straight-up facts. If done right, visual data is easier to understand than simple tables (I say in certain cases because when done wrong data visualisation can mislead and confuse, but I will get to that later on).
The second reason for the widespread use of infographics on the web is the fact that they can add a lot of value to a web site and make visitors want to actually check out its content, while encouraging interaction.
Good content and good user experience are what make or break a website these days, and infographics are meant to help with that.
Pretty Data Isn’t Data Visualisation
Like I mentioned earlier, an infographic is data visualisation told through a story. Yet I find that the best way to show what an infographic is, is by showing what an infographic isn’t. It’s very easy to fall into the trap of writing pretty numbers in colourful circles and call it ‘an infographic’, but how much does that type of visualisation help the reader?
Here is an example of how not to do an infographic.
What’s wrong with this infographic? It looks pretty, it shows big numbers, it couldn’t be clearer, right? Well aside from the fact that the design elements aren’t aligned properly (the circle to the left is higher than the circle to the right), all we are seeing is pretty text.
For starters, the circles sizes could mirror the statistics. So you could have a circle showing you Silicon Valley’s start up ecosystem, and then a circle for New York which is 3 times smaller, one for London which is 4.5 times smaller, etc.
Here is an example of how this data could have been represented.
For the purpose of this example, I didn’t go into all the tiny details to make it look exactly like the previous graphic and it’s not showing all the data. You could even put the “3x” and “4.5x” into the circles if you wanted, but that’s beside the point of what I am trying to show you.
First of all, there is now context – the 38 companies – and now you know what it means that the New York start up ecosystem is smaller than Silicon Valley’s. Of course that ‘38’ is a fictitious number; I don’t know what the real number is and I have no idea if the infographic is talking about the number of start up companies in the first place, or if it’s talking about income or what have you; the original infographic just doesn’t tell you much and that alone makes it less useful so I had to invent a context because you couldn’t tell what it was from the original.
“Remember this when designing an infographic: making something look pretty comes second to actually showing the data.”
Secondly, you have a visual representation of the size of the business zones which is absorbed a lot quicker than plain numbers. Imagine just how small the circle would be for Boulder since it’s 38 times smaller. Now you get the idea. Now you get the impact.
What the infographic also fails to tell you in that first section is the period of time. It’s talking about startup throughput – so over what period of time? A year? 6 months? A quarter?
The rest of the infographic has more circles and squares (which again are all of the same size and aren’t representative of the data), blocks of text and lists. This is a ‘digital poster’, not a real infographic.
Remember this when designing an infographic: making something look pretty comes second to actually showing the data.
Misleading Visualisation
Some people do try to give a visual representation of data, however they do so in a misleading way. Have a look at this infographic.
4 stickmen represent 43,000 nurses (give or take). However 46,000 are represented by 32 stickmen, and 47,500 are represented by 40. I am not sure I understand the scale here, nor what it represents. Do you? If they are trying to show growth, they are doing it the wrong way. This is a growth of 7%, but they show you a growth of 700%.
To show you that pretty isn’t the most important thing, here is an example gone wrong by guest author Amy Balliet on Smashing Magazine:
The point of this example was to show how to make graphs look pretty – instead of using just a bar chart, why not use a speedometer? While it’s a good idea, the speedometer brings a whole host of other issues to the table. First of all, it’s hard to read. I personally have to make a lot more effort to understand that the Super Bowl in 2011 got about 4200 tweets than I have to do in the first chart.
Secondly, each line in the speedometer represents 240 tweets, which makes it a bit harder to calculate what bar represents what. If it were 200 tweets or so, it would make it just a little faster. Because the bars are shown in a curved line, the Women’s WC final bar looks a lot bigger than the one representing Super Bowl. This representation is still accurate when we look at the numbers, but visually it’s misleading. A minor thing, but it all adds up to being less easy to use.
In this case the simplicity of a bar chart just works a whole lot better. These charts have been around for hundreds of years (yes hundreds) and our mind is accustomed to them, thus they are a very powerful tool that shouldn’t be dismissed so quickly.
To be fair to Smashing Magazine, they did post another article which attempts to correct the mistakes done by the first guest author, and they are generally a good resource for web related things.
So What Is an Infographic?
In order to be effective, an infographic has to:
- Communicate data in a way that is understood quickly and clearly
- Give context
- While written numbers and text are not necessarily bad, where possible the data needs to be shown visually
- Be true – always fact-check your data, wrong or deliberately misleading data in infographics is one of the main complaints from users
Here is a very good example by Yahoo!
This way of visualising data gives you a very good idea of just how many processes C.O.R.E. deals with every hour. It delivers the impact by showing the magnitude and the significance of the numbers and it provides context. Of course, when they say 644,245,094 printed pages, they don’t tell us which font type and size they are using in that comparison… but we can forgive them for that. With the other 3 slides this is part of a story which lets the data do the talking.
Infographics also have to connect with the readers on an emotional level. Emotion adds to the impact, like in this case:
This is a very strong way to communicate a statistic and it touches the user on a personal level.
Conclusion
If you have real data, communicate it clearly and try to connect with your readers. You will achieve the result of a well informed user that is now interested in your subject matter. If you lack any of the above, you will wind up with this…
No matter how you colour it, it’s still crap.