Understanding the gestalt principles of perception for UX
As humans, we have a unique talent. Our brains are designed to identify patterns and fill in blanks. That’s why we see shapes in clouds, faces in the tea leaves at the bottom of our mugs and patterns in rock formations.
This ability to create a whole that’s more than the sum of its parts isn’t an unknown phenomenon. In fact, it’s one of the underlying ideas of what’s known as the gestalt principles of visual perception.
As UX designers, user researchers and web designers, an understanding of these principles can help you to better understand how your users perceive and interpret your products and services — and build better human experiences.
What are the Gestalt Principles?
All the way back in the 1920s, a group of German psychologists (Wolfgang Köhler, Max Wertheimer and Kurt Koffka) wanted to better understand how humans perceive the world around them. They were interested in learning more about how the human brain makes sense of chaos.
These “gestalt psychologists” found that humans tend to group different elements together, identify patterns and find order in disorder. Interestingly, the psychologists found that humans don’t do this randomly — there are a number of principles that our brains use.
At the time, the growing field of design began to use the gestalt psychology principles in order to create designs that are more than the sum of their parts. The hidden arrow between the E and the X in the FedEx logo is just one example of this.
Understanding the Gestalt Principles
What happens when someone first sees the logo of your organization? How do they experience seeing the design for the first time? Gestalt psychology has a powerful role to play in how we perceive objects. If you want to create products and services that resonate with the people you intend to serve, understanding the gestalt principles is a good place to start — and it’s not that difficult.
With a solid understanding of these principles, you’ll be able to better direct people to what you want them to see, know which elements to use and when, and build better human experiences.
Here are the gestalt pricinples that we’ll be covering:
Similarity
Principle: The gestalt principle of similarity states that when things appear to share some visual characteristics, they are assumed to be related in some way and we group them. These things don’t need to be identical, they just need to share a visible trait such as shape, size or color.
Look down from a high-rise building at a parking lot and you’ll immediately start grouping cars that are the same color. This is the principle of similarity and it’s a useful tool for UX designers.
How to use this principle: You can use color in your products and services to indicate items with common functionality, for example in CTA buttons or links. On the other hand, you can use shape to indicate grouping.
Figure/Ground
Principle: Our brains instinctively distinguish between objects in the foreground and objects in the background.
Usually, we will interpret the larger area of an image as the background and the smaller part of the image as the foreground. Whenever someone first opens your mobile app or lands on your website, the figure/ground gestalt principle shows them what they should be focusing on.
How to use this principle: Use figure/ground to guide users to what you want them to see. This is particularly useful when you have something active that you need them to take action on, for example, a sign-up form or a search bar. In the case of the sign-up form, having the rest of the screen fade into the background can show users that the form is currently what they should be focusing on.
Proximity
Principle: Things close together appear to be more related than things that are further apart.
The gestalt principle of proximity is one of the most powerful tools at your disposal, and can easily override other factors like color and shape. Mechanisms of perception (like proximity) compete with one another, and it’s important to understand which mechanisms you can use to accomplish your goals.
How to use this principle: You can use the gestalt law of proximity to get your users to identify the organization or structure that you want them to see without using borders. A good example of this would be grouping items on an online shopping website.
Closure
Principle: When we look at a complex arrangement of individual elements, we first try and identify a single, recognizable pattern.
The law of closure allows us to look at an image with missing parts, fill in the gaps and recognize the complete image so we can understand the pattern. This law is commonly used in logo design, where our brains fill in the gaps to understand the complete image.
How to use this principle: You can use closure to create delight (as in the example above), but it’s important to recognize that closure can also be used to mislead and to harm. As Andy Rutledge explains, even when closure works, it could be telling you a lie. It’s your job as a UXer to be aware of this.
Common region
Principle: When objects are located within the same closed region, we perceive them as being grouped together.
Common region is closely related to proximity and is an excellent tool for separating groups of objects, even if they’re close in proximity, size, color or shape.
How to use this principle: Use visible borders or barriers in your designs to create a sense of separation between different groups of objects.
Symmetry and order
Principle: Our brains tend to group together objects that are symmetrical with each other.
In German, the law of symmetry and order is known as prägnanz, which translates to “good figure”.
How to use this principle: Your designs should be balanced and complete, or you risk having users spend time trying to perceive a larger overall picture.
Focal point
Principle: What stands out visually will capture a user’s attention first.
Focal points are areas of interest or difference within a composition. You can create a focal point by giving it more weight than other elements.
How to use this principle: Consider the focal point principle when you need to draw a user’s attention to an element on your page. For example, a call to action button or a sign-up button.
Continuity
Principle: Elements arranged on a line or curve are perceived as more related than elements not on the same line or curve.
Once our eye begins to follow something, it will continue in that direction until it encounters another element. A good example of the continuity principle is a line with an arrow at the end. It indicates that we should follow the line to see where the arrow is pointing.
The continuity principle isn’t all about physical attributes such as lines and arrows. Continuity can also come from the logical groupings of items, for example in a field. When collecting information about a user’s location, for example, all geographical information should be arranged together.
How to use this principle: Consider the continuity principle both in terms of physical attributes and logical attributes — especially when designing forms.
Common fate
Principle: We perceive elements moving in the same direction as more related than elements that are moving in different directions or stationary.
We use the principle of common fate every day of our lives. In fact, we as humans are wired to recognize contrasting movement over any other visual cue, whether it’s color, size, contrast or tone. Consider driving down the highway. The cars moving in the same direction as you are background noise, but when a car enters your lane from a side street you tend to immediately notice and respond.
How to use this principle: This principle is key in motion design, with functional animation using common fate to guide our eye.
Wrap-up
Building a solid understanding of the gestalt principles can help you to build better human experiences. Whether you’re working on a new website or the sign-up flow in a mobile app, knowing how (and when) you should deploy these principles can mean the difference between a design that’s user-friendly and one that’s misleading.
Originally published at https://blog.optimalworkshop.com on March 5, 2021.
