Establish a good visual level

With the growth of the Internet explosion, the user browsing a single page, not as we imagine reading the article from left to right, from the top down one by one view, why?

Why the visual hierarchy is important

On the left is the way the designer expects the user to browse, and the right side is the actual browsing style for the user-excerpt from Don t make me look

The user comes to a website that has his own specific goal, such as reading news, shopping, viewing new messages, but the amount of information is too large, a large amount of time to view, which requires the site to seize the mainstream user characteristics, will focus on him, the user to find their own goals or interesting points, it is possible to continue to browse or produce the next move, Or you'll leave.

Limited User time plus the Internet information is huge, these two reasons is to test visual designers to establish a good visual level to the user, to help users quickly find the ability to target.

Second, the establishment of a good visual level of the role

1. Improve the efficiency of recognition

2, arouse the interest of the audience

Give a few examples:

The left map is a city-level display of place names, when users search the street level, will be the shop in the neighborhood to show the user, in a specific case only to show the necessary information, conducive to users to find their own goals efficiently

We watch the news the first time to focus on the day's headlines, followed by editors recommended, Time magazine home very good let the headline news and logo together at the first sight we caught, primary and secondary processing is very clear

Schindler's List of movies in a film, through a strong contrast between the visual level, the audience left a deep impression and become a classic

Iii. How to establish visual level

I have collated three directions for your reference:

1. Decide not to show anything

The premise of the simplicity of the page is that the present content is most often required by mainstream users, so that designers can focus on solving a limited number of important issues, rather than a lot of information is not filtered to start prioritizing

The image above is our home commonly used remote control, most of the use of the function is rarely even once used, the right image will not use the function key to do a simple deletion, before and after contrast, the latter looks more relaxed-from "simplicity first"

Again by the designer to the rest of the key to design, I believe the remote control will be more simple to use, less interference.

Outlook mail Web interface, by default, the action entry for a message is hidden, and only when the user selects the message does the action of the message appear, and the infrequently used actions are hidden in the Drop-down menu, such as "Reply All, forward" hidden under the Reply menu, This way of hiding Non-core content allows users to focus more on the information he can focus on and the main operations

2. Deep Processing information

In order to let the information be perceived and received more quickly, we need to process the information, the simple text list needs the user to read, and the in-depth analysis than the surface analysis of the information, to the user left a deep impression.

For example: National Geographic Blue Whale website in order to call for the protection of the Blue whale, first of all to let people understand the characteristics of the blue whale and the current threat, the site through the dynamic of the blue whale and other biological and man-made objects to compare, the image of the intuitive transmission of the weight of the blue whale, and the video Users can generally understand the message they want to convey, even if they don't read the text.

3. Organize information

1 The relationship between the expression information

The relationship between the information has a juxtaposition, relevance, inclusion, cause and effect, each relationship can be conveyed through a variety of visual manifestations, this can be in-depth discussion, I would like to give some practical projects in the process of information processing cases, to see the changes before and after

Association of Information

In the design of the white is very important element, it can very directly affect the user's understanding of the relationship between the information, as shown above, because the improper white, "Chu Zhongtian" is easy to understand as "Lin Egg big"

The juxtaposition of information

Many functions in the software in parallel to the block organization, so that users can look for small chunks in the block, improve the efficiency of recognition, such as the Excel interface, when we want to edit the font style, we can quickly locate the second module to find, without interference from other modules

Case: Foreign Trade Mail Interface optimization

The above is our Foreign trade mail Interface current state, all the operations are placed side by side, with the increase in function, the efficiency of user identification is greatly reduced, the optimization of the program is related to the operation of the group, it is the use of relevance and coordination of information relations to design

Causal sequence relationship of information

The image above is a diet drink ads, through the change of characters, easy to express the efficacy of products, and in our web interface, mainly through color contrast and direction to convey the Order of relations

As the common step bar, the current step is the most prominent focus, has been carried out for the two level, so that people feel activated, the steps are not traversed gray, the weakest level

The following image is a PayPal payment page optimization process, the old version of the visual although there is a hierarchy of differences, but disrupted the task of the line of sight, the optimization of the focus on action points, action before the visual order in the same direction, the order of the relationship is obvious, can enhance the user's task completion rate

