Gestalt Principles in Interface Design: Proximity, Similarity and Closure

Here is a scenario: a small team is building an app that helps sports clubs manage their training schedules. The settings screen comes together quickly. Twelve rows sit one below the other, all with the same spacing: name, email, change password, push notifications, email notifications, training reminder, language, dark mode, privacy, export data, log out, delete account. Every row uses the same font, the same color and the same arrow on the right.

In the first test, something odd happens. One participant spends minutes looking for the notification settings, even though they are right in front of them. Another taps “Delete account” because they assumed it was just about logging out. None of the labels is wrong, no feature is missing. The problem is something else: the screen doesn’t tell people what belongs together.

That is exactly what the Gestalt principles are about. They describe how the brain automatically combines individual elements into groups. Once you know them, you can structure layouts without adding a single word. In this article, you’ll learn the three most important principles for interfaces: proximity, similarity and closure. Each one comes with a before and after example, and at the end the settings screen gets reworked step by step.

What the Gestalt principles are

The Gestalt principles come from Gestalt psychology, a school of research that emerged in Germany in the early 20th century. The German word “Gestalt” roughly means form or whole. The core idea: we don’t perceive a pile of separate parts, we immediately see patterns and groups. Twelve dots arranged in three rows look like three rows, not like twelve dots.

A key text is a 1923 paper by Max Wertheimer titled “Untersuchungen zur Lehre von der Gestalt II” (Investigations in Gestalt Theory II). In it, he describes several factors that determine how we group elements, including proximity, similarity and closure. Later research added further principles. You’ll also find a short definition in our glossary under Gestalt Principles.

When working on interfaces, one distinction helps. The Gestalt principles answer the question: what belongs together? A separate question is: what matters most, and what do I see first? That is the job of visual hierarchy, which ranks elements through size, contrast and position. The two work hand in hand, but this article sticks to the first question. A page can have a clear hierarchy and still be confusing if nobody can tell which price belongs to which product.

Why does this matter so much? Every group the eye has to work out on its own costs attention. This mental effort is called cognitive load. Well-grouped layouts take work off people’s shoulders, because the brain wants to create order anyway. How much clutter strains working memory is covered in Cognitive Load: Why Less Is Often More in Interface Design.

Proximity: spacing is information

The principle of proximity says: elements that are close together appear related. Elements with more space between them appear separate. That sounds obvious, but it is probably the most powerful tool you have when designing layouts. Aurora Harley of the Nielsen Norman Group (NN/g), a well-known usability research and consulting firm, writes that proximity can overpower competing cues such as shared color or shape.

The tool you use to control proximity is whitespace. That doesn’t have to mean white areas, just any empty space between elements. So whitespace isn’t space that is “left over”. It is information: it tells people where one group ends and the next one begins.

Before and after: a product list

Picture a list of products in an online shop. Each product consists of an image, a name, a price and a rating.

Before: Image, name, price and rating are stacked with 24 pixels between each. The gap between the last element of one product and the image of the next is also 24 pixels. The list reads like one even stream. Whether the “4.5 stars” rating belongs to the product above or below is unclear.

After: Within a product, there are now only 8 pixels between name, price and rating. Between two products, there are 40 pixels. With no line, no border and no new color, everyone can now see at a glance which details belong together.

The numbers are an example, not a standard. What matters is the ratio: the space within a group has to be clearly smaller than the space between groups. If the two values are close, say 16 and 20 pixels, the difference blurs and the eye is back to guessing.

A classic: the label between two fields

Forms are where you’ll see this problem most often. A label, meaning the caption of an input field, sits exactly halfway between two fields. Whether it belongs to the field above or below is anyone’s guess. The fix is the same as for the product list: move the label close to its field and add more space between each label and field pair. For more on making forms easy to understand, read Forms Nobody Abandons.

Far away means overlooked

Proximity has a flip side. An element placed far from everything else doesn’t just belong to no group, it is also easy to miss. NN/g illustrates this with examples like a “Skip” link sitting alone in a top corner while people’s eyes are on the big buttons in the middle. When people focus on a task, they look where the task happens.

For you, that means controls belong close to whatever they affect. A filter that sorts a list sits directly above that list, not in a sidebar at the other end of the screen. An “Edit” link sits next to the content it edits.

Watch out when layouts reflow on small screens

One point that often gets lost in practice: responsive layouts, meaning layouts that adapt to the screen size, can break groups apart. On desktop, two links sit side by side and look like a pair. On a phone, the columns stack, and suddenly several paragraphs separate the two links. NN/g names exactly these cases as a common problem. So check every group not only in the desktop view but also wherever the layout reflows.

Similarity: same function, same look

The principle of similarity says: elements that share a visible trait appear related. The main traits are color, shape and size, but font style and orientation count too. Similarity even works when the elements are spread across the whole page. That makes it your most important tool for consistency.

In an interface, similarity is above all a promise: what looks the same behaves the same. If all links are blue and underlined, people learn within seconds that blue underlined text is clickable. That expectation is valuable, and it is easy to break.

