Gestalt principles and perception

Gestalt psychology, developed in the early twentieth century, studied how people perceive whole patterns rather than separate parts. Its principles are useful because they predict, quite reliably, what people will see as belonging together. You cannot switch these perceptions off, so it is better to design with them.

Proximity

Elements close together are seen as a group. This is usually the strongest and simplest grouping tool.

Similarity

Elements that look alike (same colour, shape, size or style) are seen as related, even when spread apart. Links share a style for this reason.

Common region

Elements inside the same boundary, such as a card or a shaded panel, are seen as a group, even if they are not close together.

Continuity

The eye follows lines and curves. Elements arranged on a line or path are seen as related and in sequence, which is why aligned items feel connected and why step indicators work.

Closure

People complete incomplete shapes. An icon made of a few strokes still reads as a whole object; a partially visible card at the edge of a carousel suggests there is more to scroll.

Figure-ground

People separate a foreground object from its background. Dialogs, dropdowns and sticky headers rely on it, often using shadow or a dimmed background to make the figure clear.

When principles conflict, stronger cues usually win. Common region tends to override proximity, which is why a card border can group items that are spaced apart. Use that knowledge deliberately: if your grouping is unclear, check whether two principles are pulling in different directions.

Every grouping decision on a screen relies on these principles: which price belongs to which product, which error belongs to which field, which options are alternatives. Wrong grouping causes real errors. Knowing the principles also helps you remove unnecessary borders and boxes, because space and similarity can do the same job with less clutter.

A settings screen shows twelve toggles in a single list. People struggle to find the notification settings. The designer groups related toggles with larger gaps between groups and a short heading above each (proximity), keeps all toggles visually identical so they are recognised as the same kind of control (similarity), and puts the risky "Delete account" action in a separate panel at the bottom with a different style (common region and contrast). No new content is added, yet finding a setting becomes faster because the structure is visible.

In a second example, a carousel of product cards shows the last card cut off at the screen edge. That partial card uses closure to suggest more content, an affordance that a full row of perfectly fitting cards would not have.