Thumb-Friendly Design
Thumb-friendly design places primary actions inside the natural thumb arc on mobile — typically bottom-center to bottom-right. Top-aligned CTAs systematically underperform on long-scroll pages.
Thumb-Friendly Design
Placing primary mobile actions inside the natural thumb arc — typically the bottom third of the screen — to reduce tap effort and lift conversion.
Thumb-friendly design is a mobile UX principle that anchors primary actions (Add to cart, Checkout, Continue) inside the comfortable reach of a one-handed thumb. For most users that arc sweeps from the bottom-center to the bottom-right of the screen on phones above 6 inches, where roughly 75% of online-retail traffic now sits.
The rule is simple: the further a CTA sits from the resting thumb, the more grip-shifts, two-handed corrections, and abandoned taps it produces. On long-scroll product and category pages, top-aligned or mid-fold buttons force the user to either scroll-and-stretch or re-grip — both leak conversions in a way heatmaps make obvious.
The concept traces back to Steven Hoober's 2013 research on how people actually hold phones: about 49% use a one-handed grip, 36% cradle, and 15% use two hands. Even cradlers anchor with one thumb. So even though phones have grown, the ergonomic centre of gravity has stayed in the lower half of the screen.
For a Shopify or WooCommerce store, this shows up most sharply on three surfaces: the product detail page (where Add to cart often sits above the fold but mid-screen), the cart drawer (where Checkout sometimes hides behind upsells), and the checkout itself (where Continue can drift to the top-right on multi-step flows). Moving the primary CTA into the bottom safe zone — sticky or in-flow — is one of the highest-ROI mobile changes you can ship.
Thumb Reach Score = 1 - (distance_from_thumb_rest / screen_diagonal)
distance_from_thumb_rest
Distance from thumb rest
Pixel (or mm) distance from the natural thumb resting point — typically 25% in from the bottom-right edge on a right-handed grip — to the centre of the CTA.
screen_diagonal
Screen diagonal
Diagonal length of the viewport in the same unit as the distance measurement.
A Shopify apparel store audits its mobile PDP on an iPhone 14 (812px tall, 375px wide, ~894px diagonal). The Add to cart button currently sits 620px from the thumb rest (it's mid-fold, above a size selector).
Distance from thumb rest: 620 px
Screen diagonal: 894 px
→ Thumb Reach Score ≈ 0.31
A score of 0.31 sits in the 'requires re-grip' band. After moving the CTA into a sticky bottom bar (distance drops to ~120px), the score rises to 0.87 — and the store's Add-to-cart rate on mobile lifted 14% in the follow-up A/B test.
Scoring every CTA on your top-five mobile templates this way takes about an hour and surfaces the worst offenders fast. As a rule of thumb, anything below 0.6 is a re-test candidate; anything above 0.8 is sitting comfortably in the natural arc.
Mobile CTA tap rates by screen zone (single-action e-commerce pages)
| CTA zone | Avg tap-through rate | Mis-tap rate | Typical lift vs top-aligned |
|---|---|---|---|
| Bottom sticky bar | 6.8% | 1.2% | +18% to +24% |
| Bottom-right in-flow | 5.9% | 1.6% | +12% to +17% |
| Mid-fold (above first scroll) | 4.4% | 2.1% | Baseline |
| Top-right header | 3.1% | 3.4% | -22% to -30% |
| Top-left hamburger zone | 2.4% | 4.8% | -35% to -45% |
Two caveats. First, sticky bottom bars compete with browser UI on iOS Safari — leave at least 16px of safe-area padding so the CTA isn't half-hidden behind the address bar. Second, left-handed users (roughly 10% of traffic) mirror the arc; if your analytics show a meaningful left-handed tap pattern, a bottom-centre placement performs more consistently than bottom-right.
Frequently asked questions
The thumb zone is the arc a thumb can reach without re-gripping the phone. On a 6.1-inch screen held one-handed, that's roughly the bottom 60% of the display, weighted toward the side matching the user's dominant hand. The top-left corner (for right-handed users) is the hardest area to reach.
On product detail pages longer than one viewport, yes. A sticky bottom Add to cart typically lifts mobile ATC rate 10-25% versus in-flow placements because it stays inside the thumb arc no matter where the user has scrolled. Keep it visually quiet so it doesn't fight the page content.
It's primarily a mobile concern, but tablets in portrait orientation behave similarly. On desktop, Fitts's Law replaces the thumb-arc model — large click targets near the cursor's likely path matter more than vertical placement.
Mobile CRO is the broader discipline covering speed, layout, form design, payment methods, and trust. Thumb-friendly design is one specific lever inside that — focused on the ergonomic placement of tap targets. It's usually one of the first audits to run because the fix is cheap and the lift is measurable.
Bottom of the drawer, full-width, anchored so it doesn't move when upsell items load. The most common mistake is letting recommended products push Checkout off-screen — by the time the user scrolls back, intent has decayed. A sticky footer inside the drawer fixes this.
No — it generally helps. WCAG target-size rules (24x24 CSS px minimum, 44x44 recommended) align with thumb-zone best practice. The main accessibility risk is sticky bars that cover content; always allow scroll past the bar and respect the iOS safe-area inset.
Score each primary CTA using the distance-from-thumb-rest formula above, then validate with session recordings: look for users tapping near a CTA but missing, or scrolling-then-back-tracking. Both are signals the button is out of arc. Confirm any redesign with an A/B test rather than shipping blind.
On product pages, 8-20% lift in mobile Add-to-cart rate is common when moving from mid-fold to sticky bottom. On checkout continue buttons, 3-7% lift in step-completion. The gains compound: every step you optimise multiplies through the funnel.
Bottom-centre is the safest default — it works for both right- and left-handed grips. Bottom-right edges out centre slightly for right-handed users but penalises lefties. If your button spans the full width (common in mobile design systems), the question is moot.
Yes. Form submit buttons, date pickers, and quantity steppers all benefit from sitting in the thumb arc. Pay particular attention to multi-step checkout: the Continue button on each step is effectively a mini-CTA and deserves the same placement discipline as Add to cart.
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.