The Gestalt principles are a set of psychological theories about human perception that attempt to explain how humans make sense of the world visually. In design, they each relate to the user experience (UX) in a unique way. If designers learn about them and incorporate them into their projects, they can get more out of each interaction.
1. The Principle of Similarity
The Gestalt principle of similarity states that people tend to group things that look alike. Whether they share the same shape, color, or size, the human brain automatically assumes they are related somehow. UX designers can use this tendency to their advantage by making frequently used features, menus, or controls look similar, making interactions seamless.
2. The Principle of Proximity
The brain tends to group things that are close together. The closer they are, the more related they seem. Conversely, the farther apart they are, the more disparate they look. For example, a poster advertising a local business should have the brand name and address close. Otherwise, the viewer may = subconsciously assume that the information isn’t related and miss it.
Designers can use the principle of proximity to make designs feel more organized. It is also helpful for creating tabs, buttons, menus, or images that feel connected, giving users a sense of structure. Any pieces of textual information relevant to each other should also be close together so the viewer assumes they’re related and reads the entire message.
3. The Principle of Symmetry
Out of all the Gestalt principles, symmetry is the most useful. It can come as a reflection, in a radial, or as a repetition over equivalent intervals. Professionals can direct users to places by grouping symmetrical design elements there. User interface (UI) design does this often. For example, bento, kebab, and hamburger menus are symmetrical, incentivizing users to click.
4. The Principle of Prägnanz
Prägnanz states that the brain perceives ambiguous shapes as simplistic, symmetric, and normal as possible. For example, people perceive the Olympic rings logo as a series of interlocked circles rather than a bunch of individual curved lines. People effectively simplify visuals to make them easier to process.
In design, the principle of prägnanz helps simplify complex designs and reduce visual clutter. Designers can incorporate it into their process by considering the bigger picture. Squinting or taking a step back can help them see how their components relate to one another and flow, helping them enhance their UX.
5. The Principle of Common Region
When objects are placed in the same closed region, the human brain believes they belong to the same group. Since the brain processes visual information about 60,000 times faster than text, it reaches conclusions about designs long before the viewer makes a conscious decision. According to this principle, changing the background color of buttons or tabs could make navigation easier.
6. The Principle of Common Fate
Gestalt principles like this one consider a group’s behavior. People group objects together if they face the same way or move in the same direction. They don’t necessarily need to convey motion. For example, if each product page image is captured at the same angle, the page will seem cohesive.
7. The Principle of Figure-Ground
According to the Gestalt figure-ground principle, people perceive the background and the object of focus as two distinct elements. This is why negative space optical illusions work. Designers can use this principle to create interesting visuals or draw the viewer’s attention to a specific part of their project.
8. The Principle of Past Experience
A person’s background, culture, and past experiences influence how they perceive visual information. This principle is valuable for web and app design, as how professionals craft their UX relies on what assumptions they expect their audience to hold. For example, many people automatically assume “x” means cancel or close.
Skeuomorphism — a type of design that models elements after real-world counterparts — uses this principle to make UI more recognizable. For example, a photo editing app’s icon may look like a camera. Even something as simple as making the “continue” button green and the “back” button red triggers a subconscious response in the viewer.
9. The Principle of Closure
As Gestalt principles go, the principle of closure is one of the more common. The brain effectively fills in the gaps, assuming it knows what to supplement missing information with. If lines or edges align, it gives the appearance that individual design elements are components of a larger, complete image.
The World Wide Fund for Nature uses the Gestalt principle of closure in its logo to make the viewer see a panda. While this clever use of negative space works well because the animal is black and white, color doesn’t play a role in closure. In design, it is an effective tool for subconsciously relaying organization and cohesion.
10. The Principle of Parallelism
Parallelism states that objects in parallel have a relationship or belong to the same group. If they aren’t parallel — or intersect — people won’t consider them related. It’s like how product pages typically have images aligned in rows and filters aligned in a column. If designers focus on the similarity of lines or shapes, they can strategically guide the viewer’s eyes through their project.
11. The Principle of Focal Point
Out of all of the Gestalt principles, the principle of focal point is the most obvious. It states that whatever stands out visually will capture and hold attention first. For example, in web design, a large golden element offering a coupon will be much more eye-catching than the webpage’s white background or gray menus.
12. The Principle of Continuity
The principle of continuity states that people view straight or curved design elements as related. The brain identifies components as one consistent pattern instead of a series of dots or lines. It assumes the components follow the smoothest path. Even if they separate or are interrupted, it will still perceive them as continuous instead of jagged or broken.
Using Gestalt Principles Effectively in UI and UX Design
Since the Gestalt principles are theories on human perception — not design techniques — incorporating them into projects should be relatively straightforward. Designers must consider these factors when considering placement, proximity, size, shape, and direction. This way, they can guide the viewer’s gaze, make navigation easier, and increase the overall UX.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.