Design dry goods ~ visual expression to establish a sense of information hierarchy [deep and good text]

Long warning, it is recommended to collect it first and then read it!

As visual designers, our role should not only meet the aesthetic needs of users, but also convey brands, information and functions. In order to effectively convey information to users, we need to establish an information hierarchy, rather than throwing it to users for their own understanding. What visual methods can achieve this, and whether there is a theoretical basis behind these methods is the theme of this paper.

First look at the following two pictures. The left picture shows the effect of the camera shooting, and the right picture shows the effect when the human eye is still. It can be found that the human eye does not acquire information at one time, and it cannot generate multiple focuses at the same time, thus keeping the line of sight in more places. What designers need to consider is to let users obtain information in a certain order through eye movements, so as to help the process of obtaining and understanding be efficient and natural.

This design method aims to solve two main problems:

1, the efficiency of information acquisition and understanding by users.

Establishing a good information hierarchy will enable users to quickly acquire and understand useful and interesting information in a limited time and produce the next behavior;

2. Professionalism of designers

Designers consciously analyze the priority of information and understand which visual expressions can establish the information hierarchy and the theoretical basis behind each method, rather than just designing by feeling.

First, early understanding &; analyse

Before starting the design, in addition to understanding the background objectives of the project itself, visual designers also need to know something about specific pages to help guide the later design, including page positioning, atmosphere creation, information priority and user core behavior.

1. 1. Page positioning is the premise to help analyze page information priority and core behavior.

There are usually:

Who is the user?

Where do users come from, that is, from what channel to come to this page?

Page content positioning, what to provide and what not to provide.

Page function

For example:

When we design a new homepage for purchasing direct selling market, we interactively analyze users' familiarity with the service and determine that the core target users of the homepage are new buyers. The positioning of page content is to show the value point of the market, and the data generated by users let new buyers know about direct purchase to form a brand;

1.2. Understanding the atmosphere that the page needs to create can help us to judge which elements can help us achieve our goals. The atmosphere can be created by the content itself or by the design of visual elements, but it must be noted that the atmosphere creation should not be stronger than the content itself that users pay attention to.

The atmosphere can be:

New year theme promotion

Low discount

The information is new.

Active users, etc.

The following is the official page of the big promotion activity. The picture on the left continues the carnival atmosphere during the warm-up, but at the beginning of the activity, the atmosphere is no longer the focus, and users are more concerned about the goods and discounts themselves. The picture on the right shows the combination of adjusted atmosphere creation and category pictures, which solves the relationship between atmosphere and content well.

1.3, priority of analysis information

1) First-class information attracts users: Assuming that users will only stay on this page for 3-5 seconds, what attracts users to continue browsing is the core selling point of the page, that is, first-class information. It must be less but better, and the design should be outstanding.

2) Secondary information helps to understand: users may stay for 3-5 minutes to learn more about the content under the attraction of the main information. At this time, showing secondary information is the essence of refining content to help users understand information in the shortest time.

3) Detailed understanding of three-level information: The first two types of information can basically help users get enough information. If users continue to stay longer to learn more information, this information will be more, and the visual level will be lower in the design, or it will be displayed interactively and provide entry jump.

1.4, User Core Behavior Analysis

Different types of users will produce behaviors at different stages. What is the ultimate orientation of these behaviors?

For example, on the product details page, some users will check users' comments, historical transactions and other contents before deciding to buy, but these checking behaviors are ultimately to help users judge whether to buy the product, so the core behavior is the final-oriented purchase.

Through these analyses, the information priority and user behavior priority of large modules will be given in the interactive output document, as shown in the following figure.

Before the detailed design of vision, it is necessary to analyze the priority of specific content in each module and make the following schematic diagram, and confirm with the interactive and business parties. These are all important outputs to help the visual design process not deviate from the direction.

The second is to establish a visualization method of information hierarchy.

Visual expression mainly includes the following elements. In order to make the effect more important in the actual design, you can use a variety of methods at the same time to get better results:

location

size

distance

Content form

colour

2. 1 location

