Guide to gestalt grouping principles in UX design

This article is a shortcut to learning Gestalt basics and a reminder that there are long lines of research that feed into the principles of good user experience design that many designers instinctively know or learn.

Gestalt is a German word meaning ‘form.’ In Psychology, Gestalt refers to the idea that humans perceive visual elements as a cohesive whole — and that whole is greater than the sum of its parts. Our brains are skilled at extracting and interpreting the visual meaning and order from clues like color, texture, relative size, orientation, proximity, edges, and motion.

What does Gestalt have to do with UX design? Good visual design supports order and clarity, making it easy for users to understand a visual interface.

History of Gestaltism

The origin story of Gestaltism is that in 1911 psychologist Max Wertheimer bought a toy stroboscope while taking a train ride in Germany. A stroboscope is a mechanical device that creates the illusion of movement by rapidly showing two images. Wertheimer realized that our eyes could be tricked into seeing movement that isn’t there, which means, compellingly, that our everyday visual experience also includes elements that are not there.

In the decades since many researchers have studied how Gestalt principles can predictably explain visual perception. The Kanicza Triangle, created in 1955, is a simple example of Gestalt. This image shows a white triangle pointing downward, sitting atop an upward-facing triangle and three circles. In actuality, this image contains six separate, unconnected shapes.

The Kaniscza Triangle is an example of how we perceive shapes as more complex than the present elements. Funny anecdote: the popularity of Pac-Man in the 1980s altered how people started describing this image and threw off unsuspecting researchers.

Gestalt laws of grouping

There is a long list of Gestalt Laws that explain how our brains tend to perceive visual information. Though there are many of them, I’m going to talk about three Gestalt Laws that are specific to visual grouping and how they are related to interface design.

Law of proximity

Proximity refers to the distance among objects. According to the Gestalt law of proximity, the closer that objects appear to one another, the more likely we understand them as groups. We perceive the components within a group as related to each other, and we perceive separate groups as having differences from one another.

In interface design, we communicate the relatedness information by grouping elements together and using white space to create distance among groups. Page elements like headings, images, descriptions, prices, buttons and page links can be grouped to communicate categories, making the interface easy for users to scan and understand.

Law of similarity

We tend to group elements together when they look similar based on visual characteristics like color, shape, motion, and orientation.

For interface design, these kinds of similar visual elements help users group information that is related or have similar functions. (Just be mindful of relying on color only, which might be a problem for users with color blindness.)

And besides using similarity for grouping, to make something stand out, we use distinct, dissimilar visual elements to communicate importance.

On the Boston Logan International Airport website, the buttons for Arrivals and Departures look similar to one another, which communicates that they are similar actions. At the same time, these two buttons are large and a distinct color from the rest of the page which helps them stand out as important features that users are likely seeking.

Law of common region

We tend to perceive elements that occupy the same closed region as a group, and the enclosed elements as similar in meaning or function. This is helpful when there is not as much to space to create groups by proximity.

We can help improve UX for complex or busy interfaces by introducing common regions using borders, backgrounds, or line dividers. This strategy is especially useful on interfaces that require a lot of information at once, like some government websites.

Introducing common regions like borders or line dividers can help break up and group sections where there is a lot of content.

Resources

If you want to learn more about how Gestalt principles are related to interface design, here are a few starting points:

• Interaction Design Foundation: Gestalt Principles
• Smashing Magazine: Improve Your Designs With The Principles of Similarity and Proximity, Improve Your Designs With The Principles of Closure and Figure-Ground, and Improve Your Designs With The Principles of Continuation and Common Fate