Skip to content
UX Atlas
UI foundationEstablished researchFoundational

Similarity

Elements that look alike are assumed to behave alike, which makes visual language a promise.

Definition

A Gestalt grouping principle. Shared colour, shape, size or orientation causes elements to be perceived as a set, regardless of their spatial arrangement.

Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.

On this page
  1. Definition
  2. The promise you make by styling something
  3. Similarity rules worth writing down
  4. In practice
  5. Sources
  6. Continue from here

The promise you make by styling something

If two elements share a treatment, users expect them to do the same kind of thing. Styling a non-interactive badge like a button is a broken promise, and users will click it. Styling two different kinds of action identically is the same error in reverse.

This is why a design system is a semantic system rather than a visual one. The value is not that things look consistent, it is that appearance predicts behaviour.

Similarity rules worth writing down

  • One appearance per meaning: all destructive actions look alike and nothing else does.
  • Interactive and static elements are visually distinguishable at rest, not only on hover.
  • Status colours map to one meaning each across the whole product.
  • Icon style is consistent in weight, corner treatment and optical size within a set.
  • Cards of the same type share structure, so their contents can be compared position by position.

In practice

Badges styled as buttons

Component libraries

A pill-shaped status label with a filled background gets clicked, repeatedly, in usability testing. The fix is visual differentiation, not a tooltip explaining that it is not clickable.

Consistent card structure

Listings

When every card puts price in the same position, scanning a grid is a single vertical sweep. When positions vary, each card has to be read individually.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • Principles of Gestalt Psychology

    K. Koffka, Harcourt Brace, 1935

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

Navigation

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.