Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns, and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand. The human brain is exceptionally good at filling in the blanks in an image and creating a whole that is greater than the sum of its parts. It’s why we see faces in things like tree leaves or sidewalk cracks.
The most influential early proposal written about the theory was published by Max Wertheimer in his 1923 Gestalt laws of perceptual organization, though Wolfgang Köhler’s 1920 discussion of Physical Gestalten also contains many influential ideas on the subject. Regardless of who first proposed the ideas (there have been essays dating back as far as 1890), gestalt principles are an important set of ideas for any designer to learn, and their implementation can greatly improve not just the aesthetics of a design, but also its functionality and user-friendliness.
In the simplest terms, gestalt theory is based on the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. Our brains are built to see structure and patterns in order for us to better understand the environment that we’re living in.
There are seven principles commonly associated with gestalt theory: similarity, continuity, closure, proximity, figure/ground, focal point, and common region. Let's go and have a look at them individually:
Similarity
Image from the Creative Beacon
It’s human nature to group like things together. In gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by color, shape, or size. Similarity can be used to tie together elements that might not be right next to each other in a design. In UX design, using similarity makes it clear to your visitors which items are alike. For example, in a features list using repetitive design elements (such as an icon accompanied by 3-4 lines of text), the similarity principle would make it easy to scan through them. In contrast, changing the design elements for features you want to highlight makes them stand out and gives them more importance in the visitor’s perception.
Continuity
Image from Smashing Magazine
The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve. In the image above, for example, the red dots in the curved line seem to be more related to the black dots on the curved line than to the red dots on the straight horizontal line. That’s because your eye naturally follows a line or a curve, making continuation a stronger signal of relatedness than the similarity of color. Since the eye naturally follows a line, placing items in a series in a line will naturally draw the eye from one item to the next. Horizontal sliders are one such example, as are related product listings on sites like Amazon.
Closure
Image from Eduard Volianskyi
The principle of closure states that when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern. In other words, when you see an image that has missing parts, your brain will fill in the blanks and make a complete image so you can still recognize the pattern. For example, when you look at the image above you most likely see a zebra even though the image is just a collection of black shapes. Your mind fills in the missing information to create a recognizable pattern based on your experience. Closure is quite often used in logo design, with other examples including those for the USA Network, NBC, IBM, Sun Microsystems, and even Adobe.
Proximity
Image from Andy Rutledge
The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. Proximity is so powerful that it overrides the similarity of color, shape, and other factors that might differentiate a group of objects. In UX design, proximity is most often used in order to get users to group certain things together without the use of things like hard borders. By putting things closer together, with space in between each group, the viewer will immediately pick up on the organization and structure you want them to perceive.
Figure/Ground
Image from A Dwarf Named Warren
The figure-ground principle states that people instinctively perceive objects as either being in the foreground or the background. They either stand out prominently in the front (the figure) or recede into the back (the ground). In the image above, for example, your eye instantly sees a white apple sitting on a black background. The figure/ground principle can be very handy when product designers want to highlight a focal point, particularly when it is active or in use—for example, when a modal window pops up and the rest of the site fades into the background, or when a search bar is clicked on and the contrast is increased between it and the rest of the site.
Focal Point
Image from Smashing Magazine
The focal point principle states that whatever stands out visually will capture and hold the viewer’s attention first. When you look at the image above, for example, the first thing you notice is the red square because it’s different than all of the black circles around it. It’s the first point of interest that grabs your attention, and from there your attention moves to other parts of the image.
Common Region
Image from Smashing Magazine
The principle of the common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together. Adding borders or other visible barriers is a great way to create a perceived separation between groups of objects—even if they have the same proximity, shape, color, etc.
Gestalt Principles in UX Design
As with any psychological principle, learning to incorporate the visual perception principles of gestalt into your design work can greatly improve the user experience. Understanding how the human brain works and then exploiting a person’s natural tendencies creates a more seamless interaction that makes a user feel comfortable on a website, even if it’s their first visit. Gestalt principles are relatively easy to incorporate into just about any design and can quickly elevate a design that seems haphazard or like it’s fighting for a user’s attention to one that offers a seamless, natural interaction that guides users toward the action you want them to take.
Photo by processingly on Unsplash