Craft

Designing for the Thumb: The Real Geography of a Phone Screen

Most ad creative is designed on a desktop, with a mouse, on a screen held upright at arm's length. It is then played on a phone, held in one hand, with a thumb that covers the thing it is pressing. Almost every layout problem in this format starts there.

The Play Ads Maker team11 min read

In short

  • A thumb sweeps an arc, not a rectangle. The comfortable region is a curved band across the lower half of the screen, and it is smaller than most layouts assume.
  • The top corners are the hardest places to reach and the easiest places to look at — which is why so many ads put the thing that matters where the hand cannot go.
  • A thumb covers roughly a fingertip's worth of screen plus everything below it. Feedback placed under the point of contact is feedback nobody sees.
  • Handedness flips the geography horizontally, and you do not know which hand a given player is using. Symmetrical layouts are the only safe answer.
  • Tap targets fail more often from being crowded than from being small. Spacing between targets matters as much as the size of each one.

Hold your phone the way you actually hold it — one hand, thumb free, the other hand doing something else. Now, without shifting your grip, try to touch the top far corner of the screen.

You can probably do it. It requires a small movement of the whole hand, a slight loosening of the grip, and a moment where the phone is less secure than it was. It is not painful and it is not impossible. It is simply a different kind of action from touching the middle of the screen, and a person doing it in a moving bus makes a calculation about whether it is worth it.

That is the real geography of a phone screen, and it has very little in common with the rectangle an ad is designed in. A designer works on a desktop, with a mouse that reaches everywhere at equal cost, on a display held still at arm's length. Every point on that canvas is equivalent. On the device where the ad actually runs, no two points are equivalent at all.

The screen is an arc, not a rectangle

A thumb is anchored at one corner and pivots. That single fact produces the whole layout.

Sweeping it across the screen traces an arc, not a straight line, and the comfortable range of that arc is a curved band across the lower half of the screen, widest near the holding hand and narrowing as it crosses to the far side. Everything inside the band is a flick. Everything outside it requires the hand to move.

Three regions follow from this, and they behave differently enough to be worth naming separately.

The three zones of a phone screen in one-handed use, and what each is good for:

ZoneWhat belongs there
The easy band — lower middle, curving toward the holding handAnything the player does repeatedly. Primary controls, the main mechanic, the thing you want tapped without thought. This is the most valuable real estate on the screen and it is routinely used for decoration.
The stretch — upper middle and the far sideThings touched once or twice. A single confirmation, a start button, an occasional target. Reachable with a small adjustment, which is acceptable for a deliberate action and wrong for a repeated one.
The far corners — top left and top rightThings that must not be touched by accident, and things that are only looked at. This is where the close button lives on almost every ad, which is a decision with an obvious motive and a real ergonomic justification behind it.

The practical consequence is that a playable ad has roughly the lower two-thirds of the screen to work with, and the best part of that is a curved band rather than a neat rectangle. Designing a mechanic that requires precise taps in the top corners is designing a mechanic most people will perform badly.

The most valuable area of a phone screen is a curved band across the lower half. Most ad layouts treat it as the place to put the background.

The blind spot nobody designs around

Here is the constraint that gets left out of every reachability diagram, and the one that actually breaks ad layouts.

A thumb is opaque. It covers the point it touches and a region below and around that point — the fingertip itself, plus the rest of the thumb and the hand trailing off the bottom of the screen. So at the exact moment a player acts, part of the screen disappears, and the part that disappears is centred on the thing they are interacting with.

This has an immediate and frequently violated implication. Feedback about a tap cannot be placed at the tap. A score increment that appears under the thumb, a colour change directly beneath the contact point, a small particle effect at the point of touch — all of these are invisible to the person who caused them, and visible only to whoever is watching over their shoulder, which in practice is the designer.

The fix is not complicated. Put the response above the touch, or to the side away from the holding hand, or make it large enough to extend well beyond what a thumb covers. What matters is knowing the blind spot exists, because it is genuinely invisible during desktop testing — a mouse cursor is one pixel and hides nothing.

The blind spot moves with the hand

A right-handed grip occludes down and to the right of the contact point; a left-handed grip occludes down and to the left. You do not know which one you have, and there is no reliable way to detect it. That rules out the clever solution of offsetting feedback to one side, and leaves only two safe answers: put the response above the point of contact, or make it big enough that it does not matter.

You do not know which hand they are using

Roughly one person in ten is left-handed, but that statistic is much less useful here than it sounds, because handedness is not the only thing that decides which hand holds a phone.

People hold their phone in whichever hand is free. They switch when carrying something, when lying down, when the other hand is occupied, and for no reason at all. A right-handed person holding a coffee is using their left hand, and the entire geography of the screen flips horizontally for the duration.

So the arc is not a fixed region you can design against. It is one of two mirror-image regions, and you have no way of knowing which one is active. Anything placed in the comfortable zone for a right hand sits in the awkward zone for a left one.

The only robust response is symmetry. Keep the important things near the horizontal centre, where both arcs overlap, and treat both sides of the screen as equally likely to be awkward. That sounds like a compromise, and it is — but the centre-bottom region is comfortable for everybody, which is more than can be said for any asymmetric layout.

Centre-bottom

Comfortable in either hand, and the safest place for anything important

Side bands

Comfortable in one hand and a stretch in the other, so never for repeated actions

Top corners

Awkward in both, which makes them right for close buttons and wrong for everything else

Why tap targets fail

The usual advice about touch targets is to make them bigger, and it is not wrong. But size is the less interesting half of the problem, and focusing on it alone produces layouts that still misfire.

