Interactive Web design principles: Clean and clear

In the design of web interaction, we propose that the process of information acquisition and communication must be simple, clear and understandable. This allows the user to effectively access the information and make a quick decision.

1. What is "concise and natural, clear and understandable"?

Simplicity and clarity: making the information simpler

"Less is more". Encourage the use of minimal elements to express the most information. If the information is multifarious, will make the user undertake a lot of information burden, cause information overload, influence efficiency, can't help the user to solve the problem.

Natural and understandable: using the user language

User access to information in a variety of ways, and the degree of understanding of the information are also different, so use the user usually use and understanding of the expression to convey information, more users can be accepted.

2. Types of information presentation and design principles

In Web Interactive design, there are many ways to convey effective information to the user, including: page layout, interactive text, interface color, image and icon, sound, etc.

1) Page layout

The information layout in the interface will directly affect the user's efficiency of obtaining information. Therefore, the general layout of the interface due to different features of the focus of the various considerations, and will allow users to have a "block sense" to facilitate the user's scanning of information browsing.

① interface layout As far as possible orderly, arranged neatly, to prevent too tight or too loose, there is a clear "block sense." Avoid confusion.

② layout to fully display its functionality, for each area represented by the function should be different. such as: Title area, work area, hint/help area, etc.

The most important piece of information on the ③ page will be the most obvious location on the screen. And, should be the biggest.

The information in the ④ layout needs to be marked and briefly described, such as title bars and headings.

The location of the ⑤ information ensures consistency so that users do not have to re-establish an understanding of the distribution of page information.

2) Interactive text

Interactive text refers to the product interface involves the interactive operation of the user needs to understand and feedback all the text: including the title, button text, link text, dialog box prompts, various tips, help and so on. These words directly affect the user in the interactive process of understanding the expected, good interactive text design, can improve the efficiency of the user to complete the task.

① the information expressed as far as possible colloquial, not or less use of professional terminology;

② expression of soft, polite, avoid the use of passive voice, negative sentences, etc.;

③ concise, clear expression, the text should be more appropriate punctuation, as far as possible to avoid rolling around the screen, folding line.

④ for the same operation of the interactive text, the operation of line text to maintain uniformity.

⑤ fonts Use the default/standard font, the size of the user's visual clarity to distinguish the main;

3) interface Color

Human eyes can be divided into about 10 million colors, so the user and the color of the interface is very high, effective use of color to distinguish the level of information, classification, etc., to help users of information and operations related to effectively reduce the user's memory burden.

① according to different products using "scene", choose its appropriate color. For example, the management interface often uses blue.

② consider the psychological and cultural impact of color on the user. For example, yellow represents a warning, green represents success, and so on.

③ avoid more than 3 colors appearing in the interface.

The contrast of ④ color is obvious, such as using light-colored text in a dark background.

⑤ uses colors to guide users to the most important information.

4) Image icon

Relative to simple text, images and symbolic icons more in line with the user's understanding habits. Often express a kind of information, a picture or a logo can make different users understand and accept. The proper use of pictures and symbolic icons will allow users to naturally build cognitive habits.

① clear, clear, a high degree of generality and directivity, so that users can quickly associate to the corresponding functions and operations.

② the same or the same latitude of information, in the form and color style as far as possible to maintain consistency;

③ can be used only when highlighting important information that the user may have an understanding bias. Avoid abuse.

④ as much as possible in conjunction with interactive text.

5) Sound

In the interactive design of the Web page, the information to be used for the sound is relatively different from the visual. Generally used in the presentation of tips, reminders, help and other information. This kind of information expression lets the user obtain the feedback through the auditory, more direct and effective.

① expression clear, tone cordial, not blunt, polite.

② uses a voice that conforms to the user's cognitive habits. For example, use a knock on the door to prompt friends visiting information.

③ uses a voice that does not allow users to resent (e.g., horror, nausea, irritability).

④ sounds when the user is predictable.

3. Summary

For different ways of presenting information, we require designers to express information in a concise and clear, natural understandable, as far as possible to make users feel that this is natural, but also clear information. As natural as a stream of water, as clear as a soldier's command. This will allow users to quickly and accurately complete the task.