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.
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.
The Kaniscza Triangle is an example of how we perceive shapes as more complex than the elements that are actually present. (Funny anecdote: the popularity of Pac-Man in the 1980s altered how people started describing this image and threw off unsuspecting researchers.)
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!
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.
Despite having no other visual differences, chances are, you see the above dots as two groups, thanks to the white space dividing them.
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.
Using spacing and borders, retail sites like Bed Bath & Beyond’s can communicate which deals, photos, and descriptions are grouped together.
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.
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.
If you want to learn more about how Gestalt principles are related to interface design, here are a few starting points: