Finding the simplest and direct way to interpret incomplete visual information

If your first impression of a design is very deep, or if you instinctively feel that a design is very strong, then it is very likely that you will be "Gestalt"!

Many design preferences currently apply one or more Gestalt psychology principles. This move will not only make the design more smart feeling, but also easier than the general design to retain the appreciation of the eyes.

The gestalt is the transliteration of German gestalt, which is often translated into form (form) or shape, so the starting point of Gestalt psychology is "shape". But the shape is not just the form or shape of the general meaning, but also the whole of experience organized by perceptual activity, and the Chinese translation of "Gestalt". It considers the nature of the overall decision part, and partly in conformity with the whole.

The core of Gestalt psychology: Finding the simplest and direct way to interpret incomplete visual information.

In addition to design, Gestalt psychology plays its part in the daily life of communication: for example, a smiley face in an email or message: D, it simply adds a letter to a symbol, and people express the meaning of laughter through them. "Symbolic expression" is also the Gestalt psychology is playing a role.

One of the most classic cases in Gestalt psychology

Therefore, Gestalt psychology in the interactive design of Web pages or applications can instruct designers how to convey richer information to users in a limited space. Flexible use of gestalt psychology can help designers to design an architecture or a subordinate relationship within a page, and use these principles to design elements of the page that are particularly important to the user's attention, and to create a balance and solidity that is profoundly influential. These designs can make it easier for users to interpret our interface.

We've got some idea of gestalt psychology, so how do we use Gestalt psychology to make our design more influential?

Now, let's take a look at the Five Principles of Gestalt psychology:

The law of similarity: The subconscious mind of a person is automatically integrated into a set or a whole in terms of shape, color, size, brightness, and other similar elements in sight.

We compare the following two pictures, the left side of the picture is black dot, will make us feel that they are a whole. At this point, if we change some of these black dots into red dots (the right one), according to our subconscious classification, we automatically set the black dots together, and the red dots are grouped together, each of which becomes a grouping. So the original unitary whole was cut into five groups. Following

According to the principle of similarity, it is easy to assemble the elements belonging to the same kind of purpose. For example, the image below is a screenshot of the contents of a system folder, and usually the same type of file appears in the folder with the same icon, so even if the files are fragmented, we subconsciously group the files below.

In the other case, when I circle a part of the file, the selected and unselected files become visually different in both sets of content.

So the similarity rule can be applied in the following form design, even if the input frame is far away from the main content, but the user will still link their two one by one corresponding.

The law of proximity: in consciousness, we often tend to integrate the elements of space or time into a set or a whole.

Continue to take the previous point for example, the dots at this point, although red and black are arranged in a piece, but we will at this time the distance of the red and black points into a group.

This principle is the most common form of page content in a Web page, and the page content is grouped by leaving white (whitespace or native space).

For example, the bottom of this Baidu paste directory local design. By placing the contents of the same directory slightly closer to one another, and separated from the other directory a relatively large distance. In visual reading, users will naturally agree that the following content is divided into two themes.

For example, the navigation design of the page, the main navigation and auxiliary navigation are generally as close as possible, in the same block. This makes it easier for users to understand the oneness of primary and secondary navigation, and to differentiate between assisted navigation and content.

In the design of mobile phone applications, the most common approach is the grouping of iOS and the separation of navigation bars.

The above two principles and their extension, very widely used in the content of the organization, and packet design. It plays a very important role in guiding the user's visual flow and facilitating the user's interpretation of the interface.

The law of closure: when elements are incomplete or non-existent, they can still be identified.

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. For example, the graph below, even if missing a small mouth, people will still according to their own experience, as a circle.

The most common of this rule is the icon design, in the minimalist language to convey more content, such as:

We can also find the closure principle in web design. For example, the principle of closure allows us to see the existence of navigation, or to understand the complete navigation of a series of circles rather than a separate circle.

Symmetry law: The symmetry of multiple objects will be accepted as a whole, even if there is a certain distance between them.

Symmetrical design gives people a sense of stability, balance, and consistency. The symmetry is not necessarily the structure of words, but also the symmetry of color or block.

For example, the following is the BBC News World's navigation design, even though there is a gap between the two, but symmetrical and similar construction patterns, so that audiences see it as a whole, understand their differences and relations.

Continuity: Consciousness is the extension of visual, auditory, or displacement according to certain laws.

People's vision has a movement of inertia, can be based on the extension of the relevant laws of their visual flow guide, such as the following visual guidance of the site.

For example, the most common in mobile phone design is the so-called dew point.

The following is the most common coverflow design. Even if the contents of the two sides are not fully displayed, but the user can be consistent with the exposed content of the small angle and reading content easily linked to understand that still contains content. and understand how to get to the next content.

In addition, in the above five principles of the basic transformation, the later scholars for the Gestalt summed up more awareness of the law, such as graphics-background perception, the same principle, dimensional constant law and so on, more content Baidu, you will know more.

Article Source: Baidu Mux