Location is a factor to be considered at the beginning of design. When people observe things, they always follow certain rules. Following these rules in design can help users to see or understand things in front of them more easily and quickly. There are two laws related to location design elements:

1) When the eyes deviate from the visual center, under the condition of the same deviation distance, the left upper corner is the best, the right upper corner is the second, and the left lower corner and the right lower corner are the worst. Therefore, the left upper part and the middle upper part are called "best views". For example, important information such as website logo, brand name and theme is usually placed in the best view. Of course, this division is also influenced by cultural factors. For example, Arabic characters are written from right to left, and the best view is the upper right corner. The following picture is taken from the art course of web interface design by Professor Zhang Fan and Professor Luo Qidong Clark. After dividing the screen, users pay different attention to different positions:

2) The second rule is that the eye moves faster in the horizontal direction than in the vertical direction, and it is not easy to get tired. Generally, objects in the horizontal direction are seen first, and then objects in the vertical direction are seen. As shown in the figure below, the difference between left and right attention is smaller than the difference between upper and lower attention. If we want to reflect the parallel relationship, it will be more appropriate to arrange it left and right; But if you want to widen the gap, you can only achieve it by location, and it is easier to achieve the goal by arranging it up and down.

For example, as shown on the homepage of Time Weekly website, the big picture on the left is the focus news of the day, which is the first-class information at the information level. In terms of visual performance, it is not only large in area, but also in an advantageous area. Maybe 98% of users will pay attention to this field first.

If the position of the design draft is adjusted as follows, if the focus news picture is the first priority information, although it appears in the form of a big picture and occupies a large area, it will be distracted by the "latest headlines" because its position is not in the best view, and only 60% of users may see the right side first; If information has priority, it is necessary to widen the gap of visual expression, rather than approaching equality.

3) Users give priority to the upper part, and the concept of above the fold exists in web design. The information of the first screen is higher than the information of the second and third screens that the user appears by dragging the scroll bar.

Because users use different screen resolutions, the height of the first screen will be different. According to the data of our website, the current resolution height is 768, so the design will be based on the height of 768, and the average folding displayed to users is 600px. This data will be adjusted according to the resolution change of target users in the future. We can use this value as a reference line for the first screen at design time.

2.2. Size

After determining the location of the module, we will consider how big a website to give this module, and the size will intuitively reflect the importance level of information.

There is a case of sports poster design, which involves four ball games, including football, golf, baseball and basketball. Basketball and football will be more important if designed according to the actual size. In order to reflect the equality of sports, the size of the ball was adjusted in the design.

Giles Colborn's conclusion in "Simplicity First" can guide us to widen the size gap:

1) The important element is large, even if the proportion is out of balance, it can be considered.

2) Find ways to show the gap; If the importance of an element is 2, make its size 4.

Let's take the home page of Time Weekly as an example. At present, the area occupied by the focus news picture on the left side of the design is different from that of the middle news picture, which makes it easy for users to pay attention to the first-level information first and is not easily disturbed by the surrounding environment.

Comparing the areas of the two news photos, we can see that the gap is about 4 times;

If the interface is adjusted as follows: after the focus news map is reduced by two times, it can be seen that the distinction between visual levels is not obvious.

In addition to the area occupied by the element itself will affect the visual level, the degree of detail amplification of the element will also play a role. When the detail is enlarged, the human eye will feel that the element is clearer and closer to the eye, so it is easy to notice it first. Of course, the premise is to ensure that the information can be understood. If the local details are enlarged but the user can't understand what the information is, it won't play a role in attracting users.

The picture below shows the website of a modeling company. Photos of models appear randomly on the homepage, including photos of faces and breasts. Enlarging photos of facial features ensures that users can understand the image of the model, so users will give priority to enlarging photos of details.

2.3. Distance

As mentioned above, if you enlarge the details of the element, your eyes will feel closer to it and get priority attention. Although the medium of information display is flat, it can reflect the three-dimensional effect through visual means. In addition to size, there are the following other visual means:

1) Reduce the three-dimensional distance.

