All That Glitters Is Not Gold: A Common Misconception About Designing With Data

Advertisement

Too often when working in information design, you’ll hear the request, “Can you make the data look cool?” “Cool” is a rather ambiguous term, and means different things to different people. Unfortunately, when working with data, the term “cool” is often directly juxtaposed with common charts like line, bar and pie, which are often relegated to the backbench, and written off as “boring.”

The emphasis on the instant visual appeal of an infographic over the clarity of the presentation of data is a troubling trend that plagues the modern incarnation of the infographic.

Data Visualization And The “Cool” Factor

“The important criterion for a graph is not simply how fast we can see a result; rather it is whether through the use of the graph we can see something that would have been harder to see otherwise or that could not have been seen at all.”

– William Cleveland, Web Application Design Handbook1

When presenting data visually, our main aim should be to look for ways to effectively communicate the stories hidden in the depths of the spreadsheet. Data visualization grants a means for discovery. It frees the data from the confines of its tabulated raw format and provides a way for the viewer to see trends, gather insights and understand complex stories without the need for words.

However, the average infographic that you’ll likely come across online today focuses more on the overall aesthetic of the piece, the “cool” factor, than on the data itself. “Info-posters” that are heavily illustrated and have a low information-to-pixel density currently dominate the infographic landscape, many of which dumb down data and spoon-feed the audience a choice set of factoids for easy digestion of the chosen topic.

infographicx32
In an effort to make the data appear more interesting, some infographics use design elements to distract the viewer. Large view3.

In striving to achieve coolness, the examples above forgo the integrity of the data and, hence, the main function of the infographic. The design, rather than clarifying the data, actually distracts the audience from the information presented, encouraging them to engage with the visual elements rather than with the data itself.

Data Vs. Design?

Now, that’s not to say that being informative and beautiful are mutually exclusive. There are many wonderful examples of data being presented in an efficient, effective and visually stunning way. But the beauty of most of them lies in their simplicity.

Screen Shot 2013-07-12 at 12.15.564
US Gun Deaths5” by Periscopic. Large view6.

The most effective infographics and visualizations present data as clearly and concisely as possible, free from most distractions and embellishments — the emphasis being not on making the data look cool, but on ensuring that the data’s story is clearly communicated.

Decisions made during the design process will either help or hinder the viewer’s comprehension of the subject matter. So, although it is often said that the type of data will determine the type of visualization, design choices involving color, shape, layout and typography are also extremely important and will affect the ease with which the information can be understood. For example, color can highlight key insights, size can demonstrate change, and proximity can imply correlation.

A common misconception is that the audience will be interested in your data only if it looks exciting and is broken down into bite-sized chunks. In reality, you don’t need to dress up the data to make it more interesting. The information in the graphic, or the story you’re revealing, will ultimately determine the appeal of the piece, not the fancy illustrations. As Brian Suda puts it in his book Designing With Data7, “Graphic design is not a panacea for bad copy, poor layout or misleading statistics”.

Bar Charts Are Your Friend, Not Your Enemy

When the focus is on communicating data effectively, common chart types should not be dismissed as boring alternatives, and you certainly shouldn’t be afraid to use them when telling stories with data.

News organizations such as The New York Times and The Guardian rely heavily on these common chart types, because simplicity and efficiency will often trump novelty in conveying complex information to a wide audience.

Screen Shot 2013-07-12 at 12.23.008
Why Is Her Paycheck Smaller?9” by The New York Times. Large view10.

Charts such as line, bar and pie have been in constant use since the 18th century for good reason. How information is displayed and organized in these charts appeals directly to the intrinsic way in which humans perceive things. According to the Gestalt laws of perception, the human brain automatically organizes and groups the things it sees by proximity, similarity, continuity and symmetry.

Designing with data in a way that supports these relationships (for example, by using color to show similarity, or by using a connecting line to imply continuity) makes it easier for viewers to understand what the data is showing and to draw certain conclusions that would be a lot harder to come to had the data been merely displayed in tabular format.

According to Andy Kirk in his book Data Visualization: A Successful Design Process11, by presenting data in a visually effective way, you “move from just looking at the data, to actually seeing it.”

In Practice

