---
title: "Selective Attention"
source: "/reference/selective-attention"
description: "People allocate attention toward a limited subset of what is visible, usually guided by their current goal, expectations, and salient cues."
---
# Selective Attention
People allocate attention toward a limited subset of what is visible, usually guided by their current goal, expectations, and salient cues.
### Principle
People allocate attention toward a limited subset of what is visible, usually guided by their current goal, expectations, and salient cues.
### Why it matters
An interface can contain all required information and still fail if the relevant information does not enter the user's attentional path. Competing banners, animations, repeated badges, dense metadata, and excessive visual priority can consume attention that should remain on the task. Layr should reason about likely task focus rather than treating every element as equally visible.
### Deeper design interpretation
Attention is scarce and goal-dependent. Users do not process every visible element with equal depth; they filter aggressively according to the current task, expectations, movement, contrast, and novelty. A design can therefore contain the correct information and still fail if that information never enters the user's likely attentional path.
The practical challenge is competition. Banners, badges, animated illustrations, multiple primary actions, urgent colors, live counters, and transient notifications can all claim attention. When several elements use high-salience treatment simultaneously, priority becomes noisy and the user must decide where to look before deciding what to do.
Layr should review attention relative to a task state. A dashboard with several legitimate goals may support multiple focal points. A failed payment state, however, has a much narrower priority: the failure and its recovery path should dominate the local attention field.
### What the agent should reason about
Infer the likely task from route, workflow state, focused element, modal context, recent action, or explicit product intent. Then compare visual salience against that task. If the agent cannot determine a dominant task, it should reduce confidence and avoid declaring one element “too distracting” based on preference alone.
Motion deserves additional scrutiny because it repeatedly reclaims attention. Continuous or looping animation near focused work should have a clear functional reason.
### Common failure patterns
- Multiple CTAs use the strongest color and weight in the same decision area.
- Promotional content is more salient than an error or security warning.
- Routine badges use urgent colors, reducing the meaning of genuinely urgent states.
- Live counters update continuously beside forms or editors.
- Secondary actions sit inside the primary reading path with equal emphasis.
### Audit questions
- What is the user's most likely immediate goal in this state?
- Which element wins the first glance, and is that priority justified?
- Does motion repeatedly interrupt focus?
- Are warnings differentiated according to consequence?
### Example agent finding
> **High — The referral promotion dominates the failed-payment state.** The animated referral card uses the page's highest contrast and motion while the declined-card message is rendered as standard body text. In this state, payment recovery is the primary task. Reduce promotional salience and elevate the failure message and retry path until the payment issue is resolved.
### Agent directive
> Protect task-relevant attention. Identify competing elements that are more salient than the information or action needed to complete the current goal.
### Apply this when
- Checkout, forms, onboarding, incident states, dashboards, alerts, navigation, search results, and any screen with multiple calls to action.
### Observable signals
- Several elements simultaneously use the strongest color, size, motion, or elevation.
- A critical warning is visually similar to routine metadata.
- Persistent promotion competes with a primary task.
- Animated decoration runs near an input or decision point.
- Secondary actions receive equal or greater emphasis than the expected next action.
### Recommended actions
- Assign visual priority according to task priority and consequence.
- Reduce unnecessary motion and high-contrast decoration near focused work.
- Escalate warnings based on actual severity rather than using the same treatment for every message.
- Keep the expected next action discoverable without suppressing valid alternatives.
### Do not over-apply
Do not assume one universal task. Dashboards and expert tools may support several legitimate goals. Use route context, user role, state, and workflow to infer attention only when evidence exists.
### Example
**Weak:** A checkout page displays an animated referral banner beside a failed card message, and the promotional banner is more visually prominent.
**Stronger:** The failed payment state clearly owns the user's attention until it is resolved, while promotional content remains quiet.
### Evaluation notes
- **Default severity:** Medium to high when critical information is missed; low for mild distraction.
- **Typical confidence:** Medium because user goal may need inference.
- **Primary evidence:** Visual salience, motion, contrast, route intent, workflow state, action priority.
- **Related rules:** Von Restorff Effect, Hick's Law, Cognitive Load, Aesthetic-Usability Effect
### References
- [Laws of UX — Selective Attention](https://lawsofux.com/selective-attention/)
## Related rules
- [Von Restorff Effect](/__layr/pages/reference/von-restorff-effect.md)
- [Hick's Law](/__layr/pages/reference/hicks-law.md)
- [Cognitive Load](/__layr/pages/reference/cognitive-load.md)
- [Aesthetic-Usability Effect](/__layr/pages/reference/aesthetic-usability-effect.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/selective-attention
- Markdown for agents: https://layr.design/__layr/pages/reference/selective-attention.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon
## Rule object
```yaml
rule:
id: "selective-attention"
title: "Selective Attention"
category: "Perception & Visual Hierarchy"
origin: established
canonical_url: "https://layr.design/reference/selective-attention"
principle: "People allocate attention toward a limited subset of what is visible, usually guided by their current goal, expectations, and salient cues."
directive: "Protect task-relevant attention. Identify competing elements that are more salient than the information or action needed to complete the current goal."
applies_when:
- "Checkout, forms, onboarding, incident states, dashboards, alerts, navigation, search results, and any screen with multiple calls to action."
observable_signals:
- "Several elements simultaneously use the strongest color, size, motion, or elevation."
- "A critical warning is visually similar to routine metadata."
- "Persistent promotion competes with a primary task."
- "Animated decoration runs near an input or decision point."
- "Secondary actions receive equal or greater emphasis than the expected next action."
audit_questions:
- "What is the user's most likely immediate goal in this state?"
- "Which element wins the first glance, and is that priority justified?"
- "Does motion repeatedly interrupt focus?"
- "Are warnings differentiated according to consequence?"
recommended_actions:
- "Assign visual priority according to task priority and consequence."
- "Reduce unnecessary motion and high-contrast decoration near focused work."
- "Escalate warnings based on actual severity rather than using the same treatment for every message."
- "Keep the expected next action discoverable without suppressing valid alternatives."
avoid_when:
- "Do not assume one universal task. Dashboards and expert tools may support several legitimate goals. Use route context, user role, state, and workflow to infer attention only when evidence exists."
common_failure_patterns:
- "Multiple CTAs use the strongest color and weight in the same decision area."
- "Promotional content is more salient than an error or security warning."
- "Routine badges use urgent colors, reducing the meaning of genuinely urgent states."
- "Live counters update continuously beside forms or editors."
- "Secondary actions sit inside the primary reading path with equal emphasis."
evidence_types:
- "Visual salience"
- "motion"
- "contrast"
- "route intent"
- "workflow state"
- "action priority"
default_severity: "Medium to high when critical information is missed; low for mild distraction."
typical_confidence: "Medium because user goal may need inference."
related_rules:
- { id: "von-restorff-effect", title: "Von Restorff Effect", url: "https://layr.design/reference/von-restorff-effect" }
- { id: "hicks-law", title: "Hick's Law", url: "https://layr.design/reference/hicks-law" }
- { id: "cognitive-load", title: "Cognitive Load", url: "https://layr.design/reference/cognitive-load" }
- { id: "aesthetic-usability-effect", title: "Aesthetic-Usability Effect", url: "https://layr.design/reference/aesthetic-usability-effect" }
```
## What to reason about
Infer the likely task from route, workflow state, focused element, modal context, recent action, or explicit product intent. Then compare visual salience against that task. If the agent cannot determine a dominant task, it should reduce confidence and avoid declaring one element “too distracting” based on preference alone. Motion deserves additional scrutiny because it repeatedly reclaims attention. Continuous or looping animation near focused work should have a clear functional reason.
## 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
High — The referral promotion dominates the failed-payment state. The animated referral card uses the page's highest contrast and motion while the declined-card message is rendered as standard body text. In this state, payment recovery is the primary task. Reduce promotional salience and elevate the failure message and retry path until the payment issue is resolved.
## Code reference
The same principle as markup. Compare the structure, not the class names.
```html
CheckoutPayment
Invite a friend, get $10Limited time · ends tonightInvite now
Payment failed. Check your card details.
Update paymentInvite now
2 primary actions · promotion outranks the failure
```
```html
CheckoutPayment
Payment failedYour card was declined by the issuer. No charge was made.
Update payment methodUse another card
Referral offers appear after checkout.
One owner of attention until the state is resolved