Eliminate the design of the visual noise "disorderly flower gradually want attractive eyes"

Apparent noise, also known as visual noise. We receive a lot of information from the outside world every day, and nearly 70% of this information is obtained through visual perception. Visual noise interferes with our judgment of information, affects the usability and usability of the product, and is closely related to the quality of the user experience.

(Claude Shannon Map shows how noise affects the delivery of information)

(This is an imitation of Claude Shannon's drawing a picture of the visual noise effect on the user interface transfer information)

So what is visual noise? In simple terms, the visual noise is a visual factor which has negative effect on the transmission and understanding of the information in the process of vision information transmission. As we cannot bear to live in noisy environments, visual noise can also interfere with our judgment of information and affect the usability and usability of our products, is closely related to the quality of the user experience.

Like the following Web page I believe you must feel familiar with, sometimes we have to face such a lively page and find out what we need information and content, such as a download button or an important link, but the bad thing is that we can easily get lost in it;

(The numerous software downloads page;)

(The homepage of Baidu is a good example of concise design;)

How to avoid and reduce the visual noise in the design? The following is mainly from the Internet product interface design angle simply talk about the cause of the visual noise and how we should avoid the emergence of visual noise.

1. Color

Mention of visual design, not to mention color. Color plays a very important role in the design of the interface: Distinguish information module, hint control function (such as blue text usually represents a link, gray button is not clickable, etc.), highlight the key information (the more important is more eye-catching) and so on ... harmonious color matching and appropriate proportion can make the whole interface look clear and comfortable, on the contrary, It will bring the user a heavy visual burden, easy to form visual fatigue, impact experience.

(such as picture, link text, not clickable text, through the division of color and at a glance;)

(a website design; different regions use different color classification information;)

(personal website design; The orange text is well displayed on the gray base map;)

(The use of color in distinguishing information modules;)

2. Layout

The information in the interface can be effectively communicated, inseparable from good organization and layout; This requires consideration of the following elements:

A. Hierarchy (level relationship, paragraph relationship)

In the visual presentation of information, the expression of hierarchical relationship between information is very important, such as the relationship between navigation area and content area in an interface, the relationship between all comments under a post, the paragraph relationship in an article, and so on. The proper visual design can be used to represent the hierarchical relationship between the information through the display of visual elements, and if the visual hierarchy relationship is not displayed properly, the user will be puzzled and the understanding obstacle is caused.

(Left: Hierarchical division of information; Right: paragraph division of information)

B. Alignment

In the design of content typesetting, by aligning the content, a good natural boundary is formed; the boundary extends along this set of objects (using the Gestalt principle-the continuity principle), which brings the benefit of strengthening the boundary to guide the reader's vision smooth extension, and helps to form a good visual flow.

(The same is true in form design.) Alignment of the operation area will greatly enhance the user's efficiency in accomplishing the task. When the form element is centered, the user's line of sight moves down the centerline to quickly read the label and find the corresponding input box. )

C. Grouping

It is an effective means to reveal the inner connection between information and to help users understand and remember that the original fragmented and disorderly information is displayed in groups. In visual performance, grouping is the place where each group of information has a correlation or similarity in visual performance;

(e.g. area division, Interval Division, Color Division, Shape/symbol Division, Level Division tab)

(Area division of elements)

(interval division of elements)

(Color division of elements)

(Elements of the form/symbol Division)

D. Spacing

Regarding the spacing design in the information display, the raster design idea is often used visually; on the grid design, you can find a lot of relevant articles on the Internet, here do not focus on the introduction;

(Grid design examples for Web pages)

3. Visual effects

The visual effects mentioned here include static graphic effects and animation effects, beautifully designed graphical interfaces and graceful and moderately animated effects can bring pleasure to people, but think about the flashing banners on the Web page and the pop-up boxes that fly in the screen ... do they once annoy you? Is it annoying to see the intricate shapes of icons, the chain of crystal effects, the various software effects stacked for dazzle? The graphic interface, like candy, may not be suitable for the transmission and display of information; If the graphic elements are overused, they become redundant and cumbersome, which becomes the visual noise;

(gorgeous color and background images, shading, crystal, glare effects, but the entire site to bring people experience and poor; excessive decorating makes the site less readable, navigation and visual focus are confusing;)

(The page header of a page, destroyed by a variety of flashing ads)

4. Visual weight

The visual weight mentioned here refers to the "light" and "heavy" of the interface elements in visual performance, that is, the primary and secondary relationship between the information; good interface design can through the performance and grasp of visual information, clearly inform users which information is the main and which is auxiliary, let the user quickly grasp the key, sketchy;

(Compare the top and bottom two groups of buttons design example: The above button decoration is too gorgeous, the text is not prominent, distracting; the design of the bottom button is elegant and clearly shows the relevant information)

The above is about how in visual design to reduce and avoid the noise of some superficial induction, in the actual design work, avoids the apparent noise to produce one simple and the effective method is: understands your user and the product design the original intention, for the product function, the content design, designs for the user's behavior, but not for the vision, Designed for special effects display.

Article Source: Baidu MUX Reprint please indicate the source link.