“White” is a book by Ken Hara, published in 2008. It’s a thin book, but it feels sobering. This book is not about color, but about tracing the origins of Japanese aesthetics. The author also enumerates the power of “white space” in Japanese religious architecture, language and tea ceremony, which enables designers to get closer to the original intention of design. By controlling the necessary differences, the most important information is retained and the design is separated from grandiose and meaningless. White is the ultimate in design pursuit.
In back-end business scenarios, we often see crushing amounts of data. As designers, we are sifting through a lot of data and information in order to present users with a clearer interface and clear data.
Below is a set of unoptimized background scene data charts:
We look at the problems in the market from the three aspects of demand, design and data, which can be called data market 3D problem analysis. The chart above, for example, looks for problems from these three perspectives:
A line chart is the data arranged in columns or rows of a worksheet that can be plotted onto a line chart. Line charts can show continuous data over time (based on common scale Settings), making them ideal for showing trends in data over equal time intervals. We use line charts to show a trend of data changes. If the reading of trend changes is lost in the design process, it will run counter to the design goal.
01
–
Design details of line chart
1.1 The chart display space is too small
Trying to display too much data in a very small space leads to too many data points, and the plot line loses the details of the data changes.
1.2 X axis span and data frequency
In a monitoring scenario, the X-axis is usually time. Designers need to communicate and coordinate data frequency and data display time span during design. Common real-time data update frequency is 1 second, 5 seconds, 10 seconds, 30 seconds, 1 minute, and 5 minutes. When the data is updated in seconds (as shown in the figure below), the number of points on the data line is 1 point per second, so it can be converted into 60 points per minute, and the amount of data increases sharply with the data frequency. At this time, it is necessary to adjust the time span according to the space size displayed on the chart, and the principle is not to lose the fluctuation details of the line chart.
1.3 Y-axis calibration Settings
When Y scale Settings are too large, the trend chart will show a very flat curve; On the contrary, when the Y-axis span is too small, there will be a too steep curve, neither of which can reflect the trend change well.
The right thing to do is: Y scale should make the line in the chart area occupies two-thirds of the position, and the chart of the X axis length contrast should be based on business demand for reference, such as monitoring scenario, use 1 day time as a general span, including the highest point in the volatility (typically occur during the day) or low (generally appear in the evening), make the data have better contrast. This needs to cooperate with the front end students to set rules, so that the Y-axis value can be dynamically calculated according to the demand.
In particular, line charts, unlike bar charts, do not need to start at baseline 0. When we use area maps, especially mini-area maps, make it clear that the user is aware of the baseline.
1.4 Thickness and smoothness of broken lines
A thin polyline will reduce data readability, and a thick polyline will lose data fluctuation details in the polyline. The correct approach is to use the appropriate thickness, contrast with the grid auxiliary line, but do not lose the fluctuation.
The broken line graph will turn into a curve if the wave spikes are optimized. In the actual use, if the data points of the line graph are too dense, the spike optimization effect of the curve graph will become weak and this optimization will make the data fluctuation unclear.
1.5 data item
In the case of few overlapping points between data, the number of data items should be controlled at about four. When there are too many data items, the design goal of comparison and contrast cannot be achieved. Human can recognize about 6 colors in a visual area. When we use a variety of colors to distinguish data items, it is very difficult to distinguish with the naked eye. In addition, when there are too many data items, the number of graph notes will increase, and the display space of the chart will be compressed in the case of a certain space. The correct approach is to use linked charts, or groups of charts, when there are many data items.
02
–
From line chart to data information combination
With so many constraints, the design requirements are not reduced, and PD is always trying to cram too much content into one page. At this time only focus on a single chart is difficult to solve the problem, from the overall layout and structure of the market to consider.
When we carry out a data market design, it must be carried out around a design theme, which generally contains various modules, possibly sub-business blocks or various dimension blocks. In order to better layout and interpret data from the user’s perspective, designers need to further understand the business logic and the calculation method between data.
A clear and clear design theme helps to determine the hierarchy between different modules and their content, who should be emphasized and who should be de-emphasized. The logical relationships between modules and the data within modules determine the content and layout.
For example, the figure below contains two data: inventory and inventory forecast. The demand side may provide you with two broken line charts, but when you understand that both information actually refers to the same content, it is natural to combine them.
In my opinion, data visualization is not only the transformation of data into charts, but also the rational interpretation of the logical relationship between data. Individual data is always thin, and it is only in horizontal and vertical comparisons that chemical reactions occur to produce visual value.
There are various combinations of these methods. The following is an example of the methods commonly used in background monitoring scenarios:
2.1 Nearby Labeling of auxiliary Information
Diagrams are fundamental to visualization, not the whole story. Without comparison and reference, the line chart is just the basis of the data presented. For example, as shown in the figure below, if conditions permit, we can consider annotating graphs or values directly on the chart, which can reduce the problem of repeated comparison and weak corresponding relationship among users. The conditional permit mentioned here is the extreme case of exponential data display, for example, the scheme marked with real-time data at the end will overlap in multiple line graphs.
For example, in the background monitoring scenario, through research, we can find the standard of users’ attention to the data and the situation of peaks and troughs, so we can mark it more intuitively on the icon; For example, general changes can cause fluctuations in the data, and this correlation information can also be directly plotted on the chart:
2.2 Biaxial diagram and combined diagram
Two data charts that are closely related, when the data units are different, can use a biaxial chart or a biaxial column chart. However, when using biaxial charts, note that the X-axis dimensions must be consistent; Y-axis data scale and unit should be marked clearly to avoid confusion; The choice of baseline for the two data needs to be careful. Different baselines can lead to a very different visual relationship between the two lines.
2.3 Chart interaction and others
When the data content is too much to choose, you can try to reduce the information burden of the page through interaction. For example, in the figure below, you can zoom in to see the data over different time spans.
03
–
Select chart presentation mode based on visual working mode
Given the many pitfalls of charting, is there a common perception criterion? Earlier, statisticians William S. Cleveland and Robert McGill, working at AT&T Bell Laboratories, published “Image Perception: Studying Theory, Practice, and Applications of Graphical Methods.” The importance of this article is to provide guidance on how to choose the best chart form based on function. The authors devised a list of 10 basic perception tasks, each representing and ranking a method of presenting data.
Sometimes it is not accurate to judge the comparison relation between data values, but the overall distribution perception, etc. At this time, the accuracy of cognitive judgment is not the higher the better.
[1] Reference Books: White by Yanzai Hara
[2] Reference Books: The Simplest Graphics and The Most Complex Information by Huang Huimin
Check out more original content