This article has been authorized by the author Wang Qiang NetEase cloud community.

Welcome to visit NetEase Cloud community to learn more about NetEase technical product operation experience ~


Graphic design is the process of the data for the process of visual expression, its research object is a data source, however, the value of the data itself is not big, the so-called “data” is often by some looks useful and useless “number”, user is difficult to from these messy finds the value of the digital information, so, If these “numbers” are grouped, linked, or defined organically for business purposes and user motivations, the data becomes meaningful (valuable), and the graph is only the final manifestation.

When designing diagrams as an interaction designer, it’s all about putting these valuable data assets at your fingertips to make the most of the power of data.


Data visualization

As mentioned earlier, graphic design is actually data visualization design. Before we talk about graphic design, let’s understand the concept of data visualization.

“The purpose of data visualization is to visualize data so that information can be conveyed unambiguously and effectively.”

– Vitaly Friedman

Generally speaking, it is nothing more than a graphical display of complex data information, which aims to facilitate users to understand or analyze more efficiently from a pile of chaotic data, so that the data information that takes an hour to summarize can be converted into a data chart that can be understood at a glance.

However, good visual design must be easy to read, highlight the value of the data, easy to analyze, beautiful as a whole, ultimately make the data more simple, easy to communicate, conversely, not only make the data more complex, but also lead to error inducing. Therefore, how to make data analysis easy, smooth and easy to read, so as to improve the user’s work efficiency, reduce the user’s workload, it becomes an important responsibility of designers.


What are the elements of a chart?

A standard style chart basically consists of the elements shown in Figure 1-1. In addition, there are some special charts (e.g. 3D class, from the background wall, side wall, base and other chart elements), for the chart itself is not redundant here, designers have basic knowledge, this paper will try to discuss how to better chart design from the point of view of chart design motivation, so as to achieve the design goal.

Figure 1-1 Diagram elements


Graphic design

1. Define data metrics

First of all, we need to understand how and what the data is coming from. If we don’t understand this, it will be very difficult to discuss or design the data. Data is the premise of graphic design. There is no doubt that a series of numbers is boring for designers. Fortunately, the data collection work has been done in the early stage, but as a designer, it is necessary to ask them to give you as accurate data as possible, otherwise, it will lead to the failure of the following work. Therefore, it is best to address the following points when initial exposure to data:

  • Understand data and metrics

  • Analyze the data

  • Extract key information

  • Identify data relationships and topics

The diagram below, this statement is easier to understand, preliminary analysis can be seen that this is a different brand of mobile phone every day in the national sales situation, further analysis also shows that the higher the sales, the return quantity is less, revenue will be higher, the less complaints, evaluation will be better, thus, province, sales, return amount, revenue is the key index, of course, In front of the information is we got through the analysis of the data form itself, however, we do not know what the users data index, is likely to focus on is the provincial revenue of different situation, it is possible that the return of the situation, and can be sales comparison of different mobile phone brand, so need to enter the next step – designed for who, what information the user wants to.



Figure 1-2 National sales of mobile phones of different brands


2. For whom and what information do users want

Need clear is that the same set of data information in different user’s eyes see is not the same, because the role and position of different will cause the focus of their concern, position is different, different people find information, the conclusion is also different, so the graphic design with the emphasis of different users of information and interaction are not the same. Main influencing factors:

  • Who is the user base? What are the characteristics

  • What information do you need to extract from the data

  • What problem is the diagram trying to solve

  • Focus of attention

The examples above are shown in Figure 1-2 below. Although they are all maps, they emphasize different key information and display logic, that is, one emphasizes the sales of a certain brand of mobile phone in different provinces of China, while the other emphasizes the sales comparison of different brands of mobile phone in different provinces of China.



Figure 1-3


3. Define the purpose and value of the design

Actually, graphic design with a train of thought of product design is similar, this process is easy to define the design goal overlooked by designers, design goal is not static, but that doesn’t mean no, from the start early lack of definition of design goals can lead to designers often say not clear why this design, so, The rest of the design work is like a headless chicken with no sense of direction. Sometimes, the design scheme is overthrown, but the root cause is often caused by unclear thinking about the source. The design goal needs to be defined and agreed upon by all. Otherwise, the direction is wrong and efforts are wasted.

The process of defining design objectives needs to be constructed by comprehensive analysis from the perspective of users and data. On the one hand, it needs to consider how users can analyze and understand data more easily to improve decision-making efficiency. On the one hand, we need to consider how the data itself can be more accurately and clearly communicated to users.



Figure 1-4


4. Plan and design schemes and select appropriate types of charts

At work, some students spend a lot of time looking for graphic materials when designing charts. However, this kind of solution is put the cart before the horse and cannot solve the essential problem. Data visualization design is not purely graphic design, although it is important to understand diagrams, but just turning data into beautiful diagrams is a change of form, not enough.