Before and after: links and highlights

Before: On a website, links are blue. Subheadings in articles are blue too, but not clickable. Key terms in body text are blue and bold, but also not clickable. People click on headings and bold words, nothing happens, and after a while they click real links less often as well.

After: Blue is reserved for links only. Subheadings are dark gray and larger, highlights in body text are bold in the regular text color. Now the color means exactly one thing again.

NN/g recommends exactly this: pick one color for interactive elements and don’t use it for decoration. At the same time, the most important action on a page, such as “Add to cart”, should look clearly different from secondary actions like “Cancel”. If all buttons look the same, similarity says: these actions are equal. Most of the time, they aren’t.

Shape and size

Color is only one trait. Shape also tells people what an element does. For example, an online shop styles subcategories like “Sneakers” or “Boots” as rounded pills, and filters like “Size” or “Price” as square fields with an arrow. People quickly learn that pills lead to another page and square fields filter the current list.

Size works the same way. Elements of the same size read as the same type and the same importance. NN/g describes a case where an editorial video in a sidebar was the same size as the ad banners next to it. Many people took it for an ad and skipped it. The content was good, but similarity put it in the wrong group.

When similarity lies

Similarity is always at work, even when you don’t intend it. Three typical mistakes:

• The same icon for different things: A star means “favorite” in one place and “rating” in another. People assume a connection that doesn’t exist.
• Decoration that looks like a link: A colored icon that looks exactly like a button but does nothing leads to clicks that go nowhere.
• Inconsistent components: Three different button styles for the same kind of action leave people wondering whether the actions differ.

A fixed set of rules for recurring elements helps against all three. In larger projects, that is a design system, a collection of components and rules used the same way everywhere. To get started, a simple list is enough: which color for links, which style for the primary action, which for secondary actions.

Closure: the brain fills in the gaps

The principle of closure says: we mentally complete incomplete shapes. Four corners of a square are enough for us to see a square. A circle with a small gap is still a circle to us. The brain prefers closed, simple shapes and fills in gaps on its own.

A frequently cited example is the WWF logo. The panda has no continuous outline, and in many places nothing separates the white of its fur from the white background. Still, we immediately see a complete panda. The Interaction Design Foundation uses exactly this logo to explain the principle.

Closure in icons

In interfaces, you’ll meet closure mostly in icons. Many icons consist of just a few lines that only become an object in your head: an envelope made of a rectangle and two diagonal strokes, a gear made of a circle with a few teeth. This reduction works because the brain adds the missing details.

The limit is reached quickly, though. If too much is left out, there is nothing left to complete, and the icon becomes a puzzle. A good test: show the icon to five people without a label and ask what they see. If the answers vary widely, the icon is too abstract. In most cases, a visible text label next to the icon is the safest solution.

Closure in layouts

Closure also works on larger areas. When several elements align on a shared edge, the eye perceives an invisible line. When four cards sit in a grid with equal spacing, we see one closed area, even though no border surrounds it. That is why neatly aligned layouts feel calm: the eye finds the shapes it is looking for anyway.

Before: On a landing page, text, images and buttons are aligned left in one place, centered in another and slightly indented in a third. Every element stands on its own. The page feels restless, even though there isn’t much on it.

After: All elements in a section start at the same left edge. The eye connects the starting points into an imaginary line, and the section reads as one closed block. Nothing was removed, only aligned.

Closure also explains why an element cut off at the edge suggests that something continues there. In a horizontally scrolling row of cards, a half-visible card on the right edge signals: there’s more. If the row ends exactly at a card’s edge, it looks complete, and nobody thinks of swiping.

One more principle worth knowing: common region

Besides the three classic principles, there is a more recent one that shows up in interfaces all the time: common region. Psychologist Stephen Palmer described it in 1992. Elements that sit within a shared boundary, such as a border or a colored background, are perceived as a group. In his experiments, Palmer showed that this effect can even be stronger than proximity or similarity.

This is the foundation of card layouts. A card bundles the image, title and details of a recipe, a product or an article into one box. Even if the spacing inside the card isn’t perfect, it is clear what belongs together. NN/g describes a recipe app where long titles threw off the spacing, so people matched ratings with the wrong recipes. Cards solved the problem.

Still, restraint pays off. Too many borders and colored boxes make a page busy, and NN/g warns of another effect: wide colored bands across the page can look like the end of the page, so people stop scrolling. Whitespace is often enough. Borders and background areas make sense when whitespace alone isn’t, for example with content of varying length in a grid.

When principles work against each other

In real layouts, all principles act at once, and sometimes they contradict each other. For example, a navigation bar contains five links. The fifth, “Search”, looks exactly like the others but sits far to the right with a big gap. Similarity says: it belongs. Proximity says: it doesn’t. Which signal wins depends on how strong the differences are.

