USER INTERFACES

7 deadly sins of data visualization

How trendy charts infantilize business data

Snakes, seashells, mountains — this is something we, designers, might draw instead of showing data. Just get me right: creative charts are a fair choice when the goal is to entertain, for example, in a fitness app or video game. But if you aim to inform decisions, fanciness is not going to work. We’ll explore seven visual approaches incompatible with business needs and will find robust alternatives.

Sin 1. “Snakes”

Have you ever seen a CRM or ERP dashboard design that features juicy 3D tubes as graphs? I call this approach “snakes.”

Although such visualizations might seem visually appealing, they are helpless against actual data and — importantly — are challenging to use. Almost everything is the decoration on the chart above, whereas the real data consists of only 10 data points. On such a large widget, you can show all the numbers without tooltips at all!

“Zebra” grid, thickness, volume, shadows, and gradients provide no practical benefit but occupy space and draw attention in vain.

Besides that, there is enough space for displaying 20, 30, and even more data points instead of just 10. “Snakes” might indicate that there is, in fact, little data to show, and a designer attempts to fill in this blank area with something pleasant to the eyes.

And now, imagine there is a need to show multiple trends simultaneously. “Snakes” won’t allow you to do that. In the picture below, the glowing tubes create a complete mess.

Risks in a nutshell

• It’s difficult to show more than one graph and maintain readability.
• The line thickness obscures the actual numbers, so there is a need for dumb workarounds like “zebra” coloring or grids.
• The graph’s smooth curves are possible only with “perfect” mock data and will be crushed by the real data.
• Curves connecting data points imply some intermediate points, but that’s just an illusion.

How to avoid

• If there are few data points, use a bar chart.
• If there are many data points, meaning the data is continuous, think of a simple thin graph.

Sin 2. “Nested donuts”

Like the “snakes,” beloved designers’ “donuts,” especially the nested ones, also impact accuracy and turn data comparison into hurdling. Plus, both methods have trouble with using space effectively.

People can more or less handle even percentages: full circle = 100%, half a circle = 50%, a quarter = 25%, and three-thirds = 75%. But what if a circle ends somewhere between the “half” and “three-thirds” — like the green one in the picture? How quickly can you calculate 50 + 25 ÷ 2 and assume it should be around 62.5%?

If you have only one circle, you can put a percentage number in the middle, but what if the widget contains three circles?

What you can also notice in the picture above is that the percentage doesn’t correspond to the visual weight. The blue ring shows a higher percentage but doesn’t look much larger than the green one.

Now, rounding. It might make the chart look cute but, eventually, distorts the data. Such rounding visually adds two-three “ghost” percent on top of the real values. Let’s see. These are non-rounded edges:

Look how much decoration, including rounding, was used to convey just three simple data points:

The good news is the chart can be much simpler. Three bars communicate the same information, require less space, and expose numbers without tooltips, which is vital for data-driven interfaces.

With simple bars, one can also get rid of a legend and keep the widget even more compact. And you don’t need colors anymore because the labels now accompany the bars.

Risks in a nutshell

• Circular shapes are harder to interpret. People recognize even percentages like 25%, 50%, 75%, or 100% pretty well, but normally struggle with intermediate values.
• Nested circles require a legend or tooltips because labels usually cannot be gracefully attached to the corresponding rings.
• Rounded arch ends in nested charts make comparisons challenging.

How to avoid

• Consider using bar charts for accurate percentage indication.
• Yet choosing a circular chart, avoid nested circles and roundings.

Sin 3. “Seashells”

Edward Tufte, a famous statistician and the author of fundamental books on data visualization, warned many times that visually appealing charts could lie. “Seashells” are a trendy variation of donut charts, where colored segments have varying widths and overlap with each other.

Simply put, the essence of data visualization is representing numbers visually — through color, area, length, and other means. For example, the greater the number, the longer the bar; the lower the percentage, the smaller the area. But when we analyze “seashell” charts, how are they supposed to work? Not only does the higher percentage gain a wider circle section, but also, the segment is thicker!

