Gestalt Principles Quiz: Can You Read These 10 UI Layouts?

10 layout scenes — misfiring forms, decoy buttons, posters where everything shouts. Name the principle at work (or being broken) in each one. Explanations included, no sign-up.

0 / 10 answered

In a sign-up form, every label sits exactly halfway between the field above it and its own field. Users keep typing their email into the phone box. Which principle is being violated?

A landing page uses green rounded rectangles both as its CTA buttons and as decorative "feature badges." Users keep clicking the badges. What went wrong?

A product photo, title, price and Buy button float loosely on the page. The designer wraps them in one bordered card, and suddenly they read as "one product." Which principle?

An icon sits right next to a text field — but it's drawn inside a separate panel with its own background. Users never realize it controls that field. Why?

A logo is drawn with just three broken arcs, yet everyone instantly sees a full circle with a cat inside. Which principle does it lean on?

A checkout form aligns every field along one left edge, and users glide down it without thinking. The zig-zag layout it replaced tested terribly. What's at work?

A poster designer sets the headline, date, venue AND sponsor list all huge and bold, "so nothing gets missed." Which statement is right?

A landing page uses six different font sizes, and testers say they don't know where to look first. Per NN/g's guidance, what's the diagnosis?

To "de-emphasize" the legal footnote, a designer drops it to pale grey on white — barely readable. The reviewer flags it. What's the better move?

Q10

Before launch, the CEO scans the homepage: "All this empty space is wasted — fill it with more banners." What should the designer answer?

Answer all 10 questions to see your result 👆

The principles in this quiz (cheat sheet)

Proximity: Close together = one group. The strongest grouping cue — fix spacing before reaching for lines or boxes.
Similarity: Looks alike = expected to act alike. Same styling silently promises the same behavior.
Common region: One container = one group. Strong enough to override proximity; cards are built on it (Palmer, 1992).
Closure: The brain completes gaps — a few arcs read as a whole shape. Minimal logos live here.
Continuation: Eyes follow lines and curves; alignment creates invisible lines that steer the reading order.
Visual hierarchy: The order eyes visit a page. Decide the #1 element and give it the most visual weight.
Scale: Bigger = more important — but keep to about 3 sizes per layout, or the levels blur.
Contrast: Difference draws the eye. Never crush text contrast below readability to "de-emphasize."
Whitespace: Working material, not waste: it groups, gives focus room to breathe, and lowers cognitive load.
Gestalt: Early-20th-century psychology (Wertheimer, 1923): we perceive organized wholes, not scattered parts.

What are the gestalt principles?

The gestalt principles come from early-20th-century psychology. Max Wertheimer's 1923 research on perceptual grouping showed that we don't see a screen pixel by pixel — the brain automatically organizes parts into structured wholes. Kurt Koffka's famous line captures it: "the whole is other than the sum of the parts" (1935).

The classic grouping laws — proximity, similarity, closure — were later joined by additions such as common region, proposed by Stephen Palmer in 1992. For interface design they all answer one question: what looks like it belongs together? Get the cues right and you never need a caption that says "these things are a group" — the layout says it for you.

This quiz also mixes in visual hierarchy, the craft of deciding what users see first. The working rules, via Nielsen Norman Group: a clear page usually needs only 2–3 font sizes and about three steps of scale; de-emphasize with whitespace, size and weight rather than unreadably low contrast; and treat blank space as material — filling every pixel destroys the very structure you're trying to build.

Every question is a scene from real product work: a form that makes people mistype, a badge that gets clicked, a poster where everything shouts. Miss one, read the one-line explanation, and retake — that's the whole workout.

FAQ

What are the 5 gestalt principles?

The five designers cite most are proximity, similarity, closure, continuation and common region. The classic laws trace back to Wertheimer's 1923 grouping research; common region is a modern addition proposed by Stephen Palmer in 1992.

Who invented the gestalt principles?

Gestalt psychologists in the early 20th century. Max Wertheimer's 1923 paper laid out the grouping laws, and Kurt Koffka popularized "the whole is other than the sum of the parts" (1935).

How are gestalt principles used in UI design?

They control what reads as a group: spacing for related items (proximity), consistent styling for same-function elements (similarity), cards and containers (common region), and alignment that guides the eye (continuation) — all without explanatory labels.

What's the difference between proximity and common region?

Both create groups. Proximity uses distance; common region uses a shared container — and a container is strong enough to override closeness, so two near neighbors in different boxes still read as separate.

How many font sizes should a page use?

Usually 2–3. Past about three sizes, users can't tell the levels apart and the hierarchy blurs — a rule of thumb from Nielsen Norman Group.