Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Do’s And Don’ts Of Infographic Design: Revisited

Editor’s Note: Last Friday, we published an article on the Do’s And Don’ts Of Infographic Design1 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 Link

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 Link

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?


Making a choice between accurate and “regular” or inaccurate and “unique.”

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 Link

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.

2
Designing with the data in mind to highlight more frequent flights

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 Link

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? Link

(vf) (il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/10/14/the-dos-and-donts-of-infographic-design/
  2. 2 http://flowingdata.com/2011/05/05/where-do-major-airlines-fly-in-the-united-states/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Nathan Yau runs FlowingData, a site on design, visualization, and statistics and is the author of Visualize This. He is a statistics PhD candidate and has a background in eating.

  1. 1

    Kudos to the editors for recognizing the errors of the original article but this post isn’t very helpful either.

    The readers already knew the original article was wrong. But if you’re going to rectify that, why not give more examples of better infographics and helpful explanations of how to make them?

    This article looks too much like a piece-by-piece deconstruction of the original contentious post.

    41
  2. 2

    I liked the first post far better. The first post was about design only. From what I can tell, it assumed the designer already had good data and was onto the next step: design. This is a blog about design isn’t it? I appreciated the post because it spoke to what most clients want and as a designer it’s often hard to swallow my pride and design for the client when they ask for this stuff. I agree that these overly unique visualizations aren’t always the best, but clients don’t. It looks like the quote you pulled from the previous post is taken out of context too. She had asked which graph was a more unique visualization of the data which graph b is. Then the author makes it clear that graph a can work as well so she isnt saying to avoid it. Seems to me like a lot of designers don’t want infographics to be so intricate or original, but that’s a cop out. We all hate it when clients want complex and cluttered, but we all grin and bare it to get paid. These types of infographics are everywhere because there always has to be supply for demand. I think the other article covers this very well whereas this article just proves the point further: that flight example is confusing and boring. No client of mine would like it on an infographic. This article talks about visualizing one data set. That’s good if that’s what your client wants, but my client want pieces that are 5000 pixels long and telling a story with many data sets. To keep the viewer engaged, unique graphs are the only way to go. In the end that’s link bait, but it’s also the only way my clients can measure the success of an infographic (ROI) and the only way they can justify a budget to hire me again. Design however you want, but in the end if you are trying to pay your bills you have to do what te client wants and it’s not what this article describes its what the original one nails.

    -25
    • 3

      need.

      more.

      paragraphs.

      19
    • 4

      @Jessica — When it comes to infographic design though, data and design are intertwined, so it’s an iterative process. The ROI on big infographics described in the first post is coming down quickly, and it’s already easy to see that the designers who do infographics and know how to deal with data are the ones who have great clients and can charge higher rates.

      0
      • 5

        jerome cukier

        October 21, 2011 9:03 am

        hey Nathan. I think it’s great that people like Jessica speak up. While I don’t agree with her points, I also don’t have to do what clients say to get paid. I guess the clients, not the designers, are the ones to educate.

        4
        • 6

          Jerome –

          You beat me to my own comment. As a consultant, my rule is not just to blindly do what the client wants. My role is to work with the client, starting with the data and proceeding through exploration to the final output. If my suggestions are not appreciated, I can leave our the client can fire me. But there’s no call to practice what I peach against.

          6
    • 7

      @Jessica: You obviously haven’t heard of Edward Tufte.

      -4
      • 8

        @RoCer: You obviously didn’t read Edward Tufte very thoroughly…

        He deliberately sidesteps constraints like clients’ business needs or imperfect data, focusing on pure end results only, setting himself up as a deliberately elitist curator of a data visualisation museum and using his books to show that data graphics can be appreciated as an art form: an academic, writing for connoisseurs.

        His books are great at setting a high standard to aspire to when the opportunity presents itself, and contain valuable principles and examples, but they’re about a very specific thing: purity and power in data led design, with an emphasis on aiding analysis. The day-to-day work of people like Jessica is often about a very different thing: eyecatching and memorable design, with an emphasis on communication.

        These two goals don’t need to be in opposition, and most briefs require a delicate balance of both, Quite often, however, compromises are needed, and one isn’t a substitute for the other.

        I often see people tying themselves in knots, taking briefs that demand simple, clear, eye-catching communication and mangling them in a doomed attempt to spin something pure and Tufte-like out of a data set and brief that simply isn’t suitable. Here’s an example that makes me laugh, where a guy takes a visually striking graphic that works and ‘corrects’ it into a confusing graphic that looks like a Subbuteo table left out in the rain: http://well-formed-data.net/archives/669/on-the-role-of-bacon-in-visualization

        3
    • 9

      @Jessica — It sounds to me like you’re confusing Design with Decoration.

      Design is much more than making stuff look pretty; it’s about communication. If the communication fails the design has failed, and you’ve failed your client.

      14
  3. 10

    It sounds like some of the other commenters were hoping for a different set of guidelines for creating infographics. Creating interesting, insightful, beautiful graphics around data isn’t easy. Beyond the principles of graphic design there’s the science of analyzing and presenting data. If you are a graphic designer and you want to make ads masquerading as data graphics, or if you want to help poorly trained journalists confuse their readers then the previous article is for you. If you like the visual style of infographics but want to actually communicate something meaningful, pick up some books about data visualization and data science and get reading.

    12
  4. 11

    Nathan and Amy,

    If after comparing the bar chart and the speedometer you feel the speedometer is a more effective visual representation, your symptoms are concerning. They point to an alarming trend that spreads virus-like afflicting many people across frontiers. This phenomenon particularly affects the young. You can see these people all over. Instinctively needing to to make their mark and demonstrate that their contribution has been an innovation, people everywhere contend that ‘new’ equals innovation and improvement while present-day models that have proved their worth over the test of time are rubbished and labelled ‘boring’ or ‘clichéd’. Nowadays, everything is assigned a shelf-life after which it is discarded onto the slagheap of uselessness, deserving or otherwise.

    I maintain that bar chart wins this one hands down because
    1. the linearity of the bar chart helps it to be perceived quicker than the speedometer.
    2. the arrangement of colours provide more contrast
    3. the units do not obfuscate or obscure the view
    4. the side-by-side event ranking makes comparisons much easier than on the speedometer.

    (If you measure and compare the width and height of the both, I think you’ll find the bar chart also occupies less space.)

    But forget about those salient points because look! the speedometer is ‘cool’.

    24
  5. 13

    I always thought that “data goes first” is sine qua non of the infographics and everyone knows it. Turns out, I was wrong. The point of visual data presentation is to help the reader to understand the data, see the patterns that otherwise would remain hidden, and not to impress him with the abilities of designer. If you have two numbers, the best inforgraphics for them will be to just right them in your text, instead of occupying the space and readers time with junk decorations. The author of the first article forgot this principle, and its good that someone took time to state it loud and clear.

    ps. Not using bar charts just because everyone else use bar charts is like not using letters because everyone else uses them.

    13
  6. 14

    Thanks for the post Nathan!!

    We are clearly of 2 different schools of thought on this matter, but I highly appreciate your POV on the subject. I come from a marketing background and use infographics primarily for marketing purposes.

    Regarding data, I agree that finding relevant and appealing data is of the utmost importance. That said, when I suggested my article originally, I had dedicated an entire section to data/research and was asked to only focus on design, this is why there isn’t much about data itself in my post. It’s also important to note that not all data is appealing to the masses. In fact, most infographics have pretty boring data from a mass appeal perspective, but showcase exactly what the client wants to say to their audience. So while data is important, it can’t always be the backbone of an infographic and, many times, the design has to take things to the next level to draw the eye.

    In the end, we are writing about 2 different types of infographics. You provide a great case for clean visualizations, while my post dives into the ways to create the type of infographics that are taking over Google Images (Linkbait? Yes. Successful? Yes). One thing I would change with my post would be to make this fact clear. Instead I just focused on explaining how to design linkbait infographics, without specifying that this is just one type of infographic design. That said, it is the type that we see in the mainstream and what our many clients keep requesting of us.

    While you say the ROI for these infographics is going down, we have not seen this with our clients, in fact we have instead seen the ROI continue to skyrocket for them. There are many great ways to use infographics as linkbait, but I agree that infographics need a cleaner aesthetic with simple data viz when used for non linkbait purposes (we do this for whitepapers, internal reports, flyers, etc). That said, a large majority of infographics are not used for this, they are used for online marketing and require “eye candy” rather than simple visuals. In my opinion, the best designers can design both, not just one or the other.

    1
    • 15

      Getting to the party a bit late here.
      To be honest I have read both articles and what bothers me most is this comment. You’re right in that you should have made your scope clearer.
      I would have assumed that the term infographic in itself implies that information is the core priority. In your comment, you state that to you, in fact, this core priority is marketing. If so, then (imho) you haven’t really been talking about infographics in the fist place.

      0
  7. 16

    Thank you Nathan for this article.

    I think the major flaws with the original article include the idea that basic charts & graphs (bar, line, scatter plot) are somehow NOT data visualization. They are, and when done right, can be graphically compelling as well as informative.

    A primary rule of infographics is that the visual element should add to a reader’s understanding. Amy’s examples fail because they work to obscure the data, and distract with playful imagery. Making the data incomprehensible defeats the purpose. I would direct anyone, who is interested, to the Junk Charts blog (http://junkcharts.typepad.com/) for more on this basic principle of data visualization.

    9
  8. 17

    Delwin Campbell

    October 21, 2011 11:39 am

    I don’t know what all the fuss is about. Infographic design is two things, and two things only. There is no reason to make this into some huge deal.

    1. Infographics must make data easier to read. That is the main reason we use them. We don’t like looking at numbers, they’re too arbitrary and mean nothing without context. Visuals make numbers more significant.

    2. Infographics must be accurate (and cite sources). Obviously there is going to be _some_ loss of data when putting numbers into pictures, but the infographic designer has to do his best to minimize this — infographics should be (like the original data) as accurate as possible.

    There are no other rules — infographics don’t have to be unique, they don’t have to blow your mind. The only reason to make data “unique-looking” if it helps Rule #1.

    As always, content is king. This should be emblazoned on the brain of every designer — the second this maxim is forgotten, design fails.

    Also that speedometer has to be the worst visualization of data I have ever seen. To the editors of Smashing Magazine: Thank you for providing a critique of the original post, sometimes I am scared for the legions of designers who follow your articles without question.

    13
    • 18

      Kelvin Chiang

      October 24, 2011 4:50 am

      Just like Bauhaus School taught us: “Less is more.”

      By the way, I agree the Speedometer, although it looks nice, but it’s hard to understand at a glance and then if you try harder it’s even harder to understand :/

      4
  9. 19

    Whoa there bessy! Let’s all calm down a bit.

    Taken in context, Amy’s article is sound on the principal that it urges us to make the data visualisation a key part of the infographic. Comprehending a set of figures is not as easy as assessing which block of colour is biggest.

    If you are a marketeer and not a designer I think you were very brave to submit to SM with your own graphics and opinions on designing infographics. Could you write a new article which covers infographics from a marketing perspective? I’d be interested in your take on how graphical representation of data can be arranged to provide weight to an argument/concept. Nathan, you point out that the arc length of the speedometer example is distorted. I think that would be a key factor of an infographic designed for marketing purposes. Amy, if that is your field of expertise, lets hear about that from you, and let Nathan or your design team tell us how to make it look good.

    3
  10. 20

    Without getting too philosophical, I think the difference in approach boils down to two distinct approaches to telling compelling stories with data. Marketing is inherently “soft” with regards to it’s use of statistical analysis, and typically presents very high-level summary statistics, often in a predictive or forecasted fashion. The story is often determined before the underlying data is analyzed and summarized. This is somewhat by design, since the message must be short and easy to understand by many people. Marketing stories (infographics) are driven by a desire to change consumer behavior—to help a consumer make a decision to spend money or submit information to a specific business. Much of infographic content must truly be innovative to succeed.

    Data visualization as a tool to analyze complex natural systems is born of a bit “harder” science. The compelling stories are rarely predetermined, and are usually helping us better understand correlations within and between systems that aren’t obvious. Where an infographic strives to innovate, a data visualization strives to discover. Good data visualizations intend to present information with as little bias as possible—hopefully allowing the data user to make a more informed, actionable decision.

    The tension and interplay between innovation and discovery is as old as the hills, and can’t possibly be summarized sufficiently in a comment, but hopefully the general topic can shed some light on the various approaches to telling stories with data.

    4
  11. 21

    Somewhat agree with Mary. I like the first post, but this one is not really helpful at all. Lacks substance and does not tell me anything special.

    1
    • 22

      Daniel Christopher

      January 24, 2012 12:34 am

      I have to agree. The first article at least attempted to provide useful information and examples. I feel like this article could have been summed up with one sentence: “Let’s not forget, accurate display of information is still the ultimate focus of data visualization.”

      That’s great and everything, but probably just could have been appended to the previous article.

      2
  12. 23

    I found both articles interesting, although not really something I’ve worked with, so I won’t comment on the information.

    What I will say is that I appreciate the editors of Smashing – seeing the rebuttal and rather than hiding it, embracing it as an alternative view. Kudos to both authors of course, but especially to the editors for helping to provide the broad spectrum of information that can handle ‘discussion’

    5
  13. 24

    I am just starting in the world of data viz and graphic design and I realize that I have to be careful in reading of this kind of posts, and I have to be more critic as well. I have noticed that bloggers start to write about what works and what don’t. And it is a matter too subjetive.

    I believe that following what the data is telling you, as Nathan pointed out, is maybe the right thing (or just the better way) to tackle the problem. By the way, I highly recommend his book. It is a masterpiece for beginers and not-so beginers.

    Ramiro

    3
  14. 25

    Chris Hoffman

    October 21, 2011 8:34 am

    Nathan is absolutely correct. Its the age old battle of designing around content (using dummy text, etc). Infographics are the purest form of content presented to tell a story or make a point. Without solid, supportive, and intriguing data, your infographic will never be great (although it may still look good).

    Great examples of infographics:

    http://www.good.is/infographics

    2
  15. 26

    Thank you, Nathan, for providing your expertise on this subject matter. I found the first article disturbingly focused on making data look “cool.” (Side note, “cool” is obviously subjective. Speedometer?!?! What year is this? Pretty pedestrian example.)

    I certainly hope the readers take your suggestions to heart, Nathan. Without good data literacy, we’ll likely be spreading misinformation.

    2
  16. 27

    Also, a note to the editor… the first graphic wasn’t included in this post.

    5
  17. 28

    Design 101:

    Form follows function.

    (If you can’t comprehend the infographic, it’s no good).

    So it goes…

    -dp

    7
  18. 29

    I guess we now know the source of Gizmodo’s rage:
    http://gizmodo.com/infographic/

    5
  19. 30

    “The fact is that these monstrosities are not infographics. These atrocities are crimes against good taste and everything that infographics really should be. They’re just a bunch of statistics jammed together on horrible vertical pages, bloated with bad drawings and clipart created by primitive monkeys using CorelDRAW! 1.0—graphical disgraces that most often disguise spam, commissioned by iniquitous companies looking to increase traffic to their sites.”

    -2
  20. 31

    As a beginner there was plenty to take away from both articles. The second also helped a great deal by outlining some very important principles that were overlooked in the first.

    It (and many of the comments) also reminded me to seek out other perspectives, and input from various sources. It’s too easy as a beginner to accept everything on great sites like this as the absolute truth (especially when you’re a bit thick like me!)

    0

↑ Back to top