How can visual design impress people? I have summarized these 4 methods

Nathan Yau wrote in The Beauty of Data that visualization is not just a tool, but more like a medium that can help us maximize the information behind the numbers and let the data "speak" to tell stories.

Visual design converts information and data into charts, graphs, maps and other elements that users can understand, and highlights the changes through colors and styles, helping users to obtain information, judge trends, identify changes, etc. more efficiently. So how to make users see and understand data or information better in visual design, let users quickly perceive data changes, and make data correspond to the user's situation is the direction of micro-interaction thinking.

Reduce the difficulty of understanding

Through visual expression, information that is difficult to understand can be presented more clearly, helping users understand and absorb it.

1. Alipay-Fund Index

Using the general public's understanding of traffic lights, and applying the concept of green lights for going and red lights for stopping, we can help novices to simply understand the trend of index valuations and more easily judge the timing of buying and selling the fund. A green light means it is worth buying, and a red light means it is recommended to sell.

2. Alipay-Fund Income

When you want to buy a fund, you select the purchase amount through a ruler. The expected return on the purchase of that amount is displayed below, and real-life items are used as examples to help users understand the value of the amount of benefit.

3. Taobao Mobile - Gold Coin Town

Sign in to complete tasks to gain energy, and use a progress bar to express the relationship between energy and gold coin value conversion, such as how much energy currently obtained can be exchanged for how many gold coins.

Let users feel the changes

The changes in visualizations can help users quickly achieve their goals, get more information in the shortest possible time, and guide users to explore more deeply. The changes in visualizations can help users quickly achieve their goals, get more information in the shortest possible time, and guide users to explore more deeply.

1. AirVisual - Air Quality Indicator

The air quality level is expressed based on colors and face graphics. The colors range from green, yellow, orange, red, purple, and dark purple. The face graphics range from happy and sad expressions, wearing masks to wearing gas masks, etc., to express the air quality from good to bad. Users can directly perceive the current situation by looking at the colors and graphics, and know the corresponding prevention methods.

2. My Weather-3D Map

The times of sunrise and sunset are displayed on a dynamic globe, and the sliding operation of the globe allows users to actually perceive the lighting conditions of the earth.

3. Tencent Mobile Manager - Charging Status

When the phone is charging, the entire screen is used to display the proportion of the charging amount, with an interesting image of a virtual duck swimming, expressing the current charging value through the height of the water level.

Respond to the user's situation

Adding elements related to the user context to the visualization can enable users to obtain more relevant and direct information perception.

1. Amap-Navigation

When driving and navigating, if the car is going too fast, red speeding prompts will be displayed on both sides of the screen. Compared with the speed display in the upper left corner, it can more directly and quickly perceive that you are speeding.

2. Amap - Time Estimation

Check the estimated time for itinerary navigation, and use a bar graph to intuitively show the time required to reach the destination at different departure times. There is a vibration switching effect when sliding. At the same time, the map above will show the congestion on the road during that period and the estimated arrival time.

Improve data control

Provide sufficiently convenient filtering or manipulation components to help users view more viewing space and quickly locate the desired content.

1. Ctrip - Air Ticket Price Comparison

Using a bar chart to display airfares for different dates can visually show the price differences. After clicking, you can switch to that date to view specific flight information.

2. Ctrip - Low Airfare Alert

The price of air tickets is floating. Through the setting of low price reminders, users can be proactively reminded that the ticket price has reached the expected price. If the price is set too low, the possibility of reaching the target price will be lower. Therefore, a price slider is used, and green, orange and red are used to indicate the success rate.