Quick guide to Gestalt grouping principles in UX design
If you work in UX, Gestalt Psychology is a useful concept to understand. It gives context to explain why some visual interfaces are more intuitive than others.
This article is a shortcut to learning Gestalt basics and it’s also a reminder that there are long lines of research that feed into the principles of good user experience (UX) 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 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? (Of course, quite a bit.) 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 different images. Wertheimer realized that our eyes can be tricked into seeing movement that isn’t there, which means, compellingly, that our everyday visual experience also includes elements that are not actually 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. In this image, we tend to see a white triangle pointing downward, sitting atop an upward-facing triangle and three circles. In actuality, this image contains six separate, unconnected shapes.
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.
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.
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
For an in-depth and entertaining guide to getting started with user research, read our free-to-download, comprehensive ebook ‘User Experience Research 101’
Here you’ll discover:
Planning for UX Research
When to start, getting to know your users, making a UX research plan, choosing the best UX research method
Conducting UX Research
Asking actionable and relevant questions, observing participants and removing bias
Collecting and analyzing data for action
Prioritizing issues, selling your recommendations, telling a compelling story
Main image by lan deng
Becca Kennedy is a Human Factors Psychologist and co-founder of Kennason, a UX consulting company in Upstate New York. Say hello on Twitter: @becca_kennedy