Gestalt Principles in UI Design: Which One Wins When Two Disagree

The gestalt principles are a set of findings about how people group what they see. Two form fields that sit close together read as one unit, and two buttons in the same color read as the same kind of thing. The usual list has seven entries: proximity, similarity, common region, closure, continuity, figure-ground, and common fate.

Most introductions show each principle alone, with a diagram of dots. A product screen never applies one alone. A settings page uses spacing, borders, color, and alignment at once, and each of those is making a grouping claim. When the claims agree, the screen reads easily. When the spacing says "these two belong together" and the border says "no, these two do", the user has to stop and work it out.

What are the gestalt principles?

"Gestalt" is German for form or shape. Gestalt psychology started in Germany in the 1910s with Max Wertheimer, Wolfgang Köhler, and Kurt Koffka. Their central claim was that perception organizes a scene into wholes first and notices the parts afterward. You see a row of buttons before you see any one button.

Wertheimer's 1923 paper set out the grouping factors that most lists still use: proximity, similarity, common fate, good continuation, and closure (Wertheimer — Laws of Organization in Perceptual Forms). Figure-ground came from Edgar Rubin's work a few years earlier. Two more were added much later by Stephen Palmer and Irvin Rock: common region in 1992 and uniform connectedness in 1994. Those two late additions turn out to matter most in interface work, because cards and connecting lines are everywhere in it.

Gestalt theory had one idea under all of these, called Prägnanz or the law of good figure: given several ways to read a scene, people settle on the simplest and most regular one.

The gestalt grouping principles on a screen

Proximity

Things near each other are seen as a group. In an interface this is spacing: the gap inside a group has to be visibly smaller than the gap between groups (NN/g — Proximity Principle in Visual Design).

The standard failure is a form where every vertical gap is the same. A label sitting 12px under one input and 12px above the next belongs to neither. Users guess, and on a long form some guess wrong and type the city into the postcode field.

Similarity

Things that share a visual property (color, shape, size, weight) are seen as the same kind of thing (NN/g — Similarity Principle in Visual Design). This is why every link in a product should share one treatment and nothing else should borrow it.

Similarity fails in two directions. Blue, underlined text that does nothing teaches users to distrust links. A destructive action styled like the ordinary buttons beside it gets clicked by people who were aiming at its neighbor.

Common region

A card, a panel, a table row with a background, a fieldset with a border. Anything inside the same boundary is read as one group (NN/g — The Principle of Common Region).

It is the cheapest way to group, which is why it gets overused. Once every block on a page sits in its own card, the borders stop carrying information, and the page has spent a lot of lines to say nothing about what relates to what.

Uniform connectedness

A line between two elements, or one continuous surface under them, makes them read as a single unit (Laws of UX — Law of Uniform Connectedness). Steppers, timelines, tree views, and the line from a dropdown to its trigger all use it.

Closure

People complete a shape that is only partly drawn. The closure gestalt principle is what lets an icon made of three strokes read as a whole envelope (NN/g — Principle of Closure in Visual Design).

On a screen the most useful case is the cropped item. A horizontal list where the last card is cut off at the edge tells the user there is more to the right, without an arrow. If the cards happen to fit the viewport exactly, the row looks finished and the rest is never found.

Continuity

Elements arranged along a line or curve are seen as related, and the eye follows the line past a gap. Alignment is continuity in practice. A column of left-aligned labels reads as one list even when the rows have different heights. Break the edge on one row and that row looks like it belongs to something else.

Figure-ground

People split a scene into a figure that holds attention and a ground behind it. A modal over a dimmed page is the plainest example. The dimming demotes the page to ground, so nobody tries to click it.

The failure is ambiguity. A dropdown with no shadow or border on a busy page can be hard to tell apart from the content under it. Dark themes cause this often, since shadows nearly vanish on a dark surface.

Common fate

Movement groups too. Rows that slide as a block when a section collapses, or a set of selected files that drag as one stack, read as grouped while they move. Motion that contradicts the structure causes trouble: if an unrelated element animates in step with a group, it reads as part of that group for the length of the animation.

When two gestalt principles disagree