The following “infographic” was probably the unfortunate result of a designer being asked to make the data look cool — a predicament I can certainly sympathize with, having been given the exact same creative direction in a number of projects. On more than one occasion, I have been explicitly asked not to use bar or line charts and been told that I simply needed to “jazz up the data,” much to my concern.

The presentation of the information below certainly is unique, and effort has been exerted to make the information look interesting. The graphic fails, however, in actually conveying information.

Screen Shot 2013-07-12 at 12.25.5312
Top 10 Salaries at Google13”: Making the data appear more interesting does not necessarily make it any easier to understand. Large view14.

This graphic’s primary purpose should have been to present the data in a format that is easier to read than a table.

Screen Shot 2013-07-12 at 12.29.5815
Large view16.

In this instance, however, the table functions more efficiently than the graphic as a way to explore the data. If the salary range for each job was not present in the graphic, it would be nigh impossible to read. The pie-chart format adopted here actually obscures the data, rather than makes it accessible. Additionally, the colors are somewhat confusing; the radius of the pie slices are meaningless; and the number and size of the people figures don’t seem to correspond to anything.

(Update:The number of people figures in fact relate to whether that role involves two salaries. The double-salary category is in itself problematic, as it’s not completely clear whether those salary ranges relate to one salary or the sum of both salaries for that role. Additionally, the usage of multiple people figures to illustrate the double-salary point is also misleading. At first glance, this particular use of iconography could imply the number of people associated with that role, rather than its intended use of demonstrating number of salaries per role. Perhaps a different icon to represent salary is needed in this instance.)

So, how could this be better visualized? Focusing first and foremost on the clarity of the data, I’ve explored just two possible ways in which this small data set could have been presented. I’m sure there are many, many more.

SmashingMag1_ChartRedesign-0317
One possible alternative to the infographic above. Large view18.

This first option gives the viewer a much clearer representation of the data. With the linear organization, the viewer can understand at a glance what the data is showing, without having to work too hard. In stark contrast to the original, this graph makes the data instantly accessible, allowing for easy comparison between the jobs.

The first complaint I would likely hear is that the graph has an abundance of empty space. This space, however, actually tells a big part of the story. On the one hand, we’re presenting a comparison of 10 jobs; on the other, we also want to highlight that these salaries are actually very high, and the white space reinforces that.

Alternatively, the data could be presented as a slope graph:

SmashingMag1_ChartRedesign-0419
Any one data set can be presented in a number of ways. Large view20.

Here, we’ve zoomed into a portion of the graph. On the left side, markers pinpoint the low end of the salary range; on the right, markers pinpoint the high end. This version more clearly highlights those jobs with the widest ranges in salary, and it shows us that different presentation methods can tell slightly different stories.

These two examples may not have the visual pizazz of the original, but unlike the original, the data and the story are easily accessible to the viewer and not hindered by the motivation to look cool.

The request to simply make data look interesting is all too common in information design, and it might seem innocent at first. But if you forgo the integrity of the data to achieve this goal, then you run the risk of turning your infographic into merely a graphic with information, and that’s a big difference.

All that glitters is not necessarily gold.

(al) (ea)

Footnotes

  1. 1 http://www.amazon.co.uk/Web-Application-Design-Handbook-Technologies/dp/1558607528
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2013/07/infographics_large_mini.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2013/07/infographicx3-1_mini.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/07/us-gun-death_large_mini.png
  5. 5 http://guns.periscopic.com/?year=2013
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2013/07/us-gun-death_large_mini.png
  7. 7 http://www.designingwithdata.com/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2013/07/Why-is-her-paycheck-smaller_large_mini.png
  9. 9 http://www.nytimes.com/interactive/2009/03/01/business/20090301_WageGap.html?_r=0
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2013/07/Why-is-her-paycheck-smaller_large_mini.png
  11. 11 http://www.visualisingdata.com/index.php/book/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2013/07/top-ten-salaries-google_large_mini.png
  13. 13 http://www.jobvine.co.za/what-does-it-take-to-get-a-job-at-google/
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/07/top-ten-salaries-google_large_mini.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2013/07/top-ten-salaries-table_large_mini.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/07/top-ten-salaries-table_large_mini.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/07/SmashingMag1_ChartRedesign-03_large_mini.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2013/07/SmashingMag1_ChartRedesign-03_large_mini.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2013/07/top-ten-salaries-slope-graph_large_mini.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2013/07/top-ten-salaries-slope-graph_large_mini.png

