Mobile Friction Points
A field guide to the recurring mobile UX failures that quietly drain conversion — what they are, why they happen, and how to score them on your own store.
Mobile Friction Points
Recurring mobile UX failures — tiny tap targets, sticky headers, modal traps, broken back navigation — that quietly suppress conversion on phones.
Mobile friction points are the small, repeatable usability failures that disproportionately hurt conversion on phone-sized screens: tap targets smaller than a fingertip, fixed headers that eat the viewport, double-tap-to-zoom triggering instead of a single-tap CTA, modals that don't dismiss when you tap outside them, and single-page-app routing that breaks the browser back button.
They're rarely fatal on their own. They compound. A shopper who pinches to zoom, mis-taps a 28px button, then loses their place when the back gesture refreshes the page is a shopper who closes the tab. Mobile friction points are the operational unit of mobile CRO — the things you actually fix, one by one, on an audit.
Mobile now drives 60-75% of traffic for most online stores but only 35-50% of revenue. That gap is mostly friction. Desktop converts better not because desktop shoppers are different — they're often the same person, the next evening — but because desktop hides the interface failures that mobile exposes.
The friction points worth cataloguing fall into four buckets: touch ergonomics (tap targets, hit areas, gesture conflicts), viewport behaviour (sticky chrome, virtual keyboard overlap, zoom resets), navigation state (back button, scroll restoration, SPA routing) and modal/overlay control (dismissal, focus traps, scroll lock). Most stores have at least one defect in each bucket.
FrictionScore = (Severity * Reach) / Effort
Severity
Severity
How badly the issue blocks the task, 1 (annoying) to 5 (blocks purchase).
Reach
Reach
Share of mobile sessions that hit the defect, 0.0 to 1.0.
Effort
Engineering effort
Estimated dev days to fix, minimum 0.5.
A Shopify apparel store finds the size-selector buttons on the PDP are 32px tall (below the 44px iOS guideline). Mis-taps are common; analytics shows 41% of mobile PDP sessions interact with the selector. The fix is a CSS change in the theme.
Severity: 4
Reach: 0.41
Effort (dev days): 0.5
→ 3.28
A score above 2.0 means fix it this sprint. At 3.28, the size-selector defect is a top-three priority — high impact, trivial effort. Compare against a checkout-modal redesign at score 0.9 (severity 5, reach 0.18, effort 1.0) and the tap-target fix ships first.
The score isn't the answer — it's a forcing function. It stops you from spending two sprints rebuilding the cart drawer when a 30-minute CSS change on the size selector would have recovered more revenue. Most teams over-invest in visible redesigns and under-invest in invisible defect fixes.
Prevalence of common mobile friction points across online stores we've audited
| Friction point | Shopify themes | WooCommerce | Headless / custom |
|---|---|---|---|
| Tap targets below 44px | 62% | 71% | 44% |
| Sticky header > 15% of viewport | 38% | 29% | 47% |
| Modal not dismissible on outside-tap | 44% | 52% | 39% |
| Back button breaks SPA state | 12% | 18% | 68% |
| Virtual keyboard hides submit CTA | 55% | 61% | 33% |
| No scroll restoration after back | 27% | 34% | 58% |
Two patterns stand out. Stock Shopify and WooCommerce themes ship with predictable defects — small tap targets and keyboard-overlap issues — that compound at scale. Headless and custom builds avoid those but introduce harder-to-debug navigation bugs: broken back-button state, lost scroll position, and SPA routing that confuses both users and analytics. Each stack has its own friction signature, which is why a generic mobile CRO checklist usually misses the issues that matter on your store.
Frequently asked questions
Apple's iOS Human Interface Guidelines specify 44x44 points; Google's Material Design says 48x48 dp. In practice, anything below 44px on a phone is a defect — and the spacing between adjacent targets matters as much as the size itself. Two 44px buttons 4px apart still produce mis-taps.
No, but they become one when they consume more than ~12-15% of the viewport, when they don't collapse on scroll-down, or when they overlap form fields that the virtual keyboard pushes up. A 56px sticky header on a 667px iPhone SE viewport is fine; the same header on a checkout page with a focused input field is a problem.
Three sources together: session replays filtered to mobile (look for rage-taps, repeated zooms, and back-button abandonment), Lighthouse mobile audits (it flags tap-target spacing and viewport meta issues), and a manual walkthrough on a real phone — not Chrome devtools — while holding it one-handed. The last one finds the most.
Yes, but unevenly. Tap-target and keyboard-overlap fixes on PDP and checkout pages typically produce 3-8% lift in mobile conversion within a week of shipping. SPA routing fixes lift assisted conversions (people returning via back button) more than primary conversion. Cosmetic friction — odd spacing, low contrast — rarely moves the number on its own.
Variant selector tap targets on the product page. Most themes render size and colour swatches at 30-36px with 2-4px gaps, which causes mis-selection. The shopper then either buys the wrong variant (return) or abandons. Auditing this single component recovers more revenue than redesigning the homepage.
Page speed gets a user to the page; friction points stop them once they're there. A 1.8-second LCP is wasted if the Add to Cart button is hidden behind a sticky promo bar. Mobile CRO covers both, but they're separate workstreams with separate fixes — speed is engineering, friction is interaction design.
On mobile, yes. Phones don't have an Escape key, and the close X is often a 24px target in a corner. When the only way out of a newsletter modal is a 24px X that fails to register on the first tap, users hit the back button — which usually exits the site entirely instead of closing the modal. Outside-tap dismissal is table stakes.
Use the severity × reach ÷ effort score from this page, or any equivalent framework. Sort the list descending and ship the top three this sprint. The trap is treating every flagged issue as equally urgent — most accessibility scanners produce 60+ findings, and prioritising none of them is the same as ignoring all of them.
Indirectly. Core Web Vitals (INP specifically) catches some interaction failures, and Search Console's Mobile Usability report flags tap-target spacing and viewport issues. Neither catches modal traps or broken back-button routing. SEO won't surface these — your conversion data will.
Ship the obvious defects (tap targets below 44px, broken close buttons, keyboard overlap) — they're bug fixes, not experiments, and testing them mostly wastes traffic. A/B test the judgement calls: sticky-header behaviour, modal timing, the trade-off between an exit-intent overlay and a less aggressive bottom-sheet. Save the test budget for genuine uncertainty.
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.