The thing that actually determines whether a tap lands correctly is the relationship between the size of a target and the distance to the next one. A small target with generous space around it is forgiving, because a near miss still lands on nothing and the player simply tries again. A large target crowded against another large target is unforgiving, because a near miss lands on the wrong thing and does something the player did not want.

The second failure is much worse than the first. A tap that does nothing reads as imprecision and prompts a retry. A tap that does the wrong thing reads as the ad being broken, or as the player being tricked, and it is one of the reliable ways to lose somebody in the first five seconds.

There is also a subtler point about where a touch registers. People aim with the visual centre of the fingertip, but the contact patch is larger and sits slightly low relative to where they think they are pointing. Taps therefore tend to land marginally below the intended spot. A target with a little extra room at the bottom absorbs that; one with its hit area matched exactly to its artwork does not.

The failures we see most often in playable ads, in rough order:

  • Targets adjacent with no gap. Two buttons touching each other guarantee a proportion of wrong taps, however large the buttons are.
  • Hit areas matched exactly to artwork. A visual element of 40 pixels needs a touch area somewhat larger than 40 pixels, and slightly biased downward.
  • Small controls in the top corners. Awkward to reach and awkward to hit accurately once reached, because the hand is stretched and less stable.
  • Feedback under the thumb. Covered above, and the most common single mistake in the format.
  • Drag targets that require precision. Dragging is a good interaction and a bad one to make exact. Generous snapping is what makes it feel responsive rather than fussy.

Designing against the hand

None of this requires a change in how ads are built. It requires deciding where things go with the hand in mind rather than the canvas.

Five decisions that follow from taking the geography seriously.

  1. 1

    Put the mechanic in the lower middle

    Whatever the player does repeatedly belongs in the band that is comfortable for either hand. If the mechanic lives in the top half, every repetition costs a small physical adjustment, and those add up faster than they seem to.

  2. 2

    Move feedback above the point of contact

    Scores, sparkles, confirmations and state changes go up, not down. This single change fixes the most common invisible failure in the format and costs nothing to implement.

  3. 3

    Keep the layout horizontally symmetrical

    You cannot know which hand is holding the phone, so avoid designs that are comfortable only from one side. Centre what matters and let the decorative elements take the awkward corners.

  4. 4

    Space targets before you enlarge them

    Gaps between tap targets prevent wrong taps, which are far more damaging than missed ones. If space is tight, fewer targets with room around them beats more targets crammed together.

  5. 5

    Test it held in one hand, standing up

    Not on a desktop, not with two hands at a desk. Load it on a phone, hold it the way people actually do, and try to play it while doing something else. Problems that are invisible in a preview window are obvious within ten seconds of real use.

The cheapest test in this field

Hand your phone to somebody who has not seen the ad, ask them to play it, and watch their hand rather than the screen. You are looking for one thing: the moment they adjust their grip. Every adjustment is a place your layout asked for something the hand did not want to give, and you will usually see it within the first three seconds.

Where the rules bend

Two qualifications, because this is guidance rather than physics.

Phone sizes vary enough that the arc is not one shape. A small phone in a large hand is almost entirely reachable, and a large phone in a small hand has a comfortable band that covers maybe a third of the screen. Designing for the harder case is the safer default, but the harder case is not universal and a layout tuned for it can look oddly cramped on a smaller device.

Two-handed use also exists, and it changes everything. A player holding the phone in both hands with both thumbs available has a completely different reachable region — the bottom corners become easy and the centre becomes slightly awkward. Games designed for landscape often assume this and are right to. For a playable ad served into a portrait feed, one-handed is the sensible assumption, but it is an assumption rather than a certainty.

What does not bend is the occlusion. Whatever the hand size, whatever the grip, the thumb covers what it touches. That one is worth designing around every time.

A mouse hides nothing and reaches everywhere at equal cost. A thumb does neither, and the ad was designed with the mouse.

The questions this raises in practice.

How large should a tap target actually be?

Large enough that a thumb can hit it without aiming, which in practice means somewhere around a fingertip's width at minimum, and larger for anything touched in a hurry. The more useful question is the gap: whatever size you choose, leave clear space around it, because a near miss that lands on nothing is recoverable and one that lands on the wrong control is not.

Should the close button be easy to reach?

It should be easy to find and hard to hit by accident, which is exactly what a top corner provides. There is an obvious commercial incentive to place it somewhere inconvenient, and the ergonomics happen to point the same way, so the honest version and the cynical version look identical. The line worth holding is that it should be immediately visible and a deliberate tap away — not hidden, not delayed, not shrunk.

Does any of this apply to landscape ads?

The principles do, the geography does not. Landscape usually implies two hands, which puts both bottom corners within easy reach and makes the centre of the screen the awkward part. Occlusion still applies and matters more, because two thumbs cover more screen than one. The reliable move is to keep the middle of a landscape screen clear of anything that needs touching.

What about players who use a phone with two hands in portrait?

Plenty do, particularly for anything that feels like a game. It widens the comfortable region rather than moving it, so a layout designed for one-handed use still works. The reverse is not true — a layout that assumes two thumbs is genuinely awkward for a person holding a coffee, which is why one-handed is the right default to design against.

Is there a quick way to check a layout before building it?

Put the mockup on an actual phone as a static image and try to touch each interactive element in turn, one-handed, without looking at your hand. Anything that makes you adjust your grip is in the wrong place, and you will have found it in under a minute without writing anything.

Editorial

The Play Ads Maker team

We build the editor behind this site, which means we spend our days inside the format — its constraints, its export limits, and the question of what actually makes someone tap. We write about what we learn doing it.

The fastest way to understand the format is to build one

The editor is free to open, runs in the browser, and needs no code. Start from a template and have something playable within the hour.