And what is the logic behind the overlaps and overshoots? How does one interpret this “data”? Does it mean that the chart shows more than 100% and more than 360 degrees?

This information can be visualized on a chart of the same shape, a pie chart. Of course, the number of data points should remain limited; otherwise, the chart will become messy.

Besides, you can use such a chart type as a treemap, where rectangles of corresponding areas represent the percentage. Although people are usually the best at comparing lengths — ave bar charts! — areas are well-comparable by the eye, too.

Risks in a nutshell

• Unlike classical pie charts, the logic behind “seashells” is unclear: is data represented by area, curve thickness, or sector angle?
• Overlapping sectors distort the data and don’t convey meaning.
• The sleek 3D style of these charts is possible only with mock data and will be smashed by the “imperfect” real data.

How to avoid

• If there is not much data and an accurate comparison is insignificant, feel free to use a classical pie chart.
• A treemap is also a handy technique to show percentages through the area.

Sin 4. “Mountains”

Have you ever seen “mountains” in business dashboards? I use this term for colored overlapping graphs, yet another popular technique.

I’ve already introduced this flaw — made-up data — in the “Snakes” chapter, but let’s discuss it in detail. The elaborate visualization above boils down to 20 turquoise and orange points.

All the connecting curves have nothing to do with data; they are added artificially. Maybe for good sake — to unite separate points into a clear trend, or perhaps to fill in the “gaps” and make it look “nicer.”

But why is it dangerous for business interfaces? Here is an example. We have two neighboring points on an engineering chart — 50 kg/m² at 12:00 and 60 kg/m² at 13:00. These points are connected with an elegant smooth curve. As a result, a user sees that at 12:30, the pressure was around 55 kg/m², but it’s a lie since no one measured it.

The value could have risen abruptly from 50 — whoosh! — to 59, and at 13:00, it reached 60. Or it might have been growing gradually. Or it may have even dropped to 30 before reaching 60 by 13:00. And the fewer points a chart has, the wider space is left for speculations.

A two-color bar chart is one of many options, though. You can choose a graph and even connect the points with lines on the condition of sufficient contrast between actual data and helpful visual effects.

Risks in a nutshell

• “Mountains” create an impression of continuous data but are based on a limited set of points.
• The curves always show smooth data dynamics, although what happened between the actual points is unknown. The transition could have been rapid, gradual, or fluctuating.
• A chart has to be loosened to sustain the smoothness of curves. As a result, it occupies space and shows little data.

How to avoid

• Ensure the data points are well-distinguishable from visual effects that help to recognize trends (like connecting lines).
• Try not to use color fill to maintain good contrast if you have several overlapping graphs on the widget.

👋 Hi there! I enjoy two things — sharing knowledge and drinking good coffee. If you like what you are reading now, feel free to support me via the “Buy Me a Coffee” platform ☕ Thank you! ❤️

Sin 5. “Sausages”

Well, what’s wrong with this chart? Why can’t we have something more attractive and original than dull rectangles? I should admit that those 3D “sausages” aren’t a good option, and here is why.

Such visualizations have quite a few issues, but the key concern is stolen data. “Sausages” are the real thieves of the interface world since they show empty spaces where there is real data. To be fair, “sausages” cope with maintaining high contrast so that you can see the edge between green and orange, but the price of this contrast is too high.

I calculated that each tiny gap between the colored bars equals approximately 3% if the entire column is 100% on the chart above. At first glance, not much, right? But we’ve got three sections of different colors and need two gaps, so the total visual “theft” is more significant — 6% per column! And if you calculate a stolen percentage from the circular chart, it’ll reach around 7%, approximately 3.5% per gap.

I put the missing bar parts back on the suggested variant below and got rid of the legend as a separate item. Besides, the former untitled donut part received a new format and a name (average for the fourth quarter).

Risks in a nutshell

