Skip to content
UX Atlas
Plate LAW·017 · LawGrid B2 · Rev. 2026-08-14

Law of Prägnanz

The eye resolves complex arrangements into the simplest, most stable interpretation available.

LawEstablished researchFoundational

Definition

The organising principle of Gestalt psychology, formulated by Wertheimer and Koffka, holding that perception tends towards the simplest and most regular interpretation of a stimulus. It is the umbrella under which proximity, similarity, closure and continuity sit.

Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.

On this plate
  1. 1Definition
  2. 2Why layout reads before content does
  3. 3The Gestalt group in practice
  4. 4Which grouping cue wins
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Setting spacing between and within groups.
  • Diagnosing why a layout feels confusing despite clear labels.
  • Deciding whether a group needs a border or just more space.

Common mistakes

  • Equal spacing everywhere, which removes all grouping information.
  • Using borders to fix a spacing problem, which adds visual noise without solving the cause.
  • Assuming semantic markup overrides visual grouping. It does not, for sighted users.
  • Using a card as decoration, which silently claims that everything inside it belongs together.

Why layout reads before content does

Before anyone reads a word, the visual system has already grouped the page into regions. That grouping is automatic and fast, and it is driven by spatial and visual relationships rather than by meaning.

This is why a layout can fight its own content. If two unrelated blocks sit closer together than two related ones, the reader groups the wrong things, and no amount of labelling fully corrects the first impression.

The Gestalt group in practice

Each of these has its own entry in the library. Together they are the mechanics of Prägnanz.

  • Proximity: things placed near each other are read as belonging together. The strongest of the group.
  • Similarity: things that share colour, shape or size are read as the same kind of thing.
  • Closure: the eye completes incomplete shapes, which is why a partially cut-off card reads as continuing.
  • Continuity: elements arranged on a line or curve are read as a sequence.
  • Common region: a shared border or background binds elements together more strongly than proximity alone.
  • Figure and ground: the eye separates an object from its background, which is what makes a modal read as above the page.

Which grouping cue wins

These cues compete, and when they disagree the stronger one decides what the reader sees. Most grouping bugs are two cues pointing in opposite directions.

CueStrengthTypical misuse
Common region, a shared background or borderStrongestA card that encloses two unrelated things
ProximityStrong, and cheapEqual spacing above and below a label, so it attaches to the wrong field
Similarity of shape or colourModerateTwo unrelated items styled alike and read as a set
Continuity, alignment along a lineModerateA stray item breaking a column and reading as separate
ClosureWeak on its ownRelying on an implied shape that most readers never complete

In practice

  1. i.

    Form label association

    Forms

    A label sitting closer to the field below it than to the field above it will be read as belonging to the field below, regardless of the markup. Spacing has to encode the relationship that the code declares.

  2. ii.

    Card grids

    Content listings

    Consistent internal padding and a shared border make each card a common region. Inconsistent padding breaks the grouping and the grid stops reading as a set.

  3. iii.

    The label that belonged to the wrong field

    Proximity beating intent

    Sixteen pixels above the input and sixteen below it leaves the label floating between two fields. The reader attaches it to whichever is nearer, and the form is read wrongly before it is read at all.

Local chart

LAW·017 · Region I · Grid B2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ClosureFND·007 · APPLIED THROUGHCommon RegionFND·006 · APPLIED THROUGHContinuityFND·008 · APPLIED THROUGHFigure and GroundFND·009 · APPLIED THROUGHProximityFND·004 · APPLIED THROUGHSimilarityFND·005 · APPLIED THROUGHSpacing SystemsFND·042 · APPLIED THROUGHVisual HierarchyFND·001 · APPLIED THROUGHWhitespaceFND·015 · APPLIED THROUGHGestalt PrinciplesTERM·056 · SHORT DEFINITIONOccam's RazorPRIN·001 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Untersuchungen zur Lehre von der Gestalt

    M. Wertheimer, Psychologische Forschung, 1923

  2. [2]

    Principles of Gestalt Psychology

    K. Koffka, Harcourt Brace, 1935

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.