Because visual design is all about communicating meaning using visuals rather than language, it’s important to know how your audience is likely to perceive certain visual cues. That’s where the gestalt principles come in.
While every individual is different, on average human brains are very similar to each other and interpret the world in consistent ways. The brain makes assumptions based on the things we see, and, on average, these assumptions are very helpful in making sense of our chaotic world.
For instance, imagine you are in a park, and you see four people walking down a path in the same direction. They’re all walking fairly close together and all four have a similar shade of brown hair. What would you assume about these people? Very probably, you would think that they are a group, possibly even members of the same family. And very probably your mind would jump to this conclusion without even really thinking about it on a conscious level. It would just seem obvious.
But let’s be honest, that conclusion is really no more than a guess. It could well be that four random strangers, all with similar color, just happened to be walking in the same direction and converged on the path at the same time. Pure arbitrary coincidence.
Still, it’s unlikely that your brain’s guess was wrong. That’s why we’ve evolved these kinds of mental shortcuts; they’re right most of the time, and they help us to navigate a world in which we rarely have all the information we need.
The gestalt principles are a set of guidelines for understanding and taking advantage of the viewer’s mental shortcuts in our designs. They allow us to communicate meaning by creating exactly the sorts of subtle visual clues that the user’s brains will use to make guesses about relationships and meaning.
The original gestalt principles were formulated in the 1920s by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler, who were studying how the mind makes sense of our messy reality. They identified a set of laws which describe the way our brains find order in disorder. (”Gestalt” is a German word meaning “form” or “unified whole”.) These laws center around the idea that rather than thinking about every single element we see as a separate thing, we mentally simplify them into groupings and relationships.
This all may seem rather abstract, but understanding and application of the gestalt principles can take out much of the guesswork in design decision making and drastically improve your work.
There is no single definitive list of all gestalt principles, but the following includes the most common and useful for designers.
Proximity
In our example above, our biggest indicator that the people in the park belonged to a group of some king was how closer they were walking to one another. This is the principle of proximity at work. It says that we tend to assume that any items that are close to each other in space are somehow related. We can extend this a bit and say that the closer things are to each other, the more related they are.
While this may not seem all that surprising, it can be really helpful when designing layouts. We can ask ourselves how related any two or more items are to one another and space them out accordingly. This is related to the idea of spacing friendships, which we’ll explore in the chapter on composition and layout.
As an example, we might have a series of images that all illustrate a topic and place them (equally) close together because they all serve the same function and should be seen as a group. Or we might place the price of a product near an add-to-cart button because both are related to the purchasing process. Or we might make sure that a user’s name is placed close to their profile picture since both are part of their identity.
Alternately, we can apply this rule backwards to express that certain elements are not related. For instance, we can make sure there is a little extra space between information about a particular product and a listing of other products for sale to make sure the user can tell they are separate.
Similarity
Just like our example above, in which we guessed that some people with a similar hair color might belong to the same family, we tend to assume that any items that are visually similar to one another are somehow related. Sounds obvious doesn’t it? But by paying attention to this principle, we can apply it to our designs to make it clear which items have some connection that the user should understand.
For example, you might use a pill shape for all interactive buttons in an app, and the consistent use of that shape would help the user to understand that they all share the same kind of interactivity. Or you might make all the navigation links the same color to help the user understand their role on a page. Or you might give all warning messages a yellow background to help the user understand their special status.
You can also reverse this principle to communicate where things are not related. The less related elements are, the more visually dissimilar they should be. This can be really helpful when you realize that users are confused by something: Ask yourself, do unrelated elements look too similar to one another?
Common Region
Let’s go back to our walk through the park in our original example. It’s likely that if you saw two people sitting on the same park bench, you’d instantly assume that the pair knew each other. Again, just a guess, but likely a correct one. In general, we tend to assume that any items that are inside of the same container are somehow related. This means that whenever we want a user to understand that a bunch of elements belong in a group, we can put them inside of some kind of visual box.
For example, if we are showing a page that lists products and we want to make it clear that a certain set of the products are on sale, we might add a box with a background color behind all the sale products to group them together. Or we might place a series of quick action buttons inside an outlined box. Or if we have forward and back buttons that allow users to page through some content, we might want to make sure the control buttons are in the same visual container as the content they control.
As with the previous principles, common region also works in reverse. If you want to make sure the user understands that a piece of content doesn’t belong to a particular group, you can make sure that content is outside of the box that holds the grouping. For instance, you might place a series of social media icons in a container and place the search icon outside of that container so it isn’t confused for a social media link.
Figure / Ground
Screens are two-dimensional—they only have width and height and no depth. But that doesn’t stop our brains from “seeing” some elements as sitting in front of others. In fact, your brain is probably telling you that the text on this page is layered “on top” of the page’s background color, though in reality text made of the same flat pixels as everything else on the screen. It’s kind of mind blowing to take a moment to notice all the ways your mind perceives depth in the 2D surface of a screen.
This tendency to interpret flat content as though it consisted of three-dimensional layers is the principle of figure / ground. And because of this tendency, we can communicate things like importance and help guide a viewer’s focus by controlling the sense of layering.
For instance, as a user scrolls down a page, we could make it look like a new section overlays a previous section. Or we might place a notification badge on a message icon to create the impression that the badge is “on top of” it. Or we might use a shadow effect to give the sense that a pop-up dialog is elevated, hovering above the other content of a page.
Continuation
If you were to see me point my finger in any direction, it’s very likely that your eye would follow the line of my finger to see what I was pointing toward. Except… wait a minute… there is no line beyond the finger itself. Your mind “continues” the line out into space until it encounters something else. The principle of continuation describes the brain’s tendency to follow the direction of a line even beyond the line’s end. The eye will let itself be guided by lines, arrows, gestures, even the gaze of a person or an animal. This can be very useful in helping guide a viewer’s eye from one part of a page to another and in establishing relationships between elements.
In traditional design and other media, the use of the principle of continuation is referred to as leading lines, which are discussed further in the chapter about layout and composition. By careful arrangement of leading lines, you can guide a user from element to element to element in a composition without their ever feeling lost or having to think too hard about what to look at next.
Lines of text also create a sense of continuation. As the eye reads a line of text from left to right (in Latin-based languages), the eye can sometimes continue in that direction until it encounters something else. This can be useful, for instance, in creating a sense of connection between a block of text and an image sitting side by side.
Closure
When you look at a broken bottle, even if you only see the remains of the bottom half, you mind has no trouble at all understanding that it is a bottle. It’s almost like your mind can see the rest of the bottle, even though it’s missing. In a nutshell, this is the principle of closure: when looking at broken or incomplete shapes, the mind will fill in the blanks and perceive the full shape. A dotted or dashed line still seems to be a line. A circle with part of the outline missing still looks like a circle. Knowing this gives us an opportunity to create all sorts of interesting effects in our designs with confidence that the viewer will see a shape, even if it isn’t really completely there.
In a way, this principle is very closely related to the principle of continuation. A series of dashes looks like a line because the mind continues each dash so that they seem to connect into a single unbroken line. Many of the gestalt principles share a lot of the same DNA in terms of how our minds make sense of the world.
When first learning about the gestalt principles, many new designers tend to think, “What’s the big deal? These are so obvious!” But though all our brains use them without even being conscious of it in day to day life, making a point to be aware of them when creating designs can be really helpful, especially when evaluating and critiquing work in progress.
Instead of having to guess about how much space to put between different elements of a design, we can rely on the principle of proximity to evaluate how close things should be based on their degree of relatedness. Or we can make sure the eye is finding its way from one element to the next by paying careful attention to the principle of continuation.
They may seem obvious, but I recommend you always come back to these principles as the foundation of your decision making process.