Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ux
design

What are Gestalt principles?

Sheza Naveed

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:

1. Figure-ground

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,

Figure 1: White background and logo in the foreground
Figure 2: White box in the foreground

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.

2. Similarity

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.

Figure 3: Similarity principle based on shape
Figure 4: Similarity principle based on color
Figure 5: Amazon using the similarity principle

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.

3. Proximity

Things that are closely placed with one another seem to be more related than others.

Figure 6: Proximity Principle

Proximity is powerful enough to override similarity of color, shape, etc.

Figure 7: Proximity overriding similarity

In the image above, the circles are perceived as three groups based on proximity instead of two based on similarity of color.

Figure 8: Proximity example on webpage

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.

4. Common region

When objects are located in the same region enclosed by a boundary, they are perceived as being grouped together.

Figure 9: Common region principle

Card UI is an example of the common region principle. Cards contain all the information about something enclosed in a boundary.

Figure 10: Amazon using common region

In Figure 10, all information about a certain product is enclosed within a card. This distinguishes one product details from another.

5. Continuity

This principle states that objects arranged in a line or curve are perceived to be more related than others.

Figure 11: Continuity
Figure 12: TCS using continuity

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.

6. Closure

When we look at complex patterns and arrangements of visual elements, we form a single recognizable pattern. The logos below demonstrate closure:

Figure 13: Logos representing closure

7. Focal point

The visual element that stands out will grab the viewer’s attention first.

Figure 14: Black diamond as the focal point
Figure 15: Western Union using focal point

In Figure 15, Western Union uses focal point principle to draw attention to the Find Locations button.

8. Symmetry and order

Ambiguous shapes are perceived in a manner as simple as possible.

Figure 16: Olympics Logo

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.

RELATED TAGS

hci
ux
design

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring