Top 10 data dashboard errors (and tips to avoid them)

Do you create dashboards that communicate the right message clearly and steer people to the right action? Achieving a compelling visual data story often means you need to avoid a few common design pitfalls.

Let’s take a look at the Top 10 dashboard design no-no’s and tips to avoid them – from our Product Manager (and master dataviz maker), Piers Batchelor. 👑

10. Too many colors!

Avoid using too much color. Stick to the fundamental rule — keep it simple. Simplicity leads to understanding and keeps your audience on board. 🎨

A palette should consist of around 6–13 colors (odd numbers work best with gradients). With more than 14 colors, some of the colors become harder to distinguish. Twelve colors are ideal for visualizing months in different colors.

Though this isn’t the broadest use case it is also wise to have enough colors to cover most cases. For example, there are many companies that have 10 product categories to distinguish between. Amazon has a lot more than this.

💡 Tip: In most cases, you want to use between 4 and 6 colors.

If the palette is a diverging color palette, the colors need to be odd to consider a middle color, hence the maximum of 13 colors!

A great resource for tried and tested data viz color palettes is color brewer. To test color palettes, I use Viz Palette by Elijah Meeks and Susie Lu.

9. Homegrown gradients ⚠

On the topic of color, gradients can introduce their own problems.

Humans understand simple gradients found in nature, try to avoid using a gradient made up of your brand colors. Gradients should follow a natural sequence commonly understood by all.

A rainbow isn’t a simple gradient found in nature, because not all end-users will be able to remember which order the colors should appear in.

Examples of simple gradients are sunsets, ocean-themed, and in some cases, plant or forest themes. Here’s an example of a sunset gradient which you’ve probably seen in charts before.

Green/red doesn’t always need to mean good or bad. Think of this in terms of high and low, and you’ll have more easily understood gradients.

💡 Tip: To quickly generate clear gradients with a number of stops, use a tool like gradstop or chroma.js.

Gradients are best used in heatmaps and scatter charts, where gradients bring the chart to life and offer more meaning to the data by visualizing an additional metric. That would mean a scatter chart could show 1 dimension and 4 measures (x, y, z [size] and gradient color). A heatmap could show 2 dimensions (x,y) and 2 measures (size and color).

8. Unclear link to story/narrative

The chart below claims its purpose is to rank countries by alcohol consumption. However — 1L of Beer =5 units, 1L of Vodka/Spirit = 40 units.

If we converted to consumption of units of alcohol, then a country like Nigeria would most likely move further away from 5th place, telling us a very different story. 🙄

7. Transparent data

Don’t try to embellish the data. Make sure it is transparent. Plus, also ensure the data is correct! And that the parts add up to the total figure.

In many cases filtering can be useful.  For example, showing a rolling 28-day trend, you do want to ignore the past data.

💡 Tip: Keep your story relevant and try to focus on what you want to share, without hiding aspects of the data.

6. Don’t forget scale

👌 Start from zero

As you can see, 28% of NBC charts have the correct scale 😉

Don’t truncate a graph’s axes as it may distort the data representation and minimize the impact of your message. A clear example of omitting Baselines and Truncating Scale is shown below, where the scale starts at 28%.

Interestingly, a colleague pointed out to me that 13% is greater than 28% – which then made me notice that 25% is also greater than 28%.

☄️ Area vs radius

Source: Coolinfographics.com

If you create your own visualizations, remember circles are compared by area, not so much by radius. The ideal way to compare is “how many yellow circles can fit inside the blue circle”.  If the answer is 9, then the blue circle is of course 9 times larger.

Equally a Bar chart would have been better here. This can be translated and more easily interpreted as Linear vs Quadratic change.

5. Too many charts

Too many charts indicate that the focus is on visualizing all possible data , rather than telling a meaningful story with data. If the chart does not produce insight, necessary context or better yet, actionable insight, it probably isn’t needed.

Try to avoid:

• No breaking white space (between charts)
• Poor gradient used (that’s right they’re not all the same shade of green)
• Metrics not labeled (green box on the top right of each chart)

💡 Tip: Good dashboards will make effective use of whitespace, breaking up charts and telling a meaningful story, with the intentional avoidance of metric overload.

With quality data and clear metrics, you’ll be on track for a happy audience. Dashboard like AirBnB’s uses a tab-based container to focus on one metric at a time, not together — reducing the need to show 3 charts alongside.

And I hear you say “But Piers, I need to compare metrics” — aha! — you can do that in a Line chart that has a primary and secondary axis.

Airbnb’s performance dashboard. Source: AirBnB

4. Too many values in a chart

Change in popularity of genres over time

High cognitive load (the amount of info your brain can process at a time) can cause stress, and fast. Distraction is a killer – your audience won’t understand what you’re trying to show and will move on.

If the chart settings feel overwhelming, so can a busy chart. If a user has to think about how they should best read it, the chart is not great.

The value of having “Other” is underrated. On a purposely small image of the visualization (a realistic scenario), I can clearly see 10 key Genres that span across time. The rest could be either grouped together or colored in grayscale, so that we draw focus to the change in popularity of top genres over time.

💡 Tip: If you’re going to need lots of values, a helpful title can draw focus to the key values. Alternatively, consider highlighting key values in bolder colors.

3. Overly complex charts

💡 Tip: Charts are like jokes, if you have to explain them, they’re probably no good.

Like jokes, good charts are simple.

I love the creativity behind combining charts, however, I couldn’t tell you where the top of the bar scale is! More frequently I see these as Bar charts. A general exception to this rule is the use of infographics, where many rules can be broken to look appealing and tell a visual story. An infographic usually serves the purpose of spending more time on a single visual or a single message.

2. Don’t ignore sorting

When it comes to screen-reading, I (and I assume others) get impatient or frustrated when information is poorly laid out. There are many mistakes below:

👎 Bad

• The bars are not sorted!
• The legend should be sorted in the reading order that the colors appear on the chart. For most of us, they should be ordered from top-left to bottom-right: blue, orange red, etc.
• Don’t mix scales! Percentages are mixed with stacked numbers below, which is mixing normalized and non-normalized data! (see the legend)
• Number labels on the bar and scale? A bit of duplication but I could let this one go… For me, as a personal rule, bars are shown inside a stack, why not show them outside without an axis, saving space.

💡 Tip: Labels look much neater when you use them only in one place.

Source: @_cingraham

One good about this chart is that “Excessive drinking” is the only variable that matters for the purposes of the ranking  — @_cingraham.

1. (Static) 3D charts

It is 2022, not 2002!

A fun extra point to remind everybody that static 3D Bar charts add very little value — without changing perspective.

Change my mind in the comments if you so wish!

Artist’s impression of a chart.

 

👋 Thanks for sharing your dataviz wisdom, Piers!