A thumb comfortably reaches the lower and middle portion of a phone screen. Placing the actions people take there, sizing them generously, and keeping them away from screen edges removes friction nobody reports and everybody experiences.

How phones are actually held

Most of the time, in one hand, with the thumb doing the work. Frequently while doing something else: walking, carrying, standing in a shop, holding a child.

That posture defines what is easy to reach. The lower half of the screen and the middle are comfortable. The top corners require a grip adjustment, and the opposite top corner is the hardest point on the screen.

Designs are made on desktops with a mouse, where every part of the screen is equally reachable, and tested by tapping a phone held in two hands with attention. Neither resembles the actual conditions.

Where to put things

Primary actions low. The call button, the booking button, the submit button. A phone number bar fixed to the bottom of the screen is one of the highest-value elements a local business site can have.

Information high. The heading, what you do, where you are. Reading happens anywhere on the screen; tapping does not.

Destructive or rare actions away from the easy zone, since something easy to reach is also easy to hit accidentally.

The practical inversion this produces: the menu at the top is fine because it is a small target used deliberately, and the thing you actually want people to do should be near their thumb.

Target size

The measurable part, and it is frequently ignored.

A fingertip is considerably larger than a mouse pointer. Guidance generally puts the minimum comfortable tap target somewhere around forty-four to forty-eight pixels square, with spacing between adjacent targets.

What fails: text links in a paragraph sitting one line apart, small icons in a row, a close button on a popup sized for a mouse, and checkboxes at their default size.

The spacing matters as much as the size. Two correctly sized buttons touching each other still produce mistaken taps, because the finger covers both.

A specific common failure: consecutive links in body text, where somebody reaching for one hits the other. Adding vertical spacing in link-heavy passages solves it.

The edges

Modern phones complicate this in ways worth knowing.

Gestures at the screen edges are used by the operating system, so a control placed too close to the bottom or the sides can conflict with a swipe. A button flush against the bottom edge may be hard to hit without triggering something else.

Curved edges on some devices distort touch accuracy near the sides. And a fixed element at the very bottom can sit under the home indicator on some phones.

Leaving a margin at the edges rather than running elements to the boundary avoids all of it.

The elements that get this wrong most often

The chat widget case is worth noting specifically, since it frequently sits exactly where a call button should be and competes with it.

Forms specifically

Where thumb reach and everything else combine.

Fields full width and generously tall. The correct keyboard for each field type. The submit button reachable without scrolling past the last field. And nothing important hidden behind the keyboard when it opens, which is a common failure that only appears on a real device.

The keyboard point matters because it consumes roughly half the screen, which changes what is reachable entirely once a field is focused.

Testing it honestly

  1. Hold your phone in one hand and use only that thumb.
  2. Try it while walking, which is how a proportion of visits happen.
  3. Try it with the other hand, since left-handed reach mirrors the difficult corner.
  4. Complete the contact form without switching hands.
  5. Try it on the smallest phone you can find.

The last one finds most problems. Designs tested on a large device frequently break on a small one, where the sticky header, the chat widget, and the cookie banner leave very little screen.

The single change worth making first

A fixed bar at the bottom of the screen on mobile, containing the phone number and one other action.

It sits where the thumb already is, it is present on every page, and it removes the need to scroll anywhere to make contact.

For a local business whose visitors are mostly on phones and mostly want to call, that one element does more than most redesigns, and the field-by-field problems it sits alongside are covered in why people start your form and stop.

Frequently asked questions

Where can a thumb comfortably reach?

The lower half and the middle of the screen. The top corners require a grip adjustment, and the opposite top corner is the hardest point to reach.

Where should the main action go?

Low. The call or booking button belongs near the thumb, while headings and information can sit high, since reading happens anywhere but tapping does not.

How large should tap targets be?

Around forty-four to forty-eight pixels square with spacing between them. Two correctly sized buttons touching still produce mistaken taps because the finger covers both.

Why leave a margin at the screen edges?

Operating system gestures use the edges, curved screens distort touch accuracy at the sides, and a bottom-flush element can sit under the home indicator.

Which elements get this wrong most?

Popups with tiny close buttons in the top corner, chat widgets covering the bottom corner where the call button should be, and cookie banners with small pinned buttons.

What single change helps most?

A fixed bottom bar on mobile carrying the phone number. It sits where the thumb already is and appears on every page without scrolling.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Call button that needs two hands and a scroll?

We put a fixed bottom bar where the thumb already is, which for most local businesses does more than a redesign.

Start a Conversation