They ol’ double Y axis:
- Double Y axis are often used in the dashboards I see. While not bad, they can be hard to interpret and make the chart more complex than necessary.
- A common technique that tools employ is colouring the 2 Y axes so the bars and lines can be matched more easily with the correct axis. Next to not being super intuitive, color can be used more strategically.
- The axis for bars has to start at zero. That’s because we compare the lengths of the bars pre-attentively. Not doing so results in a lie factor. While this principle is applied correctly here, it comes with a downside: changes in the headcount are hard to distinguish.
- The budget line acts as a target. Because of the small deltas, it’s hard to make comparisons. The dots on the line make it even harder, they are not serving a purpose here.
- No title or axis labels are present
- Placing the legend at the bottom is not a good visual hierarchy, people will have to scan down before being able to identify the measures. A better strategy would be to label the axes or data points.
A chart is meant to convey a story, something that will resonate with the people using it. Without context (Who will use it?, Why are they using it?) you can’t design your charts properly.
See my other post on an effort to make this requirements gathering process easier
For this particular chart, let’s assume we are a HR manager looking at the recruitment strategy. Do we meet our budgeted headcount? Do we need to focus more on retention or recruitment?
Decluttering means removing all unnecessary elements from the chart. Everything we add to the chart will increase the cognitive load for our users, making the chart harder to interpret (think colors, labels, axis lines, legends, grid lines,…).
- The left axes ticks are divided by thousands. I often find it more intuitive to reason in K’s than the whole number.
- All axes are de-emphasised with a light grey color.
- The legend is removed and put in the title (with no colours for the moment). This creates a better visual hierarchy.
- The dots are removed from the lines. This makes the view easier on the eyes without losing anything.
- The x axes labels are renamed to months and the year is put into the title. This allows for a more natural flow.
- The axes are labeled
- The budget line is broken up. The advantage is twofold: first of all it shows the differences in budget across months more clearly and as a consequence, makes it way easier to compare the bars to the budget lines. Secondly, people reading it will know intuitively it is a target without the need to specify that.
Properly aligning all items makes people perceive the chart as easier and thus more accessible to read. When done properly it can create a clear visual hierarchy, guiding the users eyes to where they need to be.
- We aligned the axis labels with the first tick on the axis.
- We aligned the title to the left, creating a clear visual hierarchy.
4 appropriate display medium
I’m working on a guide to show what charts are useful in what situation. I’ll update the link here when it’s finished!
As mentioned before, bars make it hard to see differences in the evolution because they have to start from zero. Dot plots do not have that problem:
This makes the delta’s clear and make comparisons easier. The line is still distracting (because of the overlap with the lines and dots) so let’s try a different display than 2 Y axis:
- Easier to compare headcount to the budget
- Easy to see the evolution of turnover
- Easier to spot correlations between the two (like in march there was a local peak in turnover and the headcount was an all time low)
- Removed the axes lines as they are just a bit more clutter we don’t need
We can now use color and text to highlight our message and guide the users eye:
A link to the notebook can be found here.
See other improvements? Not agreeing with some of my remarks? Came across an interesting visual you’d like to see discussed in one of the next posts? Please share in the comments! 🤓