Thumb zone mobile design: putting actions where thumbs reach
On a large phone held in one hand, the thumb reaches the middle and lower part of the screen easily and the top corners with effort. Put the actions people repeat in easy reach, keep risky or rare ones out of the way, and remember that people change grip constantly, so nothing should depend on one particular hand or hold.
Where the idea comes from
The thumb zone became a common design term through Steven Hoober's observational research on how people hold phones, published in his UXmatters column How Do Users Really Hold Mobile Devices? in 2013. He saw three main grips: one hand, with the thumb doing the tapping; cradled, with the phone in one hand and a finger of the other tapping; and two hands, typing with both thumbs. One-handed use was the most common, but the others were common enough that designing for only one would be a mistake. He also saw people shift grips often, sometimes every few seconds, as the task changed.
Phones have grown since then, which makes the top of the screen harder to reach one-handed. The general shape of the map holds: easy in the lower middle, a stretch at the top and in the far corner, awkward right at the bottom edge for some grips.
What mobile thumb reach means for a website
| Area | Reach | Good for |
|---|---|---|
| Lower middle | Easy | The main action, form buttons, next and back in a flow |
| Middle | Easy | Content, links within text, cards |
| Top of the screen | A stretch, or a change of grip | The logo, the menu button, search: things used once per visit |
| Top corner opposite the thumb | Hardest | Rare or reversible actions, never the only way to do something |
| Bottom edge | Easy, but close to the browser's own toolbar | A sticky action bar, with enough padding to avoid accidental taps |
A website differs from an app in one important way: the browser owns part of the screen. Its address bar and toolbar sit at the top or bottom depending on the browser and the visitor's settings, and they appear and disappear as people scroll. A bar you pin to the bottom of the page sits right next to browser controls, so give it room and keep it short.
One handed mobile design in practice
- Repeat the main action in the content. A "Book a table" button in the header is fine for people who look there first; another one after the menu and after the reviews means nobody has to reach for the top.
- Keep header controls few and large. A logo, one action and possibly a menu button. See hamburger menu best practices.
- Put form submit buttons full width at the bottom of the form, where the thumb ends up after the last field.
- Keep destructive actions away from frequent ones. "Delete" next to "Save" invites mistakes; put space or a confirmation between them.
- Don't mirror for handedness. You can't know which hand someone is using, and it changes. Centre-weighted layouts serve both.
- Make targets big enough everywhere. Reach matters less if every target is generous; see touch target size.
Sticky bottom bars: when they help
A sticky bar with one action at the bottom of the screen can work well for a long page with a single goal, such as a booking page or a product page. It fails when it holds several actions, covers content, or appears on every page whether useful or not. Two accessibility checks matter: the bar mustn't hide the element that has keyboard focus, which WCAG's Focus Not Obscured criterion covers at level AA (scroll-padding-bottom set to the bar's height fixes it), and it mustn't cover content when the page is zoomed. For tab-style navigation along the bottom, see bottom navigation on the mobile web.
Testing thumb friendly design
Emulators show size but not reach. Hold a real large phone in one hand, then the other, and complete the main task: find the price, book, send the form. Note each time you shift your grip or reach for the other hand. Then try it cradled and two-handed. As Hoober points out, fingers also cover the screen, so check that a tapped button's feedback or a menu's options aren't hidden under the thumb that tapped it.
Thumb reach in Anticode
Anticode's publish gate requires every page to declare a phone viewport, so it lays out at phone width rather than as a shrunken desktop page. Design-engine pages keep a compact header with the site's name and one action button, and the same action appears again as the hero's main button, lower on the screen where a thumb reaches it more easily. Booking and contact forms stack to a single column on phones.
Where things sit beyond that is a layout choice. In the layout editor you can drag an element to a different place in its section, make it sticky or reorder sections, and the visual editor lets you move whole sections up or down. If your visitors mostly arrive on phones, move the section with the main action higher and check the order on a real device.
Questions people ask
Should the main button be at the bottom of a mobile page?
It should be reachable without a grip change, which usually means repeating it in the content or after each key section, rather than only in the header.
Is the hamburger menu in the top corner a problem?
It's a stretch on large phones, but acceptable for something used once per visit. Frequent actions shouldn't live there.
Do I need a left-handed layout?
No. People switch hands and grips constantly. Centre-weighted layouts and large targets work for everyone.