LLOS.ai
Gestalt & Perception
● Gestalt & Perception · Module 2 · Grouping

The Law of Similarity

When things can’t sit closer together, the eye groups them another way — by what they have in common.

Module 1 grouped by distance. But distance runs out — a legend scattered across a chart, rows locked to a grid, links buried in a paragraph. When you can’t move things closer, the eye reaches for its second rule: likeness. Elements that share a colour, a shape or a size read as one set, however far apart they sit.

This is the law that lets a design speak in categories — every link the same blue, every error the same red, every primary button the same shape. Get it right and a stranger reads your groups without a word of instruction. Get it wrong and unrelated things fuse into one, or a lone oddity screams for attention it never earned. You’ll feel all of it in three quick labs.

~7 min3 felt labsa pop-out test10-question bankglossary · FAQ
The journey — Gestalt & perception
proximitynear = together
similarityalike = together
closuremind fills gaps
figurewhat is on top
continuitythe eye flows
common fatemove together
One idea runs through all six: your mind groups the world before you decide to look — and design can steer it.
What you’ll be able to do
01 · Likeness, not distance

Nothing moved. Groups appeared.

In Module 1 you made groups by moving dots closer. Here the spacing is locked — a perfectly even five-by-five grid, every dot the same distance from its neighbours. Proximity has nothing left to say.

So watch what happens when you change one thing that isn’t distance. Tint a few columns, or square off a few rows, and the grid instantly splits into groups — columns, or rows — without a single dot moving. That’s similarity: the eye ties together whatever looks alike.

Likeness
Twenty-five evenly spaced dots. Group them without moving a single one.
▶ Switch from Uniform to By colour or By shape. The spacing never changes — only the likeness does.
Twenty-five identical dots — one undivided field.
Try it. Colour three columns and you’ll see columns; square off three rows and you’ll see rows. The dots stay exactly where they are — likeness does all the grouping.
02 · Grouping you can scan

Count the urgent ones

Here’s a to-do list with three priorities mixed together. Your job: find how many are P1 — urgent. In the first state, priority is buried in a tiny code at the end of each row, so you have to read all eight to be sure.

Now colour-code the tags. The three urgent tasks light up in the same orange — and suddenly you count them in a single glance, without reading a word. That’s similarity turning a reading task into a seeing one.

The Colour Code
Same eight tasks. Only a shared colour tells you which belong together.
▶ Start Uncoded and hunt for the three urgent tasks. Then hit Colour-coded and watch them collect themselves.
Uncoded. To find the three P1 tasks you have to read every row’s little code, one by one. The urgent items are here — they just don’t look like a group. Switch to Colour-coded and let similarity gather them for you.
03 · The pop-out — and its limit

Find the odd one

Similarity is so fast it feels like magic — but only for one trait at a time. Below is a field of shapes with a single odd one hiding in it. Hit start, find it, and watch the clock.

In Single feature, the odd one differs by colour alone — it pops out in a heartbeat, no matter how many others there are. Switch to Conjunction, where the target shares its colour with some and its shape with the rest, and the magic dies: you have to hunt item by item. That gap is the whole truth about similarity.

Pop-out
One odd shape, thirty distractors. Time yourself in each mode.
▶ Pick a mode, press Start & find it, then tap the odd one out. Compare your times.
0.00s
Pick a mode and press Start. In Single feature the odd one is a different colour — it should jump out almost instantly. In Conjunction it hides in plain sight, and you’ll feel your eye slow to a crawl.
The craft of likeness

Consistency is a promise the eye can read

Every lab here is one law wearing different clothes. Name it, and “be consistent” stops being a chore and becomes a tool.

Same role, same look. Different role, different look.

Similarity is the eye’s second grouping rule, and it works on a small set of visual variables — colour, size, shape, orientation, texture. Colour is the loudest; the others follow. That hands you a rule you can apply to any interface: give the same job the same look, and a different job a visibly different one. Do that and your design starts speaking in categories the moment someone glances at it.

This is what “consistency” actually buys — not neatness, but grouping. Every link that shares one style becomes a set the eye collects at once; every primary button that matches becomes a single, learnable thing. The two failure modes are opposite. Too little similarity, and a lone off-style element looks like it does something special when it doesn’t. Too much, and everything carries equal weight, so nothing leads and hierarchy dies. Sameness and difference are both tools; spend each on purpose.

One caution the labs can’t show you: the strongest variable, colour, is the one roughly one in twelve men can’t fully see. So code by colour and a second cue — a shape, an icon, a label. Redundant coding groups for everyone. The working test is brutal and quick: squint until detail blurs, or drain the colour from the screen — do your groups still hold together? If they vanish, similarity was carrying more than it safely can.

Cast your vote

Which one groups better?

Five face-offs. Same content, two spacings — one makes the relationship obvious, one makes you guess. Pick the clearer, then see why.

Round 1 of 5Score 0
Seen in the wild

Grouping by likeness, everywhere

Once you can see similarity, you catch it sorting the world into kinds — on every screen, and far beyond them. Five places you lean on without a thought.

Where likeness leads next

Proximity and similarity both group things that are fully there. But the eye will also group things that are not there — it completes a broken circle, closes a dotted outline, reads a shape from a handful of gaps. When perception fills in what’s missing, that is closure, and it’s Module 3.

Take it further

The real references

The Gestalt psychologists named this law a century ago, and the field has tested it ever since. Five worth your time. (Opens in a new tab.)

The vocabulary

The Similarity glossary

Six words that turn “it looks inconsistent” into a precise, fixable diagnosis. Tap a card to flip it.

The nuance

Questions you actually ask

Busting the myths

What people get wrong

Myth
“Similarity just means colour.”
Colour is the loudest cue, but not the only one. Shape, size, orientation and texture all group too — and when colour isn’t safe to rely on, they carry the load.
Myth
“Make everything look consistent.”
Total sameness kills hierarchy — if every element matches, nothing leads. Consistency groups things of the same role; deliberate difference is what makes the important thing stand out.
Myth
“Colour coding works for everyone.”
Roughly one in twelve men is colour-blind. Colour alone can hide a whole category from them. Pair it with a second cue — a shape, an icon, a label — so the grouping survives.
Myth
“Proximity and similarity are the same idea.”
Different cues. Proximity groups by distance; similarity groups by likeness. They often work together — and when they disagree, proximity usually wins.
Train the eye

Read the grouping

Ten questions in seven formats, tagged by thinking level — each with layered hints: a nudge, the reasoning, then a deeper connection. A wrong answer opens a door, never a dead end. Served from the question bank, never hardcoded.

Loading the question bank…
Question 1 of 10
Multiple choice
Keep going

Where this connects

▶ Play the labs