Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group — even if those elements are separated.

Overview

The Law of Similarity is one of the Gestalt principles of visual perception. It states that elements sharing visual characteristics — shape, colour, size, texture, orientation — are perceived as belonging to the same group, even when they are not adjacent. The mind automatically clusters what looks alike, independently of where things are positioned.

In interface design, similarity is one of the most powerful tools for communicating structure without explicit separation. When buttons that perform similar functions share the same visual treatment, users understand they are related. When navigation items look different from content items, users understand the functional distinction without needing labels. Consistent visual language is the application of the Law of Similarity at scale.

Takeaways

01
Use consistent visual styling — colour, shape, size — to signal functional grouping. Elements that look alike will be perceived as performing related actions.
02
Differentiate elements that serve different functions through deliberate visual dissimilarity — don't make a destructive action look the same as a constructive one.
03
Apply similarity consistently across the interface: inconsistent application breaks the signal and forces users to evaluate every element individually rather than trusting the pattern.

How to Apply This

Use colour consistently to encode meaning.
If blue means clickable link in your interface, it should mean that everywhere. If red means warning, it should only appear in warning contexts. Inconsistent colour use breaks the similarity signal — users lose the ability to trust their visual intuitions and must consciously read every element.
Apply consistent component styles.
All primary buttons should look identical. All secondary buttons should look identical but distinct from primary. All destructive actions should share a visual treatment that sets them apart. When components look the same, users know they work the same — and that predictability is itself a usability feature.
Use dissimilarity to signal difference.
When you need to distinguish two related but functionally different elements, change a visual attribute deliberately. A visual distinction survives layout changes in a way that position alone doesn't — and it communicates the distinction without the user needing to read anything.

Common Misconception

Similarity is often applied only to colour, but it operates across all visual dimensions: shape, size, orientation, texture, and motion. An element that animates differently from its peers will be perceived as functionally different — which is a useful tool when deliberate, and a source of confusion when accidental.

Origin

The Law of Similarity was first formulated by Gestalt psychologists as part of Max Wertheimer's foundational work on perceptual grouping, published in 1923. Along with proximity, continuity, and closure, it forms the core set of Gestalt principles describing how the visual system organises sensory input into coherent wholes. The principles were developed as a direct challenge to the atomistic theories of perception that then dominated psychology.

FAQ

What is the Law of Similarity?: The Law of Similarity states that elements that share visual characteristics — colour, shape, size, texture, orientation — are perceived as belonging to the same group, regardless of their spatial proximity. It is one of the core Gestalt principles of perceptual organisation.
How is similarity used in UX design?: Through consistent component styles, colour encoding, iconography, and typography. When interactive elements look consistent, users build accurate mental models of what will happen when they act. When non-interactive elements look different from interactive ones, users avoid clicking them. Similarity is the foundation of a reliable visual language.
What visual properties trigger the similarity effect?: Shape, colour, size, texture, orientation, and motion all trigger perceptual grouping by similarity. Colour is typically the strongest and fastest-acting cue. Shape is the most reliable across different display conditions. Motion similarity — elements that move together or in the same way — is a powerful but often underused grouping signal.
How does similarity relate to visual hierarchy?: Visual hierarchy uses controlled dissimilarity to signal importance — the most important element looks most different from everything else, drawing the eye first. Similarity creates the baseline from which hierarchy operates: you can only make one thing stand out if everything else looks consistent. Without similarity as a foundation, hierarchy has nothing to contrast against.