What Is the Thumb Zone? A Mobile Design Guide to Thumb Reach

What is the thumb zone in mobile design?

The thumb zone is the area of a phone screen your thumb reaches comfortably while you hold the device in one hand. It usually covers the lower and middle part of the screen. The top corners and the far edge are hard to reach. Placing key buttons inside this area makes taps faster and reduces errors.

The idea sounds simple. Yet most mobile pages are still built with desktop habits. The menu sits at the very top, and the main button gets lost in the middle of the page. As a result, users scroll, shift their grip, and often give up.

In this guide, we look at the thumb zone through published research. Then we show how to place CTAs, menus, and forms. We close with testing and measurement methods.

Where does the thumb zone idea come from?

The thumb zone idea appeared when interfaces moved to touchscreens. Designers noticed that a finger has none of the precision of a mouse cursor. Therefore, not every point on the screen carries equal value.

In the early 2010s, designers such as Josh Clark popularized thumb reach maps. Also, these maps split the screen into green, yellow, and red areas. Green meant easy reach, and red meant hard reach.

However, those maps were drawn for the phone sizes of that time. Today's phones are larger, so the borders have moved. Instead of copying a map, keep the principle: put the controls people use most where they are easiest to reach.

Touch also has no hover state. A user simply taps, and a wrong tap costs a step back. For that reason, a badly placed button costs more on mobile than on desktop.

How do people really hold their phones?

One of the most cited sources on this topic is Steven Hoober's observation study. He watched 1,333 cases of mobile use on streets, in airports, in cafes, and on public transport. In 780 of them, the user interacted with the screen.

According to Hoober's research published on UXmatters, the split looked like this:

• One-handed use: 49 percent, mostly with the thumb.
• Cradling the phone in one hand and tapping with the other: 36 percent.
• Holding with both hands and using two thumbs: 15 percent.

So nearly half of the observed users worked with a single thumb. Hoober also adds an important warning. People change their grip, sometimes every few seconds. Therefore, no single "correct" grip exists.

Note that this data dates from 2013 and reflects the phones of that time. For example, screens were much smaller then. Read the percentages as a direction, not as a current fixed value.

How do you map the thumb zone on a screen?

For a right-handed person holding the phone in one hand, you can split the screen into three rough areas. Mirror the map for the left hand. The table below summarizes the three areas and what belongs in each.

Treat this map as a starting point, not a rule. Phone size, hand size, and even the case change the zones. Besides, people sometimes switch to two hands. Still, the core idea holds: the lower half is easier than the upper half.

Two details matter when you use a map. First, the zones have soft borders. Second, they shift by device. For that reason, check which screen sizes carry your own traffic in analytics. Then design for two or three typical sizes instead of one.

How did larger screens change the thumb zone?

As phone screens grew, the top of the screen became almost unreachable with one hand. An area once labeled "hard" is now out of reach for many users. Therefore, menu icons and back buttons at the top create real friction.

The screen is also wider, so horizontal reach suffers too. To tap a button on the far edge, users either shift their hand or use the second one. A small action becomes a two-step movement.

The design consequence is clear. Put the main action near the bottom and close to the dominant hand. Keep the top for information and rare actions. It also helps to think about this together with mobile-first design.

Larger screens do not make one-handed design useless. Also, users still choose the easiest path, and that path is usually the lower area. For example, you can add a search tab to the bottom bar. That small change removes a stretch to the top corner.

How does the thumb zone affect left-handed users?

Most maps are drawn for the right hand. In Hoober's data, however, 67 percent of one-handed use was with the right thumb and 33 percent with the left. So one in three one-handed users worked with the left thumb.

That share is clearly higher than the left-handed share of the general population, which Hoober puts at about 10 percent. He suggests that context plays a role, such as the other hand being busy. In other words, a person may switch hands regardless of habit.

The practical result is simple. Do not push the main button fully to one side. In practice, wide buttons that span the screen work for both hands. Spacing the items on a bottom bar evenly does the same job.

Another approach is to gather key controls near the horizontal center. A button in the middle sits at a fair distance from both thumbs. Swipe gestures in both directions also feel natural for either hand.

How big should a touch target be?

Size matters as much as position. A thumb is wider than a fingertip, so hitting a tiny link is hard. Official and semi-official sources give different thresholds.

These numbers do not conflict. However, WCAG treats 24 pixels as the acceptable floor. web.dev suggests 48 pixels for realistic use. In our own work, we aim for 48 pixels or more on the primary CTA and bottom bar items.

Spacing matters too. When two small links sit side by side, a thumb can hit the wrong one. Still, adding vertical space in link lists lowers the error rate on its own. Also, the visible size and the tappable area do not have to match. You can add transparent padding around a small icon to enlarge its tap area. Inline text links form a separate exception in WCAG.

Where should you place the CTA button on mobile?

Keep the primary CTA near the thumb at the moment the user decides. That is usually the lower half of the screen. In addition, "Add to cart" on a product page and "Get a quote" on a service page follow this logic.