In order to achieve the effect of being pulled away, the following methods will make the information unclear and the eyes can't seem to concentrate on the information, including:

Fuzzy elements, the graphics in the background below are blurred, so that they are not on the same plane as the two action points and icons on the right, and are farther away from the eyes. Users will not be disturbed by the fuzzy background when recognizing action points and characters.

? Reducing transparency will also play a role. When some background images are blurred, it is difficult to be perceived by the whole. Choosing to reduce transparency can also lengthen the distance.

? Adding a translucent layer, in the case of many colors or elements in the interface, only reducing the transparency may not be able to open the distance. What I want to emphasize in the following figure is that when buying TV, the other four modules have not obviously opened the gap because of their rich colors after reducing transparency. After adding a gray translucent layer, the modules other than the TV are naturally located behind the line of sight.

2) Close the three-dimensional distance

Adding projection is the most commonly used visual technique to make elements look different from other contents. Usually, pop-up boxes and floating layers will appear when the mouse moves over other information, so adding a projection can help users focus on the module with a projection without being disturbed by the following information.

3) In addition to three dimensions, two-dimensional distance also affects visual layering. According to the proximity law of gestalt psychology, parts with short distance or close to each other are easy to form a whole; The human eye is more likely to notice the information that is close at first. In the application of visual techniques, the elements are close to the previous focus and the visual level is high. As shown below, the news focus map of the first level is close to the small picture on the right, and the line of sight is easy to move to the upper right corner;

After adjusting the distance, although the small picture in the middle is more attractive than the text itself, the line of sight tends to move down first because the titles below the focus map are closer to form a whole.

2.4, content form

After determining the relationship between the position, size and distance of the module, we will continue to consider the form including video, pictures, text and so on. Here, we mainly talk about the graphics and words we often use; Compared with words, pictures play an important role in catching users' eyes, and at the same time, they can make users form image memories in a short time. From a visual perspective, the human eye usually pays attention to pictures first, and then to words. But that's not enough. Grasping the user's eye through pictures and guiding the line of sight to the next point of concern is a point that will be considered more in the design, which can be summarized as follows:

1）

Some images in the picture have obvious directionality, such as the direction of human eyes, the direction of gestures, the direction of object movement, the direction of illumination and so on. These features will guide the human eyes to move in the set direction, thus realizing the visual hierarchy.

The picture below assumes that the person in the middle first attracts people's attention, which is the first layer of information. Because the gaze direction of human eyes is to the right, the next target that users pay attention to will turn to the "encoder" text, which is the second layer of information.

The position of what we do in the upper left corner of the picture below is easy to be noticed first, and the characters on the right occupy a lot of space and will also grab the line of sight. However, because there is no other information in the direction in which the character moves, the picture does not give full play to the guiding role, and users will not be able to browse smoothly.

After the adjustment, although the position of "what do we do" is not in the leading area, it is natural to let people's eyes fall on the text information through the guidance of the picture direction.

2) Symbol guidance

In addition to pictures, some symbols are sequential and directional, which can also effectively guide the line of sight to browse according to symbols, including Arabic numerals, alphabetical order, chronological order, arrows and so on.

The first three places in the following figure, although users are more accustomed to reading from left to right, their sight will also be affected due to the guidance of numbers, which are displayed as1"; 2>3. If you want to make this order more obvious, you can enlarge the picture size of 1 to widen the gap and combine various visual methods to achieve the effect.

Timeline is also widely used in the interface, and the human eye will be influenced by the time sequence when browsing information, and even break the conventional left-to-right browsing habit. As shown in the figure below, although the position of 2 is easier to guide users to browse first, the time axis has more obvious influence on the information. The average user will look at module 1 first, and then pay attention to module 2 from right to left according to time.

2.5, color

Color is an important factor that affects users' first impression of the interface, and the application of color can also produce immediate effects on the visual level. To sum up, there are two main differences in human attention to color:

1) Warm color first and then cool color.

At present, there is no absolute order of the stimulation and reflection of different shades of colors on human eyes, but there are obvious hierarchical differences between cool colors and warm colors. As shown in the figure below, the human eye generally sees the picture on the left first, which is related to the reflection of different wavelengths by our human eyes.

