Attention Friction
Attention friction is the visual and temporal noise on a page — pop-ups, motion, competing CTAs — that pulls users away from the primary action. Here's how to measure and reduce it.
Attention Friction
Interface noise — pop-ups, motion, competing CTAs — that pulls a user's focus away from the primary action on a page.
Attention friction is the sum of visual and temporal interruptions on a page that compete with the action you actually want the visitor to take. It shows up as exit-intent modals firing two seconds after scroll, autoplaying hero videos behind a Buy button, sticky chat widgets, cookie banners that linger, and second- or third-tier CTAs sized like the primary one.
It is distinct from cognitive load. Cognitive load is the mental effort of understanding a page — parsing copy, comparing options, doing math on a discount. Attention friction is what happens before any of that: the eye and brain are pulled off-task by something moving, blinking, or shouting. Reducing it usually lifts conversion without changing the offer.
Most teams underestimate attention friction because each individual element was added with a good reason. The newsletter pop-up exists to capture email. The chat bubble exists to handle support. The promo bar exists to push the seasonal sale. Stacked together on the same product page, they collectively bury the Add to Cart button under a layer of interruption.
As a sub-discipline of friction reduction, the fix is rarely deletion — it's choreography. You decide which element earns attention at which scroll depth, on which device, for which traffic source. A returning customer landing on a product page from a Klaviyo email does not need the same welcome modal a cold paid-social visitor sees.
AFI = (competing_elements × avg_salience) / primary_cta_dominance
AFI
Attention Friction Index
Composite score; lower is better. Above 1.5 typically signals a cluttered page.
competing_elements
Competing elements
Count of interactive or animated elements visible above the fold besides the primary CTA (pop-ups, chat, promo bars, secondary buttons, autoplay media).
avg_salience
Average salience
Mean visual weight of competing elements on a 0-1 scale (motion = 1.0, high-contrast static = 0.6, low-contrast static = 0.3).
primary_cta_dominance
Primary CTA dominance
Salience score (0-1) of the primary CTA — size, contrast, position, and uniqueness combined.
A Shopify apparel store's product page above the fold: an autoplaying lifestyle video (1.0), a sticky chat bubble (0.5), a free-shipping promo bar (0.4), and a secondary 'Add to Wishlist' button styled almost identically to Add to Cart (0.7). The primary Add to Cart CTA has decent contrast but sits below the fold on mobile (0.5).
Competing elements: 4
Average salience: 0.65
Primary CTA dominance: 0.5
AFI: 5.2
→ AFI = 5.2
An AFI above 3 is a strong signal the page is fighting itself. Pausing the hero video and raising Add to Cart above the fold typically drops AFI below 2 and lifts add-to-cart rate 8-15%.
The index is diagnostic, not prescriptive. It helps you rank pages against each other and against themselves over time. Pair it with scroll heatmaps and rage-click data to confirm which elements are actually stealing attention, not just present on the page.
Typical attention-friction signals by page type
| Page type | Competing elements above fold | Conversion lift after fix |
|---|---|---|
| Shopify product page (apparel) | 3-5 | 8-15% |
| Shopify product page (beauty) | 4-6 | 10-18% |
| WooCommerce category / collection | 2-4 | 5-9% |
| Checkout step 1 (contact) | 2-3 | 12-22% |
| Mobile homepage (paid social landing) | 5-7 | 15-25% |
| Magento cart page | 3-5 | 7-12% |
Mobile is where attention friction punishes the hardest. A desktop visitor can ignore a sidebar; a mobile visitor sees the cookie banner, the promo bar, the sticky chat, and the navigation drawer all consuming the same 375 pixels. Audit mobile first — that's where 70%+ of your Shopify traffic lives and where the lifts are largest.
Attention friction — common questions
Cognitive load is the effort required to understand or decide — comparing two SKUs, reading shipping terms, calculating a bundle discount. Attention friction is upstream: it's what pulls the eye and focus off-task before any thinking starts. A page can be cognitively simple and still have brutal attention friction if it's full of motion and pop-ups.
Friction reduction is the broader discipline of removing barriers to conversion. It includes form friction (too many fields), trust friction (missing reassurance), and decision friction (too many options). Attention friction is the visual-interruption sub-category — the noise layer rather than the logic layer.
Yes, but timing matters. An exit-intent modal triggered when the cursor genuinely leaves the viewport adds friction only to abandoning users — usually a net positive. A pop-up that fires on a 3-second timer or on scroll depth interrupts engaged users and almost always costs more than it earns.
Usually yes on transactional pages. Motion is the most salient visual signal there is — your eye is wired to track it. A muted autoplay loop above a product CTA pulls attention away from the button. Brand and editorial pages are different; there the video may BE the conversion event.
Three proxies get you 80% of the way: scroll heatmaps showing where users pause, click maps showing rage clicks on non-clickable elements, and session recordings filtered for users who scrolled past the primary CTA without interacting. The Attention Friction Index gives you a static score to compare pages.
Not by default — chat often pays for itself in recovered orders. Test hiding it on the first scroll-depth threshold and showing it only after 30 seconds of dwell or on a cart/checkout page. That preserves the support channel while removing the visual interruption during initial decision-making.
One primary. Secondary actions (wishlist, size guide, share) should be visually subordinate — smaller, lower contrast, or text-link styled. If a visitor squints and sees two equally weighted buttons, you've split attention and probably lost the sale to indecision.
Indirectly. Pages with lower attention friction tend to have lower bounce rates and higher dwell time, both of which correlate with Google's quality signals. More directly, removing autoplay video and heavy modal scripts improves Core Web Vitals — particularly CLS and INP — which are ranking factors.
Open your top-traffic product page on a mid-range Android phone in a private window. Count every animated, blinking, or pop-up element that appears in the first 10 seconds. Anything above three competing with the primary CTA is a candidate for removal, delay, or restyling.
No — returning customers have stronger goal-orientation and can tune out familiar noise. The biggest gains from reducing attention friction usually come from cold paid-social and paid-search traffic, where the visitor has no context and any interruption can derail the first 15 seconds.
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.