Three placements stand out:

• A full-width button inside the page flow, right after the content.
• A single primary button fixed to the bottom of the screen.
• A button repeated at the end of the content, right after the decision moment.

You choose the winner by testing, not by assumption. For CTA wording and design, see our guide on what a call to action is. It covers text, color, and contrast in detail.

As a rule, move the CTA close to the point where the user is convinced. On a long service page, a button right after the pricing details beats one at the very top. Besides, the button text should describe the result. Pick "Request a quote" instead of "Submit". Full-width buttons also reduce mistaken taps, because a wider target leaves less room for error.

Bottom navigation or hamburger menu?

A hamburger menu usually sits in the top left or top right corner. That is the hardest point of the thumb zone. A bottom navigation bar lives in the easy area. The difference creates visible friction when users switch between frequent pages.

Yet a bottom bar does not fit every site. In practice, it works very well for app-like products with a few main destinations, such as orders, account, and cart. A corporate site with dozens of pages has a more complex menu.

In that case, use a two-layer solution. Move the three or four most used destinations to the bottom. Leave the rest in the menu. Our website navigation menu guide helps with the structure.

When you decide, look at the user's goal. If people jump between pages often, a bottom bar saves the open-and-close step. If they land, act, and leave, the menu stays in the background anyway. Show labels next to icons, because icon-only bars create ambiguity. Mark the active tab with color and a second cue as well.

Do sticky CTAs and bottom bars work on every page?

No. Still, a fixed bottom button covers a valuable part of the screen all the time. On small phones, it can hide half of the content. Therefore, keep the height of any fixed element small.

Watch out for these risks:

• The keyboard can cover the field when a fixed button is open.
• A cookie banner and a sticky button can overlap.
• A late-loading sticky bar can shift the page and hurt CLS.
• The system bar at the bottom of the phone can partly cover the button.

Do not ship these patterns without testing them on real devices. A sticky button used wrongly makes reading harder instead of lifting conversion.

One way to balance this is to show the bar only when needed. For example, reveal the button after the user passes a certain point. Or hide it on scroll up and bring it back on scroll down. Leave enough space below the last line of content. Compare mobile performance and conversion before and after, so you see whether the bar helps or hurts.

How do you use the thumb zone in forms and checkout?

The form is the most sensitive point of mobile conversion. The user types and also tries to navigate with a thumb. In addition, when the keyboard opens, it already covers a large part of the screen.

A few practical rules help:

• Keep the submit button just above the keyboard, in a visible spot.
• Stack the fields in a single column, because two fields side by side cause thumb errors.
• Make field height at least 48 pixels.
• Open the right keyboard type: numeric for phone, with the @ sign for email.

You can apply these rules together in booking, quote, and demo forms. See our article on lead form design for details.

The same logic applies to checkout. The button that moves users between steps should always stay in the same easy spot. Nobody should hunt for it at every step. Also, the back action should look weaker than the forward button. Also, autofill and clear error messages reduce thumb effort too. For example, an error message should appear right under the faulty field, in one short sentence.

Which e-commerce pages gain the most from thumb zone design?

Three pages stand out in e-commerce: the product page, the cart, and checkout. On the product page, the "Add to cart" button should stay near the thumb while the user studies photos and details. For this reason, many stores fix this button to the bottom of the screen.

In the cart, quantity and delete controls need care. A tiny plus and minus icon invites wrong taps. So make these controls wide and well spaced. At checkout, a fixed forward button keeps the user in the flow.

Filters matter on product lists as well. If a fixed button at the bottom opens the filter panel, users reach it easily. You may also want to read about how page speed affects e-commerce sales.

How do cards and horizontal scrolling behave in the thumb zone?

Horizontal swiping is a natural move for a thumb. The thumb glides left and right in the middle of the screen. For this reason, product carousels and story rows usually work well.

The scrollable area must still look scrollable. That said, showing a slice of the next card at the screen edge gives a clear hint. Also, avoid conflicts between horizontal swipes and vertical page scroll.

Watch the small buttons inside a carousel. One main action per card enlarges the targets and cuts wrong taps. For example, making the whole card tappable is often the safest solution.

Is the thumb zone related to mobile SEO?

It is not a direct ranking factor, but indirect links exist. Google uses the mobile version of a page for indexing. Therefore, the quality of your mobile experience shapes the overall success of your site.

Friction also affects time on page and conversion. A poor layout pushes visitors away, and that lowers the value of your traffic. In other words, you can win a visitor with SEO and lose them with mobile design.

Interaction speed matters as well. Still, a page that answers a tap late cancels the benefit of a well-placed button. We cover this in our Core Web Vitals guide. Our article on balancing UX and SEO completes the picture.

Which mistakes do teams make with thumb zone design?

The mistakes we see in the field are fairly consistent. Most of them come from good intentions. In addition, the list below summarizes what our team flags most often in audits.

