Mobile UX
Mobile UX is the set of design rules that make small-screen shopping work: thumb-zone CTAs, fat tap targets, single-column flows. Here's what good looks like and how to close the mobile conversion gap.
Mobile UX
The design principles that make small-screen shopping work: thumb-zone CTAs, large tap targets, single-column layouts, and no hover-dependent UI.
Mobile UX is how your store behaves on a phone — the placement of buttons, the size of tap targets, how forms collapse, how images load, and how the checkout flows on a 390-pixel-wide screen held in one hand. It is a subset of Mobile CRO: UX is the design layer, CRO is the optimisation discipline that proves which UX changes actually move revenue.
Phones now drive 60-70% of sessions on most Shopify and WooCommerce stores, but typically convert at roughly half the rate of desktop. That gap is almost always a UX problem — friction the desktop version doesn't have — not a traffic-quality problem.
The single most cited mobile UX rule is the thumb zone: the lower-middle third of the screen, where a thumb naturally rests when the phone is held one-handed. Primary CTAs (Add to Cart, Buy Now, Checkout) belong there. Top-of-screen CTAs force a grip change and lose taps.
The second rule is tap-target size. Apple's HIG specifies 44×44pt minimum; Google's Material guidance is 48×48dp. Below that, mis-taps spike — especially in dense product grids and quantity selectors. Equally important is spacing: two correctly-sized buttons placed 4px apart still cause errors because thumbs are fat and screens are imprecise.
Mobile Conversion Gap = (Desktop CVR - Mobile CVR) / Desktop CVR
Desktop CVR
Desktop conversion rate
Sessions-to-orders rate for desktop traffic in the same window.
Mobile CVR
Mobile conversion rate
Sessions-to-orders rate for mobile traffic in the same window.
A Shopify apparel store sees 3.8% desktop CVR and 1.7% mobile CVR over the last 30 days.
Desktop CVR: 3.8%
Mobile CVR: 1.7%
→ 55% gap
Mobile converts at 45% of desktop's rate — a 55% gap. Anything above ~40% suggests a UX or speed problem worth a dedicated audit, not a traffic-mix issue.
A healthy mobile conversion gap is 25-40% for most online stores. Above 50% and you're almost certainly losing taps to undersized buttons, hover-dependent menus, slow LCP, intrusive popups, or a checkout that doesn't autofill. Below 20% is rare and usually means desktop is under-performing rather than mobile being exceptional.
Typical mobile vs desktop conversion rates by vertical (Shopify / WooCommerce stores, €1M-€15M revenue)
| Vertical | Desktop CVR | Mobile CVR | Mobile gap |
|---|---|---|---|
| Apparel & accessories | 3.2% | 1.6% | 50% |
| Beauty & cosmetics | 3.8% | 2.1% | 45% |
| Home & decor | 2.4% | 1.0% | 58% |
| Electronics & gadgets | 2.1% | 0.8% | 62% |
| Food & supplements | 4.1% | 2.4% | 41% |
| Jewellery & high-AOV | 1.9% | 0.7% | 63% |
The diagnostic move: pull mobile-only session recordings for users who reached the product page but didn't add to cart. You'll usually see the same three patterns — pinch-zoom on the price (text too small), rage-taps on a non-tappable image (they expected a gallery), and accidental taps on the wrong variant swatch (targets too close). Each is a testable fix.
Mobile UX FAQ
44×44 points (Apple) or 48×48 density-independent pixels (Google) is the floor. For primary CTAs like Add to Cart and Checkout, push to 56-60px height on phones — the extra hit area materially reduces mis-taps in checkout.
The thumb zone is the comfortable reach arc when holding a phone one-handed — roughly the lower 60% of the screen, biased toward the side of the dominant hand. The top corners are the hardest to reach. Primary actions belong in the bottom-middle; navigation and dismiss buttons can live at the top.
Mobile UX is the design discipline — the principles and patterns that make a phone interface usable. Mobile CRO is the optimisation discipline that A/B-tests UX changes against revenue to prove which ones actually convert. UX produces hypotheses; CRO validates them.
Usually yes, on PDPs longer than one viewport. A sticky bottom bar with price + Add to Cart removes the scroll-back tax once the user has read reviews or description. Most stores testing it see a 5-12% lift in PDP-to-cart rate, though high-AOV considered purchases are more sensitive and worth testing carefully.
Forms that don't trigger the right keyboard or autofill. Email fields without inputmode="email", phone fields without inputmode="tel", and missing autocomplete attributes force users to fight their phone. Fix this before redesigning anything — it's a one-day dev change with measurable impact.
Aim for Largest Contentful Paint under 2.5 seconds on a mid-tier 4G connection. Above 4 seconds, mobile bounce rate roughly doubles. On Shopify, the biggest LCP wins are usually hero image compression, removing unused apps, and lazy-loading below-the-fold sections.
Yes — collapse to a single column, swap multi-step nav for a hamburger or bottom tab bar, and reorder content so the price, CTA, and first review are above the fold. A responsive design that just shrinks the desktop is not mobile-first; it's desktop-with-smaller-text.
Google penalises intrusive interstitials that block content, and users hate them more on phones because the close button is often a tiny X in a corner. Use exit-intent equivalents (scroll depth, time-on-page) and ensure the close target is at least 44×44px. Never popup before the first interaction.
Use a visual editor that supports a mobile-only viewport — most CRO platforms (including Metricuno's Shopify and WooCommerce plugins) let you change CTA position, hide elements, or rewrite copy on mobile only, then split-test against the control. No theme edits, no deploy.
Segment every funnel report by device. The key four: mobile bounce rate, mobile add-to-cart rate, mobile checkout-initiation rate, and mobile checkout completion rate. Compare each to desktop — the stage with the biggest relative gap is where your UX bleeds revenue.
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.