Law of Prägnanz
The eye resolves complex arrangements into the simplest, most stable interpretation available.
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 page
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.
In practice
Form label association
FormsA 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.
Card grids
Content listingsConsistent 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.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
Untersuchungen zur Lehre von der Gestalt
M. Wertheimer, Psychologische Forschung, 1923
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.
- ClosureUI foundation
- Common RegionUI foundation
- ContinuityUI foundation
- Figure and GroundUI foundation
- ProximityUI foundation
- SimilarityUI foundation
- Spacing SystemsUI foundation
- Visual HierarchyUI foundation
- WhitespaceUI foundation