Designing for Thumbs: Touch Targets and Mobile UI Patterns

Most mobile use happens in less-than-ideal conditions: one hand, a moving bus, bright sunlight, a notification interrupting halfway through a task. Interfaces designed at a desk on a large monitor tend to forget that. Here's what we keep in mind when designing for thumbs.

How big should touch targets be?

A fingertip is far less precise than a mouse pointer. Small targets lead to mistaps, and mistaps lead to frustration.

Leave space between targets, so a slightly-off tap doesn't hit the wrong thing. The visible icon can be smaller than the target. What matters is the tappable area around it.

Keep important actions within reach

When a phone is held in one hand, the lower and middle parts of the screen are easy to reach with a thumb. The top corners aren't. That has practical consequences:

• primary actions work well near the bottom of the screen
• a bottom navigation bar is easier to use one-handed than a menu in the top corner
• destructive actions, like delete, shouldn't sit exactly where the thumb naturally rests

Use patterns people already know

Mobile users arrive with strong expectations from the apps they use every day. Tab bars, pull to refresh, swipe back and bottom sheets work because nobody has to learn them. Inventing a new gesture for a common task is rarely worth it, and a hidden gesture should never be the only way to do something.

Platform conventions matter too. iOS and Android users expect slightly different navigation and controls. Cross-platform frameworks like Flutter and React Native make it possible to respect those differences without building two separate apps.

Design for interruptions

People switch apps constantly. A form half-filled before a phone call should still be there afterwards, and long flows should save progress. A driver app our team built is a good example: the work it supports happens in moving vehicles with patchy signal, so interruption-proof flows were essential. We wrote about it in building a driver app that keeps working when the network doesn't.

Readable in the real world

• Use text sizes that are comfortable without zooming, and support the system's text size settings.
• Keep contrast high enough to read outdoors.
• Don't rely on hover states. There's no hover on a touchscreen.

Test on real devices

Simulators are useful, but they can't tell you how an app feels in the hand. Test on a range of real phones, including smaller and older ones, and try the key flows one-handed. The problems show up quickly.

These basics sit behind every app in our mobile app development work.