I recently bumped into a chart like this:

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

Initial remarks:

  1. This is often times called a spaghetti chart. Why? Because the lines are constantly overlapping. The lines that are overlapping are forming a different shape (like a ❌). Because this differs from the norm (a line) it will draw our attention. This is called a preattentive attribute. Because a lot of lines are overlapping, we don’t know where to look first.
  2. Color could be used more strategically
  3. Some clutter is making the chart more noisy than necessary
  4. My eyes are constantly going back and forth between the legend and the lines.

1 Context!

A chart is ment 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 want to invest in movies and we want to have a good look at the evolution in profits the different genres had. We have to easily compare them against each other.

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

  • We removed the legend and labeled the lines directly, no more back and forth between the legend and the data!
  • We de-emphasized the labels, titles and axis, making the data more prominent.
  • Formatted the y axis tick labels. We don’t need to see the whole number when it is up in the millions.

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.
  • Turned the title into something a bit more engaging, making it more likely that people will inspect the chart further.

4 Highlight

The chart is still hard to read. Highlighting can be done with colours or emphasised text to immediately draw the users attention. This can only be effective when used sparingly! Remember the 10–15% highlight rule 👍

Let’s assume here we are only interested in the family genre:

Using color to to highlight the family genre, making it very easy to see the trend

The grey lines provide some context, but comparisons can’t be made yet.

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

A mistake I see people make often is trying to squish everything into a single chart. This degrades the readability. A display that often helps with something like this is a small multiple. Adding a small legend below the title will bring us to the end of this chart refactor:

End point. Pro tip: always make sure you use the same axis scaling in a small multiple. This will make it very easy to make comparisons, even over multiple charts.

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 https://uxdesign.cc/5--to--your-charts-716383325900?source=rss—-138adf9c44c—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here