Website User Experience Design: Visual performance Building information level to effectively communicate information to users

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

　　

As visual designers, our role in addition to the most basic to meet the user's aesthetic needs, there will be brand communication, information transmission, function transmission, etc., which want information to effectively communicate to the user, we need to build information level, rather than a brain to give users their own understanding, to do this there are what visual methods, Whether there is a theoretical basis behind these methods is the subject of this article.

First look at the two pictures below, the left image for the camera to shoot the effect, the right image of the human eye does not move when you see the effect, you can find that the acquisition of information is not a one-time completion, it can not produce multiple focus at the same time to keep the line of sight in more places, designers need to consider is to allow users to Get information in a certain order to help get and understand the process efficiently and naturally.

　　

This design approach would like to address two main issues:

1. User access and understanding of the efficiency of information

The establishment of a good level of information, so that users in a limited time, fast access to and understand the useful, interested information, and to produce the next step;

2, the professional nature of the designer

Designers consciously analyze information priorities, understand which visual expression techniques can build information levels and the rationale behind each method, not only by feeling to do design.

First, early Understanding & Analysis

Before starting the design, in addition to the project itself to understand the background goals, visual designers for specific pages also need to understand some content to help the design behind the direction, including page positioning, atmosphere building, information priority and user core behavior.

1.1, page positioning is to help analyze the page information priority, core behavior of the premise

Usually there are:

· Who is the user

· Where users come from, from what channel to the page

· Page content positioning, what to provide, what not to provide

· Page action

For example:

We are in the design of procurement direct market new home, interactive through the page of the user's familiarity with the service analysis, to determine the homepage of the most core target users are new buyers; page content positioning is to display the value point of the market, user-generated data to enable new buyers to purchase direct brand recognition;

　　

1.2, understand the need to create a page atmosphere, can help us to determine which elements can help to achieve the goal, the atmosphere can be the content itself, but also through visual element design to create, but must pay attention to the atmosphere should not be stronger than the user concerned about the content itself

The atmosphere may be:

· New Year Theme Promotion

· Low Discounts

· Information Alive

· User active and so on

The following is the official page of the big promotion event, the left picture continues the warm-up period carnival atmosphere, but to the activity beginning stage atmosphere already is not the focal point, the user cares more about the commodity and the discount itself, the right picture adjusts the atmosphere the creation and the class head picture unifies, very good solves the atmosphere and the content relations question.

　　

1.3, analysis information priority

1 first-level information to attract users: assuming that users will only stay in this page for 3-5 seconds, the most attractive users continue to browse is the core selling point of the page, is a level of information, it must be few, in the design to focus on the display

2 two level of information to help understand: there is a level of information to attract users to learn more about the content and may stay for 3-5 minutes, then show the two-level information that is refined the essence of content to help users in the shortest possible time to understand the information

3 Three level of information in detail: the first two types of information can basically help users get enough information, if the user continued to stay longer to learn more about the details, the more information, in the design of the visual level will be back, or through interactive display, provide access to the entrance

　　

1.4, analysis of user core behavior

Different types of users will produce behavior at different stages, we have to determine what is the ultimate direction of these behaviors?

For example, the Product Details page, some users in the decision to purchase before, will view the user evaluation, historical transactions and other content, but these viewing behavior, and ultimately to help users determine whether to buy this product, so the core behavior is the final-oriented purchase.

　　

With these analyses, the interactive output document gives the information priority of the large module and the user action priority, as shown in the following figure

　　

Vision before the details of the design, the specific content of each module needs to be prioritized analysis and output of the following schematic and interactive and business side confirmation, these are to help the visual design process not deviate from the direction of the important output.

　　

Ii. establishing a visual approach to information level

Visual expression methods mainly have the following elements, the actual design in order to make the effect of primary and secondary, may use a variety of methods to achieve better results:

· Location

· Size

· Distance

· Content Form

· Color

2.1, Location

The position is the element that will consider at the beginning of the design, the human eye sees the thing, always follows some certain law, the design follows these rules, can help the user to see or understand the thing in front of the person more easily and quickly. There are two rules and position design elements:

