Cognition and design-understanding the UI design guidelines (3) we look for and use visual Structures

As mentioned in chapter 2nd, when people navigate through software and websites, they do not carefully examine the screen and read every word, and they will quickly scan the information. This chapter will show several examples to illustrate that when information is presented in a concise and structured manner, it is easier for people to browse and understand.

The above are two ways to present the same ticket booking information. One is loose and unstructured text, and the other is structured text in the form of an overview. Booking Information displayed in a structured manner can be viewed and understood faster than those displayed in loose words.

The more structured and refined information is presented, the faster and easier it is to scan and understand.

Of course, it is not enough for information to be quickly browsed and only refined, structured and non-repetitive. They must also comply with the graphic design rules. For example, some common rules are as follows: When people read online or offline, the distance between labels and corresponding values is usually higher than that of other labels, in this way, the user can think of them as a group through the closeness principle, instead of having to make it difficult for the user to check which tag and which value are a group.

 

Structure improves the user's ability to browse long numbers

Even a small amount of information can be structured to make it more accessible. The telephone number and credit card are two examples. In order to be easy to browse and remember, these two types of numbers are often divided into multiple parts. The following example shows that structured data is obviously easy to browse.

These long numbers are separated by spaces to make them structured. This not only facilitates browsing, but also makes it easier for users to check whether the input is correct. However, many websites andProgramIt is not taken into account.

 

Data-specific controls provide more structures

Structure is a data-specific control. Designers can use controls instead of simple text input boxes to display the values of a specific type of data and receive input. For example, the date can be displayed and accepted in the form of a menu and a pop-up calendar control.

For example, when entering an email, we can use multiple controls to receive the input.

 

The visual level enables people to focus on relevant information

One of the most important goals of visual information display is to provide a visual level, that is, the arrangement of information can be:

Segment the information into segments;

Mark each information segment and subsegment so that their content can be clearly identified;

The Section and its sub-sections are displayed in a hierarchical structure, so that the upper section can be displayed more importantly than the lower section.

When users view information, the visual hierarchy allows users to immediately distinguish content that is more relevant to their target from content that is irrelevant to their target, and focus on the information they care about. Because they can easily pass through irrelevant information, they can find things more quickly.