Law of Similarity

The law

Elements that look alike are seen as belonging together, even when they are not next to each other.

Colour, shape, size, weight and style all count. In an interface, similarity quietly tells people what an element is and what it does: everything that looks like a link is assumed to behave like a link.

Where it comes from

Max Wertheimer, one of the founders of Gestalt psychology, set out the principle in Untersuchungen zur Lehre von der Gestalt, published in Psychologische Forschung in 1923. Using simple figures of dots and circles, he showed that people group alternating rows of filled and hollow circles by their appearance, seeing rows or columns depending on which elements look alike.

The same paper described grouping by proximity and the tendency towards the simplest organization. Wertheimer's examples were drawings rather than measurements, but the principles have held up in later experimental work on perceptual grouping.

What it means for an interface

• Same look, same behaviour. Every interactive element of one kind, such as links, buttons or chips, should share one style, so people learn it once.
• Different look, different meaning. If two things behave differently, they should not look the same. A disabled button styled like an active one invites wasted clicks.
• Similarity groups across distance. Items with the same colour or icon are connected in people's minds even across a screen, which is useful for status and dangerous when accidental.
• Combine with other cues. Similarity and proximity together make the strongest groups. When they conflict, the result is confusing.

Examples

Navigation. In a top navigation bar, all items share one style and the current page gets a different one. People read the set as a menu and the odd one as "where I am".

Status colours. A dashboard that uses the same red for every error lets people find all problems at a glance. Using that red for a brand accent breaks the group.

Text links. Links styled the same way across a site are recognized instantly. Underlined text that is not a link, or links styled like body text, break the pattern.

Where it is misapplied

• Styling unrelated things alike. Headings and buttons in the same colour and weight make people try to click the headings.
• Over-reliance on colour. A group defined only by colour is invisible to people who cannot tell the colours apart. Add shape or text.
• Rigid sameness. Similarity is about meaning, not uniformity. Elements with different jobs should look different, even if a design system makes everything alike.
• Ignoring the outlier. Making one item different isolates it; see the Von Restorff effect. Do it deliberately, not by accident.

Checklist

• Every interactive element of the same kind shares one visual style.
• Non-interactive text never uses the link or button style.
• Status colours are used only for status, and each has a second cue such as an icon or label.
• Elements that behave differently look different.
• The current item in a set is marked with a distinct, consistent style.

Related

• Law of Proximity: spacing groups items the same way appearance does.
• Law of Common Region: a boundary can group items that look different.
• Von Restorff Effect: the one item that breaks a similar set stands out.
• Patterns: Breadcrumb.