What you'll understand by the end of this lesson
- What the Law of Similarity is and why the brain applies it automatically
- How consistent button styles, navigation links, and form sections use this principle
- What happens when similar-looking elements belong to different groups
- How to audit your pages for similarity signals that confuse rather than clarify
The principle in plain English
The Law of Similarity is one of the Gestalt principles of visual perception. It says: elements that look alike are perceived as belonging together.
The brain doesn't wait for a label or an instruction. When it sees a group of objects with the same colour, shape, size, or style, it automatically places them in the same category. No conscious effort required.
This is efficient — it's why you can scan a page in milliseconds and understand its structure before you've read a single word. But it also means that visual consistency carries meaning. When two elements look the same, visitors assume they work the same way and belong to the same group. When they look different, visitors assume they're separate — even if they're logically related.
A simple example
Imagine a form with five fields. Four have a white background and a grey border. One has a light yellow background and no border.
The different-looking field immediately draws attention. The viewer's brain asks: why does this one look different? Is it important? Is it required? Is it a warning?
If the different styling was intentional — to highlight a required field — it's working perfectly. If it happened because two designers worked on different parts of the form, it's creating confusion without purpose.
The Law of Similarity: same look means same category. Different look means different category. Unintentional difference means unintentional confusion.
How it applies to website design
Button styles and actions
The most important application for conversion is button styling. Buttons that look the same should trigger the same type of action. Buttons that look different should trigger different types of action.
A page where the primary CTA ("Start free trial"), the secondary CTA ("Learn more"), and a form submit ("Send enquiry") all look identical doesn't give visitors any visual signal about which action is most important or what kind of result each one produces.
A page where the primary CTA is large, dark, and prominent — while secondary actions are smaller and outlined — uses similarity to communicate hierarchy. The primary button belongs to the "main action" category. The secondary ones belong to the "lower commitment action" category.
Run a button audit on your most important landing page. Count how many distinct button styles you have and ask whether each visual category corresponds to a meaningful action category. If you have four button styles but no consistent logic about what each one means, you have a similarity problem.
Navigation links
Navigation items that all look the same — same typeface, same size, same colour — read as a set. The visitor understands: these are all navigation options of the same type.
When one navigation item looks different — larger, bolded, a different colour, with a background highlight — the visitor reads it as a different category. If that's intentional (a "Book a call" CTA styled differently from the navigation links) it works well. If it's accidental inconsistency, it creates visual noise.
Form sections and field groups
A form that uses visual grouping — separating fields into visually distinct sections with a label — uses similarity to help the user understand structure. "Your details" and "Your company" as separate sections with consistent internal styling tell the visitor: these fields belong together.
A form where every field looks the same, regardless of whether they're in different logical groups, misses this opportunity. The visitor has to read every label to understand the structure instead of scanning the visual layout.
Related content and feature lists
On a pricing page, feature lists that look the same across all tiers tell the visitor: these are comparable options. Feature items that suddenly look different within one tier — a different icon style, an unexpected colour — interrupt the scan and force conscious evaluation.
Don't use the Law of Similarity to trick users. If two elements look the same but behave differently — for example, making a "dismiss" button look identical to a "confirm" button — you're using similarity against the user. This is a dark pattern. Similarity should communicate genuine relationships, not manufacture false ones.
When inconsistency is intentional (and useful)
Breaking the Law of Similarity is a legitimate design tool — but it should always be deliberate.
Making one button visually distinct from all others on a page draws attention to it. Making one navigation item look different signals that it's not just another link. Making one form field stand out indicates that it requires special attention.
The rule is: every visual difference should have a reason. Every reason should be visible to the user as a meaningful distinction. If you can't articulate why an element looks different, it probably shouldn't.
The CRO audit
Look at your main conversion page and ask:
1. Do all primary CTAs look the same?
Every button that triggers the primary desired action — your main CTA — should share the same visual style across the page. If they look different from each other, the page's action hierarchy is unclear.
2. Do visually similar buttons perform the same category of action?
If your "Start trial" button and your "Contact sales" button look identical, you're telling users they're the same kind of decision. They're not. Visual differentiation communicates the difference in commitment and outcome.
3. Are form sections visually separated when they contain logically distinct groups of fields?
Does your form's layout help users understand which fields belong together, or do they have to read every label individually to understand the structure?
4. Is every visual inconsistency intentional?
Go through the page and identify every element that breaks a visual pattern. For each one, ask: was this break intentional? Does it communicate a meaningful difference to the user?
A landing page has three buttons: 'Start free trial' (primary CTA), 'Watch demo' (secondary), and 'Contact sales' (low commitment). All three look identical — same size, same colour, same style. What is the conversion problem?
Similarity groups elements. But there's a deeper principle about how the brain handles visual complexity itself — one that explains why simple layouts feel easier to use even when they contain exactly the same information as complex ones.