Web site User Experience Analysis: 6-Step data visualization

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

"Editor's note" This article source @ Baidu commercial ued in the current Internet, a variety of data visualization charts endless, this article attempts to data visualization methods to sum up into 6 steps.

General data graphs can be divided into the most basic two types of elements: the description of the thing and the value of this thing, we will define it separately as indicators and indicators. For example, a gender distribution, the male accounted for 30%, women accounted for 70%, then the target is male, female, the indicator value corresponds to 30%, 70%.

1. Graphical indicator values

An indicator value is a data that displays the size of the data graphically. For example, the length or height of a column chart shows the size of the data, which is also the most common form of visualization.

Traditional column chart, pie chart may bring aesthetic fatigue, can try to make some innovations from the visual style of graphics, the common method is to link the graph with the meaning of the index.

For example, Google Zeitgeist in the display of TOP10 search terms, the display is "search" shape of the column, graphics and indicators of the meaning of the match, but also made a stereo visual changes:

2. Graphical Indicators

Generally with indicators similar to the meaning of the icon to show that the use of the scene is also more, as follows:

3. Graphical relationship between indicators

When there are multiple indicators, the relationship between the mining metrics and its graphical representation can enhance the visualization depth of the chart. Common in the following two ways:

Using existing scenes to show

Lenovo Nature or society, there are no scenes and indicators are similar, and then use this scenario to show.

For example, Baidu Statistical Flow Research Institute operating system distribution, first divided into Windows, Macs and other operating systems, Windows also contains XP, 2003 and many other subsystems.

According to this association, it is found that there are similar relationships in the cosmic galaxies: there are many galaxies in the universe, we are most familiar with the solar system, the solar system, including the planets, so the overall use of the Universe Galaxy scene, will be familiar with Windows analogy to the solar system, XP, WINDOW7, which is likened to planets in the solar system, compares Macs and other systems to other galaxies, and behaves as follows:

Build scenes to represent

Indicators often have some correlation characteristics, such as from simple to complex, from low-level to advanced, from front to rear and so on. You can also build a scenario if you cannot find a corresponding scene that already exists.

For example, Baidu Statistical Flow Research Institute of academic qualifications, indicators are primary, middle school, high school, undergraduate and so on, they are a kind of climbing higher, from the low level to the high level of relations, then, this relationship can be built a step to performance, as follows:

Alipay's new personal annual bill, which describes the top three payments, builds a podium:

Summary：

According to the preceding 3 steps, the index, index value and index relation can be processed separately.

Taking the simplest sex distribution as an example, a linear visualization process can be obtained, as follows:

The above diagram is for the reference linearization process, in the actual visualization thought, which kind of element carries on the graph or the graph before and after the order may have the different, must according to the concrete situation processing.

4. Visualization of Time and space

Time

Through the dimension of time to see the changes in the value of the index, generally by increasing the timeline of the form, that is, the common trend chart.

Space

When the chart has geographical information and needs to be highlighted, the map can visualize the space, and the map renders all the information points as the main background.

Google Zeitgeist's annual hot Reviews in 2010 and 2012 were based on maps as the main carrier (and combined with time) to present hot events:

5. Conceptual conversion of data

Take a look at the concept of life in the conversion, when we need to drink, usually say: Give me a glass of water, but not say: Give me 30ml of water. Here, 30ml is an actual data, but it is difficult to perceive, so use a glass concept to convert.

Also in data visualization, it is sometimes necessary to change the concept of the data to deepen the user's perception of the data. Common methods have comparisons and metaphors:

Contrast：

The figure below is a chart that introduces the number of smokers in China: If only look at the left half of the number of Chinese smokers: 32000000, know the data level is very large, but how big it is difficult to perceive; until you see the right half: Chinese smokers outnumber the American population, so the perception of the data deepens.

Metaphor

The figure below is a chart that describes the amount of data that Yahoo has to deal with, with an e-mail size of 1.2TB per hour, equivalent to 644245094 printed pieces of paper.

This is another big data, but how big? Here is a metaphor: 644245094 pieces of paper, if the end of each piece of paper docking, you can circle more than 4 laps around the Earth. Here, can deeply feel the Yahoo mailbox processing data volume of large, for the Earth save a lot of paper.

Further, the metaphor is graphically represented.

6. Make the chart "move"

After the data is graphically finished, it can be changed into dynamic and controllable graph, and the user can perceive the change process of the data better in the process of manipulation and enhance the experience.

There are usually two ways to implement dynamic: interaction and animation.

Interaction

Interactive including the mouse floating, click, multiple charts when the linkage response, and so on, the following is the Baidu Statistical Flow Research Institute of the time distribution map, using the right-hand table of the linkage form, the left figure, the mouse floating display corresponding data, click on the switch to choose:

Animation

Including the addition of the entry animation, interactive process animation, play animation and so on.

Admission Animation: That is, after the page is loaded, give the chart a "growth" process, instead of "data loading" such as the hint text.

Interactive Animation: User interaction behavior, through the animation form to give timely feedback.

Play Animation: generally to provide playback functions, like watching video, so that users can see the whole process of data changes over time. The following figure is Gapminder, when describing multidimensional data, provides the ability to play over time, and can intuitively feel all the changes in the data.

Summary

Data visualization is diverse, and the process of thinking is different. The above 6 steps are based on the "data" level (different from information visualization), combing the thinking process, summing up the design methods for the follow-up visualization to provide a reference.

Author Blog: Baidu Business user Experience Department