Now that we know what the user wants to do and have a clear design goal, the process of selecting a chart is a breeze. Before choosing a chart type, I have a pretty clear idea of the general effect of the chart (e.g., to show data in different time periods – a line chart is appropriate; Present different share ratios – pie charts are appropriate; The frequency of data appearing at a given stage – scatter plots are appropriate), and for chart selection, please refer to Andrew Abela’s chart selection guide for those interested.



Figure 1-5 Chart type selection guide compiled by Andrew Abela

There are basically six common types of diagrams that cover most usage scenarios:

The graph is used to show the trend of time

The bar chart is used to show the comparison between categories and can also be used to show the trend over time

Bar charts are used to show comparisons between items

Pie charts are used to reflect composition, that is, the proportion of the parts to the total

Scatter plots are used to reflect correlations or distributions

Maps are used to reflect categorical comparisons between regions


5. Refine the experience

We’ve talked a lot about the early days of graphic design, but here are a few details to pay attention to. Dan Saffer says, “The best products do two things: features and details. Features get people to pay attention to the product, details get people to stay.” After all, detailed design makes great products

X axis

Considering the adaptation of different screens or browsers, when the text of the X axis label is too crowded, the text can be tilted, which not only ensures the normal reading of data but also does not affect the appearance of the chart.



Figure 1-6 Antv

Don’t write “2015, 2016…” when the X axis is labeled as consecutive years. , you can use the abbreviated form “2015, 16, 17…” “Will look much simpler and clearer.



Figure 1-7

The Y coordinate

As shown in Figure 1-8-1, when the Y coordinate axis numbers are very long, the left and right space will be too compact. In this case, if the unit conversion is a multiple of 10 (such as 1s=1000ms), it can be considered to define the unit conversion rule, namely:

Case1: When the time is greater than or equal to 1000ms, the timing unit is s and the data is accurate to two decimal points

Case2: When the time is less than 1000ms, the timing unit is ms, and the data is accurate to bits

Such as the following the 1-8-2



Figure 1-8-1

Figure 1-8-2

If there is no unit conversion, as shown in Figure 1-9 below, the unit is “times” or “number”, then the conversion can be considered by using digit conversion, that is:

Case1: Indicates the exact number when the number is less than or equal to 4 digits

Case2: When the number is greater than 5 digits, the abbreviation is expressed in units of K, accurate to one digit

Case3: When the number is larger than 8 digits, the abbreviation is expressed in M units, accurate to one digit

Case4: When the number is greater than 11 digits, the abbreviation is expressed in M units, accurate to one digit

Case5: when the number is greater than 14 digits, it is expressed in scientific notation to 3 decimal places

As shown in Figure 1-9



Figure 1-9


Data distribution rule

If you don’t have clear rules for how to display data, you will see the 2-1-1 diagram below (the front end shows what the back end passes), resulting in poor graphical presentation and readability. Rules need to be defined if you want to solve this problem.



Figure 2-1-1

The display of data here is related to time, so we need to consider how many points are appropriate to display in a certain period of time, and how long is the data aggregation of a point displayed (what is the point aggregation interval), as shown in Figure 2-1-2

Figure 2-1-2

After the rules are clearly defined, the background interacts with the previous section in accordance with the above rules, and the final effect is shown in Figure 2-1-3



Figure 2-1-3


Follow design principles

The design value of the chart lies in the accurate, efficient and simple transmission of data information, and it is best to make readers clear at a glance. Even if it is not clear at a glance, it should have the ability to explain itself. Therefore, it is required that data elements should be enhanced and highlighted in the design, while non-data elements should be reduced and weakened. Specifically, the following principles should be paid attention to:


1. Remove

Remove elements that are not relevant to the data as much as possible, except for special scenarios:

  • The background color

  • gradient

  • Grid lines

  • The 3 d effect

  • Shadow effect (except if specific operation needs to be emphasized, such as: mouse Hover view specific information)


Weakening 2.

Even if it is necessary to preserve non-data elements, weaken or hide them and use light colors whenever possible

  • coordinate

  • Grid auxiliary line

  • Form the line


3. The organization

Organize the relevant data elements properly. Do not expect to put all data elements into the chart, but only the key and important data.


4. Emphasize

The selected data elements should also be prioritized, and which data needs to be highlighted so that the reader can quickly get the important information.

As shown in Figure 2-2, the diagram is optimized using the above principles, resulting in a concise and effective diagram.



Figure 2-2


conclusion

Graphic design process is more like a series of the user and data to establish a dialogue process, as the focus of the interaction designer to consider is how to allow complex, chaotic data easier to present to the user, and allow the user to the understanding of rapid, efficient analysis so as to make the right feedback, will eventually build a round of interaction. A good chart design should first express the data directly, simply and accurately, do not let the reader to guess the chart information, to ensure the effectiveness of information transmission, there will be no error at the same time pay attention to beauty and detail.

NetEase Meow: enterprise-class big data visualization analysis platform, featuring comprehensive security guarantee, powerful big data computing performance, advanced intelligent analysis, convenient collaboration and sharing, etc.



Collect and analyze online log data — ELK