• “Sausages” conceal a substantial part of the real data, and thus aren’t accurate enough for analysis and serious decision-making.
• Also, such charts have classical trouble with compactness; they require extra space not to look messy.

How to avoid

• Don’t break monolith data by spacing. Typically, don’t add gaps between portions, the sum of which should equal 100%.
• Check if the chart edges are reasonably rounded — too much roundness disguises valuable bits of data.

Sin 6. “Skyscrapers”

Unlike gorgeous Fernando Baptista’s infographics for National Geographic, business dashboards aren’t a suitable place for isometric “skyscrapers” instead of accurate plain bars.

3D charts lack accuracy and are a severe obstacle when users quickly scan through the interface to spot anomalies and tendencies. In the picture below, I tried to simulate what draws attention at first glance. Can you tell if the bars marked by colored dots are of the same height?

The ones marked by acid-green squares are equal; as for the blocks marked by rosy circles, the first one is 3% higher. Alright, if the problem is insufficient data accuracy, then why don’t designers dim the rest of the parallelepipeds and leave only the front highlighted? Here you go:

However, accuracy is not the only issue. As Master Yoda says in memes, “There is another.” Already guessed? I mean compactness and an ability to reflect natural, subtle fluctuations of data — not this exaggerated rollercoaster with constantly alternating ups and downs.

If you keep it simple, subtle shifts of the measured parameter will be better distinguishable. And it can stay dark-themed if the proper accuracy and highlights are there, for example, the top- and bottom-most values within a selected time range. By the way, I haven’t squeezed the bar width, but the chart now is twice narrower!

Risks in a nutshell

• “Skyscrapers” and other isometric visualizations occupy enormous space compared to the data amount.
• Such charts aren’t capable of revealing subtle data fluctuations either.
• When “skyscrapers” have highlighted “roofs,” they are even harder to read since they make the bars look taller.

How to avoid

• Don’t use 3D effects on business charts.
• Ensure the chart design will support realistic data, which usually isn’t as perfectly wavy as on mockups.

Sin 7. “Baby cubes”

If you have kids, you might know about a toy called a baby cube or activity cube. It’s a box with various handles, latches, sockets, switches, abacuses, buttons, and figures attached to its sides. Of course, all the components of such a “baby dashboard” aren’t functioning, but children train their hand motor skills while playing with the cube.

And how does that relate to data visualization? Nowadays, I see a harmful design practice of drawing visually appealing dashboards that, upon closer examination, can bring little value in reality.

“Baby cubes” are a junction of all dangerous styles from the previous chapters — a misleading illustration rather than a useful tool. As you can notice in the example, it’s full of trendy details: shadows, transparency, volume, glow, rounding, isometric shapes, etc. However, all the widgets are dumb: they fill in the screen space but provide zero insight.

There won’t be a “correct” example here because we’ve already dwelled on how to fix data visualizations piece by piece.

Risks in a nutshell

• “Baby cubes” might aim at making the data more friendly to the eyes, but, unfortunately, they also lose precision and practicality.
• Rounded shapes, shadows, gradient fills, and 3D effects are less capable of enduring “imperfect” real data than plain forms.

How to avoid

• Conduct user and business research beforehand and base a dashboard design on the research findings.
• Avoid oversimplified dashboard designs for business needs.
• Test with users by means of realistic tasks without prompts. For example, “What was the revenue in Q2?” versus “Can you see the large widget showing revenue in the middle of the screen?”

Recommended reading

• “The Visual Display of Quantitative Information,” a classical book on data visualization by Edward Tufte.
• “Envisioning Information,” one more great book by Edward Tufte.
• “Save the Pies for Dessert,” a nerdy study on pie charts by Stephen Few.
• “The Functional Art,” a book by Alberto Cairo.

• ✍️ Here are all my design articles on Medium.
• 💼 Let’s connect on Linkedin. Drop me a note if you want me to present the topic of this article at a conference or meetup.
• 🏰 Bored by design articles? Check my other blog about photography and overlooked architecture.