For everyday work, you can simplify this: boundaries like borders and background areas are usually strongest, followed by proximity, then similarity. That is a rule of thumb based on NN/g’s observations, not a law of nature. More important than the ranking is another principle: make all cues say the same thing. If two elements belong together, they should be close, look alike and, if needed, share a background. If they don’t belong together, they should differ clearly in at least one of these ways.

A quick test helps uncover contradictions. Take a screenshot of your layout and blur it heavily, for example with a blur filter in an image editor. Which blocks are still recognizable? If the groups in the blurred image differ from the ones you intended, the layout is sending mixed signals.

Reworking the settings screen step by step

Back to the sports club app from the beginning. Twelve identical rows with identical spacing: the layout doesn’t violate a single Gestalt principle, it just doesn’t use any. Here is how to improve it in four steps.

Step 1: Sort the content. Before anything changes in the layout, you need the groups. The team sorts the twelve items on index cards and ends up with four topics: “Account” (name, email, change password), “Notifications” (push, email, training reminder), “Appearance” (language, dark mode) and “Data and privacy” (privacy, export data). Log out and delete account are left over as special cases. This sorting is a small version of card sorting, a method teams use to find out how people would group content.

Step 2: Use proximity. Within a group, the rows move closer together. Between groups, there is clearly more space, and each group gets a small heading. People can already find the notifications right away, because they only have to scan four blocks instead of twelve rows.

Step 3: Break similarity on purpose. All notification toggles look the same, which is right, because they work the same. “Log out” and “Delete account”, on the other hand, aren’t settings but actions with consequences. They get their own styling: log out as a simple text button, delete account in a warning color with a confirmation step before anything is deleted for good. The similarity to the other rows is removed on purpose.

Step 4: Common region and closure. Each group sits on a slightly offset background with rounded corners. “Delete account” sits at the very bottom on its own, with plenty of space to everything else. All text starts at the same edge, so the areas read as calm, closed blocks.

Before: twelve identical rows, evenly spaced, no headings

After: four labeled groups on their own backgrounds, followed by two clearly separated actions, with the riskiest one at the very end

No text was rewritten, no feature was added. And yet an accidental tap on “Delete account” is now much less likely. Whether the redesign really works is something a short usability test with three to five people will tell you.

Making groups visible to screen readers too

The Gestalt principles describe visual perception. People who are blind or have low vision often use a screen reader, software that reads content aloud. For them, spacing and background colors are invisible. A group created only through whitespace doesn’t exist for a screen reader.

The WCAG, the international guidelines for accessible web content, cover this in success criterion 1.3.1 (“Info and Relationships”). It requires that information, structure and relationships conveyed through presentation can also be determined programmatically. For your groups, that means:

• Headings above groups are real headings in the code, such as h2 or h3, not just bold text.
• Related form fields, like the notification toggles, sit in a fieldset with a legend as the group name.
• Lists of similar items, such as navigation entries, are also marked up as lists in the code.
• Differences conveyed only through color also get text or an icon. WCAG criterion 1.4.1 requires this.

The good news: if you’ve set up your groups cleanly in the visual design, you’ve already done the hard part. The structure in the code then simply reflects what is already visible in the layout.

Conclusion

Proximity, similarity and closure aren’t style rules. They describe what the brain does anyway. It groups what is close together, connects what looks alike and completes what is unfinished. You can’t opt out of that. You can only decide whether your layout works with this tendency or against it.

To get started, three questions for every layout are enough: Is the space within groups clearly smaller than the space between them? Does everything that works the same also look the same, and everything else different? Are shapes and icons complete enough to be recognized clearly? If you can answer yes, people will understand your interface faster, without you having to add a single word. For a compact overview of these and other perception principles, check out the Laws of UX collection.

Checklist

• Content is sorted into meaningful groups before you start designing.
• Spacing within a group is clearly smaller than spacing between groups.
• Labels sit close to their fields, controls close to what they affect.
• Groups stay intact on small screens.
• One color is reserved for links and interactive elements.
• The primary action looks clearly different from secondary actions, and risky actions are set apart.
• The same icons and shapes always carry the same meaning.
• Icons are clearly recognizable or have a visible label.
• Borders and background areas are only used where whitespace isn’t enough.
• The blur test shows the groups you intended.
• Groups are marked up in the code with headings, lists or fieldset.

Sources

• Max Wertheimer: Laws of Organization in Perceptual Forms (English translation of “Untersuchungen zur Lehre von der Gestalt II”, Psychologische Forschung 4, 1923). Classics in the History of Psychology
• Stephen E. Palmer: Common Region: A New Principle of Perceptual Grouping. Cognitive Psychology, 1992
• Aurora Harley: Proximity Principle in Visual Design. Nielsen Norman Group, 2020
• Aurora Harley: Similarity Principle in Visual Design. Nielsen Norman Group, 2020
• Aurora Harley: The Principle of Common Region: Containers Create Groupings. Nielsen Norman Group, 2020
• Mads Soegaard: The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate. Interaction Design Foundation
• W3C: Understanding Success Criterion 1.3.1: Info and Relationships