Gestalt Principles

Picture a menu where every dish, price, and description is listed with exactly the same spacing. You can’t tell which price belongs to which dish or where the starters end. A second menu has exactly the same text, but with a little more space between dishes and a bold heading for each section. Suddenly it all makes sense, even though not a single word was added.

Explained simply

The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. You don’t see twelve separate dots, you see three rows. You don’t see four lines, you see a square. It happens without you thinking about it.

Here’s an everyday comparison: in a parking lot, you instantly see which cars are parked in the same row, even if nobody painted any lines. Your brain groups what’s close together and looks alike.

The term comes from Gestalt psychology, which emerged in Germany in the early 20th century. “Gestalt” is German for shape or form, in the sense of a whole. A 1912 paper by Max Wertheimer is generally seen as its starting point, and together with Wolfgang Köhler and Kurt Koffka he shaped the field. In 1923, Wertheimer published an essay describing the principles by which we group elements.

The most useful principles for interfaces

For digital interfaces, these principles are especially helpful:

• Proximity: Things that are close together seem to belong together. A label placed right above its input field clearly belongs to it.
• Similarity: Things that look alike, for example in color, shape, or size, seem related. Links that all share one color signal the same function.
• Closure: We mentally complete incomplete shapes. That’s why many minimal logos and icons work.
• Common region: Elements inside a shared border or on a shared background read as a group. Stephen Palmer only described this principle in 1992, and it’s the basis for card layouts.

The principles aren’t equally strong. A shared container can, for example, beat proximity: elements inside a box look like they belong together even if they’re a bit further apart. To see how you can use tools like these to structure text and pages, read How to Structure Content the Right Way.

An example

Here’s an example. A contact form has six fields, all evenly spaced. The labels sit exactly halfway between two fields. Test participants type their phone number into the email field because they match the label to the wrong input.

After the redesign, each label sits snugly above its field, with more space between the pairs. Name and address form one block, contact details a second. No extra lines are needed. The spacing alone does the job.

In practice

• Use spacing on purpose. The space within a group should be clearly smaller than the space between groups.
• Make similar things look similar. Give elements with the same function the same look, and make elements with a different function visibly different.
• Go easy on boxes. Borders and background panels group things strongly, but they quickly make a layout look busy. Whitespace is often enough.

Related terms

Affordance, Cognitive Load, Information Architecture, Design System

Sources

• Aurora Harley: Proximity Principle in Visual Design. Nielsen Norman Group, 2020
• Aurora Harley: The Principle of Common Region: Containers Create Groupings. Nielsen Norman Group, 2020
• Johan Wagemans et al.: A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological Bulletin, 2012