Gestalt principles are principles related to human perception that describes how humans perceive, group, and see things. UI designers use these principles to organize content on interfaces. The 8 most common Gestalt principles are as follows:
The figure-ground principle states that people perceive objects as being in the foreground or background instinctively. Some objects prominently appear in the front while others recede in the background. This helps us focus on certain things and ignore others,
In Figure 2, the focus is on the white box in the center while the rest, i.e., the road, the bus, and the plane, go in the background so the user can focus on the tickets information.
When things appear to be similar to each other, people have an instinct to group them. Different design elements can be used to establish similarity, such as color or shape.
In Figure 5, Amazon uses the similarity principle to distinguish the header at the top using a different color. The header below has grey color so that it is distinguished from the black header. Both these headers are separated from the interface below via color and shape.
Things that are closely placed with one another seem to be more related than others.
Proximity is powerful enough to override similarity of color, shape, etc.
In the image above, the circles are perceived as three groups based on proximity instead of two based on similarity of color.
In Figure 8, the icons in the header are in proximity with each other so they look separate from the products below. The label of each product is in its proximity which informs the user that a certain product has that label.
When objects are located in the same region enclosed by a boundary, they are perceived as being grouped together.
Card UI is an example of the common region principle. Cards contain all the information about something enclosed in a boundary.
In Figure 10, all information about a certain product is enclosed within a card. This distinguishes one product details from another.
This principle states that objects arranged in a line or curve are perceived to be more related than others.
In Figure 12, TCS uses continuity to mention its reach worldwide. They use continuity to communicate that all these stats are related to each other.
When we look at complex patterns and arrangements of visual elements, we form a single recognizable pattern. The logos below demonstrate closure:
The visual element that stands out will grab the viewer’s attention first.
In Figure 15, Western Union uses focal point principle to draw attention to the Find Locations button.
Ambiguous shapes are perceived in a manner as simple as possible.
In the above image, the complex shape is perceived as 5 circles.
Gestalt’s principles give a good understanding of how people perceive and look at things. If implemented correctly, they can help designers direct user’s attention to the right place and significantly improve the product and interface.
Free Resources