Selective Attention
Selective attention is the cognitive filter that decides what shoppers actually notice on your page — the mechanism behind banner blindness, heatmap hotspots, and every visual-hierarchy test that ever moved a needle.
Selective Attention
The cognitive filter that decides which on-page elements a shopper consciously perceives — and which get ignored.
Selective attention is the brain's bandwidth control: the perceptual system processes far more visual information than working memory can hold, so it auto-prioritises a few elements and discards the rest. On an e-commerce page, that means a shopper's eyes physically pass over your free-shipping banner, badges, and secondary CTAs without those pixels ever reaching conscious awareness.
It's the mechanism underneath banner blindness, heatmap interpretation, and every visual-hierarchy test you've ever run. If a button isn't getting clicks, the question isn't always "is the copy wrong?" — often it's "did the visitor even register that the button exists?"
Two filters drive the process. Bottom-up attention is stimulus-driven — a high-contrast colour, motion, or a face captures the eye automatically. Top-down attention is goal-driven — a shopper hunting for "size guide" will fixate on text that matches that intent and ignore everything else.
Both filters compound. A visitor on a product page with a clear buying intent has narrow top-down focus, which is why aggressive promo banners often go unseen: they don't match the goal, and unless their bottom-up salience is extreme, they're filtered out before conscious awareness. This is the parent mechanism behind most Memory & Perception effects in commerce UX.
Salience = (Contrast × Size × Motion) / Visual Competition
Contrast
Contrast
Luminance and colour distance from surrounding elements (0-1 scale)
Size
Relative size
Element area as a proportion of the visible viewport
Motion
Motion factor
1.0 for static, up to 3.0 for animated or auto-rotating elements
Visual Competition
Visual competition
Count of other high-contrast elements within the same fold
An apparel store's 'Free shipping over €50' banner sits above a hero with 6 competing badges, trust seals, and a rotating carousel.
Contrast: 0.6
Size: 0.08
Motion: 1.0
Visual Competition: 6
→ Salience ≈ 0.008
A salience score below ~0.05 effectively guarantees the element is filtered out for goal-driven shoppers. Either reduce competing elements or boost contrast and size — chasing the banner with more motion usually backfires by training shoppers to ignore that zone entirely (classic banner blindness).
Salience is necessary but not sufficient. An element can win the bottom-up fight and still be ignored if it doesn't match top-down intent — which is why placing the size guide next to the size selector beats putting it in a flashy floating widget. Match the goal, then make it visible.
Approximate noticeability of common product-page elements (eye-tracking + click-map composite)
| Element | Noticed by | Acted on | Typical failure mode |
|---|---|---|---|
| Primary product image | 95% | 60% | Rarely fails; over-cropping hides detail |
| Add-to-cart button (above fold) | 88% | 12-18% | Low contrast against hero background |
| Price | 82% | n/a | Hidden below fold on mobile |
| Trust badges (header strip) | 22% | <1% | Banner blindness — looks like an ad |
| Free-shipping bar (top) | 31% | 2% | Position learned and filtered out |
| Rotating hero carousel slide 2+ | 8% | <1% | Motion ignored after first fixation |
| Exit-intent popup | 76% | 3-8% | Noticed but dismissed reflexively |
The pattern is consistent: anything that looks like an ad — top banners, rotating heroes, badge strips — loses to elements embedded in the natural reading path. This is why Attention Optimization work usually starts by removing visual competition, not by adding more emphasis.
Frequently asked questions
Banner blindness is one specific outcome of selective attention. Shoppers learn the visual signature of ads — top strips, sidebars, bright rectangles — and their top-down filter starts ignoring those zones automatically, even when the content is genuinely useful.
Compare heatmap click density against where you intend attention to land. If a key element gets fewer than 20% of visitors hovering or clicking in its zone, it's likely being filtered out. Pair this with scroll-depth and time-to-first-click for confirmation.
Yes — the smaller viewport forces sequential rather than parallel attention, so elements compete one fold at a time instead of all at once. Mobile shoppers also fixate longer per element, so a single weak CTA above the fold causes more damage than on desktop.
Briefly, yes — motion is one of the strongest bottom-up salience cues. But repeated or auto-looping motion gets pattern-learned within 1-2 sessions and is filtered out as effectively as a static banner. Use motion sparingly and only for genuinely new information.
Visual hierarchy is the deliberate design of selective-attention outcomes. By controlling contrast, size, spacing, and position, you guide which elements win the attentional competition first, second, and third — converting an unconscious filter into a designed reading path.
They cluster in zones shoppers have learned to associate with ads (header strips, footer rows), they're small, and they don't match active shopping goals. Trust signals work better when embedded near the friction point — next to the price, payment selector, or add-to-cart.
Both are simplifications of real eye-tracking data. For text-heavy pages the F-pattern dominates; for image-led product pages, attention clusters on the main image, then the price, then the CTA. Design for the content type rather than forcing a pattern.
Run a five-second test (show the page briefly and ask what people remember), check session recordings for hover and pause patterns, and segment heatmaps by traffic source — paid traffic with strong intent attends differently than cold organic visitors.
Usually, yes. Selective attention is a competition; reducing competitors raises the salience of survivors at zero design cost. Only add emphasis once the page is decluttered, because contrast is relative — bolder type means nothing on a page that's already shouting.
For shoppers who visit a category of sites regularly (e-commerce, news), the filter is essentially pre-installed — they ignore typical ad zones from the first visit. Within-site, repeat visitors learn your specific layout in 2-3 sessions and start filtering accordingly.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.