The Law of Similarity

Gestalt Design Principles · Part II of VII

Proximity told us that space creates grouping. Similarity tells us that appearance does too. Elements that look alike, same colour, shape, size, or texture, are automatically perceived as belonging to the same category, regardless of where they sit on the screen.

This is one of the most powerful and most dangerous principles in the designer's toolkit. Powerful because it lets you communicate structure without adding a single line of text. Dangerous because it works whether you've planned it or not, every accidental visual rhyme in your layout sends a signal to the user's brain.

Wertheimer's original experiments showed that when a field of identical shapes has a subset sharing a distinguishing property, say, colour, observers perceive that subset as a group instantly, before any conscious analysis. The brain sorts the field into categories automatically. It cannot be switched off.

The five dimensions of similarity

Similarity doesn't operate on a single axis. The brain groups by any of several visual properties simultaneously. Understanding each one separately gives you precision over which groupings you create , and which you accidentally create.

Interactive demo, explore each dimension

Notice how each dimension creates an immediate, unmistakable grouping, even though the spatial layout hasn't changed at all. The positions of every element are identical across all five views. Only the visual property differs. This is how much influence similarity alone has over perceived structure.

Similarity as a functional contract

In user interface design, similarity carries a specific responsibility that goes beyond aesthetics. When elements look the same, users infer that they work the same. Click one blue button and it does something; see another blue button and you already expect the same kind of action. This is not a learned convention, it is a built-in feature of the perceptual system.

This means similarity is a contract. When you make two things look alike, you are implicitly promising the user they are the same type of thing. Break that promise, style a destructive action the same as a safe one, or give interactive and non-interactive elements the same appearance, and you create confusion that no amount of copy will fix.

Button semantics, similarity defines hierarchy and intent

Navigation states, active vs inactive

Navigation is where similarity violations are most quietly harmful. When active and inactive tabs share identical styling, users have no perceptual anchor for where they are in the interface. The grouping that should communicate "selected from this set" disappears entirely.

Similarity in data, tables and lists

Tables are a case study in applied similarity. Every cell in a column implicitly groups with every other cell in that column because they share position, font, and size. The designer's job is to use additional similarity properties to layer in meaning, status, category, urgency, on top of that structural grouping.

Status badges, colour similarity creates categorical grouping

The shape and size of every badge is identical. The only difference is colour. Yet the two blue rows group together perceptually, the amber rows group, and the red rows group, giving the user a structural map of the table's contents before any text is processed. This is similarity doing its job silently and automatically.

The accidental grouping problem

Similarity is passive, it acts on whatever properties your elements happen to share, not only the ones you've designed intentionally. Accidental visual rhymes are as communicative as deliberate ones. If your user avatars use the same teal background as your "active" status indicator, users will perceive a relationship between those two things. Their brains cannot choose not to.

Icon systems and shape consistency

A well-designed icon system is a similarity system. Every icon shares stroke weight, corner radius, size, and visual style, creating a family that reads as a unified vocabulary. The moment one icon looks different in any of these properties, it reads as a different type of thing, not just a different icon.

Shape similarity, building a coherent icon family

The designer's checklist

1. The deliberate catalogue. List every visual property you use as a grouping signal: which colour means primary action, which means destructive, which means disabled. If you can't list them, you haven't designed them, you've accumulated them.

2. The false promise test. Find every pair of elements that share a strong visual property. Ask: do these actually belong to the same category? If two visually identical things do different things, the similarity is a lie your users will eventually discover.

3. The accidental rhyme audit. Scan your palette and your component library for unintentional colour or shape collisions. Functional colours (success green, error red, info blue) should not appear in decorative or categorical elements, they carry meaning that bleeds onto whatever they touch.

4. The interactive contract. Every interactive element, buttons, links, inputs, toggles, should share properties that non-interactive elements lack. If a decorative card looks like a clickable card, users will click it and feel confused when nothing happens. Hover state, cursor change, and subtle border treatment are the vocabulary of interactivity. Use them consistently.