Designing for Thumbs: Touch Targets and Mobile Ergonomics

  • UX
  • UI Design
A glass smartphone glyph with a glowing coral circular tap target on its lower half, representing touch target ergonomics

Most interfaces are designed with a mouse but used with a thumb. Targets that are too small or too close cause mis-taps and lost conversions. Here is how to size, space, and place touch targets for real hands.

UI/UX

Most interfaces are designed with a mouse and used with a thumb. The designer works at a wide monitor with pixel precision; the person using the result pokes at it one handed on a train. That gap is where mis-taps live. When a control is too small or crammed against its neighbour, people hit the wrong thing, back out, and give up on the action. At our studio we have watched this quietly drain conversions on otherwise handsome layouts. The fixes are rarely glamorous, just a matter of respecting how a hand holds a phone.

The Thumb Is Not a Cursor

Hold your phone as you would at a bus stop and your thumb sweeps a rough arc across the lower and central part of the screen. The bottom middle is the easy country. The far top corners, especially the one diagonally opposite your thumb, are a hard border you have to shift your whole grip to reach. This is why bottom navigation feels natural and a menu in the top corner feels like a chore.

A thumb is soft, wide, and slightly lazy, and it cannot see what it is covering because the hand is in the way. The question is never whether a person can reach a control if they concentrate, but whether they can hit it without thinking, while moving. Designing for that lazy thumb is the brief.

Size And Spacing That Forgive

A sensible minimum for any tappable control is roughly the size of a fingertip pad, and comfortably larger for anything important. Give primary actions generous height and full width. This is Fitts’s law in plain clothes, worth reading on why bigger and closer targets are faster to hit.

Spacing matters as much as size. Two correctly sized buttons pressed hard together still produce mis-taps, because the soft thumb lands on the seam. Put a clear gap between adjacent controls, and be especially careful with dense link lists and rows of small icons, where every item is a trap for its neighbour. A trick we lean on is the forgiving hit area: let the tappable region extend beyond the visible icon, so a small close cross still catches a lazy tap.

Put The Important Things Where Thumbs Live

If an action matters, place it in the easy country. Primary buttons belong low and central, not marooned in a top corner. Sticky bottom bars for the main call to action are one of the most reliable moves we make, particularly on the long scrolling pages covered in our notes on building landing pages for phones first.

The classic offenders are the tiny close button and the crowded utility row. A close cross the size of a grain of rice, parked in the hard corner, turns dismissing a modal into a fight. Give it room, a big hit area, and an obvious tapped state. Clear affordances and honest feedback tell the thumb it landed and stop the frantic double tapping that follows silence.

Design For Real Hands, Not Ideal Ones

Not every hand is a young designer’s hand. A tremor turns a precise tap into a nudge, larger fingers cover more of the screen, and one handed use on a big phone shrinks the easy country to a small patch near the bottom. Generous targets and spacing are not decoration for these people, they are the difference between using your product and abandoning it. Accessible sizing serves everyone.

This is really just error prevention, the quiet workhorse of the ten usability heuristics applied to the hand. Every target you make easy to hit is a mistake you never have to help someone recover from, which is also a win for keeping mental effort low. Here is the short checklist we keep pinned. Make primary actions large and low. Keep clear gaps between adjacent controls. Extend hit areas beyond the visible icon. Never park anything important in the top corners. Give every tap an obvious response. Test it one handed on a real phone, walking, before you call it done.