Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand.
“Gestalt” is German for “unified whole”. The first Gestalt Principles were devised in the 1920s by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler—who aimed to understand how humans typically gain meaningful perceptions from the chaotic stimuli around them. They identified a set of laws which address the natural compulsion to find order in disorder. According to this, the mind “informs” what the eye sees by perceiving a series of individual elements as a whole.
Professionals in the then-growing industry of graphic design quickly adopted these principles, and designers have since used Gestalt Principles extensively to craft designs with well-placed elements that catch the eye as larger, whole images.
What are the Gestalt grouping principles?
The Gestalt principles are psychology laws that describe how the human brain processes and groups visual elements. In total, there are seven Gestalt principles:
- Continuity principle
- Similarity principle
- Proximity principle
- Closure principle
- Common region principle
- Figure-ground principle
- Focal point principle
Each of these principles expresses a unique way the human mind processes and interprets complex visual elements into more manageable patterns. Although these were originally coined by the Gestalt psychologists we mentioned earlier, these Gestalt laws are heavily relied on by UX designers today.
The 7 Gestalt principles are fundamental in the design world; thus, they influence the user's experience. If I had to explain them in one sentence, they help the human eyes fill in the 'gaps' and perceive separate elements as a whole" — Emilia Negoescu, Growth Designer, Stoica.
There are seven ways the human brain can recognize patterns, each of these Gestalt laws has its own rules, some of which overrule others.
1. Continuity principle
The mind will always tend to follow the simplest line pattern on the page, even if they are not obviously linked. In the example above, the mind disregards color for grouping the dots. Instead, the mind registers each curved line as one figure.
2. Similarity principle
Our mind naturally groups similar things, even if they are not physically together. We look for common patterns in colors, shapes, and sizes. The mind also tends to think that similar things have the same function. It's the foundation of stereotyping.
In the above example, the mind will group all violet dots and presume they serve the same purpose, even though they are not physically together on the page.
3. Proximity principle
How close or far apart objects are depends on how close we consider they are in function to each other. Proximity is exceptionally interesting as it tends to override other Gestalt principles.
We tend to link visual elements that are close together as a whole. At the same time, if things are far apart, we consider them as doing different things even if they are visually the same.
When it comes to adjacent and overlapping objects, we consider their function to be even stronger than other objects. In the example above, the brain will consider overlapping to have a stronger relation than objects simply close together.
4. Closure principle
Out of all of the Gestalt principles, closure is probably one of the most interesting. Humans naturally perceive objects as complete, even if they are not. This Gestalt principle is often in logos. The closure principle means the human brain interprets incomplete lines and patterns as 'closed' to see something they're familiar with.
Taking the Maze logo for the law of closure example. Despite the lines not being connected, the brain completes them anyway and you will still perceive the logo as an 'M.' The logo also plays with continuation, symmetry, and order.
5. Common region principle
Perhaps the most obvious of the Gestalt principles, common region pulls on aspects from proximity vision science but is more straightforward. The common region principle states we group objects when the same barrier encompasses them.
In the example above, we group the shapes by those within the same box, overriding their color or shape connections.
6. The figure-ground principle
This Gestalt principle focuses on how the brain interprets negative space and what it determines as the foreground and the background of an image.
The brain will typically process the smaller item in the image as the 'figure' and the larger item as the 'ground'—immediately processing the figure first.
However, the figure-ground object perception can be influenced by color, focus, and contrast. In the example above, the brain processes the black object first and the white object as negative space—your focal point, therefore, changes per image when only the color switches.
7. Focal point principle
The simplest Gestalt principle, the focal point principle. The brain places a visual hierarchy on things that stand out against a regular pattern. Anything that doesn't follow an order grabs our attention first, and anything following the similarity law wins our attention second.
This is the case in the focal point principle example above; you process the yellow dot for its color before processing anything else—regardless of how centered the dot is on the page.
How are Gestalt principles used in design?
Gestalt principles are used heavily as UX visual perception tactics. These design elements help guide users through products or websites without needing to give obvious direction.
1. Continuation design example
You'll most commonly see this Gestalt principle with in-app onboarding or blogs. It's a fantastic UX example to encourage users to continue through flows or keep reading.
Airtable uses continuation in their onboarding visuals to acclimatize users to this learning style and better process the educational journey.
2. Similarity UX example
You'll find Gestalt laws peppered throughout the Maze website. Many brands use similarity design elements to create a clicking habit for users. CTAs are often the same color and shape on websites to subconsciously teach users where to click and what to register as a clickable opportunity.
Chameleon discussed in their article “First-Time User Experience” that it only takes users 50 milliseconds to assess the visual appeal of a website or a product design. The similarity principle on your homepage can massively aid a positive and seemingly familiar experience for new visitors.
3. Proximity in-product example
Bonsai, a tool to help freelancers run their business online, uses proximity principles to group certain resources. In the example above, you'll see the organization of their proposal templates helps users easily navigate to the template they need while assuring them that all of these templates are proposals.
You'll see this Gestalt theory most commonly in e-commerce websites as the Gestalt principle can subconsciously encourage shoppers to buy more 'similar' items.
4. Closure logo example
As we mentioned earlier, you'll see this Gestalt principle most commonly in logos. They are a great design element to play with and allow for more creative freedom when using the logo across various brand assets.
5. Common region principle in-app example
As this is one of the most basic ways of displaying visual hierarchy or grouping visuals using Gestalt psychology, we see it a lot within web products and apps.
Codility, a tech recruitment platform, uses common region principles within its application interface to help users navigate and group different areas of the tool.
Emilia tells us more:
The common region principle organizes and separates content, boosting hierarchy and scannability. Often found in cards, banners, tables, that have a defined rectangular area with different information presented as one." — Emilia Negoescu, Growth Designer, Stoica.
6. The figure-ground onboarding example
Brands will rarely use a flamboyant example of the figure-ground principle in their UX/UI design. However, you'll see it a lot as above. Product modals or website pop-ups are an easy solution to demonstrate this UI design principle.
Here, Bungalow, a home rental service currently based in the USA, uses the figure-ground Gestalt principle to help with their user onboarding flow and pull the user's attention to where it needs to be.
7. Focal point principle example
Headspace, the popular meditation app, has a tricky task in their product. Headspace needs to encourage users to be active in their product in order to retain them. However, they also need to keep users calm and not feel overwhelmed.
Juggling typical human perception of CTAs, Headspace uses Gestalt psychology around the focal point principle to hit their goals.
Headspace uses this Gestalt principle by placing the retention-focused CTAs in a stronger shade of blue on the app. So, despite multiple options for the user to click in the above examples, they're not overwhelmed with choices and are still subtly encouraged to click the CTA, leading to better in-app engagement.
Wrapping Up
From the same closed region to the figure-ground principle, that’s a wrap on how the human brain can group elements and how your SaaS can use this knowledge to build better products.
Try to optimize your own products to align with each Gestalt law. When you do, you’ll end up in building user experiences that are psychologically easier to process and navigate.