Gestalt theory is inescapable.

We experience the psychological workings of Gestalt in our daily lives whether we realize it or not — and this is precisely its beauty. We subconsciously engage with it to help organize and better understand what we see. We’re able to make sense of complex images by not having to understand the individual parts but by grouping them together in different ways.

Since the 1920’s, designers have welcomed Gestalt laws with open arms and have used them to craft engaging visuals. Designers can use these laws to influence viewers and users to focus on certain elements in a composition, to break up large blocks of text, to prompt action, to create visual harmony, and on and on. These laws have traditionally played a huge role in graphic design but are equally important to the design of user interfaces and thus improving the experience of products.

“The whole is something else than the sum of its parts.” -Kurt Koffka, German psychologist and Gestalt originator. (source: IDF)

An uncluttered, easy to navigate interface is the baseline for good UI design, and Gestalt comes in handy with that. With the help of common region, similarity, symmetry, and proximity; UI design becomes a bit more methodical and intentional as we’ll see in the following examples.

Common Region

This law is all about boundaries. The law of Common Region states that items within the same boundary share characteristics and are seen as a group. An actual enclosed boundary can be shown visually, or it can be a perceived boundary where white space creates a division between regions. Common Region is very… common, and is probably used by designers without even knowing they’re employing Gestalt. Text and images within cards, lists, icons in navigation bars—all of these utilize common region.

Similarity

This law states that items sharing a visual characteristic (shape, size or color) are seen as belonging to the same group. The eye is naturally drawn to items that look alike. Again, this one is used all the time, and is a great way to direct users to calls to action and group items based on appearance.

Symmetry

In the theory of symmetry, balance and harmony is created with the equal distribution of visual weight on either side of an axis. A classic example of symmetry is the human face: if you were to draw a vertical line down the middle, one side will mirror the other, generally speaking. There’s balance because the same features appear on each side of the line.

In interface design, symmetrical screens are seen often because they’re predictable and comfortable to interact with. Rows and columns of cards, lists, navigation bars—there’s lots of symmetry out there!

Asymmetry

Asymmetry is part of the law of symmetry (and there are other symmetry variations that won’t get covered here). Elements are not equal on either side of a central axis; however, visual balance is achieved by varying the size, shape, color, and position of the elements involved. This is where you can get creative— you’re able to combine these (to an extent) and achieve that same balance and harmony as with symmetry.

Proximity

This one has similarities to common region because spacing plays a big role in properly communicating the principle. With proximity, elements that are near each other are seen as belonging to the same group. It’s basic and, like the other laws, is used all the time in UI design. It differs from common region because with proximity, there are no defined “regions” such as cards or nav bars. It simply refers to individual elements—text blocks, lines in a list, icons, etc.

Conclusion

There are a number of other Gestalt principles that weren’t discussed here, and those play a part in effective design as well. But the few that were discussed are instrumental in creating clear and concise interface design, and are great tools for any designer to keep in their back pocket!

Useful Links and Further Reading:

Using Gestalt Laws of Perceptual Organization in UI Design

Psychology and UX

The 7 Gestalt principles of design