Gestalt Principles define some basic laws that help us understand how the human mind perceives visual stimuli.
For example: what do you see in the cover image of this article? Most people can see a 3D cube, but if you look up close, it’s just circles cut into three parts. This means we recognize the whole before seeing the individual parts.
Gestalt psychology was founded on works by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. They emphasized that humans perceive entire patterns or configurations, not merely individual components.
Keep reading to know more about user perception and their behavior when interacting with digital products. This awareness will help you design better user interfaces!
What is Gestalt and why is it relevant to UI Design?
Gestalt principles are about how humans organize their perceptions. They inform us on how people form perceptions and give meaning to those perceptions based on their existing knowledge and prior experiences.
Therefore, the essence of Gestalt is that we make meaning when we create perceptions through our interaction with the external world. In other words, it is about how we make sense of the world and the complex elements we see. We engage memories that look inward to reason or understand how the experience impacted us.
Thus, how we perceive and construct meaning is inextricably embedded in who we are and what we are willing to do.
Why is it important to your design projects?
We like to find simplicity and order in complex shapes because it demands the least cognitive effort from us. This means designers can use these principles to prevent users from becoming overwhelmed with information.
Understanding Gestalt principles can make them more aware of elements and components during the design phase.
To summarize, having a solid comprehension of how Gestalt principles work will help you in three ways:
- To determine which design elements are most effective in any given situation. For example, deciding on a background shading, determining visual hierarchy, grouping similar items, or distinguishing them into different groups;
- Knowing how these psychological principles influence our visual perception allows designers to direct users’ attention to specific points of focus that will lead to taking actions and create behavioral changes;
- At a higher level, Gestalt principles help design products that solve user needs and help them complete their tasks in a pleasant and objective way.
This way, it is necessary to explore how people perceive information so we can use the insights to provide users with excellent navigation.
It is also important to remember that UI Design is part of UX Design, and its priority is to put the user at the center of design decisions throughout the process. Therefore, designers aim to provide answers and help users achieve their needs.
So, let’s see how each Gestalt principle can positively affect the user interface.
Reading tip: Nielsen’s Heuristics: 10 Usability Principles To Improve UI Design
The 7 Gestalt principles
According to Gestalt psychologists, the fundamental principle of perceptual grouping is the law of Prägnanz (also known as the law of good Gestalt). The law of Prägnanz says that we tend to experience things as regular, orderly, symmetrical, and simple.
Of several geometrically possible organizations that one will actually occur which possesses the best, simplest and most stable shape. — Kurt Koffka
The law of Prägnanz implies that, as we perceive the world, we eliminate complexity and unfamiliarity so we can observe reality in its most simplistic form.
So eliminating unnecessary stimuli help the mind create meaning.
Gestalt psychologists refined the law of Prägnanz, which involved putting down laws that, hypothetically, allow us to predict the interpretation of sensation. Those laws we called Gestalt Principles.
The principles were based on similarity, proximity, and continuity.
- Proximity.
- Similarity.
- Continuity.
- Closure.
- Figure-ground.
- Common-region.
- Focal points.
1) Principle of proximity
This law affirms that we perceive elements that are closer to each other to belong in the same group. In the same way, if elements are distant, the human eye catalogs them into a different, separate group.
Looking at the example below, both images have the same elements, but changing their proximity causes the relationships between the elements to be perceived differently.
Therefore, we perceive the elements in the first image as one group or one block of information. While in the second image, we see them as two groups.
Application in UI Design
Thus, designers can use this principle to decide how to position elements. This way, they will add space between elements according to their need if they want users to perceive different information to be part of the same group or not.
In the example below, the labels are right next to the correspondent text fields so users can quickly understand where they have to write their Name and Email:
Whereas in the following example, there are different blocks of information, elements containing icon + title + text. But the proximity between these elements creates the perception of a larger group, so when we look at the image, we instantly perceive three groups.
2) Principle of similarity
The Gestalt principle of similarity explores the fact that similar elements are perceived as being part of the same group and having the same function.
In the image below, we have a group of elements, but the color variation makes users perceive them as a different group.
Application in UI Design
See the image below. How many groups can you identify?
Observe the following:
- The menu items have the same style and are positioned close to each other. So it is clear that their function is the same (links) and that they differ from the gray text scattered around the website. Moreover, the group is broken slightly when a link is clicked on (more about this in the Focal Point Principle);
- Logos are also perceived as a group because they have the same visual treatment.
In the following example, we can see that text fields have the same function, but the button, despite having the same shape, is perceived with a different functionality because of its accent color:
3) Principle of continuity
The law of continuity states that elements positioned in a line (or curve) are perceived as a continuation, a sequence of facts arranged in an order, or a follow-up of the previous element.
Application in UI Design
Booking website uses the continuity law to incentive users to fill out the search form on their homepage in the “correct” order.
Extra tip: continuity illusion
Within the study of Interaction Design, Gestalt principles are applied strategically to emphasize affordances and signifiers.
So one way to use continuity is to create the illusion that it exists so that users understand that there’s more to see.
In the following example, the previous and next images of the carousel are cut off on the screen edges, giving us the impression that we need to swipe left or right to see more, providing intuitive navigation to users.
4) Principle of closure
You have probably seen a partial image that, even though it wasn’t completely finished, you could tell what the picture was.
That’s the law of closure. The human brain automatically fills in the gaps that don’t exist. This Gestalt principle states that we use memory to convert complex objects into simpler or known shapes.
Take a look at the image below, for example. The illustration has a few black shapes, but you can tell it’s a dog.
Application in UI Design
In the example below, how elements and texts are organized gives us a clear idea of which content belongs to the same group.
The same happens in the following example; there’s no need to draw a line because it is clear where one section ends and the other starts.
Extra tip: illusion of completeness
Working oppositely to the Illusion of Continuity cited in the previous example, the illusion of completeness creates the impression that the content is over or that the page is complete.
In the example below, if you look at the first image, there’s no indication that there’s more content to see. So if this is intentional, great, but if there’s more content for users to see, you need to make this obvious to them.
Applying the closure principle to prevent the illusion of completeness means segmenting page elements above the fold so that they appear incomplete and encouraging users to scroll down or swipe to the sides.
For example, in the second image, you can see the button “See all recent,” making it clear to users that there’s more content to see.
5) Principle of figure-ground
This Gestalt law states that our perception instinctively perceives objects as either being in the foreground or the background.
One of the first things people involuntary notice when using a website or app is determining which is the figure and which is the ground.
We cannot focus on the image prominently in the front and on the ground simultaneously.
Application in UI Design
This principle is very used in navigation and dialog boxes. Notice in the example below that the background becomes secondary when a dialog box emerges.
Reading tip: Color management: Keeping Your Colors Consistent
6) Principle of common region
The common region principle is related to proximity. This principle states that when objects are positioned within the same closed region, they are perceived as part of the same group.
Application in UI Design
The common region principle is helpful when we need to separate content, so we can perceive them as different groups.
So adding borders or other visible barriers is a good way to create a perceived separation between groups of objects when they are in a close region.
7) Principle of focal points
The focal point law states that any element that stands out visually captures and holds the viewer’s attention.
Application in UI Design
Thus, in interfaces, we actively use this principle when dealing with visual hierarchy or when we must emphasize the main action that a user should take.
In the examples below, we can see this applied in different ways.
The typography emphasizes the word “free,” which stands out and makes it easy to memorize. In addition, the components in red contrast with the gray map, helping the process of locating these points of sale.
In the image below, we can see that when a body part is selected, this becomes the focal point. At the same time, the green button highlights there’s an action the user can take.
Designers can apply these principles together with a User-centered design approach to ensure that UIs are built in the best way possible to deliver a great user experience.
.svg){kind=small}