1 when the eye deviated from the center, in the case of deviation from the same distance, the eye on the left side of the best observation, in turn, the upper right, lower left, and the worst in the lower right. Therefore, the upper left and upper middle is called the best view. For example, the website logo, commodity name, subject and other important information, generally placed in the best view. Of course, this division is also influenced by cultural factors, such as Arabic text is written from right to left, when the best view is the upper right. The following figure is an excerpt from the "Web Interface Design Art Tutorial" from fan Lurchi Gongxiaodong, after dividing a screen, the user's different attention to different locations:

2 The second rule is that the eye moves in a horizontal direction faster than the vertical movement and is not easy to fatigue, usually first see the horizontal direction of the object, then see the vertical direction of the object. As shown in the following figure, the difference of attention is less than the difference between the top and bottom, if you want to reflect the relationship between the right and left, the arrangement will be more appropriate;

　　

For example: The following figure Times Weekly website homepage, the left big picture is the day's focus news, at the information level for the first level information, the visual performance not only the area is big, the content form uses the big picture, the position also puts in the advantageous area, perhaps 98% users will first concern this area;

　　

If the position of the design manuscript is adjusted as follows, if the Focus news picture is the first priority of the information, although it is the form of large maps, the area is large enough, but because the position is not the best view, will be "Latest headlines" scattered part of the line of sight, may only 60% of the user first see the right; If information is primary and secondary, it is necessary to widen the gap in visual performance, rather than a near-equal situation.

　　

3 User priority attention to the top, in the Web page design has a first screen concept, the first screen of information than through the user to drag the scroll bar appears second to third screen level to be high

Because the screen resolution used by the user is different, the height of the first screen will vary. According to our website data, the current resolution height of 768 majority, so the design will be 768 height as the benchmark, remove the browser itself, such as the menu occupy the height, the actual display to the user's first screen average of 600px, This data will be adjusted according to the resolution change of the target user, we can use this value as the guide line of the first screen at design time.

2.2, size

After we have determined the position of the module, we will consider the size of the site, which is very intuitive to reflect the important level of information.

There is a sports poster design case, involving four kinds of ball games including football, golf, baseball, basketball, if the actual size of the design will make basketball and football more important, in order to reflect the equality of sports, design the size of the ball has been adjusted.

　　

Giles Colborne's "simplicity first" in the book's conclusions can guide us through the size of the gap:

1 important elements to be larger, even if the imbalance can be considered

2 to find ways to show gaps; if the importance of an element is 2, make it the size of 4.

Or with the home of the Times, for example, the current design of the left side of the focus of the news map accounted for the area and the contrast between the news map opened the gap, so that users can easily focus on first-level information and not easily surrounded by interference;

　　

We compare the area of two news pictures to see the gap is about 4 times times;

　　

If the adjustment to the interface is as follows: The focus of the news map reduced twice times, you can see the visual level of the distinction is not obvious.

　　

In addition to the area of the element itself will affect the visual level, the elements of the details of the magnification also plays a role, the details magnified, the human eye will feel the element clearer, closer to the eye and easy to first pay attention to, of course, the prerequisite is to ensure that information can be understood, If the local details are magnified but the user cannot understand what the information is, it will not play a role in attracting the user;

The picture below is a model company's website, the home page randomly appears the model's photograph to include the facial and the bust photograph, enlarges the facial characteristic the photograph to guarantee the user to be able to understand this is a model's image, causes the user to give priority attention to the detail enlarged picture.

　　

2.3, distance

Before the details of the element to enlarge, the eye will feel closer to it and be given priority attention, although the medium of information display is a plane, but through visual means to reflect the three-dimensional effect, in addition to size, there are other visual methods are as follows:

1) pulled three-dimensional distance

To achieve the effect of being pulled away from the distance, the following list of methods is to make the information not clear, the eye does not appear to focus on the information, including:

· Fuzzy elements, the following figure behind the background of the blur, so that it and two action points and the right side of the icon is not on a plane, farther away from the eyes, the user in action points and text recognition will not be disturbed by the blurred background

　　

