The thumb zone: where do buttons go on a phone?

In short

The thumb zone is a map for one-handed phone use. It divides the screen into three parts: the area that is easy to reach, the area you have to stretch for, and the area you can’t reach without changing grip. Designers use this map when deciding where buttons go on a phone.

The map is useful, but it isn’t a rule. People often hold their phone differently and are more accurate in the centre of the screen. My rules for button placement below are based on these two observations.

Hoober’s observations: how do we hold our phones?

The data I rely on here comes from Steven Hoober. In his 2013 UXmatters article he observed people on the street, at the airport, at bus stops, in cafés and on public transport. In two months up to January 8, 2013 he collected 1,333 observations. In 780 of them, the person was touching the screen.

Among those touching the screen, the distribution looked like this:

Hoober writes that he himself isn’t sure how to interpret the shares of right and left hand. He also didn’t record details such as age, device and activity, and tablets hardly appeared in the sample. So I don’t read the table as “everyone holds it this way” but as “grips are mixed”.

For me, the article’s most important finding is about grip. According to Hoober, users change the way they hold their phone very often, sometimes every few seconds. Many who held the phone in one hand were carrying a bag at the same time or holding on in the bus.

In his 2017 article, Hoober gives newer figures. According to them, 75% of users touch the screen with only one thumb. Fewer than 50% hold the phone with one hand.

The limits of the thumb zone map

The drawings in the 2013 article were marked green, yellow and red. Green stood for easy reach, yellow for stretching, red for changing grip. Even then, Hoober wrote that these areas were approximate and depended on the person, the grip and the size of the phone.

Later he went further. In a 2017 comment under the same article, he asked readers to ignore these drawings. An editor’s note on the article also says Hoober updated his recommendations after new research.

In the 2017 article, Hoober calls the thumb-sweep drawing “well-known, but incorrect”. He says designers still believe every touch should be at the bottom of the screen. Yet users can shift their fingers and so change the area the thumb reaches.

Hoober’s replacement finding: people prefer to look at and tap the centre of the screen. Accuracy is high there too, so a target can shrink to 7 mm. In the corner it takes about 12 mm. The details of the sizes are on the touch target page.

Hoober’s example is the Back button. In the field he sees people using it all the time. Even when it sits in the top right corner, it is usually the most used button on the screen. A far corner isn’t an unused corner.

Live example: how does the map change with grip?

Below is a made-up cart screen. Change the grip, then move the primary button up and down. The result text says which zone the button falls into.

Switch from the right hand to the left and the map is mirrored. The wide button at the bottom stays mostly in the easy zone for both hands; only its ends change. If you hold the phone with both hands, the top button becomes comfortable too. That is why I don’t design by a single map.

Bottom navigation

For me, the most visible application of the thumb zone is bottom navigation. Apple writes that on iPhone the tab bar floats above the content at the bottom of the screen. Android’s Compose documentation recommends the navigation bar for three to five destinations of equal importance. The example bar in the documentation sits at the bottom of the screen.

Apple also draws a line: the tab bar is for navigation, not actions. Controls that act on the elements on the screen belong in the toolbar. Apple also asks for the tab bar to stay visible when switching between sections, or people may forget where they are in the app.

According to Hoober, tabs at the top or bottom edge of the content area let people switch between views. Secondary actions belong at these edges too, with the main content in the middle. The exact differences between the platforms are collected in the guide differences between iOS and Android.

The floating action button (FAB)

According to the Android documentation, the floating action button is a highly emphasised button for carrying out an app’s primary action. It highlights the single, focused action users perform most often and is usually anchored at the bottom right. The documentation’s examples are creating a new note, adding someone to a chat and centring the map on your location.

In my example map, the bottom corners are in the stretch zone for both the right and the left hand. For someone holding with the left hand, the bottom right corner is on the other side of the thumb. That is why I don’t put another button under or next to the FAB and keep it a little away from the edge.

Then there is the problem of covering. Because the FAB floats above the content, it can cover the last row of a list or the button on the last card. I leave a gap under the list the height of the FAB. That way the last element doesn’t sit under the button when users scroll all the way down.

Far actions at the top of the screen

The top corners are the farthest area, but they don’t have to stay empty. Hoober recommends putting tertiary functions in menus that users usually open from a corner. For actions such as search and creating new content he recommends action buttons.

There is a trap. According to the 2013 article, some designers conclude from the one-handed charts that they should put unimportant or dangerous functions in the top left corner. Hoober advises against this. Someone who sees a button at the top may switch to a cradled grip to reach everything, or hold the phone that way anyway. A far corner isn’t a safety measure.

There is a mistake at the other end too. Moving a frequent action to the bottom just so it can be reached can break the logic of the screen. If the search field is at the top, users look for it there. In a case like that, I would rather enlarge the touch area than move the action.

An action that can’t be undone, such as deleting the account, I don’t hide in a corner but protect with a confirmation step or an undo. I also give icons in the corners a larger area than those in the centre. Hoober writes in another 2013 article that accuracy at the edges of the screen is low. Fitts’s law explains why a far, small target is hit slowly.

My note

The problem I see most often in mobile audits: the primary button sits at the very end of the scrollable content. Users fill in the form and then scroll down to find the button. A single button fixed in the bottom strip solves that.

The second most common problem is a bottom bar that mixes actions and navigation. If “Add to cart”, “Share” and “Home” sit in the same row, users can’t tell which button changes the page.

I don’t use the thumb map like a law but like a checklist. First I check whether the frequent action is near the centre or at the bottom. Then I try the flow on a real phone with the right hand, the left hand and both hands. How I build this test into the process is described in the mobile app design guide.

If you want this placement checked in your own app, the UX audit looks at one flow from start to finish.

Checklist

1. Is the screen’s primary action in the middle or bottom strip?
2. In a long form, does the primary button stay visible, or is it at the end of the content?
3. Does the bottom bar contain only navigation destinations, or are actions mixed in?
4. Is there only one FAB on the screen, with no other button under it?
5. Is the touch area of icons in the corners larger than in the centre?
6. Is an irreversible action protected by a confirmation or undo?
7. Was the flow tested on a real phone with the right hand, the left hand and both hands?