We Design for the Thumb, Not the Cursor

Most of the websites we work on get more visits from phones than from computers. Yet design reviews still happen on large monitors, with a mouse, and the mobile version is often checked last. The result is interfaces that technically fit on a phone but were clearly designed for a cursor.

A cursor is precise and can reach any point on the screen equally easily. A thumb is neither. Designing for the way people actually hold their phones changes a lot of decisions.

How people hold their phones

Many people use their phone with one hand, reaching across the screen with their thumb. The bottom and middle of the screen are easy to reach. The top corners, especially the one opposite the hand being used, are a stretch. On larger phones, they can't be reached at all without shifting grip.

That matters because the top corners are exactly where many designs put important controls: menus, back buttons, close buttons and search.

Moving controls within reach

On mobile, we look carefully at where the key actions sit. For apps, primary navigation often works best as a bar at the bottom of the screen. For websites, a sticky call-to-action button near the bottom can be easier to tap than one in the header. In longer forms, the main button sits where the thumb naturally lands.

We don't move everything. Some conventions, like a logo in the top left that returns to the homepage, are familiar enough that people expect them. But anything people use often should be easy to reach.

Bigger targets

A mouse pointer can hit a tiny link. A finger can't. Apple recommends tap targets of at least 44 by 44 points, and the accessibility guidelines set a minimum target size too. We treat these as the minimum and give the most important controls more room.

Spacing between targets matters as much as their size. Two small links side by side are an invitation to tap the wrong one. On mobile, we add space between links in menus and footers, and we make the whole area of a card or list item tappable, not just the text inside it.

No hover

A lot of desktop design relies on hover. Menus open when the pointer passes over them, tooltips explain icons, and buttons hint that they're clickable by changing colour. None of that exists on a touch screen. If information only appears on hover, mobile users never see it.

We design so that nothing important depends on hover. Hover effects can add polish on desktop, but every action and every piece of information has to work with a tap.

Gestures with care

Swiping, pinching and long-pressing can feel natural, but they're invisible. Nobody knows a gesture exists unless something hints at it. We use gestures as shortcuts alongside visible controls, never as the only way to do something.

Testing in the hand

The simplest test is also the most revealing: use the design on a real phone, one-handed, while standing up. Problems that look minor in a desktop preview become obvious. A menu button that's a stretch, a link that's hard to hit, a form that hides its button behind the keyboard. We do this on every project, and it's central to how we approach app development.

Desktop still matters

Designing for the thumb doesn't mean neglecting the cursor. Many people still browse, buy and work on computers. The point is to design each version for how it's used, rather than designing for one and squeezing it into the other.

If you've only ever reviewed your site on a big screen, try using it with one hand on your phone. If anything feels awkward, let's talk.