Interactive Design Practical Guide series (4)-concise, clear, and easy to understand

Link: http://ued.taobao.org/blog/2009/12/simple/

 

We live in a society with complicated information, especially in the Internet era. People begin to access more and more information through the Internet. How to obtain/transmit effective and accurate information is very important. In the webpage interaction design, we propose that the process of information acquisition and transmission must be concise, clear, and easy to understand. In this way, the user can obtain the information effectively and make a quick decision.

1. What is "Concise, natural, clear, and easy to understand "?

Concise and clear: simplifies Information
"Less is more ". We recommend that you use the least elements to express the most information. If the information is complex, the user will bear a large amount of information burden, resulting in information overload, affecting efficiency, and cannot help the user solve the problem.

Easy to understand: Use user languages
Users can obtain information in a variety of ways and have different understandings of the information. Therefore, users can transmit information using the expressions they usually use and understand, which is more acceptable to users.

 

2. Types and design principles of information expressions

In the webpage interaction design, there are many ways to convey valid information to users, including page layout, interactive text, interface color, images and icons, and sound.

1) Page Layout

The information layout in the interface directly affects the efficiency of obtaining information. Therefore, the general layout of the interface has different focus for different functions, and gives users a "Block sense" to facilitate users' scanning of information.

① The interface layout should be as orderly and arranged neatly as possible to prevent being too tight or loose and have an obvious "Block sense ". Avoid confusion.
② The layout should fully express its functionality, and the functions represented by each region should be differentiated. For example, title area, work area, prompt/help area, etc.
③ The module where the most important information on the page is located will be the most obvious position on the screen. In addition, it should be the largest.
④ Clearly marked and briefly introduced information in the layout, such as the title bar and title.
⑤ The information location ensures consistency, so that users do not need to re-establish an understanding of the page information distribution.

2) interactive text

Interactive text refers to all texts on the product interface that need to be understood and fed back by the user during interactive operations, including the title, button text, link text, dialog box prompts, various prompts, and help information. These texts directly affect users' understanding of expectations during the interaction process. A good interactive text design can improve the efficiency of task completion.

① The information should be colloquial as much as possible, without or without professional terms;
② Gentle and polite expressions, avoiding passive voice and negative sentences;
③ Concise and clear expressions. When there are many texts, you should cut sentences properly to avoid scrolling between the left and right sides and line-by-line as much as possible.
④ For interactive texts of the same operation, the operation line text should be consistent.
⑤ The font uses the default/Standard font, And the size is clearly distinguished by the user's vision;

3) UI color

The human eye can distinguish between 10 million colors in total, so the attention of the user and the color in the interface is very high, effective use of color to distinguish the level of information, classification, etc, this helps you to associate information with operations and effectively reduce the user's memory burden.

① Select the appropriate color based on the "scenario" of different products. For example, the management interface often uses blue.
② Consider the influence of colors on users' psychology and culture. For example, yellow indicates warning, and Green indicates success.
③ Avoid the appearance of more than three colors on the interface.
④ The contrast of the color is obvious, such as the use of light-colored text in a dark background.
⑤ Use colors to guide users to the most important information.

4) image icons

Compared with plain text, images, and symbolic icons, these images are more in line with users' habits. A piece of information is often expressed. An image or an identifier can be understood and accepted by different users. The appropriate use of images and symbolic icons makes it natural for users to establish cognitive habits.

① Clear ideographic and clear, with a high degree of generalization and direction, allowing users to quickly think of the corresponding functions and operations.
② Information of the same type or the same latitude should be consistent in form and color style;
③ It is used only when important information is highlighted and the user may produce misunderstanding. Avoid abuse.
④ Try to use it in combination with interactive text.

5) Sound

In the interactive design of web pages, there are not many ways of expressing the information used for sound. It is generally used to express prompts, reminders, help, and other information. This type of information allows users to obtain feedback through hearing, which is more direct and effective.

① Clear expression, friendly tone, not blunt, polite.
② Use voice that meets users' cognitive habits. For example, a friend's visit information is prompted by a knock on the door.
③ Use a voice that does not dislike users (such as terror, nausea, and irritability.
④ Make a sound when the user can predict.

4. Summary

For different information expressions, we require designers to be concise, clear, and easy to understand when expressing information, so that users can feel it is both natural and clear. It is as natural as a stream of water, just as clear as a military command. In this way, you can complete the task quickly and accurately.

Interactive Design Practical Guide series (4)-concise, clear, and easy to understand