↑ Back to topShare on Twitter

Tiffany is currently working as a freelance information designer, turning data into visual stories for a wide variety of clients. She has worked on a diverse range of projects, from making complex datasets understandable to live-charting the US elections and designing data-driven installations. She is fuelled by good coffee, books and boardgames.

Advertising
  1. 1

    Tiffany

    Great post….

    Information architecture is tricky and require a great deal of planning. I often use the following question when designing data ” Can the viewer easily understand what they are seeing ?” it must be super simple.

    Certainly your example with the Google infographic is a case of practical vs cool. A good designer can display both practicality and coolness. It is a delicate balance, but when achieved
    serves the purpose or goal of the client requesting it.

    2
    • 2

      Tiffany Farrant-Gonzalez

      July 31, 2013 1:13 pm

      Thanks, Geoffrey. Oh yes, there’s certainly nothing wrong with the request to make the data visually interesting. It’s only harmful when certain treatments, such as the bar chart, are categorised as “boring” and when the visual appeal of the graphic is emphasised over the clarity of the data presentation.

      Great graphic design paired with effective data presentation is, as you say, a delicate balance, and they are certainly not mutually exclusive traits. There are so many wonderful examples where this balance is achieved and not skewed in either direction. For example, Accurat’s work is always first and foremost about data presentation, but they also visually look stunning, encouraging the viewer to explore the content further.

      0
  2. 3

    Great points! Not only are some graphs hard to comprehend, but they can also be very easy to misinterpret (which of course may be by design). There really is so many ways to go wrong with data visualization.
    I found books by Edward Tufte to be inspiring, such as “Envisioning Information” and “The Visual Display of Quantitative Information”.

    3
  3. 4

    “The number and size of the people figures don’t seem to correspond to anything.”

    This neatly (and ironically) demonstrates your point about the graph being difficult to read – as the number of the people figures does in fact correspond to something. The two examples of salaries represented by a pair of people each include two salaries rather than one. This also means that your (way superior) versions could do with a note explaining why the ranges for senior managers and directors are twice as wide as the rest. So the rubbish first graphic has negatively influenced your version too!

    6
    • 5

      Tiffany Farrant-Gonzalez

      July 29, 2013 5:33 pm

      Ah yes, you’re totally right! Thank you for pointing that out! Indeed, ironically and inadvertently showing my point.

      The double-salary issue makes the example graphic even more problematic. Does the current range on the graphic represent the range of one salary, or the sum of both salaries? I’m sure it’s the latter, as the subtitle indicates that the chart is “per year” however it’s not 100% clear with the current iconography and labelling whether some managers are receiving a potential minimum of $143k x2 or $143k / 2. As you say it’s certainly something that needs to be clearly called out and highlighted.

      The usage of multiple figures to illustrate the double-salary point is also misleading. To me, two people figures would imply that two people are receiving one salary, rather than one person receiving two salaries. Perhaps a different icon to represent salary is needed in this instance.

      This is one of those times where I would have loved to have seen the original dataset.

      3
  4. 6

    “Simplicity is the Ultimate Sophistication” — Leonardo da Vinci

    So many times in the IT world do I see the technically inclined speak to the technically challenged in a way that just leaves them scratching their heads. As with the role of infographics, we need to be ever-mindful if what we are saying is something that “the lowest common denominator” can understand. It isn’t a question of intelligence; it’s a question of comprehension.

    When the vast majority of people can look at your graphic, and even without using a legend, comprehend what they are seeing quickly (ala ‘Don’t Make Me Think’), then you’re one step closer in making a better product.

    0
  5. 7

    The first illustration immediately displays one of the errors (and if deliberate: ‘lies’) that was already decribed by Edward Tufte in his pre-internet age book “The Visual Display of Quantitative Information” (http://www.amazon.com/The-Visual-Display-Quantitative-Information/dp/0961392142) :

    If a number increases by a factor e.g. 1.5 and you represent it with a two-dimensional figure (oil drums) of which you keep the aspect ratio intact, the user will perceive it as the 2.25 *area* increase.

    3
  6. 8

    Andrew Richardson

    July 29, 2013 7:25 pm

    I think the main problem comes when you have a client that feels the data isn’t enough to convince someone of their side of the issue. They want to “pump it up” with illustrations or make it have an “immediate emotional reaction”, which are things I hear all the time while attempting to make quality infographics.

    A lot of this, I think, comes from insecurity. Insecurity that the data alone, displayed in a very simple way, can persuade the masses. Often times it’s not and a good narrative needs to accompany the data. The real challenge isn’t displaying the data in a simple, intuitive way, it’s convincing our clients that it’s the right way. What are some ways we can go about doing that?

    7
  7. 9

    Pay attention to the content, not the packaging. Find out what’s interesting about the data rather than presenting the data in an interesting way. Is there even anything interesting about it at all?

    As nice as your examples look, I am not sure what the conclusion of the data is or what’s interesting about it (probably due to a lack of context). How does the distribution of salaries look across the range you are presenting? It is clear however that you’ve spent more time on presenting the data in a nice way rather than thinking about what’s actually relevant about it.

    Your salary example shows a difference in salaries not only between different positions, but compares employees to contractors (!). This is where some clean-up would have been very helpful to factor in the enormous differences in expenses.

    5
    • 10

      Tiffany Farrant-Gonzalez

      July 31, 2013 12:54 pm

      Thank, Tim! I very much agree with you. At the end of the day an information graphic is only as interesting as the data it’s presenting, and there’s only so far that design can carry a dataset with no context.

      As you say, without context this dataset probably isn’t that interesting, and it can certainly do with highlighting the point(s) of significance. My aim with this redesign exercise was to primarily focus on simplifying the visual presentation of the data and showing just a few ways in which the information could be made easier to read, rather than addressing the content of the original at this stage.

      Telling effective stories with data is a huge topic and simplifying is only but one facet of data presentation. I hope to delve a little deeper into working with specific data narratives in a subsequent article soon.

      1
  8. 11

    Tiffany
    I agree with Geoffrey. He is absolutely rite.

    -1
  9. 12

    For me, the irony in this story is that your graphs look infinitely better than the original. Nailed it.

    2
  10. 13

    Tiff, you inspire me every day! Awesome article. I’ll remember never to ask you to make data look ‘cool’ anymore… :)

    1
  11. 14

    Hi Tiffany, nice article. I had a difficult time deciphering the chart until you explained it – not a good start.

    However, I think you kind of missed the vital elements of the graphic with your example. What they are trying to convey is a proportion relative to a scale. To me, their biggest mistake was in forcing the data into a circle, which usually represents some proportion of 100%.

    I actually like the use of the overlapping graphics, but I would have used a linear spectrum chart, maybe something like this:

    http://www.aaroniausa.com/images/SpectrumAnalyzer-Frequency.gif

    0
  12. 15

    Good points and infographics used. Infographics and images makes the content look visually appealing and create interest among readers. Nice presentation Tiffany!!

    1
  13. 16

    Lately I’ve been having a love affair with infographics. They’re pretty, great conversation starters and occasionally full of useful information. I was initially excited about the google salary example and was considering posting it on Twitter. But as I read the analysis unfolding, it occurred to me that the much beloved infographic could also become a Dark Pattern.

    Once data is beautified, it’s difficult to suss out the authenticity of what’s being conveyed. Sources can be conveniently left off or obfuscated. Specific slices of data may paint a rosier picture than the reality of the the situation it represents. Add a little interactivity and you get a “wow factor” that can cause viewers to lower their guard and take it at face value. In fact one of the examples, the Gun Deaths infographic, could have been a perfect example. It’s slick, engaging, powerful, but without the data source info listed below, completely without value.

    So thank you for a well thought out, insightful article. I for one, will try to be a little more discriminating before falling in love with the pretty [data] pictures.

    0
  14. 17

    Hi, agree with the author, the data is the principal ingredient in an infographic, and the purpose of the data is to inform, if you don’t get informed, the graphic didn’t worked. The equation an infographist must solve, is to transform the complicated into the simplest.
    An infographic must have, like a chemical reaction, a balance between art and data; maybe you use a dot or a color, its ok, maybe you use a baroque painting.. but as long as the idea remains understandable, that graphic is well done.
    Everything is subject to be improved, anything, even the most great infographic.

    Great article :-)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top