· Reduced transparency can also play a role, when some background map blurred after more difficult to be perceived as a whole, choose to reduce transparency can also pull distance

　　

· Increase the translucent layer, in the interface color or elements of a lot of cases, only reduce the transparency may not be able to pull away, the following figure want to highlight TV shopping, the other four modules to reduce transparency due to their own color richer but not significantly open the gap, through the addition of gray translucent layer, The module outside the TV purchase naturally retreated behind the line of sight.

　　

2) to shorten the three-dimensional distance

· Increasing the projection is the most commonly used visual method that makes the element look and other content not in the same plane, usually like a pop-up box, a floating layer that appears after the mouse is moved, and so on, because of the pressure on other information, increasing the projection can help the user focus on the projector module without interference from the

　　

3 In addition to three-dimensional, two-dimensional distance has an impact on the visual level, according to the law of Gestalt psychology proximity, short or close to each other part is easy to form the whole; The human eye to the distance near the information more easily first to pay attention to, in the visual manipulation application, the element distance on a focal point near, the visual level is high. The following figure, the first level of the news focus map and the small picture on the right side of the closer, the line of sight easy to the upper right corner movement;

　　

The distance has been adjusted, although the middle of the small picture itself more attractive than the text, but due to the focus of the title below the distance closer to form a whole, the line of sight easy to move down first.

　　

2.4. Content Form

After determining the position, size and distance relationship of the module, we will continue to consider the form of content including video, pictures, text, and so on, where we often use the graphics and text, compared to the text, the picture in the grasp of the user's eye this is a work, but also to enable users in a short period of time to form an image of memory, From the visual level, the human eye will generally focus on the picture after the text. But this is not enough, through the image to capture the user's eyeball after the eye to guide the next point of view, is designed to consider more points, summed up the following methods of expression:

1 Directional Guidance

Some of the images in the image has obvious directionality, such as the direction of eye gaze, gestures, direction of movement, direction of light, and so on, these characteristics will guide the eyes of the eye toward the set direction of movement, so as to reach the visual level of the Lord there are times.

The following figure assumes that the middle character first attracts the person's sight, for the first level of information, because the human eye gaze direction to the right, so that the next target users focus on the "coder" text, the second level of information.

　　

The following figure what WE do position in the upper left corner is easy to be concerned about, while the image of the right side of the larger will rob the line of sight, but because the character movement in the direction of no other information, the picture is not fully play the role of guidance, users will not be able to browse the smooth

　　

After the adjustment of the effect, although the "WHAT WE do" position is not in the dominant area, but through the direction of the image guide very natural to people's eyes on the text message.

　　

2) Symbol Guide

In addition to the pictures, some of the symbols themselves with order and direction, but also can effectively guide the eyes according to the symbol to browse, including Arabic numerals, alphabetical order, time sequence, arrows and so on.

The top three of the charts below, although users are more accustomed to reading from left to right, but due to digital guidance, the line of sight will be affected by the 1>2>3 in order to read, if you want this order more obvious, you can enlarge the picture size by 1, open the gap, combined with a variety of visual methods to achieve results.

　　

The timeline is also widely used in the interface, the human eye will be affected by the time sequence to browse the information, and even break the routine of such as from left to right browsing habits, the following figure although the position of 2 easier to guide users to browse, but the timeline of the impact of the information more obvious, the general user will first view Module 1, Focus on the Module 2 from right to left.

　　

2.5, color

Color is the impact of the user on the interface first impression of the important factors, color application of the visual level of the impact can also play an immediate effect, summed up the eye on the color of the main difference is the following two points:

1 warm color after cool

The different hue of the color, the stimulation to the human eye and the reflection of the generation have not found the absolute order of precedence at present, but the color of cool and warm colors, there are obvious levels of difference, the following figure, the human eye will generally give priority to see the picture on the left, which and our human eyes on the different wavelength of the reflection has a certain relationship;

　　