• Placing the main CTA only at the very top of the page.
• Putting the close or back button in the top left corner.
• Placing two buttons so close together that users tap the wrong one.
• Putting an irreversible action, such as delete, in the easy zone without a confirmation step.
• Overlaying a fixed bar on the content so the text becomes unreadable.

The last two items matter most. Easy reach also makes accidental taps easy. Therefore, add a confirmation step to destructive actions. Our article on UX mistakes that kill sales gives more examples.

Another common mistake is testing on a single device. A designer calls a layout comfortable on their own phone. Yet users have different hands, phones, and cases. Also, try at least two screen sizes. Moving everything to the bottom is a wrong takeaway too. That crowds the lower area and creates new errors, so prioritize.

How does the thumb zone fit with accessibility?

The thumb zone is not only ergonomics. It is part of accessibility. Large and well-spaced targets matter a lot for people with limited motor skills. The target size criterion in WCAG 2.2 answers exactly this need.

One-handed use is also a temporary limitation. A person carrying a child, holding grocery bags, or wearing a cast works with one hand too. So a good thumb zone design helps everyone.

Note that thumb ergonomics alone does not solve the needs of screen reader users. Focus order, labels, and contrast need separate work. Still, the steps you take on target size and spacing help motor accessibility directly.

For the wider picture, read our WCAG standards guide. To check color contrast, our color contrast checker is handy.

Should you empty the top of the screen completely?

No. That said, a hard zone is not a useless zone. The top area is actually a good place for elements where an accidental tap would do harm. Account settings, sign out, or clearing notifications fit here.

Consider a banking app. If "log out" sat on the bottom bar, users would end their session by accident. Still, placing it in the top corner is a deliberate and correct choice. In short, the hard zone can protect users.

Logos, page titles, and status information also stay comfortably at the top. Nobody taps them; people only glance at them. Price, stock status, and order status need no tap, so they cause no reach problem. That leaves the valuable lower area for real actions.

The rule is simple: frequent and safe actions go to the bottom, rare or risky actions go to the top. If you make this split clear, users learn quickly where things live.

Does the thumb zone work the same on tablets and foldables?

No. In addition, on tablets, people usually hold the device with both hands, and the thumbs rest near the two lower corners. Reach zones then gather along the lower side edges.

Foldable phones offer two screen behaviors. Closed, they act like a narrow phone. Open, they act like a small tablet. For this reason, you need a flexible layout.

If these devices have a small share on your site, keep the standard phone as your main target. However, if analytics show a clear share, test on them separately. Also, use your own data to decide.

How do you test a thumb zone design?

The most reliable test uses a real device and a real hand. A screenshot in a design tool does not give you the feel of a thumb. So load the prototype on a phone and give users a task to do with one hand.

You can set up a simple test flow:

• Ask three to five users to do the same task with one hand.
• Note where they hesitate and where they shift their grip.
• Try at least one small phone and one large phone.
• Include at least one left-handed participant.

During the test, do not steer the user. Instead of saying "tap the button", give a goal such as "add this product to your cart". That way users show their real behavior. Recording the session also lets you replay where the thumb went.

On the technical side, our mobile friendly test tool runs the basic checks. Heatmaps and click maps help too. For instance, if a top corner menu gets very few taps, that may signal a reach problem. A heatmap alone does not explain why, so read it together with user observation.

How do you measure the effect of a thumb zone change?

Defend the change with measurement, not a hunch. In practice, first record the current state: mobile conversion rate, CTA click rate, and form completion rate. Then make a single change and run an A/B test.

Example calculation: say you have 10,000 mobile sessions and a 1.5 percent conversion rate. That equals 150 conversions. If a fixed bottom CTA lifts the rate to 1.8 percent, conversions become 180. These numbers are hypothetical, so test with your own data.

You can use our A/B test calculator for this. If the result is not significant, increase the sample size. That said, do not decide before you collect enough data to separate small differences from noise.

What is a practical thumb zone checklist?

The list below summarizes the quick audit our team runs before a mobile page goes live. Check each item on a real phone.

• Is the primary CTA in the lower half and reachable with the thumb?
• Are all touch targets at least 48 pixels, with space between them?
• Does the menu put frequent destinations in the easy zone?
• Do fixed elements cover content or the keyboard?
• Do destructive actions ask for confirmation?
• Does the layout feel comfortable for a left-handed person too?
• Do form fields stack in one column and open the right keyboard?

Repeat this list for every new page template. A small habit creates a serious conversion gap over time.

Where should you start with thumb zone work?

First pick your three mobile pages with the most traffic. On each page, check where the main CTA sits. Still, next, browse these pages with one hand on a real phone. Write down every point of friction you feel.

Then rank the findings by priority. The fastest gain usually comes from moving the CTA and navigation into the easy zone. You can make most of these changes in a few days, without a full redesign.

If you want to rework your mobile interface from scratch, talk to our team about our web design service. In addition, at Talha Aslan and team, we evaluate mobile behavior together with design and conversion data.