Palmer's 1992 paper on common region, and the 1994 paper with Rock on connectedness, reported the same thing: in their demonstrations, enclosing or connecting elements overrode grouping by proximity and by similarity. Dots that were close together but sat in different outlines were seen as belonging to their outlines.

That gives a rough order of strength for interface work:

1. Connection and enclosure (a shared card, a joining line)
2. Proximity (spacing)
3. Similarity (shared color, shape, or weight)

It is a tendency and depends on how strong each cue is. A 1px border in a pale gray can lose to a 64px gap. But at the strengths a typical product uses, the order holds well enough to debug with.

Three conflicts come up repeatedly.

A border around things that don't belong together. A card holds an account summary and, to fill the space, a promotion for an unrelated feature. The border says they are one unit. Users read the promotion as a fact about their account.

Spacing against color. In a toolbar, the buttons for one task are scattered across it and share a tint so they can be recognized as a set. Users group by position and treat each cluster as the set. The shared tint is only noticed later, if at all.

Table stripes against column reading. Zebra striping groups cells by row through similarity and common region. If the task is comparing one column across rows, tight row height and generous column gaps make proximity work against the stripes. Pick the direction people read in, and make spacing and background agree with it.

In each case, find the stronger cue, then make the weaker ones agree with it or remove them.

Gestalt principles examples from ordinary screens

• A pricing table. Each plan sits in its own column with a border (common region). The recommended plan gets a filled background, which breaks similarity on purpose so it stands out.
• A notification badge. A small dot overlapping the corner of an icon. Overlap is about as close as proximity gets, so the count is read as belonging to that icon.
• A skeleton loader. Gray bars in the positions of the coming text. Closure and continuity let users read the layout before any content arrives.

Where the gestalt principles stop being enough

They describe grouping. They can't tell you whether the groups are the right ones, which depends on the user's task, and they give no numbers. Nothing in gestalt psychology says an outer gap should be twice the inner one. That ratio comes from practice.

They are also purely visual. A screen reader user gets none of the grouping that spacing and borders supply. WCAG requires that structure conveyed visually also exists in the markup: headings, lists, fieldsets and legends, table headers (W3C — Understanding Info and Relationships). And similarity by color alone fails users who can't distinguish the colors, so a second cue such as an icon, a label, or an underline has to carry the same meaning (W3C — Understanding Use of Color).

Frequently asked questions

How many gestalt principles are there?

There is no fixed count. Wertheimer described about five grouping factors in 1923. Design articles list anywhere from five to ten, depending on whether they include figure-ground, Prägnanz, symmetry, common region, and connectedness. The seven covered here, plus uniform connectedness as an eighth, are the ones with a direct use in interface layout.

What is the gestalt principle of closure?

It is the tendency to see an incomplete shape as complete. A dashed circle is seen as a circle. In interfaces it supports simplified icons, progress rings, and cropped items that signal more content off-screen.

What is the difference between proximity and common region?

Proximity groups by distance alone. Common region groups by a visible boundary or background. When they conflict, the boundary usually wins, so an item placed inside the wrong card will be read as part of that card even if it sits closer to something outside.

Are the gestalt principles of perception still accepted?

The grouping effects are well replicated and remain part of vision science. The original school's explanation of why they happen, in terms of electrical fields in the brain, did not hold up.

How do gestalt principles relate to the principles of design?

Gestalt principles describe what perception does with a layout. Design principles such as hierarchy, contrast, and alignment are what a designer changes to get a particular result. The principles of design, explained covers that vocabulary, and visual design principles for product teams turns it into review checks.

Take it further

The design principles hub collects our writing on the laws and heuristics that sit alongside the gestalt principles. Grouping is one layer of what we score in the UX Clarity framework during a Full UX Audit.

Sources: Wertheimer — Laws of Organization in Perceptual Forms (1923) · NN/g — Proximity Principle in Visual Design · NN/g — Similarity Principle in Visual Design · NN/g — The Principle of Common Region · NN/g — Principle of Closure in Visual Design · W3C — Understanding Info and Relationships · W3C — Understanding Use of Color.