They ol’ double Y axis:

Starting point. Disclaimer: I’m not saying this is a bad visual, just that it could be improved.

Initial remarks:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. No title or axis labels are present
  6. 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.

1 Context!

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

2 Declutter

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,…).

Everything is de-emphasised now. A good guideline is to only highlight about 10–1% of the entire visual.

Improvements

  • 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.

3 Align

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.

The top left is the first place our eyes will look, seeing the title. Afterwards they will see the labels and then they can look at the chart data. Like this they have all the context they need to interpret the chart correctly.

Improvements

  • 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:

Notice the Y axis is not starting from zero now. We can compare the position of dots just as good as we can compare the length of bars.

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:

Broke up the single chart in two charts. This lets us focus on the two different measures. They share the x axes so they can be interpreted together.

Improvements

  • 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

5Highlight

We can now use color and text to highlight our message and guide the users eye:

Highlighting only the part after June 2017 makes the rising turnover jump out together with the effect on the headcount.

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! 🤓



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here