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:
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.
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.
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.
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.
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.
In Figure 15, Western Union uses focal point principle to draw attention to the Find Locations button.
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