Gestalt principles: 7 laws of grouping in the interface

In short

When you look at a screen, you don’t count the elements one by one. The eye sees groups first: these three fields are a form, those two buttons belong to the same task. Gestalt principles describe the rules of this grouping.

The idea comes from Gestalt psychology. According to Laws of UX, these psychologists held that the mind naturally tends to look for patterns in what it sees, based on certain rules.

According to Wikipedia, Max Wertheimer’s laws came to be called the “Gestalt laws of grouping” over time. According to the article, Irvin Rock and Steve Palmer consider the name “principles of grouping” more fitting. On this page, I use both to mean the same thing.

The practical consequence for design: users read relationships from the picture before they read the text. A badly grouped screen gets misunderstood despite correctly written labels.

Origin: flashing lights

Laws of UX traces the story back to an observation by psychologist Max Wertheimer in 1910. Wertheimer watched lights flashing on and off at a railroad crossing.

The lamps only turned on and off one after another. But the eye saw a single light that moved. The same happens with cinema signs whose lights seem to run around the frame.

This observation led to principles describing how we perceive objects. Laws of UX writes that these principles are at the heart of nearly everything designers do graphically.

To me, the lesson of this story is simple. Users act on what they perceive on the screen. The job of design is to make the perceived structure match the actual structure.

Live demo: try each principle with a setting

Choose a principle, then change the setting below it. For proximity, drag the slider to the right and see which field the label seems to belong to.

Gestalt playground

This demo works with JavaScript. If it’s off, look at the examples for the seven principles below.

Each of the seven principles has a setting. I made the example screens and texts; they aren’t the result of a study. The preview is hidden from screen readers; every change is described in words in the box below.

Once the proximity slider passes 20 pixels, the label visually slides toward the field above. This is exactly the mistake I see most often in forms: the space below the label is bigger than the space between fields.

7 Gestalt principles, with interface examples

Sources count the principles differently. Laws of UX organises the principles of grouping into five categories: proximity, similarity, continuity, closure and connectedness. I chose the seven that help me most when reviewing interfaces.

1. Proximity

Elements that sit close together are perceived as part of the same group. Example: put the form label right above its field, and leave more space before the next label.

2. Similarity

Elements that share a visual trait such as colour, shape or size seem more related than dissimilar ones. Example: use the link colour only for clickable elements, and give the main button a different colour from the secondary buttons.

According to Harley, a shared colour stands out more than other traits such as shape. That is why colour used wrongly also forms a group. In one of Harley’s examples, a decorative icon in the same colour as a button seems to belong to the button and can be mistaken for clickable.

3. Common region

Elements within an area bounded by a border or background are perceived as a group. Example: in a product list, put the image, name and rating together in a card.

One of Harley’s examples is the old version of a recipe app. Because of uneven spacing, it was hard to tell which rating belonged to which recipe. Once each recipe went into a card, the confusion was gone.

4. Closure

The mind completes an incomplete shape and overlooks gaps at the edges. Example: in a horizontally scrolling list, leave the last card cut off at the screen edge, and the person understands there is more.

I often see the opposite. If the cards fit the screen exactly, the list looks finished, and people miss that it scrolls. To me, a cut-off card is a stronger cue than page dots.

5. Continuity

The eye prefers to follow lines that keep one direction over lines with sharp, sudden changes of direction. Example: put the step indicator at checkout on a single line.

I use the same principle for alignment. Labels and fields with the same left edge look like a column. If a single field is indented or outdented, the eye gets stuck there.

6. Figure and ground

The eye separates a figure from its background. In Wikipedia’s example, the black letters on printed paper are the figure and the white paper is the ground. An interface example: dim the page behind an open dialog, and the dialog becomes the figure, the page the ground.

Another example from the article is the vase by Danish psychologist Edgar Rubin. In the same drawing, you see either a white vase against a black ground or two dark faces looking at each other.

7. Common fate

Elements that move in the same direction at the same speed are perceived as one unit. Wikipedia’s example is a flock of birds. An interface example: when several files are selected and dragged, the selected ones should move together.

Two more laws aren’t on my list of seven, but Laws of UX gives each its own page. The law of Prägnanz says that people interpret an ambiguous or complex image in the simplest possible form. The law of uniform connectedness describes how visually connected elements seem more related than unconnected ones.

Which principle wins when they conflict?

On a screen, several principles act at once and sometimes conflict. According to the articles by Aurora Harley of Nielsen Norman Group, proximity can override similarity of colour or shape.

Common region is stronger still. In Harley’s example, two dots grouped by proximity are separated by borders in between. The dish cards in the demo show this too.

Even so, Harley recommends spacing as the first step. Unnecessary borders make the design busy. Unnecessary full-width coloured bands can also give the impression that the page has ended, and stop scrolling.

My order is the same. First I group with spacing. If spacing isn’t enough, or there is no room, I add a border or background.

Gestalt principles in forms

In my experience, Gestalt principles make the biggest difference in forms. According to Harley, a form with twelve fields in one block looks daunting, while the same fields in three meaningful groups look manageable. That is the visual counterpart of chunking from Miller’s law.

The same rule applies to buttons. In one of Harley’s form examples, the Add button sits between Continue, Save as draft and Cancel. Related buttons such as Back and Next should sit next to each other. Separate the unrelated ones.

On similarity, Harley warns: if all buttons have the same colour, the person doesn’t recognise which one is the main action. If Send looks like Cancel, it gets lost.

In responsive design, groups can change with screen size. Two links side by side on desktop may move apart when stacked on mobile. Check the groups again at every breakpoint. Details are in the form design pattern.

My note

When I review a screen, I squint before reading the text. In the blurred picture, I look at which groups I see. If these groups don’t match the product’s actual structure, that is where the problem is.

Most of the problems I find come from spacing or colour. You saw the spacing that pushes the label to the wrong field in the demo. With colour, the most common case is the link colour also being used for headings that aren’t clickable.

The lasting fix is to set spacing and colours as rules in the design system. If you want this check done for your own product, take a look at the UX Audit.

Related pages

Gestalt principles describe what seems to belong together. How long the person takes to reach a target is described by Fitts’s law. How much information they can keep in their head is the subject of Miller’s law, mentioned above.

Whether an element looks clickable is the subject of affordance and signifier. It is close to similarity, because the link colour is a signifier too. The other laws are in the list of laws of UX.