Strategy⚡ Low

Selective Attention

Users see what they expect to see and ignore the rest. If your important element does not align with what they are looking for, they will not see it — regardless of how large, colorful, or prominent it is.

Error MessagesCTA DesignForm DesignOnboarding FlowsNavigationAlert Design

01 — TL;DR

Two sentences.

Selective attention is the brain's mechanism for filtering incoming information — users actively process only what matches their current goal or expectation and suppress everything else, regardless of how visually prominent it is. A warning banner at the top of a checkout page is invisible to a user whose attention is locked on the price; an error message styled like ambient UI chrome is invisible to a user who expects errors to be loud and red.

The phenomenon was formally demonstrated by Christopher Chabris and Daniel Simons in their 1999 "invisible gorilla" experiment, which showed that people counting basketball passes failed to notice a person in a gorilla suit walking through the scene. For designers, the practical implication is uncomfortable: visual prominence alone does not guarantee attention — if an element does not match the user's active goal or expectation, it will be filtered out no matter how large, colorful, or centrally placed it is.

02 — When to Use

Apply this when…

→Users in session recordings are repeatedly missing an error message or validation warning that seems obvious to the design team

→A CTA has low click-through despite being above the fold and visually prominent — users may be goal-locked on a different part of the page

→Security or consent elements are being skipped in usability tests by participants focused on completing a task

→An onboarding tooltip is being ignored because it appears while users are focused on exploring the product

→A navigation change is not being discovered because users are using learned muscle memory from the previous layout

When NOT to apply it

Skip it when the user is in full exploratory mode with no prior expectation — selective attention is driven by expectation, and first-time users have none. Also skip when your interface is genuinely simple and linear, or when the issue is low contrast or accessibility failure rather than attentional filtering.

03 — How It Works

The mechanism

Selective attention works through a two-stage process: a broad, unconscious pre-attentive scan that flags elements matching current goals or strong visual signals, followed by focused conscious processing of only those flagged elements. Everything that is not flagged in the first stage is effectively invisible during the second.

Goal-directed attention creates perceptual blindness

When the brain is engaged in a goal-directed task — counting, searching, completing a form — it allocates attentional resources specifically to task-relevant stimuli and actively suppresses everything else. This is not a failure of attention; it is attention working correctly. The brain is protecting cognitive resources by filtering out noise. The problem for designers is that "noise" and "important design element" can occupy the same visual space.

Placement and pattern-matching beat size and color

An element will get attention if it appears where users expect to find something important, or if it breaks a strong enough pattern to trigger the pre-attentive stage. This is why inline validation errors — positioned exactly where users are looking when they fill in a field — are more effective than a summary error banner at the top of the form. The banner is larger and more prominent, but the user's eyes are not at the top of the form when they hit submit.

Familiarity increases blindness

The more familiar users are with a pattern, the more efficiently their brain filters it. Cookie consent banners, GDPR notices, and "important" update messages are systematically ignored by experienced web users — they have learned that these elements do not serve their current goal. The same mechanism that makes expert users fast also makes them blind to anything that looks like UI furniture.

How to measure it

The most direct measurement is eye-tracking, which shows exactly where users looked and for how long — an element with zero fixations was invisible regardless of what the session recording shows. Without eye-tracking, a think-aloud usability test where participants narrate what they see will surface attentional failures. A/B testing element position — moving elements into versus outside the user's primary task flow — produces measurable lift when selective attention is the root cause.

Not the same as banner blindness

Selective attention is not the same as banner blindness, though banner blindness is one consequence of it. Banner blindness is the learned habit of ignoring rectangular elements at the top and sides of pages. Selective attention is the broader mechanism: users filter anything that does not match their current goal, regardless of position. Solving selective attention requires understanding the user's goal at the moment they encounter the element — not just repositioning it.

04 — Real Example

GOV.UK's error summary and the form that nobody reads

GOV.UK's design system includes two mandatory error patterns used together: an error summary at the top of the page listing all errors, and inline error messages positioned immediately below each affected field. The inline errors were added specifically because usability research showed that users completing long government forms consistently missed the summary at the top, even when it was styled in red with a bold heading.

The design team's insight was that the user's attentional focus during form completion is at field level, not page level. The summary serves users who arrive at the top of the page after a failed submit — a different attentional mode. Using both patterns acknowledges that the same user has different attentional states at different moments in the same flow.

GOV.UK · Design System

Two error patterns for two attentional states

Inline + summary = two attentional states covered

05 — In the Wild

Test yourself & see real examples

No examples yet — be the first.

Spotted a warning, error, or CTA that users clearly miss in real usage — or a product that solved an attention problem elegantly? Submit what you observed.

✓ Reviewed before publishing✓ Your name on every example you submit✓ Violation or fix — both welcome

Seen Selective Attention violated in a real product? Help grow the evidence base.

06 — Common Mistakes

Where teams go wrong

✗Assuming visual prominence guarantees attention. Teams add size, color, and animation to important elements and consider the problem solved. But if the element is positioned outside the user's current attentional focus, no amount of visual prominence will help. The question is not "is this visible?" but "is this visible to a user whose attention is locked on something else right now?"

✗Placing warnings where designers look, not where users look. Error messages are routinely placed at the top of forms because that is where the designer's eye goes when reviewing the design at rest. Users filling in forms have their attention at field level. The same mistake appears with security warnings in headers, consent notices in footers, and status updates in sidebars.

✗Treating banner blindness as a placement problem. When users ignore a banner, teams move it — right rail, then left rail, then above the fold, then below the hero. This treats it as a positioning problem when it is an expectation problem. Users have learned that rectangular elements in certain visual idioms do not require their attention. Changing the visual idiom — or embedding the information in the task flow — works; repositioning the same pattern does not.

✗Using animation to force attention without considering context. Animated elements are effective at triggering the pre-attentive stage, but only once. After a user has seen the animation and determined it is not relevant, the brain learns to suppress it on subsequent passes — often faster than it would suppress a static element. Animation is most effective for one-time, contextually triggered moments — not for persistent elements users encounter repeatedly.

07 — Variations & Related Principles

Connected ideas

Selective attention sits within the broader framework of cognitive load and perceptual psychology. Understanding its neighbors helps you diagnose whether an attention problem is about filtering, capacity, or expectation — each of which has a different design solution.

The most important pairing is Selective Attention with the Von Restorff Effect. Selective attention explains why elements get missed; Von Restorff explains the primary mechanism for making elements unmissable. Understanding both means you can diagnose whether a missed element needs repositioning, distinctiveness, or task-flow integration.

08 — 10-Min Exercise

Run it right now

⏱ 10 minutes · Solo · No prep

The Invisible Element Audit

1. Open a screen from your product that contains an element you believe is important — an error message, a warning, a CTA, a security notice. Write down exactly what goal a user would have when they arrive at this screen.

2. Now look at the screen only through the lens of that goal. Trace the path a user's eyes would follow if they were focused entirely on completing that goal. Mark every element that falls outside that path — those are your invisible elements.

3. For each invisible element, ask: does it need to be inside the task path, or does it need to interrupt the task path? Elements that need to be seen but not acted on should be moved inside the path. Elements that require immediate action need to interrupt via modal, inline placement, or task blocking.

4. Pick the single most important invisible element and sketch one repositioning that puts it inside the user's likely attentional path. If you cannot move it there, write down why — that constraint is the real design problem to solve.

10 minutes