Learn these 15 details to help you quickly improve the user experience of B-side charts

Charts are a component that is not frequently used in B-side interfaces, but is extremely important. It can be said that they annoy designers. Charts are not difficult to design, but if you want to design them well, you need to put in some effort.

Many friends asked me, saying: Every time when designing a chart, I can’t find where my design is bad, but when looking at the chart I designed, I am not so satisfied, what should I do? Today, let’s take a look at B-side charts and explore some details that designers usually don’t capture. Obtaining these details will improve the user experience of the product from the subtleties.

[[409713]]

What is a chart

Baidu Encyclopedia explains: "Charts, a term used in Microsoft Office, generally refer to graphic structures displayed on the screen that can intuitively display statistical information attributes (time, quantity, etc.), which play a key role in knowledge mining and intuitive and vivid perception of information. They are a good means of visualizing object attribute data intuitively and vividly."

According to the explanation of Baidu Encyclopedia, let's do a small deduction of "data charting". I found a piece of data describing low code from the website (the data source is iResearch Consulting, and I made some minor modifications), as follows:

"The concept of low-code began to gradually emerge in China in 2016. That year, there were 10 investment and financing events for low-code related products, and 2 financings of more than 100 million yuan. By 2020, there were 59 investment and financing events in China's low-code market, of which 13 financings of more than 100 million yuan. In 2017, there were 11 financing events, and 3 financings of more than 100 million yuan; in 2018, there were 12 financing events, and 2 financings of more than 100 million yuan; in 2019, there were 12 financing events, and 3 financings of more than 100 million yuan; in 2020, there were 14 financing events, and 3 financings of more than 100 million yuan. With the increasing demand of enterprises for system agility and ease of use and the improvement of business departments' acceptance of low-code, the market will usher in new development opportunities, and the enthusiasm for investment and financing will continue to grow in the short term."

Although the above text has been somewhat concise, it is still a bit confusing to read. It is not possible to understand the data intuitively, and it is still difficult to remember the key data.

Next, we will sort out the above text again, divide it into appropriate sections, and perform structured layout:

• “The low-code concept began to gradually emerge in China in 2016. That year, there were 10 low-code related product investment and financing events, and 2 financings of more than 100 million yuan.
• As of 2020, there have been 59 investment and financing events in China's low-code market, including 13 financings of more than 100 million yuan.
• In 2017, there were 11 financing events, including 3 financing events with a value of over 100 million yuan;
• In 2018, there were 12 financing events, including 2 financing events with a value of over 100 million yuan;
• In 2019, there were 12 financing events, including 3 financing events with a total amount of more than 100 million yuan;
• There were 14 financing events in 2020, including 3 financing events of over 100 million yuan.

As enterprises increase their demands for system agility and ease of use, and as business departments become more accepting of low-code, the market will usher in new development opportunities, and investment and financing enthusiasm will continue to grow in the short term."

Through segmented description, the above paragraph appears much clearer, but words such as "financing events, financing of more than 100 million yuan" still appear repeatedly, which is not concise enough overall.

Then, let's take a look at the above data in a tabular form, as follows:

We can find that the presentation of the table is much clearer than the segmented structured text, making the data presentation very intuitive. Not only can users see the data itself clearly, but they can also compare the data. If the table is designed to be more user-friendly, the maximum value can be highlighted (differentiated data can be marked according to business needs).

However, the table also has disadvantages, such as being unable to show the trend of data changes over time. If we read the above data carefully again, we can sort out the following chart.

The above chart focuses on the total number of financing events from 2016 to 2020, and the number of financing events above 100 million yuan is secondary. The trend of the number of low-code financing events from 2016 to 2020 is expressed by a bar chart superimposed on a line chart.

Advantages of Charts

In summary, we can find that, in general, charts are better than tables, tables are better than structured text, and structured text is better than ordinary paragraphs. So let's take a look at the advantages of charts.

1. Targeted

One chart has one type. For example, a bar chart is used to compare different objects under the same indicator; a pie chart is used to show the proportion between parts and between parts and the whole. When using a chart, we need to judge the data first and then choose the appropriate chart to display it.

2. Intuitive

Compared with text, charts are very intuitive in the presentation of data. Not only can users see the data at a glance, but they can also compare the data to find problems, locate the causes, and solve the problems.

3. Hybridity and scalability

According to the properties of the data, charts can be mixed and extended. Mixing means that charts can be combined and used, for example, line charts and bar charts are often used together. Extensibility means that a series of personalized icons can be expanded based on the basic chart. For example, the stacked bar chart is derived from the basic bar chart.

Open Source Charting Libraries

Currently, there are several open source icon libraries:

1. AntV G2

Visit link: https://g2.antv.vision/en

AntV's official website describes G2 as follows: "A set of highly interactive data-driven visualization graphics grammars for regular statistical charts, with high ease of use and extensibility. With G2, you don't need to pay attention to the cumbersome implementation details of the charts. With one statement, you can use Canvas or SVG to build a variety of interactive statistical charts."

2. ECharts

Visit link: https://echarts.apache.org/en/index.html

Baidu Encyclopedia: "ECharts is a JavaScript-based data visualization library that provides intuitive, vivid, interactive, and customizable data visualization charts. ECharts was originally open sourced by the Baidu team and donated to the Apache Foundation in early 2018, becoming an ASF incubation-level project."

