Gestalt is a German word meaning 'shape' or 'form.' Gestalt psychology was founded by German psychologists Max Wertheimer, Wolfgang Kohler, and Kurt Koffka and focused on how people interpret the world. Wertheimer, Kohler and Koffka established a few fundamental principles, also known as "laws of perceptual organization." Principles describe the way we perceive the world.
In this article, I want to share seven gestalt laws and show how to apply them in practice.
Elements that have similar visual appearance seems to be more related. In the image below, you probably see the groupings of colored circles as rows rather than just a collection of individual circles.
Elements can visually be grouped together if they have visual similarities. It's possible to create similarity using size, color, and shape.
Our mind likes symmetrical objects because symmetry creates an impression of stability and order.
When you arrange UI Elements to make them symmetrical to each other, you simplify the process scanning for users. For example, a symmetrical navigation menu tends to be perceived as more stable than the asymmetrical one.
Quick note: Symmetrical layouts can look boring. Thus, you might want to introduce some asymmetry in design to make it more dynamic.
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
By adding borders around an element (or a group of items), you separate it from surrounding elements. Check the cards in the image below. Subtle shadow and clearly visible borders create an impression of individual objects.
The figure-ground principle refers to the human's ability to visually separate objects on different layers of focus. We know which elements are placed in the foreground and with ones are in the background intuitively.
There are a few techniques to distinguish plans of focus: you can use semi-transparent overlay, shadows or blur the elements in the background.
Material design classifies Z-axis of elevation, which can be used to design overlays. The elevation is created using overlays and drops shadows.
iOS app designers often rely on blur to distinguish plans of focus.
Objects that are near each other seem to be grouped together.
Whitespace plays an essential role in the principle. In the following image, the circles on the left appear to be part of one group while those on the right appear to be part of another.
Proximity principle helps designers to make content more comfortable to perceive by users. Place related objects close to each other to create a connection.
This principle can also reduce the error-rate for interactive elements because it boosts the relations between elements.
Our perception tends to see object arranged in lines or curves as related or grouped. It happens because objects connected by straight or curving lines are seen in a way that follows the smoothest path.
On the image below, lines created from circles are seen as belonging together.
Guide the user's eye by creating a visual connection between items. Use this principle when you design a menu.
Our brains tend to fill in gaps in information.
In the image below, you probably see two objects (a circle and a star) because your brain fills in the missing gaps to create a meaningful image.
Every time you design a loading indicator or a progress bar, remember the law of closure.
When elements move in the same direction, our brain perceives them as part of the same group.
This principle is fundamental in motion design. Functional animation uses common fate to guide users eye.