Inclusion relationship of information

Fluent new e-mail interface, Arrow Point, indentation of the expression of a very clear representation of the relationship of information, although the entrepreneurial team did not succeed, but the product design is still worth learning

2 important level of information presentation

Straighten out the relationship between the information, grasp the focus of the overall page, and secondary information to open the hierarchy to the user, this is the visual designer in the design of a single page to play the focus of skill

Not much to say, look at some cases:)

The picture above is Airbnb rental information detail page, tenants in the most concerned about the rental of information: room real, price, landlord information; look at its detail information, there are many types, but the user most concerned about the three kinds of information because of the location, The size of the occupied area allows the tenant to grasp the basic information of the House at a glance, and continue to see more details if interested.

The above diagram is the designer to the data table optimization process, the first edition is a list of simple information; After removing the duplicate copy and weakening the design of the table itself, the second edition is relatively clear; the third edition continues to focus on bold, changing the arrangement to reduce duplication again The fourth edition is the best version that is reflected in the user survey of the form. Because the user will use the form for a long time to obtain data, the design will be not key copy to hide, the user mouse before showing the meaning of the data, education once again after the user look at this form will no longer be affected by a large number of interpretation copy of the interference, direct access to the desired information , a seemingly simple table, grasp the key information, optimize the space is still very large.

Our team has revised the service introduction page provided by Alibaba.com. Before the revision of the design level is not obvious, so that users enter the page can not quickly understand the general situation of the service to determine whether to continue in-depth understanding, and after the revision through the size of the comparison, presented to seize the user's first impression of information, preliminary judgments in line with their needs, users will continue browsing

3) Around the user behavior design level

Grasp the overall page focus is the premise of the design, but how to judge the key? This requires us to understand the characteristics of the user, and he came to the main task of the page, and then designed to ensure that we do the right thing, otherwise the design of a layered sense is not necessarily the user wants.

Alipay recently tested a new version of the home page, we came to pay the most common home page operation is to log in, and the old version of the first visual focus is navigation and activities to promote a bit, navigation as long as in a fixed position, users can find when needed to have achieved the goal, it should not become the visual focus of the page, Unless users often switch to the navigation to understand the services provided by the site, at this point the new home page weakened the navigation and other application of the portal, strengthen the Alipay itself brand communication and login behavior, very consistent with the mainstream user's behavior habits

Recently in the team to promote the background of the revision of the style, but also related to this, the left image for the background to continue for many years of navigation style, as an operating interface, the user has a strong purpose, navigation will interfere with the enhancement of the user's recognition of the content efficiency,

The right image is based on user behavior characteristics, weakening the design of the navigation, so that users can focus on the main content operation area.

After online research, the results show that: Although the new style of navigation in the visual weakening, but the search for a task portal is higher than the old style, and looking for time is slightly lower than the old style, the overall new style performance better.

Conversely, if we don't have enough knowledge of the user's behavioral characteristics, such as adding new functionality to the original page, then hardening can be easily overlooked, for example, in our actual project:

The left picture box below is an added feature, hope that the buyer in the inquiry to the supplier of the current procurement needs to build a group and reuse the last content, in the internal discussion, everyone felt to strengthen this option, let it become the leader of other content, but the results of the survey is very different, Users can not understand this piece of content or simply think it is affixed to the advertising content and ignore;

Adjusted version of the new option to weaken to a simple choice, the function of the multiplex inquiry is separate, has been recognized by users and industry experts

The design is consistent with the user's expectations and the visual hierarchy is effective.

To sum up, the establishment of effective visual level is mainly from the following four aspects:

1, simple: selective display of information, so that users in the limited information found in the focus

2, organization: In advance of the scientific classification of information, sorting out the priority, you can get better communication effect

3, Presentation: A variety of methods of expression combined to present the best visual level effect, this point refinement has a lot to dig, here summed up a few points, welcome to continue Ha

4, Guide: Follow the user's habits, while giving appropriate guidance recommendations

Some humble opinion, with June encouragement:

Source: http://www.aliued.com/2012/12/06/1355/