3. High Charts

Visit link: https://www.highcharts.com/

Baidu Encyclopedia: "Highcharts is a chart library written in pure JavaScript that makes it easy and convenient to add interactive charts to web sites or web applications, and is free for personal learning, personal websites, and non-commercial use. HighCharts supports line charts, area charts, bar charts, pie charts, scatter plots, and comprehensive charts."

4. Chart.js

Visit link: https://chartjs.bootcss.com/docs/

Chart.js is a simple yet flexible JavaScript charting framework for designers and developers.

5. Chartist.js

Access link: https://gionkunz.github.io/chartist-js/

Chartist.js is a simple responsive chart for designers and developers, and a front-end chart generator.

At present, the most widely used icon libraries for B-side products are AntV G2 and ECharts.

15 small details of the chart

After a general understanding of charts, the author summarized some chart tips based on his own experience, team experience and industry experience. I hope these tips can quietly influence our designers and improve the B-side experience.

1. Line chart 2px

Usually in the B-side, we use lines, mostly 1px. But in the line chart, after repeated consideration, we found that 2px lines are better than 1px lines. First, 2px lines appear powerful and clear; second, when there are many lines, it is easy to distinguish.

2. Bar chart spacing

The spacing between columns in the bar chart should be consistent with the width of the column, and the spacing between the leftmost and rightmost columns is half of the column. As shown in the figure below, if the width of the column is X, the spacing between the columns is X, and the spacing between the columns on both sides is X/2.

3. Scale value

The scale value increment on the chart needs to be appropriately constrained according to the actual situation. For example, if the maximum value is 150, it is not appropriate to mark the scale value upper line as 1000. Secondly, if the business data is always in dynamic change, the Y axis of the chart can be set to dynamic.

4. Pie chart text display

When there are fewer categories in the pie chart, you can write the text on the pie chart, but when there are more categories, it is better to write the text outside the pie chart.

5. Pie Chart Slice Arrangement

The arrangement of pie chart blocks is also something worth considering. Generally speaking, pie chart blocks rotate clockwise and start at 12 o'clock. The blocks are arranged from large to small. If there are "other" modules, they are placed at the end.

6. Label Position

Usually the labels are placed in the upper area of ​​the chart, but this is not a hard and fast rule. For example, when there are many lines in a line chart, you can consider placing the label directly at the end of the line. At the same time, you can create some interactive effects, such as clicking the label with the mouse to make the line fade or appear.

7. Chart Color

When matching colors in charts, use colors with strong differentiation. Do not use adjacent colors just for the sake of appearance, which will greatly reduce the readability of the chart. If conditions permit, it is recommended to consider visual accessibility in color.

8. Use similar colors

Colors of the same hue but different brightness and saturation also have space for usage, usually representing gradient changes of the same object.

9. Show the key points

When there is a lot of data on the chart and the product team has no intention of reducing the amount of data, we can consider displaying key data (the system displays recommended key data by default, and users can choose the key data they need) and downplay other data.

10. Use titles wisely

Titles are not just used to present general descriptions. In special scenarios, the title description can be slightly changed to achieve the goal of intuitively expressing the core meaning of the chart.

11. The time period is too long

The data statistics of some businesses need to span a very long time period. At this time, the chart cannot meet the time display requirements of such a long period. We should not panic. We can solve it in the following ways.

1) Add thumbnail slider

Add a thumbnail slider to the chart, and you can view data for a certain time range by dragging the slider. The larger the slider is dragged, the larger the time range you can see, but please note that there will be a limit.

2) Add a sliding slider

Adding a slider to a chart allows you to view data for a short time range by sliding a fixed-size slider. The difference between it and the thumbnail slider is that the time period you see each time you slide the slider is the same.

3) Block Magnifier

If the presentation of the chart is to show the time period completely, then when the time period is long, the granularity can be displayed slightly coarser, not too fine. For example, there is no need to display February 1, February 2, February 3, February 4, ... continuously, as long as February 1, March 1, April 1, May 1, ... are displayed at intervals. In terms of interaction, move the mouse into the chart area and continuously select the data of a certain time period (i.e. zoom in), so that the data in the selected area can be continuously clear. This method is often used for daily K-line.

12. Timeline display

When the timeline dates span the current year, there is no need to include the year for each time point; however, when it spans the new year, the year can be included, which ensures that the timeline display is simpler and less crowded.

13. Monospaced fonts

If a table is used in the chart to assist in viewing the details of a certain type of data and display them in a linked manner, it is recommended that a monospaced font be used in the table. Monospaced fonts make it easier for users to visually compare sizes.

14. Data Classification

Various types of chart data are placed on the indicator panel. Designers are advised to classify and organize the data, and display data of the same category close to each other to facilitate users to view related data continuously.

15. Static and dynamic charts

Charts are divided into static and dynamic charts. When the business presentation is relatively simple, static charts are used. When the business is complex and a chart cannot express the details, dynamic charts should be considered for presentation. "Mouse interaction, data expansion and drill-down" are the characteristics of dynamic charts.

Summarize

There are many more small details in the chart than the 15 mentioned in this article. Since designers are creating new and useful chart types every moment due to product needs, charts have become a sea of ​​sustainable exploration for the B-side. Welcome everyone to follow my public account "Zhiguo Diary" and explore the B-side with me~