Editor's Introduction: How to grasp the user's psychology in product design, and at the same time improve the user experience, it can also achieve the aesthetic pursuit of design? Perhaps, you can combine gestalt psychology principles for reasonable UI design. In this article, the author has made an interpretation of the application of Gestalt principles in product design, let's take a look.
Today I would like to share with you the principles of Gestalt psychology design, which was published by Max Wertheimer in 1923 and became the most influential early proposal.
Gestalt principles are an important collection of ideas that any designer can learn, and their implementation can greatly improve not only the aesthetics of the design, but also its design aesthetics, its functionality, and user-friendliness.
Share outline:
Near laws
Similar principle
Closed principle
The principle of continuity
The principle of symmetry
The principle of common destiny
Figure principle
First, the law of proximity
Things that are close to each other are more relevant than things that are separated from each other. Our brains treat these tightly placed sets of elements as a group, and the law of proximity can more clearly understand the relationship between elements, which is more widely used in UI.
So how is it applied in the UI?
In the card on the left, the text layout is a bit scattered, resulting in misjudgment of information understanding. The card on the right Chinese typographic information set for the same theme.
Second, the similar principle
Elements with similar visual appearance are more likely to be considered by users as similar objects. In Gestalt theory, similar elements are visually grouped and arranged together by color, shape, size, and so on.
Although the spacing on the left side of the image above is the same, but the colors are not the same, our visual perception will automatically treat the two colors as two groups.
How is it applied to UI design?
As shown above, in the UI design, the two buttons are the same size shape and the color is not the same, so we will think of it as a function of two important degrees.
Because of the similarity, we know that colored fonts are clickable. Similarity can make the entire UI system more consistent and the experience more friendly.
Third, the principle of closure
When the object is incomplete, we prefer the complete shape, so we automatically fill the gap between the elements to perceive the complete image, such as shapes, letters, pictures, etc. Specifically, when some part of the entire picture is lost, our perception will fill the gap in the vision.
A very famous picture on the Internet
In the gif above, even if the puppy element is composed of irregular dots, we can identify it.
The principle of closure is used more in the loading indicator, which is easy for users to understand. The left side of the load is too scattered to make the user think of the load, so the right side of the idea has the same idea as the closed principle.
The principle of closure is also common in graphic LOGO design.
Fourth, the principle of continuity
The law of continuity generally starts from the endpoint of a straight line or curve and continues to reach the end point, and we perceive that the objects tend to be arranged in the form of lines or curves that are more relevant.
In the label bar design, we treat horizontally connected together as a group to express a functional meaning.
In the design of Apple and Medium in the picture above, the labels are arranged horizontally in a group, which is convenient for users to swipe horizontally to find the corresponding function.
Fifth, the principle of symmetry
Our brains see symmetrical objects as part of the same set. They give the impression of stability and order, and symmetrical UI elements help scan content and browse information.
In the Quark and Naver product designs, the bottom icon grid menu uses a symmetrical balance to arrange the functions on the palace grid list.
Sixth, the principle of common destiny
The law of common fate means that elements moving toward the same side and having the same speed are organized together under all other conditions.
This principle is the basis of motion design. Each meaningful animation uses a common destiny to direct the user's gaze in the right way. This helps to relate the content to the triggered action.
As shown above, sliding to the left reveals more content, so when designing, you need to ensure that they have common properties in a uniform orientation.
Seventh, the principle of map and land
The human eye is able to separate objects according to different focusing plans. We intuitively know which elements are placed in the foreground and which elements are placed in the background.
When the modal pop-up window is available, you can witness the practical use of the "Graphical Ground Principle".
As in the above pop-up design, we often overlay the background black to highlight the foreground pop-up content.
In the above figure, the principle of map and place is used on the layout to clearly distinguish the information hierarchy and create a visual focus through the relationship between the circle and the front and back of the shoe.
Eighth, to sum up
Gestalt psychology knowledge is used in UI design far more than I said today, and you can slowly understand the application in project practice. This is a relatively important design theory academic, I hope that everyone can master the learning and apply it.
#专栏作家 #
Tony, WeChat public account: Kung Fu experience design, everyone is a product manager columnist. Baidu visual experience designer, has always insisted on original articles, willing to help newcomers. He is good at portfolio guidance, written test question guidance, UI visual creativity, design trend style, etc.
This article was originally published in Everyone is a Product Manager. Reproduction without permission is prohibited.
The title image is from Unsplash, based on the CC0 protocol