The 7 Gestalt Principles Every UX Designer Must Know

Craig Barber
September 13, 2023
8
mins read

Welcome to a captivating exploration of the world of Gestalt principles and their application in UX design!

As designers, we constantly strive to create seamless experiences that engage our audience.

Understanding the Gestalt principles can unlock new perspectives and empower us to design experiences that truly resonate with users.

So, let’s dive right in and discover the magic behind these principles and their relevance in UX design.

What are the Gestalt Principles?

What are the Gestalt Principles

The Gestalt Principles are a set of fascinating principles that explain how our minds perceive and organize visual information.

The word “Gestalt” actually comes from German and roughly translates to “shape” or “form.”

These principles originated in the early 20th century from the work of a group of German psychologists who sought to understand how our brains make sense of the world around us.

They discovered that we tend to perceive things as a whole rather than just a collection of individual parts.

The Gestalt Principles describe various phenomena like similarity, proximity, closure, and more, which influence how we perceive objects, patterns, and images.

It’s truly incredible how our brains naturally apply these principles, and they play a significant role in fields like design, psychology, and art.

Now! Let’s get to the principles…

1. The Gestalt Principle of Figure-Ground

The Principle of Figure-Ground​

Our minds naturally separate objects into foreground (figure) and background (ground).

Applying this principle in UX design involves distinguishing key elements from the background to help users focus on the most important information.

By creating contrast and visual hierarchy, designers can guide users’ attention and enhance the overall clarity of the interface.

Apple uses the Figure-Ground principle:

The Principle of Figure-Ground 1​
A great example of Figure ( phones ) and Ground ( bg and text )

Video explainer for Figure-Ground:

2. The Gestalt Principle of Similarity

The Principle of Similarity​

Objects that share similar visual properties, such as colour, shape, or size, are perceived as belonging to the same group.

By leveraging similarity, designers can establish visual patterns and group related elements together.

This aids users in quickly understanding relationships, organising information, and navigating through the interface effortlessly.

Similarity used in website design:

The Principle of Similarity​ 1
Similar items on this web page indicate they are all part of one group

Video explainer for Similarity:

3. The Gestalt Principle of Proximity

The Principle of Proximity​

Elements placed close together are perceived as related.

Utilising the principle of proximity, designers can effectively group related items, creating visual associations that communicate their connection to users.

By arranging elements with appropriate spacing, we can simplify the cognitive load and enable users to grasp information more intuitively.

Proximity used in website navigation design:

The Principle of Proximity 1​
This nav bar is an example of using the Proximity principle

Video explainer for Proximity:

4. The Gestalt Principle of Closure

The Principle of Closure​

When presented with incomplete objects, our minds tend to fill in the missing parts to create a complete and meaningful image.

By strategically using this principle, designers can leverage users’ natural inclination to complete patterns and enhance visual communication.

Employing partial shapes or suggesting missing elements can create a sense of continuity and engage users’ curiosity.

Carousels are an example of the Closure Principle:

The Principle of Closure
Carousels on this page use the Closure principle

Video explainer for Closure:

5. The Gestalt Principle of Common Region

The Principle of Common Region​

The Gestalt principle of Common Region, relevant to UX design, states that when elements are enclosed within a shared boundary, users perceive them as a unified group.

This principle helps designers organise and group related elements together visually, enhancing user comprehension and creating a cohesive user experience.

By using common regions, such as grouping similar buttons within a box, designers can facilitate intuitive navigation and improve the overall clarity and organisation of their designs.

An example of Common Region in app design:

The Principle of Common Region 1​
This app design uses Common Region to keep same elements together

Video explainer for Common Region:

6. The Gestalt Principle of Common Fate

The Principle of Common Fate​

Elements moving in the same direction or with a shared fate are perceived as belonging together.

Applying this principle, designers can animate elements in a unified manner to communicate relationships or indicate functionality.

By employing motion and interactive elements thoughtfully, we can enrich the user experience and foster a sense of cohesion.

iPhone app icons are an example of Common Fate principle:

Law of common fate
The home screen on your iPhone is an example of the icon's using Common Fate as they all 'move' together

Video explainer for Common Fate:

7. The Gestalt Principle of Connectedness

The Principle of Connectedness​

The Gestalt principle of Connectedness states that visually connected or grouped elements are perceived as a single unit.

In UX design, it helps create intuitive interfaces by visually grouping related elements, establishing hierarchy, aiding navigation, and forming meaningful relationships between data points.

Connectedness being used on a payment flow navigation screen:

Progressive Disclosure
We can see the steps are connected by a line, this is Connectedness at work

Video explainer for Connectedness:

Conclusion

Congratulations! You’ve now journeyed through the realm of the Gestalt principles and their profound impact on modern UX design.

Armed with this knowledge, you possess a powerful toolkit to craft experiences that seamlessly engage and delight users.

Remember to leverage the principles of figure-ground, similarity, proximity, closure, connectedness, common region, and common fate in your design endeavours.

By implementing these principles effectively, you’ll be able to create intuitive interfaces that facilitate user understanding, evoke positive emotions, and leave a lasting impression.

Want more laws and principles of UX design? Check out this post.

You may also like

What is ux design

UX Design: The Ultimate Guide for Beginners

Discover the fascinating world of UX design, where aesthetics meet functionality with our comprehensive guide
UX design software

Essential UX Design Software You Need Now

Discover the best UX design software for digital product designers
UI design software

The Best UI Design Software for Effortless Designing

From beginners to seasoned professionals, find the ideal UI design software for your skill level