The Do’s And Don’ts Of Infographic Design: Revisited
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Take a break with a 3D game built on Netlify!
Start with a free demo —
Check the frontend report!
Editor’s Note: Last Friday, we published an article on the Do’s And Don’ts Of Infographic Design written by Amy Balliett which raised quite a discussion within the design community. Some readers agreed, some readers found examples contradictory, and some readers felt that there were some problems with the article which should be addressed in a further article. Nathan Yau was kind enough to write a counter piece arguing about the practices and examples presented within the original article. This article is his response to Amy’s article published a week ago. Please notice that the main point of this article is to show a different perspective at the points mentioned in the original article; it isn’t supposed to be a “corrected” guide to infographic design.
Smashing Magazine offered advice on the “*Dos And Don’ts Of Infographic Design*”, but they forgot to include the former. It’s as if I wrote a fake post and someone mistook it for a serious guide. Written by Amy Balliett, it seems to me that the post is basically about a couple of tips on how to create linkbait that doesn’t work. Or at least I hope it doesn’t. Many of the dos are actually dont’s, and judging by some of the comments that the article had received, it’s worth pointing out what’s what.
Data Makes Infographics Unique
Let’s take it from the top.
“Infographics are visual representations of information, or ‘data viz’ as the cool kids call it these days. The term ‘data viz’ comes from ‘data visualization,’ which implies that sets of data will be displayed in a unique way that can be seen, rather than read.”
I’m not going to get into the semantics. That’s for people who are smarter (and cooler) than me, but the obsession with a visually unique result is overdone. Sure, you want your graphic to be compelling, but that comes from the data or the information. You’re just trying to make bad design look like good design if you do it any other way: it looks good from far away, but as soon as you take a taste, you realize that there is something fishy going on.
It’s tempting to approach infographics from purely a design and aesthetics perspective, but that’s only one half of the equation. Data is the other (and more important) half. Data is the foundation of every infographic, so when you have a dataset on hand, take the time to learn what it’s about, where it’s from, the methodology behind the estimates and what makes it interesting and unique.
Representing Data
Next up, which refers to the graphic above:
“What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph.”
What? We all know the first rule of infographic design is to not talk about infographic design. I guess that’s implied. After that though, the first thing wrong is that there are numbers? What about that gauge on the left without any labels? What does it mean?
Most run-of-the-mill infographics take a few data points and make it look like a lot with big things. This is both a reflection of the data on hand and the creator’s data comprehension.
It gets worse.
Two alternatives to the above are offered. Do you choose the very boring, generic graph A or the very cool and round graph B?
I hope you didn’t answer graph A. If so, you’re wrong.
“If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up […]”
It’s that obsession with unique again. The problem isn’t the bar chart. It’s that there’s only five data points occupying a lot of screen space. Plus, the speedometer makes variance for the tweet rates look way more than it actually is, because the method uses arc length as its visual cue. The accuracy in representation, and thus a compromise in the story being told, is sacrificed to look different.
A more useful graphic would provide more context to the events that these numbers describe. What made the Women’s World Cup Final so much more exciting than Super Bowl 2011? Which final was it? Was it really more exciting? When were these measurements taken? Are they the peaks of each event or is it a mix? Were there more tweets because there were more Twitter users at the time? Was it because the time of the day each thing happened? Tell people something — anything — more about the data.
Applying General Design To Infographics
The second half of Balliett’s post covers mostly general design tips such as color and focus, so it’s less rough, but the examples aren’t any better. They simply try too hard to look “visually compelling.”
Remember that design isn’t just about making things pretty. It’s about making things work, and in the case of infographics, that means representing data accurately and clearly. It means letting the data speak and not putting extraneous icons all over the place to obscure what’s important.
I’m not saying strip your infographics down to barebones wireframes. But do think about what you’re showing and what you really want to focus on.
Once you’ve got that covered, you can bring in design elements that can evoke an emotion or portray an important image.
For example, here’s a map that shows where major airlines flew in the United States during February 2011.
More frequent flights are shown more prominently with a brighter shade of white and some blue, whereas less common flights aren’t as visually dominant. Also, a darker map helps with context but doesn’t get in the way. Let data do the talking, and you can use design to tell that story more clearly.
Wrapping Up
Bottom line: when it comes to information graphics, it should always be data and information first, and then you design around that. For that to happen, you have to learn more about data — how to work with it, where it comes from, and what it represents in the real world. Data can be beautiful when you realize the latter, and when you do, you won’t have to work so hard to catch the eyes of readers, because the story behind the numbers and spreadsheets will shine through.
A couple of years ago, big infographics with little substance were able to draw in lots of visitors because they were something new to look at. However, now these sort of infographics draw backlash. You have to put in the time to think about the story you want to tell and show some actual insight.
Using my suggestion box as an indicator, I can tell you readers used to send in these sort of infographics all the time. I even posted some for their novelty. Today readers demand more, and the only people who send me novelty linkbait now are “SEO experts” and “content managers.” Those emails are deleted right away.
When designing infographics, do analyze and understand the data. Don’t sacrifice accuracy, clarity and ultimately, an interesting story just to make something look unique.
What Do You Think?
Further Reading
- Diverse And Engaging Instances Of Interactive Infographic Design
- Designing The “World Of Programming” Infographic
- A Common Misconception About Designing With Data
- Data Visualization and Infographics
(vf, il, mrn)