Physiologically speaking, the adjustment of human lens is very precise and sensitive to the change of distance. We can judge the distance of an object from us, but it has certain limitations, so we can't adjust it correctly for the subtle differences in wavelength. When the eyes observe colors with different wavelengths at the same distance, warm colors with longer wavelengths (such as red and orange) will form internal images on the retina; Cool colors with shorter wavelengths, such as blue and purple, form horizontal images on the retina. Therefore, warm colors seem to be advancing, while cool colors seem to be retreating.

Hubspot, an American digital marketing company, once conducted an A/B test to test the differences caused by different colors on users' click conversion. In the figure, the contents of the left and right test pages are exactly the same, the only difference is the color of the button. In the sample test of more than 2000 people, the click-through rate of the red scheme finally exceeds that of the green scheme 2 1%. Before the test, most researchers speculated that the green scheme would get more hits, because intuitively, green represents the meaning of passage and permission, while red is more inclined to warn and stop.

This test reflects the influence of warm colors on users' attention and mobility to some extent. Of course, this does not mean that warm colors should be used to improve the click-through rate. The specific color style should be designed according to the product positioning.

2) Comparison of Gao Fancha's first low and then high.

In addition to the different stimulation of cold color and warm color on eyes, color contrast is the most likely factor to cause attention difference. In order to survive in nature, the protective color used by animals is related to contrast, such as the owl in the picture, which is related to its living environment, and its coat color has also evolved into a similar color to play a role in hiding and protecting; On the contrary, large-scale color contrast is particularly easy to attract attention, such as the unique red in the yellow tulip below.

The size and distance mentioned above are visual means to reflect contrast, and the color contrast is mainly realized by the following methods:

Hue contrast: In the figure below, the main color is blue, the blue action point is consistent with the overall color, and the layering is relatively weak, while the hue contrast between the green action point and the blue makes the layering higher.

But there are many colors. How to determine the contrast? We can see it through the color ring, as shown in the figure below. The intensity of hue contrast depends on the distance on the color circle. The greater the distance, the stronger the contrast, and vice versa.

Saturation contrast and brightness contrast are easy to understand, and they have controllable values. The greater the difference in saturation or lightness between two colors, the greater the contrast, and vice versa. Look at specific examples: For example, in the following navigation map, the current character icon has a high brightness, and the low brightness black background is easy to be viewed first.

The pie chart below shows that the percentage saturation is high, which is in contrast to the overall low saturation. Comparing the same tone through saturation can not only widen the gap to form a sense of visual layering, but also produce an overall visual effect.

Summarize the visual expression skills mentioned above and form a table for everyone to remember as follows:

Third, look at the visual flow of the page.

After establishing the information hierarchy through visual expression, designers need to constantly check whether the user's browsing order is really as expected at the level of 1 to 2-3, including browsing in large modules and modules of the page, which will form a visual flow on the page;

Looking at the visual flow of the page can help us to judge whether the user browses the page smoothly and whether the browsing order is regular. If our design can't effectively guide users' sight, and users' browsing tends to be random, it will be difficult to convey the information they want to express quickly.

The following contents mainly introduce the typical visual process and the characteristics of each type, including:

Linear visual flow

Guided visual process

Beating visual flow

Radioactive visual flow

1) linear visual flow

? Horizontal visual flow guides the user's visual flow from left to right or from right to left, which is the most suitable browsing method for users' visual habits and gives people a stable and credible feeling.

For example, digg.com's homepage, whole page and single module are typical horizontal visual streams. After the user browses to the boundary from left to right, the line of sight sweeps back to the next line to continue reading from left to right; The best area for horizontal browsing will have a numerical value. For example, digg selects a page with a width of about 1000px, and displays three items in each line. After the resolution of the user's screen becomes larger, should these two values continue to increase, and to what extent is the human eye's efficiency in obtaining information? I haven't found the corresponding theoretical or experimental support for this problem, so I will look up the information later.

