Designing for thumbs: mobile layouts that feel natural

Most people use their phones in a fairly predictable way: one hand holding the device, the thumb doing the tapping, sometimes while walking, waiting for a bus or holding a coffee in the other hand. A layout that ignores this can look fine in a screenshot and still feel awkward in real use.

Designing for thumbs doesn't require a redesign. It's mostly a set of small, sensible decisions about where things go and how big they are.

How a thumb moves

Hold your phone in one hand and let your thumb sweep across the screen. You'll notice a few things straight away:

• The lower middle of the screen is easy to reach.
• The top corners, especially the one on the opposite side to your hand, require a stretch or a shuffle of grip.
• The very bottom edge can be slightly awkward too, because the thumb has to bend sharply.

Larger phones make the top of the screen harder to reach still. People adapt by shifting their grip or using two hands, but every adjustment adds a little friction. On a site where you want someone to book, call or buy, friction is worth removing.

This doesn't mean everything belongs at the bottom. It means the actions people take most often should be comfortable, and the actions they take rarely can live further away.

Put the main action within easy reach

Think about the one thing most visitors want to do on each page. On a restaurant site, it might be "Book a table". On a plumber's site, "Call now". On a yoga studio, "See timetable".

Some approaches that work well:

A sticky bottom bar for one key action

A slim bar fixed to the bottom of the screen, holding a single clear button, keeps the main action available without scrolling back up. For a dog grooming salon, that might be a full-width "Book a groom" button. Keep it to one or two actions; a bottom bar crammed with five icons becomes a puzzle.

Make sure it doesn't cover content permanently. Give the page enough bottom padding that the last paragraph and the footer links can scroll clear of it.

Repeat the call to action at natural stopping points

Instead of relying on a single button at the top, place the same action after key sections: after the list of services, after the testimonials, at the end of the pricing. Visitors reach a decision wherever they happen to be, and the button should be nearby when they do.

Keep destructive or rare actions out of the sweet spot

"Delete my account", "Clear basket" or "Unsubscribe" shouldn't sit where a thumb lands by accident. Place them where they need a deliberate reach, and ask for confirmation when the consequences are serious.

Make targets big enough to hit

A tap target is the area that responds to a touch, which can be larger than the visible button or link. Small targets cause mis-taps, which are frustrating and occasionally costly (tapping "Remove" instead of "Edit", for example).

Some practical rules:

• Aim for targets of at least around 44 by 44 pixels. WCAG includes guidance on target size, and the major phone platforms recommend similar minimums in their own guidelines.
• Space targets apart. Two adequately sized buttons pressed right up against each other still cause errors. Leave a gap.
• Make whole cards tappable when the card represents one destination. If a menu item on a takeaway site shows a dish name, a photo and a price, tapping anywhere on it should open the dish.
• Pad inline links in dense lists. A list of opening hours by location, each with a "Directions" link, benefits from links with generous vertical padding.

Rethink the header

The classic mobile header puts a logo on the left and a hamburger menu icon in the top right corner. It's familiar, which counts for a lot, but that top corner is one of the hardest spots to reach.

You don't have to abandon the pattern, but consider:

• Keeping the header short so it doesn't eat vertical space.
• Placing a primary action in the page itself rather than only in the header.
• Using a bottom navigation bar if your site is more like an app, with a small number of top-level sections that people switch between often. A local library's site where visitors jump between "Catalogue", "Events" and "My loans" is a reasonable candidate.
• Opening menus from the bottom as a sheet that slides up, so the links land where the thumb already is.

Whatever you choose, test it with your own hand on a real phone, not just in a desktop browser's mobile preview.

Forms that don't fight back

Forms are where thumb-friendly design matters most, because they involve lots of small interactions in a row.

1. Use one column. Side-by-side fields on a phone are cramped and confusing to move between.
2. Choose the right keyboard. Use input types for email, phone numbers and numbers so the phone shows a suitable keyboard. Typing a phone number on a full letter keyboard is needlessly fiddly.
3. Make labels and fields tall enough to tap comfortably, with the label visible above the field rather than vanishing inside it as placeholder text.
4. Replace tiny dropdowns with larger choices where there are only a few options. Three big buttons for "Small", "Medium" and "Large" are easier than a dropdown.
5. Put the submit button where the thumb ends up, full width, directly below the last field.
6. Support autofill. Correctly labelled name, address and email fields let the phone fill them in, saving dozens of taps.

Watch out for gestures and hidden interactions

Swiping carousels, long presses and hidden swipe actions can feel clever, but many visitors won't discover them. If something matters, make it a visible, tappable control. Carousels in particular often hide most of their content behind a swipe that a lot of people never make; a simple vertical list frequently works better.

Also be careful with horizontal scrolling inside a vertical page. A row of product cards that scrolls sideways can trap the thumb when someone is simply trying to scroll down.

Test it the simple way

You don't need a lab. Try this:

• Hold your phone in your less dominant hand and complete the main task on your site: book, buy, enquire.
• Do it again while standing up and walking slowly across a room.
• Ask a friend to do it without guidance and watch where they hesitate or mis-tap.

Each hesitation is a design note.

Thumb-friendly checklist

• The main action on each page is reachable without stretching.
• Tap targets are roughly 44 pixels or larger, with space between them.
• Rare or destructive actions are out of the easy reach zone.
• Forms are single column, use the right keyboards and support autofill.
• Nothing important depends on a swipe or hidden gesture.
• Any sticky bar leaves room for the content beneath it.
• You've tested on a real phone, one-handed.

Comfortable mobile design isn't flashy. When it's right, nobody notices it at all. They simply get done what they came to do.