Physiologically, the lens of the human eye, the adjustment of the distance is very precise and sensitive, we can determine the object from our distance, but it has a certain limit, the wavelength of small differences can not be properly adjusted. Eyes at the same distance to observe the color of different wavelengths, the long wavelength of warm colors such as red, orange and other colors, the formation of the medial image of the retina, a short wavelength of cool colors such as blue, purple and so on, on the retina to form a lateral image. So the warm colors seem to be moving forward, and the cool colors seem to be receding.

　　

HubSpot, a US digital marketing company, once made a A/b test that tests the difference in color for user-click Conversions. In the diagram, the left and right two test pages are exactly the same in content, the only difference is the color of the button, in more than 2000 samples of the test, the final red program hits more than the green program hits a full 21%. Before the test, most of the researchers speculated that the green plan would get a higher click because, intuitively, the green represented the meaning of passage and approval, while Red was more likely to warn and block.

This test to a certain extent reflects the warm color on the user's attention and the impact of action, of course, is not said to improve the click rate to use warm, the specific colour style or according to product positioning to design.

　　

2) First high contrast and low contrast

In addition to the cold warm to the eyes of the stimulus is different, color contrast is the most likely to cause attention difference factor, in nature animals in order to survive, the use of protective color is related to contrast, such as the owl in the picture, and its living environment, hair color evolved into similar colors to play a hidden protective role; The color contrast is very easy to attract attention, the following yellow tulip unique red

　　

Before the size, distance are embodied in the visual means of contrast, color contrast mainly through the following methods to achieve results:

· Hue contrast, the main hue in the following image is blue, blue action point and overall color consistent, the level is relatively weak, and green action point and blue in hue contrast makes the hierarchy higher

　　

But there are many colors, how to determine the size of the contrast? We can see through the Hue loop, as shown in the following figure, the hue contrast depends on the distance on the hue ring, the greater the distance, the weaker the contrast.

　　

· The contrast between saturation and lightness is easier to understand, and they have numerical control, two colors between the saturation or brightness of the value of the larger difference, the contrast is greater, and vice versa, look at specific examples: as the following navigation chart, the current figure icon high brightness, and low brightness black background to form high contrast and easy to be watched first

　　

The following doughnut chart, completed percent saturation, and the overall low saturation of the contrast, the same hue through the saturation of contrast can not only open the gap to form a visual level, while the visual effect of the integrity

　　

To summarize the visual expression described above, form a table to facilitate the memory of the following:

　　

Third, look at the page visual flow

The use of visual expression techniques to build information levels, the need for designers to constantly review the user's browsing order is really as we expect the level of 1 to 2 to 3 ..., including the page large modules and modules within the browsing, these browsing sequence will form a visual flow on the page;

Looking at the page visual flow can help us to determine whether the user browsing the page is smooth, the order of the browsing is a rule to follow; If our design can not effectively guide the user's view, the user's browsing more random, it is difficult to express the hope that the message to reach the place quickly.

The following are mainly about the typical visual streams and the characteristics of each type, including:

· Linear visual flow

· Guided visual flow

· Bounce Visual Flow

· Radioactive visual Flow

1 Linear visual flow

· Horizontal visual flow to guide the user from left to right or from right to left visual flow, is the most consistent with the user's visual habits of browsing, giving people a stable and credible feeling.

　　

such as digg.com home, overall page and a single module are typical horizontal visual flow, the user from left to right after browsing to the border, the line of sight back to the next row continue to read from left to right; there will be a number of horizontal browsing for the best area, such as Digg's choice of page width of 1000px or so, Each row shows 3 item, the resolution of the user's screen becomes larger, whether these two values should continue to increase, to what extent, is the human eye obtain information efficiency highest? This question I have not found the corresponding theoretical or experimental support, follow-up to find information.

　　

· Vertical visual flow leads the user to view from top to bottom, as the longitudinal movement of the eyes needs pupil focus, when the Longitudinal scan page module efficiency and lateral browsing is not significant, but the reading details of the efficiency will be lower, such as vertical arrangement of text, more applicable to the need to read verbatim ancient poetry;

　　

