---
title: "Von Restorff Effect"
source: "/reference/von-restorff-effect"
description: "A distinctive item within a group is more likely to attract attention and be remembered than neighboring items that look alike."
---
# Von Restorff Effect
A distinctive item within a group is more likely to attract attention and be remembered than neighboring items that look alike.
### Principle
A distinctive item within a group is more likely to attract attention and be remembered than neighboring items that look alike.
### Why it matters
Contrast can create priority efficiently. A single primary action, selected plan, urgent status, or changed value can become easy to find when the surrounding system is deliberately quieter. Distinctiveness loses meaning when many elements are simultaneously highlighted. It can also become manipulative when visual isolation steers users toward a commercially preferred choice while hiding meaningful alternatives.
### Deeper design interpretation
Distinctiveness works because an element becomes easier to notice and remember when its surrounding context is comparatively uniform. The effect depends on contrast within a local group. If every card is “featured,” every action is brightly colored, or every notification has a badge, the system removes the baseline that makes distinction meaningful.
In interface design, this principle is most useful for selected state, a primary next action, a meaningful change, or a genuinely exceptional condition. It becomes risky when used to manipulate choices by visually isolating the product's preferred commercial option while minimizing price, limitation, renewal, or cancellation information.
Layr should treat emphasis as a limited budget. Strong emphasis should correspond to a defensible difference in priority, state, or consequence.
### What the agent should reason about
Evaluate distinctiveness inside the relevant comparison set. Measure contrast, scale, color, motion, elevation, and whitespace relative to neighboring items. Then check whether the semantic reason for that distinction is visible and truthful.
A selected option needs distinction even if the design is visually quiet. Conversely, a bright control can be appropriate if it is the only primary action in the local decision.
### Common failure patterns
- Every pricing plan receives a ribbon, accent color, and prominent CTA.
- Selected state depends only on a subtle border that is easy to miss.
- A destructive action is the visually strongest control in a mixed-action footer.
- Promotional emphasis exceeds the visibility of material terms.
- Change indicators are so common that meaningful changes no longer stand out.
### Audit questions
- What is exceptional here, and why?
- Is the strongest emphasis reserved for a real difference in state or priority?
- Are users still able to compare alternatives fairly?
- Does distinction remain accessible without relying on color alone?
### Example agent finding
> **Medium — The selected plan is not visually distinguishable from unselected plans.** The cards share identical borders and CTA treatment; selection is visible only through a small radio control at the top. Add a redundant selected-state treatment to the card boundary and label so users can verify their choice while scanning the pricing grid.
### Agent directive
> Use distinctiveness sparingly for meaningful priority or state. Flag interfaces where too many elements compete to be exceptional or where emphasis misrepresents the user's interests.
### Apply this when
- Primary actions, selected plans, alerts, changes, comparison tables, search highlights, featured items, and state transitions.
### Observable signals
- Multiple primary buttons appear in the same decision area.
- Several badges use unrelated bright colors and all demand attention.
- A destructive or irreversible action is highlighted more strongly than the safe path without justification.
- A selected state lacks any distinctive cue.
- Commercial emphasis visually overwhelms material price, renewal, or limitation information.
### Recommended actions
- Reserve the strongest emphasis for the most important current action or state.
- Use one consistent distinction mechanism for selection or change.
- Reduce emphasis on secondary elements before increasing emphasis on the primary one.
- Pair color with labels, shape, iconography, or text when accessibility requires redundancy.
### Do not over-apply
Distinctiveness is contextual. A bright element is not automatically wrong, and a quiet enterprise UI can still provide sufficient contrast. Evaluate within the local group.
### Example
**Weak:** Every card in a pricing grid has a different accent color, ribbon, and prominent CTA, so no option has a stable priority.
**Stronger:** One recommended option is visibly distinct, all prices and constraints remain equally legible, and the user can compare alternatives without interference.
### Evaluation notes
- **Default severity:** Medium when emphasis changes decisions or hides risk; low for visual noise.
- **Typical confidence:** High for local contrast; medium for intent or ethical impact.
- **Primary evidence:** Color/contrast, variant count, local grouping, action semantics, disclosure visibility.
- **Related rules:** Selective Attention, Law of Similarity, Aesthetic-Usability Effect, Choice Overload
### References
- [Laws of UX — Von Restorff Effect](https://lawsofux.com/von-restorff-effect/)
## Related rules
- [Selective Attention](/__layr/pages/reference/selective-attention.md)
- [Law of Similarity](/__layr/pages/reference/law-of-similarity.md)
- [Aesthetic-Usability Effect](/__layr/pages/reference/aesthetic-usability-effect.md)
- [Choice Overload](/__layr/pages/reference/choice-overload.md)
## Agent guidance
Review criteria, the finding contract a report must use, and worked examples.
Established principle; Layr interpretation and agent guidance. Category: Perception & Visual Hierarchy.
## Retrieve
- Canonical page: https://layr.design/reference/von-restorff-effect
- Markdown for agents: https://layr.design/__layr/pages/reference/von-restorff-effect.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon
## Rule object
```yaml
rule:
id: "von-restorff-effect"
title: "Von Restorff Effect"
category: "Perception & Visual Hierarchy"
origin: established
canonical_url: "https://layr.design/reference/von-restorff-effect"
principle: "A distinctive item within a group is more likely to attract attention and be remembered than neighboring items that look alike."
directive: "Use distinctiveness sparingly for meaningful priority or state. Flag interfaces where too many elements compete to be exceptional or where emphasis misrepresents the user's interests."
applies_when:
- "Primary actions, selected plans, alerts, changes, comparison tables, search highlights, featured items, and state transitions."
observable_signals:
- "Multiple primary buttons appear in the same decision area."
- "Several badges use unrelated bright colors and all demand attention."
- "A destructive or irreversible action is highlighted more strongly than the safe path without justification."
- "A selected state lacks any distinctive cue."
- "Commercial emphasis visually overwhelms material price, renewal, or limitation information."
audit_questions:
- "What is exceptional here, and why?"
- "Is the strongest emphasis reserved for a real difference in state or priority?"
- "Are users still able to compare alternatives fairly?"
- "Does distinction remain accessible without relying on color alone?"
recommended_actions:
- "Reserve the strongest emphasis for the most important current action or state."
- "Use one consistent distinction mechanism for selection or change."
- "Reduce emphasis on secondary elements before increasing emphasis on the primary one."
- "Pair color with labels, shape, iconography, or text when accessibility requires redundancy."
avoid_when:
- "Distinctiveness is contextual. A bright element is not automatically wrong, and a quiet enterprise UI can still provide sufficient contrast. Evaluate within the local group."
common_failure_patterns:
- "Every pricing plan receives a ribbon, accent color, and prominent CTA."
- "Selected state depends only on a subtle border that is easy to miss."
- "A destructive action is the visually strongest control in a mixed-action footer."
- "Promotional emphasis exceeds the visibility of material terms."
- "Change indicators are so common that meaningful changes no longer stand out."
evidence_types:
- "Color/contrast"
- "variant count"
- "local grouping"
- "action semantics"
- "disclosure visibility"
default_severity: "Medium when emphasis changes decisions or hides risk; low for visual noise."
typical_confidence: "High for local contrast; medium for intent or ethical impact."
related_rules:
- { id: "selective-attention", title: "Selective Attention", url: "https://layr.design/reference/selective-attention" }
- { id: "law-of-similarity", title: "Law of Similarity", url: "https://layr.design/reference/law-of-similarity" }
- { id: "aesthetic-usability-effect", title: "Aesthetic-Usability Effect", url: "https://layr.design/reference/aesthetic-usability-effect" }
- { id: "choice-overload", title: "Choice Overload", url: "https://layr.design/reference/choice-overload" }
```
## What to reason about
Evaluate distinctiveness inside the relevant comparison set. Measure contrast, scale, color, motion, elevation, and whitespace relative to neighboring items. Then check whether the semantic reason for that distinction is visible and truthful. A selected option needs distinction even if the design is visually quiet. Conversely, a bright control can be appropriate if it is the only primary action in the local decision.
## Routing
Route a review here when the evidence is primarily visual: grouping, emphasis, state differentiation, alignment, salience, relationship, or scan hierarchy. Pair these rules with accessibility checks when color, contrast, focus, or motion affects perception.
## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.
## Finding contract — emit exactly this shape
```yaml
finding:
rule_id: string
location: string
evidence:
- observable fact
impact: string
severity: low | medium | high | critical
confidence: low | medium | high
recommendation:
change: string
rationale: string
preserve:
- existing design-system behavior
- valid product constraints
```
## Example finding for this rule
Medium — The selected plan is not visually distinguishable from unselected plans. The cards share identical borders and CTA treatment; selection is visible only through a small radio control at the top. Add a redundant selected-state treatment to the card boundary and label so users can verify their choice while scanning the pricing grid.
## Code reference
The same principle as markup. Compare the structure, not the class names.
```html