What is the “creator” of this infographic trying to accomplish? We’ve asked ourselves this question many times. Even the hippest media designers adhere to typography, and similarly, an ergonomic software user interface is the result of specific fundamentals and experience. So why should we believe that no “laws” apply to infographic design?
We received a positive response to parts 1, 2 and 3 on the topic of the data value chain, and for that reason we asked Dilyana Bossenz to provide even deeper insights into data visualization. The expert in data literacy uses two examples to show what a redesign actually brings to the table.
Why are some graphs easier to understand than others? There are several contributing factors. A good graphic is clearer and easier to understand if, for example:
- has a clear message,
- is not overloaded with information, and
- has an easily recognizable story.
What does this mean in practice? Below I illustrate the importance of these tips by using a line chart and a bar chart as examples. I’ll show you what steps are necessary, what elements are redundant, and how to convey a clear message to the user.
Line chart
Take a few minutes and look at this chart. How would you interpret this graphic?
How long did it take you to understand this graphic?
How did you go about reading the information?
- For me, it took a certain amount of time to combine and interpret the information on the line graph and in the legend. This step took most of the time.
- The use of crossed out lines and icons affected my reading comprehension. The meaning of the icons was not completely clear.
- The blue line is dominant to me, which led me to unknowingly think that print-based trade advertising is more relevant compared to additive trade advertising.
- I asked myself the questions: what was the reason for the change in 2016? And what are the reasons for the positive trajectory of additive trade advertising compared to the negative trajectory of print-based trade advertising?
What could be improved in this graph?
Frame
This chart and almost all other charts do not need defined frames. Our eye can easily see where the chart begins and ends, and a border only leads to visual clutter.
Title
EHI’s original descriptive text for this diagram indicates that it is essentially about a shift between print-based and additive retail advertising. Then the title could be made more precise right away with this information.
For example, “Strong change between print-based and additive retail advertising”.
The title is an important statement that should be precise and unambiguous. In this case, it expresses the core content of the chart, which is the change between the two types of trade advertising. The visual representation should be consistent with the title to allow for clear and unambiguous understanding.
If the title is phrased as a question, the answer should be easy to find on the chart.
Subtitle
The information from the subtitle is relevant. However, it is repeated several times on the graphic: subtitle and legend.
Basically in a good visualization: we should be redundancy-free – means: we should not repeat the same information several times. Instead, the forecast information should be placed right where the forecast begins to better convey context and save readers from having to search for the legend.
The subtitle should be better used to reinforce the context of the graphic. For example, it could be rewritten as: “Since 2016, additive advertising has become increasingly dominant”.
The title and subtitle should ideally answer the questions “what,” “where,” and “when.”
Colors
When you close your eyes and open them again, where will you look first? It’s probably the blue line, as it looks more dominant than the yellow line due to the white background.
When choosing colors, go for colors that have an even dominance. Consider background color of your graphic and also color blindness: red or green would be an unfavorable choice.
Legend
I deliberately included the color legend in the title of the chart to make both lines equally clear to the reader. There is nothing wrong with the placement of the legend. It can be displayed just as well at the bottom or at the top.
Annotations
The numbers are shown in the graph as well as on the Y-axis. The principle of non-redundancy also applies here. Since the numbers are already visible in the line graph, it is not essential to show them on the Y-axis as well.
Another consideration: Is it necessary to show all the numbers in the line chart? If you look at the title, it is about a strong change, so it is sufficient not to show all numbers in the line chart.
To emphasize the strong change, I show the numbers at the beginning of the line for the year 2007 and for the years 2021, 2022 and 2025. With these numbers, you can understand how strong the change is in the trading sector.
Since there are only a few numbers in the graph, I have left the percentage sign right by the numbers.
Axes
The X axis is truncated in the original graph. It is not immediately noticeable that the years 2023 and 2024 are missing. Truncating the X-axis in the line chart is a gross error that can cause optical illusions, as can truncating the Y-axis in column charts. This is considered manipulation of the graph.
Icons
These icons are specific and defined by the author. They differ from commonly known symbols such as information or output symbols. And due to the fact that the icons are not commonly known, they can lead to misunderstanding. To prevent this, it is better to provide a brief description of the context.
Crossed out line between 2019 and 2021.
There was no data collection in 2020 due to the pandemic, which is important information.
However, in the description to this graph, this fact is not mentioned once. So this information does not play a central role. Because of this, I will make this information less prominent on the graph.
The crossed-out lines can quickly distract the reader’s attention. Use this device judiciously. Use the crossed out line only to highlight relevant details to the core message and to support the context of the graphic and the title.
If we were to implement all of these tips on the graphic, our result would look like this:
Bar chart
Let’s look at the bar chart as an example. Answer the following question:
How would you interpret this graph?
You’re probably guessing what you’re seeing right now. I’ll break it down and give you context from the original article from musikmedia.de:
“… In a new focus offering on the topic of “Music Reporting in Print and Online Media”, MIZ takes a look at the current situation of music journalism in Germany and provides basic information on structures and developments in this field. It looks at the editorial teams of around 170 daily and weekly newspapers that regularly report on music-related topics.”
What could be improved in this graphic?
Frame
Just as in the line chart example, a frame is not necessary here.
Title
A graphic should always have a meaningful title that accurately describes the context of the graphic.
If we write an article and explain the meaning of the graphic only in the text, it may be difficult for the reader to understand the visual representation. They have to read the entire article first to learn what the graphic is trying to express. Wouldn’t it be more beneficial if the reader understood the core message of the article with a single glance at the graphic?
Subtitle
To keep the title from seeming too long, I added some more important information to the subtitle.
Axes
Y-axis
In this illustration, I think the choice of the diagram is very well done. For long terms, as is the case in our example, a vertical diagram is recommended. A vertical chart makes it easier for the reader to read the terms easily.
I would still left-justify the names on the Y-axis for a straightforward look.
X-axis
The numbers on the X-axis are superfluous, since the exact numbers are already shown in the bars.
Annotations
What else needs to be considered is how we read bar charts: For bar charts, we automatically compare their length and pay attention to the peaks of the bars. We compare the peaks of the bars with each other. Therefore, to highlight important numbers, they should be noted at the top of the bars, as this is the place where they are most visible.
Grid lines
In this case, grid lines are superfluous and annoying. They should be removed.
Percentages
When I add up the percentages on the original bar chart, I get a total of 102%. However, as a reader, I expect a split of 100%. This miscalculation affects confidence in the graph. The author does not explain how he arrives at 102%. Therefore, I assume it is a calculation or rounding error. To avoid confusion, I would not show the 2% “other”.
A correct procedure would be to contact the author to clarify the 102% result.
When these items are taken into account, the result is obtained:
It’s incredibly important to get to grips with data visualization. It’s about more than the pure technology and the possibilities of the various software offerings. It’s important to define what benefit you want the reader/viewer to get from a graphic. Check your graphics in the company and have fun with the revision. We have provided some valuable tips on how to do this.
About the author:
Dilyana Bossenz is the founder of Data Literacy Online and a lecturer in Data Visualization & Communication at the Digital Business University of Applied Sciences (DBU). She has worked for several years as a BI consultant focusing on data visualization and analysis. You can find more about Dilyana Bossenz on Data Competence Online.