The following figure is the original horizontal visual flow of the Digg page layout adjustment, into a vertical visual flow, in addition to the large image, the user will choose three columns of one of the vertical browsing until a certain target information, horizontal browsing details.

　　

The vertical height limit of the Web interface is smaller than the horizontal, because the user is accustomed to scrolling up and down to see more information, when the user is still in the determination of the target information, the vertical visual flow can help users to get more information without the need for a scan, the following image of the Facebook calendar interface, when the timeline is horizontally arranged, due to the width constraints, You need to toggle or scroll bar to view more dates:

　　

Adjusts the timeline orientation to portrait, allowing users to view all the dates of the month more efficiently by scrolling up and down.

　　

· Slash visual flow can create a sense of movement and speed, but due to the angle of tilt so that there will be some difficulty in word recognition, a large number of text information arrangement is not suitable for this visual flow, often used in the design of embellishment or less information in their own interface, the following picture of the fitness club poster;

　　

There is also a small area of the Web interface slash visual flow, to reflect the sense of movement.

　　

· Curve visual flow, the user's view will form a personalized curve, with a rhythm and lively sense, this type of eye movement due to large, long time a large number of use will produce visual fatigue, so not suitable for large text use, the general will be combined with graphics to do curve visual flow, so that the user's view in the image area for a little stay;

　　

The following figure in the curve visual flow with the picture, let the view in the picture of this node to pause and browse the contents of the node, and then continue to the curve browsing.

　　

2) Guided visual flow

As shown in the following illustration, the guided visual flow will design an inducement element to attract the attention of the user, and then the target information can be noticed by inducing the element; The common inducing elements may be divided into lines, images including characters or objects, indicating symbols such as arrow letters. This kind of visual flow should grasp the primary and secondary relation between the inducement element and the target information, the pure inducement element should not be too strong, otherwise it will weaken the dissemination of the target information; If you can include some target information in the inducing element, it can increase the effectiveness of information communication.

　　

The red liquid in the pipe below is a movement that attracts the user to the target message along the direction it moves

　　

The previous form of the content, from the picture or symbol to the next visual focus, from the visual flow angle is also the type of guide, the following two examples are in the page part of the use of the guiding visual flow

　　

　　

3) Runout of visual flow

In the same nature or similar information, the choice of prominent or interesting information between the jump browsing, giving an independent choice of the right, but the design can also be adjusted by the strength of the elements, do not reveal traces of the transfer of primary and secondary.

　　

As mentioned in the previous Model company website interface, the model's photos are the same nature of information, user browsing has a certain randomness, but by zooming in and out of portrait also passed the primary and secondary.

　　

4) Radioactive visual flow

The beginning of sight in the middle of the page, so that the middle of the impact of the most powerful elements, information conveyed most clearly, and then formed from the middle of the visual movement out.

　　

For example, many car sites, the middle of the main map to reflect the core of information, through the main map and then divergence to the top of the navigation or other services below the entrance.

　　

The above four types of visual flow is more typical, but does not represent all, we can also design a more creative visual flow, regardless of that path, the user to browse whether the smooth, the information is in accordance with the primary and secondary delivery in place, is that we have to adhere to the goal.

Finally, summarize:

1. The early stage of the project we need to understand the atmosphere of the page creation, content positioning, and interaction analysis of the priority of information, the user's core behavior; Early preparation can help the visual design process not deviate from the direction

2. Building the information hierarchy through visual representations of location, size, distance, content form, and color

3. The design process and the end of the page to constantly look at the visual flow, to see whether the user to browse smoothly.

We consciously analyze the user's attention to the information priority, and through visual expression, is the visual designer of this post is very important responsibility, hope that these methods can help us to do this responsibility better, I also enjoy, and we share!

Thank you for your reading, this article is produced by Ali International Ued, reproduced please indicate the source, the offender will investigate, thank you for your cooperation.

Note Source format: Ali International ued (HTTP://WWW.ALIUED.COM/2014/02/25/2354/)