? Vertical visual flow guides users to browse from top to bottom. Because the vertical movement of the eyes needs the constant focus of the pupils, the efficiency is not much different from that of horizontal browsing when scanning the page module vertically, but it will become less efficient when reading details. For example, vertically arranged characters are more suitable for ancient poems and essays that need to be read word by word;

The following figure shows that the layout of the digg homepage of the original horizontal visual stream has been adjusted to become a vertical visual stream. In addition to the big picture, users will choose one of the three columns to browse vertically until they find a certain target information, and then browse the details horizontally.

The vertical height limit of the web interface is smaller than the horizontal limit, because users are used to scrolling up and down to browse more information. When the user is still determining the target information, vertical visual flow can help the user get more information without scanning back. As shown in the following facebook calendar interface, when the timeline is arranged horizontally, due to the limited width, it is necessary to switch horizontally or scroll to view more dates:

Adjust the direction of the time axis to be vertical, so that users can view all the dates of the current month more effectively by scrolling up and down.

? Diagonal visual flow can produce a sense of movement and speed, but it is difficult to recognize words because of the inclination of the angle. A large number of text information arrangements are not suitable for this visual process, and are usually used for design or decoration in interfaces with less information, as shown in the following figure.

There is also a small diagonal visual flow on the web interface to reflect the sense of movement.

? With the curved visual flow, the user's line of sight will form a personalized curve, thus having a sense of rhythm and liveliness. This type of eye movement is large, and long-term use will cause visual fatigue, so it is not suitable for large paragraphs. Generally, it will combine graphics to make a curved visual flow, so that the user's line of sight stays in the image area for a while;

As shown below, add the picture to the curve visual flow, let your eyes stay at the picture node and browse the content of the node, and then continue to browse along the curve.

2) Guide the visual process

As shown in the following figure, the guided visual flow will design an inducing element to attract the user's attention, and then notice the target information through the inducing element; Common inducing elements can be divided into lines, images including people or objects, and indicators such as arrow letters. This kind of visual flow should grasp the primary and secondary relationship between the inducing factors and the target information, and the simple inducing factors should not be too strong, otherwise it will weaken the communication power of the target information; If the inducing element can contain some target information, the effectiveness of information transmission can be improved.

As shown in the figure below, the red liquid in the tube is moving, attracting users to reach the target message along its moving direction.

The content form mentioned above, from pictures or symbols to the next visual focus, is also a guiding type from the perspective of visual flow. The following two examples are using guided visual flow in the local part of the page.

3) The beating visual flow

In the information with the same or similar properties, it gives people the right to choose independently by choosing the information that is prominent or interesting, but in design, it can also be transmitted without showing traces by adjusting the intensity of elements.

For example, in the website interface of the model company mentioned above, the photos of models are all information of the same nature, and the user's browsing is random to some extent, but it also conveys the priority by enlarging and reducing the portrait.

4) Radioactive visual flow

The line of sight starts from the middle of the page, which makes the elements in the middle have the strongest impact and the clearest information transmission, and then forms a visual movement that diverges from the middle.

For example, in many car websites, the main map in the middle can best reflect the core of information, and then spread to the navigation above or other service portals below through the main map.

The above four types of visual flow are typical, but they do not represent all. We can also design more creative visual flow. No matter which path, whether users browse smoothly and whether information is delivered in place according to priority is our goal.

Finally, to sum up:

1. In the early stage of the project, we need to know the atmosphere and content positioning created by the page; Analyze the priority of information and the core behavior of users by combining interaction; Pre-preparation can help the visual design process not deviate from the direction.

2. Establish information hierarchy through visual expression methods such as location, size, distance, content form and color.

3. During the design process and at the end, we should constantly check the visual flow of the page to see if the user browses smoothly.

We consciously analyze the information priority that users pay attention to and display it visually, which is a very important responsibility of the position of visual designer. I hope these methods can help us perform this duty better, and I like and encourage you!

My friend and I made a small program theory dock and built our own theory library? ; There are many terms, laws and theories about interaction, psychology and management. WeChat scans the small program code below to experience it quickly!