Phones are mostly operated with one hand, and the thumb reaches the lower and centre portions of the screen comfortably while the top corners require regripping. Screens have grown considerably while hands have not, which means the traditional habit of placing primary actions at the top right now puts them in the hardest place to reach.
How phones are actually held
Observational research into mobile handling consistently finds three patterns: one-handed use with the thumb doing the work, cradling where one hand holds and the other taps, and two-handed use. One-handed operation is common enough to design around, and it is the most constrained case, which makes it the right one to design for.
Proportions vary between studies and contexts, so treat any specific figure with caution. The durable finding is not the percentages but the geometry: a thumb anchored at the bottom of the device sweeps an arc, and that arc does not comfortably reach the far top corner.
The zones
| Area | Reach | Suited to |
|---|---|---|
| Lower centre | Easiest | Primary actions, call buttons, form submission |
| Lower corners | Comfortable | Secondary actions, navigation |
| Middle | Reasonable | Content, most interaction |
| Top edge | Requires stretch or regrip | Infrequent actions |
| Opposite top corner | Hardest | Things you rarely want tapped |
The awkward implication is that the top right, where desktop convention places the primary call to action and where mobile convention places the menu icon, is the least reachable point on the screen for a right-handed one-handed user.
What follows from this
Put the primary action low
A sticky bar along the bottom of the viewport carrying the phone number or main action sits in the easiest reach zone and stays there regardless of scroll position. This is why it consistently outperforms a header button, as noted in phone number placement.
Do not rely solely on a top-corner menu
The convention is established and worth keeping, but it should not be the only route to important destinations. Repeating key links in the page content and footer gives the reachable alternative.
Keep destructive actions away from the easy zone
Anything with consequences should not sit where a thumb naturally lands, since the easiest area to reach is also the easiest to hit by accident.
Size and space the targets properly
WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at Level AA, or sufficient spacing that a 24 pixel circle centred on one target does not overlap another. Treat that as a floor rather than an aspiration; comfortable targets are larger.
Spacing matters as much as size. Adjacent links in a dense footer list are individually large enough and collectively impossible to hit accurately.
Watch the bottom edge
Browser interface elements and system gesture areas occupy the very bottom of the screen. An action placed flush against the edge can be obscured or compete with a system gesture, so a small margin above the edge is worth keeping.
The test
Hold your phone in one hand, the way you would while carrying something, and try to complete the main action on your own site without adjusting your grip.
If you have to shuffle the device to reach the button, so does every visitor, and some of them are standing in a basement holding a torch.
Frequently asked questions
What is the thumb zone in mobile design?
The area of a phone screen a thumb can reach comfortably during one-handed use. Because the thumb is anchored near the bottom of the device, the lower and central portions are easiest to reach while the top corners require stretching or regripping.
Where should the main call to action go on mobile?
In the lower portion of the screen, where the thumb reaches most comfortably. A sticky bar along the bottom of the viewport carrying the phone number or primary action stays in that zone regardless of scroll position, which is why it tends to outperform a header button.
Is the top-right menu icon a mistake?
The convention is well established and worth keeping, but the top corner is the hardest area to reach one-handed, so it should not be the only route to important destinations. Repeating key links within the page content and footer provides a reachable alternative.
What is the minimum size for a tappable button?
WCAG 2.2 requires 24 by 24 CSS pixels at Level AA, or sufficient spacing that a 24 pixel circle centred on a target does not overlap another. That is a floor rather than a target, and comfortable tap targets are generally larger.
Does spacing between tap targets matter?
As much as size. Links that are individually large enough but tightly packed, as in a dense footer list, are collectively difficult to hit accurately, which produces mistaps and the frustration of landing on the wrong page.
How can I test whether my site works one-handed?
Hold the phone in one hand as you would while carrying something and attempt the main action on your own site without adjusting your grip. If you need to shuffle the device to reach the button, so does every visitor doing the same thing.
West Coast Media Solutions Inc. builds websites for businesses across Canada. Conversion research is heavily context dependent and widely misquoted; where we describe a principle rather than citing a figure, that is deliberate.
Want a second opinion on your site?
We review sites for businesses across Canada and show you exactly where enquiries are being lost, and what it takes to fix it.
Start a Conversation