[Data Visualization] Chart Design Principles

In our daily work, sometimes we need to display data in a graphical form, which is what we call data visualization.In the process of creating the chart, we need to pay attention to the fact that every redundant element in the chart will increase the cognitive load of the user

We can use the following design principles to make the chart more beautiful and easier for users to understand

Design Principle 1:Remove graphic borders and gridlinesp>

It will make the data more prominent

Design Principle 2:Remove data tags

The line itself can display the data visually, and the data markup will increase the cognitive load of the user

Not to say never use data tags, but use them with purpose

Design Principle 3:Axis Label Handling

1. Avoid using inclined elements, so as not to affect the user's reading speed

2. When the mantissa after the decimal point is 0, remove these mantissas to reduce unnecessary cognitive load of users

Many times, the axis labels generated by the system by default will have extra 0s after the decimal point. These 0s have no reference value, but make the numbers look more complicated than they actually are

Design Principle 4:Remove unnecessary legends

Delete the legend and mark it directly next to the data that needs to be described

Design Principle 5:Keep Colors Consistent

The same color should be used for the data label and the described data, which is helpful to remind the user that the two parts of information are related to each other

Design Principle 6:Alignment

Users typically start at the top left of the page or screen, move their gaze in a "Z" shape and digest the information, as shown below:

Avoid center-aligned text and align text to the top left corner (titles, axis labels, etc.), which helps users see details about how to read the chart first, and then see the data itself

Design Principle 7:Fonts

Chinese:Microsoft Yahei

English and numbers: Arial font

After the above 7 design principles, the line chart is modified, and the results are as follows:

Extended Supplement 1: How to Read Charts

We can start to understand the chart from the 6 elements in the chart

1. Chart title, used to introduce the theme of the chart

2. Horizontal and vertical axis title

3. Category name

4. Legend, using various symbols and colors to represent different categories in the graph

5. Grid lines, easy to see where each element is in the graph

6. Data source, giving data credibility

Note: In order to simplify the chart, the above 6 elements do not have to be used in all

Extended Supplement 2: Notes on Using Tables

One thing to keep in mind when using tables is to let the design blend into the background and let the data take center stage.Don't let heavy borders and shadows compete with the data for the user's attention.Conversely, using narrow borders or removing borders at all can effectively highlight the data