The thumb zone: design mobile pages for one-handed use

Key takeaways

The thumb zone is the part of a phone screen a person can comfortably reach with the thumb of the hand holding the device. It covers the lower and middle screen and leaves the top corners out. Putting your most important action where the thumb already is turns a stretch into a tap.

• 49% of observed phone use was one-handed in Steven Hoober's study of 1,333 people.
• The bottom and centre of the screen are easy to reach. The top corners are hardest.
• Most websites put the menu and the call button in the top corners.
• A bottom bar with one or two actions puts the next step under the thumb.

What is the thumb zone?

The thumb zone is the area of a touch screen that can be reached easily with the thumb while the same hand holds the phone. It is roughly an arc across the lower two-thirds of the screen. Controls inside it can be tapped without shifting grip. Controls outside it need a second hand or an awkward stretch.

The idea comes from observing how people actually hold their devices, not how designers imagine they do. It matters more each year, because phone screens have grown and thumbs have not.

• Why mobile-friendly web design is essential for UK businesses

How do people really hold their phones?

Mostly with one hand, and they change grip constantly. Steven Hoober's 2013 field study for UXmatters recorded 1,333 people using phones in public. He found 49% holding the phone in one hand, 36% cradling it in one hand while touching with the other, and 15% using two hands. Even when cradling, most people touched the screen with a thumb.

People are also usually doing something else: carrying a bag, holding a rail, pushing a pram or walking. A website that needs two hands and full attention is asking for more than many visitors can give at that moment.

• Tap target size: how big should buttons be on mobile?

Which parts of the screen are easy to reach?

The lower centre is easiest, the middle is comfortable, and the top is a stretch. The far top corner on the opposite side from the holding hand is the hardest place on the screen. Because people switch hands, both top corners should be treated as hard to reach.

• Easy: the bottom third of the screen, especially the centre.
• Comfortable: the middle of the screen, where most reading happens.
• Hard: the top edge, where browsers and many sites put controls.
• Hardest: the top corners, particularly on larger phones.

Where should the important buttons go?

Put the primary action low on the screen, and repeat it as the visitor scrolls. A slim bar fixed to the bottom with Call and WhatsApp, or a single Book button, keeps the next step under the thumb on every page. Within the content, place buttons after the sections that answer a buyer's question.

Keep rarely used controls at the top, where they are out of the way. A logo that links home, a search icon and a menu can live there. The action that earns you money should not.

• Primary call to action: bottom bar, or full-width button in the content.
• Menu: top is acceptable if the bottom bar covers the main actions.
• Form submit button: directly under the last field, full width.
• Close and dismiss buttons: large, and not only in the top corner.
• Destructive or secondary actions: away from the easiest spot, to avoid mis-taps.

• Sticky call-to-action bars on mobile: when they work
• Hamburger menu vs bottom navigation on mobile websites

How do you test your own site for reach?

Hold your phone in one hand, the way you would on a train, and try to use the site with that hand's thumb alone. Do it with your right hand, then your left. Note every control that makes you shift your grip or bring in the other hand.

• Open the menu and choose a service using one thumb.
• Start a call or a WhatsApp chat without changing grip.
• Fill in and submit the enquiry form one-handed.
• Close any banner or pop-up that appears.
• Repeat on the largest phone you can borrow.

• The mobile readiness scorecard: score your site in an hour

What are the limits of thumb zone thinking?

The thumb zone is a guide, not a map. Hands, phones and grips vary, and Hoober's own later work stresses that people shift how they hold a device many times a minute. Treat any diagram showing precise green and red areas as an illustration.

There are trade-offs with bottom bars as well. A fixed bar takes space from the content, can clash with cookie notices and chat widgets, and sits close to the browser's own controls at the bottom of the screen on iPhones. Keep it slim, limit it to one or two actions and test that nothing overlaps.

• Intrusive interstitials: pop-ups Google marks down on mobile

What does this look like in practice?

A pattern we see on service business sites: the only route to an enquiry is a 'Contact' link inside a menu icon in the top right corner. To get in touch, a visitor must stretch to the hardest point on the screen, tap a small icon, scan a list and tap again. Each step loses some people.

Adding a bottom bar with Call and WhatsApp removes all three steps. The buttons sit under the thumb on every page. Across our client work we have seen a 2.4x enquiry rate from conversion changes of this kind. Global Bridge Labs (GBL) makes this the first change on most local service sites.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Thumb zone checklist

• Identify the one action you most want from a mobile visitor.
• Place it in the lower part of the screen, on every page.
• Make it at least 48px high and easy to hit with either thumb.
• Move rarely used controls to the top.
• Check the bottom bar does not cover cookie notices or forms.
• Test one-handed with left and right hands.

Next step

Try to enquire through your own site using only the thumb of the hand holding the phone. If you have to stretch or swap hands, move the button.