Cognitive and design-understanding the UI design guidelines (2) to observe the structure and optimize our vision

In the early 20th, a group of German psychologists tried to explain how human vision works. In experiments, they have a basic discovery that human vision is holistic: our visual system automatically constructs a structure for visual input and senses shapes at the neural system level, images and objects, rather than just looking at the sides, lines, and areas that are not connected to each other. This is the famous "style Tower" principle.

Although it is not a basic explanation of visual perception, it is still a reasonable description framework. The style tower principle provides a useful basis for graphic and user interface design principles.

The most important principles of the tower are: closeness, similarity, continuity, closeness, symmetry, subject/background, and common destiny.

 

Style tower principle: closeness

The closeness principle is that the relative distance between objects affects our perception of whether and how they are organized together. Objects that are close to each other (relative to other objects) seem to belong to a group, and those that are far away are not.

For example:

As a group, Figure A shows the rows of the Sun, and Figure B shows the columns of the sun.

The closeness principle is significantly related to the software layout. Designers often use grouping boxes or splitters to separate controls and data on the screen. For example:

However, based on the closeness principle, we can draw closer the distance between some objects and draw closer the distance from other objects to visually form a group, you do not need to use grouping boxes or separators. This reduces the visual clutter andCodeQuantity. For example:

On the contrary, if the controls are not properly placed, for example, if the related controls are too far away, it is hard for people to perceive that they are related, and the software becomes hard to learn and remember, such as an installationProgram, Representing the horizontal placement of the six-to-one Buttons selected for the two items, but according to the closeness principle, their spacing makes them look like a single button placed vertically in two columns, each column represents one of the six options. You cannot learn how to operate these options without trying.

 

Style tower principle: similarity

If other factors are the same, similar things seem to belong to a group. For example, although the distance between rows and columns is similar, we can see that the hollow Sun belongs to a group.

 

Concept of a lattice tower: Continuity

The two principles above are related to our attempt to group objects. The other principles are related to our visual system's attempt to parse fuzzy or fill in omissions to perceive the entire object. The first is the continuity principle.

Our vision tends to perceive continuous forms rather than discrete fragments.

For example, in the figure below, we can see that the two lines are not four lines, nor two V Lines. Our visual system will automatically fill in the omissions.

Another special example is the IBM logo, which consists of non-contiguous blue blocks, but is unambiguous at all, so it is easy to see three bold letters.

Another example is the slider for adjusting the volume. Even if there is a handle here, we think of it as a whole, rather than two slide bars separated by the handle.

 

Style tower principle: Closed

What is related to continuity is the closeness principle. Our visual system will automatically try to close open images so as to perceive them as complete objects rather than scattered fragments.

We can perceive the scattered arc shapes in the left-side graph as a circle. You can perceive the image on the right as a white triangle, and the other triangle and three black circles are combined, even though the screen actually only has three V-shaped and three black peas.

The closeness principle is often applied to graphic user interfaces. For example, the GUI often uses a stacked form to represent a set of objects, such as documents or messages. Simply displaying a complete object and the corner of its "back-end" object is sufficient for the user to perceive the whole composed of a stack of objects.

 

Concept of a lattice tower: Symmetry

The symmetry principle captures the third tendency of observing objects: we tend to break down complicated scenes to reduce complexity. There is more than one possible resolution of information in our visual region, but our vision will automatically organize and analyze the data, so as to simplify the data and give them symmetry.

 

Style tower principle: Subject/background

The subject/background principle puts forward that our brain divides the visual area into the subject and background. The subject includes all the elements that occupy our primary attention in a scenario, while the rest are the background.

The subject/background also indicates that the characteristics of the scenario will affect the analysis of the subject and background in the scenario by the visual system. For example, when a small object or color block overlaps a larger object or color block, we tend to think that a small object is the subject and a large object is the background.

For example, when an object overlaps, we regard the small one as the subject on the background.

In User Interface Design and webpage design, the subject/background principle is often used to rotate the impression-induced background after the main content is displayed. The background can be used to transmit information (the current location of the user), or imply the emotions expressed by a subject, brand, or content. For example, you can set a watermark-like image on the background of a webpage to display the topic of the website, or when a message is displayed on other content, for example, when you log on to Baidu Library, the logon dialog box is displayed, and the content on the webpage is grayed out, but you can still see it. This helps users understand the environment in which they interact.

 

Principles of the Tower: Common Destiny

The first six principles are aimed at static graphics and objects. The last principle, shared fate, involves moving objects. The principle of common destiny indicates that a moving object is perceived as a group or related to each other. The most obvious example is when dragging files on the desktop, such:

We will find that some of them are moving, while others are static. We will think that these movements are a group.

 

Combine the principles of the tower

in real-world visual scenarios, the principles of various formats work together rather than isolated ones. At the same time, when using the principles of all the styles, the design may lead to unintentional visual relationships. The recommended method is to use the principle of each tower after designing a display-closeness, similarity, continuity, closeness, and symmetry, the subject/background principle and the principle of common destiny are used to determine whether the relationship between each design element conforms to the original design intention.