Mobile Friction
Mobile friction covers the tap-target, speed, and input patterns that drag phone conversion below desktop. Here's how to spot and size it.
Mobile Friction
The mobile-specific UX problems — tiny taps, slow loads, broken inputs — that drag phone conversion below desktop.
Mobile friction is the set of usability problems shoppers hit on a phone that they wouldn't hit on a desktop browser: tap targets sized for a mouse cursor, modals that trap focus, double-tap zoom that misfires, autocomplete fields that don't surface the saved card, and pages that crawl on a flaky 4G connection.
It matters because mobile is now the majority of online retail traffic but still converts at roughly half the rate of desktop. That gap is rarely a single bug — it's the cumulative cost of dozens of small frictions stacked through the funnel from PLP to thank-you page.
The friction patterns cluster into four families. Input friction (forms, keyboards, autofill, address lookups), interaction friction (tap targets under 44px, double-tap zoom, hover-only menus), performance friction (LCP above 2.5s on 4G, layout shift, blocking scripts), and layout friction (sticky headers eating viewport, modals without close buttons, carousels that hijack scroll).
What makes mobile friction so expensive is compounding. A 200ms speed regression alone might shave 1% off conversion. Pair it with a checkout field that pops the wrong keyboard, and you've doubled the abandonment on that step. Friction reduction work on mobile pays back faster than almost any other CRO investment for that reason.
Mobile Friction Gap = (Desktop CVR − Mobile CVR) / Desktop CVR
Desktop CVR
Desktop conversion rate
Sessions-to-order rate for desktop traffic over the analysis window.
Mobile CVR
Mobile conversion rate
Sessions-to-order rate for mobile (phone) traffic over the same window. Exclude tablet.
A Shopify apparel store sees 3.2% conversion on desktop and 1.6% on mobile over a 30-day window.
Desktop CVR: 3.2%
Mobile CVR: 1.6%
→ Mobile Friction Gap = 50%
Mobile is losing half the conversion rate of desktop. A gap above 40% usually means at least one structural issue in mobile checkout — most often address entry, payment field focus, or a slow LCP on PDP — rather than diffuse UX tax.
The gap won't ever reach zero — mobile shoppers genuinely browse with lower purchase intent — but the typical 50% gap is far higher than the 20-30% you'd expect from intent alone. The remainder is recoverable through friction reduction work targeted specifically at phone sessions.
Typical mobile vs desktop conversion rates by vertical
| Vertical | Desktop CVR | Mobile CVR | Friction Gap |
|---|---|---|---|
| Apparel & accessories | 2.8% | 1.5% | 46% |
| Beauty & cosmetics | 3.4% | 2.1% | 38% |
| Home & garden | 2.1% | 0.9% | 57% |
| Electronics | 1.9% | 0.8% | 58% |
| Food & beverage | 4.1% | 2.6% | 37% |
| Health & supplements | 3.6% | 2.0% | 44% |
Verticals with high consideration (electronics, home goods) carry the widest gaps because mobile shoppers research on phone but switch to desktop to buy. Low-consideration repeat-purchase categories (beauty, food) show the narrowest gaps. If your store sits well above the vertical average, the issue is almost certainly fixable UX, not buying behaviour.
Mobile friction FAQ
Apple's HIG recommends 44×44pt minimum; Google Material recommends 48×48dp. In practice, any interactive element under 40px on a phone screen will cause mis-taps, especially in checkout. Buttons should also have at least 8px of spacing from neighbours to prevent fat-finger errors.
Friction reduction is the broader practice of removing anything that slows a buyer down. Mobile friction is the subset that only manifests on phones — touch input, small viewports, mobile network variance, mobile OS keyboards. Desktop optimisations don't fix it; you have to test on actual devices.
Each additional second of LCP on mobile typically costs 4-7% of conversion in the 1-4s range. Above 4s the loss accelerates. Improving LCP from 3.5s to 2.0s on a phone is often worth more than any A/B test you'd run on copy or layout.
Yes — almost always. Win rates and effect sizes differ enough that pooling devices hides real wins and ships fake ones. Segment by device class from the start, and accept that mobile tests will need more sessions to reach significance.
Address autofill and Apple Pay / Google Pay at the top of checkout. Both eliminate the worst step of mobile UX — typing 8-10 form fields with thumbs — and typically lift mobile checkout completion by 10-20% on stores that hadn't enabled them.
No. Responsive design solves layout — content reflowing to fit the viewport. It doesn't solve input friction, network friction, or interaction friction. A perfectly responsive site can still have 40px tap targets, a 5s LCP, and a checkout that pops the wrong keyboard.
Run the actual checkout on a mid-range Android device on throttled 4G — not the Chrome emulator. Pair that with session replay filtered to mobile sessions that reached checkout but didn't convert. The hot spots show up within the first 20 replays.
Wider device fragmentation (screen sizes, browser versions, lower-end hardware), more aggressive battery throttling of JS, and historically weaker autofill behaviour. Most stores see Android convert 15-25% below iOS even after controlling for traffic source.
They can, but only for the speed and re-engagement axes — instant loads from cache, push notifications, offline-tolerant carts. They don't fix bad form design, tap targets, or checkout flow. Treat PWA as one tool, not a strategy.
Shopify's hosted checkout is among the best mobile checkout UX available out of the box — Shop Pay, autofill, optimised keyboard behaviour. Most custom mobile checkouts underperform it by 10-15% on conversion. If you're considering rebuilding, A/B test against the default first.
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.