Gestalt Principles

Conversation about layout ran on impressions for a long time. Feels cramped. Something's off. These two should be closer. The person hearing it couldn't tell what to move or by how many pixels, and the person saying it couldn't explain why it felt that way. Put three people in front of one screen and you got three different suggestions, with the decision sliding toward whoever outranked the others.

An actual review sounded like this. Someone looks at a form of six fields and says it's busy. Someone else says to widen the spacing, and every gap widens by the same amount. The screen gets longer and stays just as busy, because nothing changed about which fields belong together — and there was no vocabulary for saying that.

Gestalt principles are the vocabulary, borrowed from psychology. German psychologists working on perception in the 1910s wrote up the finding that people don't see individual pieces and assemble them afterward; they see groups from the start. Set out six dots in pairs and a person sees three pairs, not six dots.

Carried into screen design, that changed what a review could say. "It's busy" becomes "this label reads as belonging to the field below it," and the fix narrows to one gap. A matter of taste turned into something checkable.

Looking at a screen, a person settles what belongs with what before anything else, using a handful of cues. Those cues are the principles. Six of them do most of the work in interface design.

1. Proximity — things placed close together read as one group. It's the strongest cue and the one used most. Put 4 pixels between a label and its field and 24 between one field group and the next, and nobody has to be told which label goes with which input. Set both to 12 and the label could belong to either side.
2. Similarity — things that look alike read as the same kind of thing. On a screen where every blue word is clickable, one blue phrase used for emphasis gets clicked, and when nothing happens people call it broken.
3. Common region — anything enclosed by a border or a background reads as one group, and this beats proximity. Items inside a card belong together even when spread apart; an item outside the card is separate no matter how close it sits.
4. Continuity — items lined up read as a continuing flow. That's why a left-aligned column scans vertically. Indent one item and it drops out of the flow into a different level.
5. Closure — an incomplete outline gets filled in as a closed shape. Marking only the corners of a region is enough for it to read as a region, which is why a selection frame needs no full border.
6. Figure and ground — what's in front separates from what's behind. Dim the screen and float a box on top and the box reads as the live layer, everything behind it as untouchable for now.

When cues disagree, the stronger one wins. Color a set of items identically but spread them far apart and distance beats color. Grouping by color and then spacing carelessly breaks the grouping you intended, and the fix is almost always in the layout rather than the styling.

Forms are where this comes up most. Past about eight fields, how hard the screen is to use depends on where the group boundaries fall, and the value being edited is usually a single gap. A checkout where shipping and payment details blur together gets fixed by widening the space between the two blocks to 32 pixels, with no change to the labels at all.

Rather than deciding those gaps by feel each time, teams fix the allowed values in a design system. Offer only a few steps — 4, 8, 16, 24, 32 — and groupings stop reading differently from screen to screen. A grid system, which fixes columns and gutters, does the same job horizontally.

These principles travel with visual hierarchy, which decides what gets looked at first. Hierarchy sets the order through size and contrast; gestalt principles decide what counts as one unit within that order. Get only one of the two right and the screen still doesn't read.

In design review the principles get cited as reasons. The names that come up alongside them are Fitts's law, Hick's law, and Miller's law: targets that are larger and nearer get hit faster, more options make choosing slower, and people hold about seven items at once.

"The gaps are identical here, so you can't tell which field the label belongs to. Let's make the spacing above and below different."

A concrete request to rebuild the grouping with one spacing value.

"The color groups them but the distance doesn't, so they don't read as a set."

Proximity is beating similarity, so the layout needs fixing rather than the palette.

"Put these in a card and they'll read as one block."

A proposal to group by drawing a region around them.

Noa once rebuilt Pagedeck's settings screen. Fourteen items sat there with an identical 16 pixels between every one of them. Support kept receiving tickets saying notification settings couldn't be found, and the notification items were sitting plainly in the middle of the screen. They weren't invisible; people skipped past them because nothing said what they belonged to.

Noa changed only the spacing, leaving the wording and the order alone. Items on the same subject moved to 8 pixels apart, subject boundaries opened to 32, and each block got a small heading. Fourteen items became four groups, and those tickets dropped off the following month.

The usual mistake is reading the principles as a way to make screens prettier. The name sounds like it came from art, which makes the assumption easy. What they actually judge is not whether something looks good but whether the groups people read match the groups the designer intended. Treat it as a question of beauty and review slides back into trading preferences.

Treating whitespace as leftover room is the other common error. It shows up as tightening every gap to fit one more item on screen, but empty space isn't empty — it carries the information about what belongs with what. Compress the gaps uniformly and more items fit while the grouping disappears, which forces people to read the screen one line at a time from the top. The scan-and-jump motion is what gets lost.