Gestalt psychology believes that perception cannot be decomposed into smaller components. The basic unit of perception is perception itself. The tenet of Gestalt psychology is that the whole is different from the sum of the parts. Gestalt psychology emphasizes the connection between the overall role of structure and the constituent components that generate perception.
When I switched from testing to interaction designer, I confirmed that I am good at distinguishing the pros and cons of products and identifying the points for improvement of the product, although many of the points to be improved still lack data and user arguments. Before, I was still a typical user thinking, and the judgment of the actual effect of the product was very dependent on data and user feedback. Until I understood the Gestalt principle, it changed the way I think about design and gave me a thinking framework for analyzing the reasons. This way of thinking and working framework has greatly improved my work ability and work skills.
When conducting product reviews, it is necessary to understand the design patterns and paradigms used in product design, but often this has limitations. Having a complete thinking framework can make it easier for us to understand and think about why and how to do it, and it will also make the design plan more reliable. The Gestalt Principles are such a thinking framework.
Gestalt Principle
Gestalt psychology, also known as Gestalt psychology, is one of the main schools of modern Western psychology. It was born in Germany and was further developed in the United States. This school opposes both the elementalism of American constructivist psychology and the stimulus-response formula of behaviorist psychology. The sum of parts advocates the study of psychological phenomena with a holistic view of dynamic structure. The founder of the school is Wertheimer , and the representatives are Köhler and Koffka .
Gestalt principles mainly include: subject-background principle, proximity principle, similarity principle, continuity principle, closure principle, symmetry principle, common destiny principle, etc.
This article will discuss the application of Gestalt principles in interaction design with examples of Internet products.
subject-context principle
This principle can be understood as "what is important, what is not important", or "subject-background principle".
When the user is in a scene, the instinctive first reaction is to determine which content in the field of vision is important and needs to be perceived immediately, and which content is not important. To accomplish this, the brain needs to separate the elements in the picture into main elements (elements that need attention) and background elements (less important auxiliary elements). The following examples provide some visual cues that can be used to differentiate between main and background elements.
Create Contrast and Contrast
Hero images are by far the most commonly used landing page design, usually accompanied by an obvious CTA button. A good hero image uses the principle of the relationship between subject and background to quickly convey information and make the user's next action obvious.
The hero image used by Moosehead has a clear main body and background, and the main information is highlighted through the optimization of details such as font, font size, and color, so that users can quickly grasp the main information that the page wants to express.
The text (the main information) is white, with large font size and light gray shades, which can make the text protrude in front of the picture (background) in a 3D effect. The white text on the dark picture is very eye-catching, and the background picture is blurred. processing to ensure that the user can quickly focus on the text. The effect of all the above effects is to ensure that the text is the main information, and the background image is only auxiliary information.
Heineken used a video as a background on the hero banner.
When using video backgrounds, messaging and CTA bulging can be challenging, but Heineken solves this problem with large white text and dimming the video brightness. The CTA "Watch the prep talk" is placed on a translucent black background and has two functions: one is to ensure the contrast between the text and video, so that users can read the text b2b data information; the other is to inform users that this is a button that can be clicked (The button has a hover state with increased brightness).
rectangle element
Molson Canadian uses rectangles to distinguish main information and background information, and its homepage is as follows:
When you open the homepage of the website, three elements first come into view: a picture of the beer; a rectangle on the upper right (“Click here to nominate…”); and a long rectangle on a white background (“Great Canadians deserve…”). The rectangle in the upper right corner is clearly a main element: a white border clearly distinguishes it from the background image. The color contrast between the beer image and the background image is obvious; the white rectangle at the bottom is superimposed on the background image, which has a good bulging effect.
shadow
The use of rectangles on the Molson landing page has another important trick: shadows. Notice that the rectangle is shaded, which gives the impression that the rectangle is on top of the wheat field. Molson uses the same trick with his social media images.
Budweiser also used the shadow trick.