The Gestalt principles, also called the laws of grouping, describe how people organise what they see into groups and shapes without thinking about it. Things that sit close together, look alike, share a box or line up are seen as belonging together. In interface design, that decides whether a screen reads as a few clear sections or as a pile of separate pieces.
This guide covers where the principles come from, how many there are, and each one with an interface example and a link to its full UX law page. Grouping problems are some of the most common bad UX examples, and the aesthetic and minimalist design heuristic leans on them more than any other. New to UX? The UX basics guide is the place to start.
Gestalt is German for form or shape. The principles come from a group of German psychologists in the early twentieth century, above all Max Wertheimer, Kurt Koffka and Wolfgang Köhler. In a 1923 paper, Wertheimer showed that people do not see a scene as hundreds of separate dots and patches but organise it into groups, and he described the factors that decide how: nearness, likeness, good continuation and the pull towards simple, closed shapes.
Later researchers added more. Stephen Palmer described common region in 1992, and Palmer and Irvin Rock described uniform connectedness in 1994. That is why lists online disagree on the number: there is no fixed official set.
Most design guides list between six and eight. The ones that matter most in interface design are below, roughly in order of how often you will use them.
| Principle | In one line | Where you see it in UI |
|---|---|---|
| Proximity | Things close together form a group | Form sections, card contents, spacing between blocks |
| Similarity | Things that look alike belong together | Links, buttons, selected states, chart series |
| Common region | Things inside the same boundary belong together | Cards, panels, settings groups |
| Continuity | The eye follows lines and curves | Rows that scroll, aligned lists, progress steps |
| Closure | The eye completes shapes with gaps | Icons, logos, loading rings |
| Pragnanz | People see the simplest form they can | Clean layouts, simple icons |
| Figure-ground | People split a scene into a subject and its background | Modals, dropdowns, cards on a page |
| Common fate | Things that move together belong together | Dragging a selection, grouped animations |
| Uniform connectedness | Things joined by a line belong together | Steppers, flow diagrams, tabs |
Elements that sit close together are seen as one group, and a larger gap starts a new one. That makes spacing the cheapest way to structure a screen: before you add boxes, lines or headings, try moving things closer to what they belong to and further from what they do not.
Personal details and payment details separated by a larger gap, so the form reads as two short sections instead of one long list.
The common mistake is equal spacing everywhere, which makes a label look as if it belongs to the field above it as much as the one below. Keep the space inside a group clearly smaller than the space between groups. See the Law of Proximity.
People group elements that share a colour, shape, size or style, and assume they do the same job. That is how a reader knows every blue underlined word is a link, and how a shopper sees which filters are on.
Filter chips where every selected one is filled and every other one is outlined, so the active filters read as one group across all three rows.
It breaks when unrelated things share a style, such as a heading in the same blue as the links, or when one kind of thing has several styles across screens. See the Law of Similarity.
Elements inside the same box, card or background are seen as a group, even if they are far apart or look different. It is stronger than proximity, which makes it the tool to reach for when spacing alone is not enough.
Settings split into panels with their own background, so each group is clearly separate even where the rows look the same.
Use it sparingly. A screen where every item sits in its own box has no groups at all, just a grid of boxes. See the Law of Common Region.
The eye follows lines, curves and rows, and sees elements arranged along them as related. In interfaces, continuity is why aligned lists are easy to scan, and why a row of cards cut off at the edge of the screen invites a swipe: the eye expects the row to carry on.
The mistake is a row that ends exactly at the screen edge, which looks complete, so people never discover the rest. See the Law of Continuity.
People see a complete shape even when part of it is missing, as long as enough is there. It is how simple outline icons stay recognisable, how logos made of separate pieces still read as one mark, and how a loading ring with a gap still reads as a circle.
A thin loading arc with a small gap: the eye closes it into a circle, so it reads as lighter and still clearly round.
Leave out too much, or make the gaps uneven, and the shape stops being recognised, which matters most for small icons. See the Law of Closure.
Pragnanz, also called the law of simplicity or good figure, says people interpret a complex scene in the simplest way they can. A screen made of a few clear shapes is understood at a glance; one made of many overlapping, competing pieces makes people work to find the structure. See the Law of Pragnanz.
People split what they see into a figure, the thing in focus, and the ground behind it. Interfaces use this constantly. A modal works because the page behind it is dimmed, so the dialog becomes the figure. A dropdown or a card lifted with a shadow does the same on a smaller scale.
Problems start when figure and ground compete: a busy photo behind text, or a dialog that is the same colour as the page behind it, so people cannot tell what is in front.
Common fate: elements that move together, in the same direction and at the same time, are seen as a group. When you select several files and drag them, they move as one, which tells you they are one selection. Connection, or uniform connectedness: elements joined by a line read as related, which is why steppers and flow diagrams draw lines between their steps.
Real screens use several at once. A good settings page groups related options with space (proximity), puts each group on its own panel (common region), gives every toggle the same style (similarity) and lines everything up on one edge (continuity). When the principles agree, the structure is obvious. When they conflict, for example two items close together but styled differently, the strongest cue wins, and people often read the screen differently from how you intended.
Knowing the names is the easy part; spotting a grouping problem on a real screen takes practice. Each Gestalt law in UX Quest comes with a real screen to fix. Start with the Law of Proximity, then the Law of Similarity and the Law of Common Region. Each law page says whether its challenge is free or part of Pro.
Three Gestalt laws you will use on almost every screen. Open one to see the screen and the challenge.
The Gestalt principles describe how people group what they see. The main ones are proximity, similarity, common region, continuity, closure, Pragnanz, figure-ground, common fate and connection. In design they explain why a layout reads as clear groups or as clutter.
There is no fixed number. Wertheimer described the core factors in 1923, and researchers added more later, such as common region in 1992. Most design guides list between six and eight.
Another name for the Gestalt principles of perceptual grouping: the rules that decide which elements people see as belonging together, such as nearness, likeness, a shared boundary or a shared line.
German psychologists of the Gestalt school, mainly Max Wertheimer, Kurt Koffka and Wolfgang Köhler, in the early twentieth century. Wertheimer's 1923 paper on perceptual grouping is the best-known source.
They decide whether people see the structure you intended. Good grouping makes a screen quick to scan and shows what belongs together and what is clickable, without extra lines, boxes or labels.
The way people split a scene into the thing in focus, the figure, and what is behind it, the ground. Dimming the page behind a modal is a common example: it makes the dialog the figure.