How to use the approach of interaction design and Gestalt theory

This article comes from Yahoo ued in China early in the 20th century, a team of German psychologists tried to explain how human vision works. They observed a number of important visual phenomena and compiled a catalogue. Gestalt theory clearly suggests that the eye-brain function is a process of continuous organization, simplification and unification, and it is through this process that it produces a whole that is easy to understand and coordinate.

Our vision system automatically constructs structures for visual input and perceives shapes, graphs, and objects on the nervous system level, rather than just seeing disconnected edges, lines, and regions. "Shapes" and "graphics" are "Gestalt" in German, so these theories are also called visual-perceptual Gestalt (Gestalt) principles.

The approach is the most familiar of the Gestalt theory and is one of the most commonly used laws. It is said that the relative distance between objects will affect our perception of whether and how they are together. Objects close to each other seem to belong to a group relative to other objects. The closer they are, the more likely they are to be grouped together, emphasizing position. In the following diagram, we will divide it into two groups in consciousness.

The approach principle is widely used in the organization of page content and in packet design. To guide the user's visual flow and user-friendly interpretation of the interface plays a very important role, through the principle of the same kind of content to group, while leaving the spacing, will give users the visual order and reasonable rest. Designers often use group boxes or split lines to separate the controls and data displayed on the screen, as shown below.

In addition to the law, there are many important principles, you know? Next I will introduce to you.

Similarity principle:

Similar, sounds very similar to the approach, but they are really different two concepts. Close to the emphasis position, while the similarity emphasizes the content. People often combine things that are obviously common (such as shape, size, color, etc.), where similar parts form several groups in perception. In the following picture, we will naturally divide the black Hat egg and red cap egg into two groups.

In the page design classification uses the text, the color, the image and so on, may distinguish each module and the content better. The following image of Yahoo reading navigation, through the principle of similarity, we can easily distinguish between first-level navigation and level two navigation.

To think differently, the change in color clearly distinguishes the different content, and the reverse thinking in the similarity is a good way to get the focus. This method is widely used in the design of navigation and emphasizing part information, as shown in the following diagram.

Closure principle:

When the elements are incomplete or non-existent, they can still be recognized. In the light of past experience and the overall will of perceived perception, we habitually view the graphic as a whole, so that when we add the missing shape to our heads, we form the graphical effect that we eventually recognize. The following figure, without triangles and circles, fills the missing information in our mental model, creating shapes and graphs that are familiar to us.

The closed principles are often applied to graphical interfaces and page designs, for example, a collection of objects is often represented in a stack in a page, as long as displaying a complete object and a corner of its "behind" object is enough to allow the user to perceive that this is the whole of a stack of objects, as shown in the following illustration.

Continuous principle:

Related to closeness is the principle of continuity, and the principle of continuity is that our vision tends to perceive continuous forms rather than fragmented fragments. One of the most well-known examples of the use of continuous principles in graphic design is the IBM logo. It's made up of discontinuous blue blocks, but it's not so unambiguous that we can easily identify three bold letters, as seen through the blinds, as shown in Figure 9.

There are a lot of principles about gestalt, and they can be used in combination. After we have designed a thing, we can try to use the principle of Gestalt to consider whether the relationship between the various design elements of the original intention of the composite design. Hope that through the introduction of the original Gestalt theory can bring some inspiration