Tel: 0845 838 0936

Infographics Dos and Don’ts

by Elisabetta Bruno on August 13, 2013

Elisabetta-Bruno-Infographics-Dos-and-Donts[1]

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:

  1. Communicate data in a way that is understood quickly and clearly
  2. Give context
  3. While written numbers and text are not necessarily bad, where possible the data needs to be shown visually
  4. 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.

Featured Image Source: JoshuaDavisPhotography on Flickr

Share this article

About the Author

Elisabetta Bruno is a creative designer curating design content from infographics to flyers for our clients. Working with our developers she coordinates and executes the design side of our creative projects so that clients can offer a better online experience to their customers.

Leave a Comment

Your email address will not be published. Required fields are marked *

*

    Comments

  • Chuck

    August 13, 2013 at 2:23 pm

    Its an age old question, lots of information, and an attempt to get across something, but when done right one will not have to be asked what’s your point. This is not guess work, and hard work and experience is not ever inherited it is earned. You certainly have the experience and ability to make any project a success…

    • Elisabetta Bruno

      August 13, 2013 at 2:29 pm

      Thanks! I find that even after having been in the industry for quite a long time, data visualisation is a totally different animal. You might be a great magazine designer, or you might have made posters for 15 years of your life, but when it comes to data visualisation it’s an entirely different world.

  • Neil Tortorella

    August 13, 2013 at 2:25 pm

    Good article, Elisabetta. I think you hit the proverbial nail on the head with what an infographic is and isn’t. When they work, the cut out all the peripheral stuff and get straight to the heart of the matter.

    Plus, they’re all the rage these days. I believe social media, in particular, Pintrest, has been a major contributor the use of infographics.

    Yet, they aren’t anything all that new. I was designing infographics for a newspaper chain I worked for back in the early ‘80s and also presented a workshop about them for other designers in the newspaper chain around the eastern U.S.

    Infographics tend to appear misleadingly simple. And, as you mention in your article they can go horribly wrong on occasion. The mark of a professional is often associated with making difficult things look simple.

    Therein lies the challenge for infographic designers. It’s often no easy task to distill complex information down to its primary parts. Then the designer need to think about what graphics, images and typographic treatment(s) will best communicate the message to the reader. Choosing the wrong elements can leave the reader more than confused.

    • Elisabetta Bruno

      August 13, 2013 at 2:33 pm

      Hi Neil,

      Yes infographics are the rage right now but like you say they are not a new thing. It seems like putting one together takes no effort, but I have gone through the process of trying to teach other people how to make one and it’s not an easy task.

      I think that what you say, “distilling complex information into its primary parts” is the main thing here. So many people try to cram so much information that they often lose sight of the main message and story, and what the data is actually supposed to mean.

  • Kat

    August 14, 2013 at 10:02 am

    Excellent article! I’ve often had clients who valued pretty over factual or informative. “Just make it look nice”…”But, it’s not a proper representation”…”that doesn’t matter…no one is really reading the facts…they just look at the picture, they’ll get the point”. Walking the fine line is tough and I think you’ve shown how that can be done, not just to designers but to clients as well.

    • Elisabetta Bruno

      August 15, 2013 at 7:13 am

      It’s the old “Can you photoshop it?” Isn’t it? ;)

  • Denise

    August 14, 2013 at 12:11 pm

    Really helpful and informative article. Creating info-graphics never seems difficult until forced to sit down and turn a bunch of boring data into something actionable. This is a really great breakdown and does a good job of laying out the methodology behind creating these necessary, but often frustrating graphics.

    • Elisabetta Bruno

      August 15, 2013 at 7:15 am

      Thanks. Yes data can be really boring and frustrating. Sometimes it’s not very clear either, I was looking at a bunch of data regarding mobile usage yesterday and a lot of it was a bit vague. “Here is an increase of 30%.” Increase from what? In what time span? Etc. Very frustrating.