The "fat finger" zone: why your buttons are hard to tap on a phone

You keep getting messages saying "I hit the wrong button" or "it doesn't tap right on my phone." Your customers aren't clumsy and your phone isn't broken. The button is simply too small, or too close to another element, and a finger — which is nothing like a mouse cursor — covers a much wider area than you'd think.

Designers call it the "fat finger problem": your fingertip touches the screen across several millimeters, and if the button is smaller than that patch, the tap slips onto the neighboring element. The good news: this isn't a matter of taste. It comes down to a few measurable rules you can check yourself in minutes.

Why a finger isn't a mouse

On a desktop you have a one-pixel cursor: you aim at the exact corner of an icon and click. On a phone, your finger lands on a wide area, and you can't even see what's underneath at the moment you touch it — your finger covers the button.

That's where the three complaints customers report come from:

• they tap next to the button and nothing happens;
• they hit the wrong button (say "Cancel" instead of "Send");
• they tap several times because the first touch "didn't register."

All three have the same cause: the target is too small or too close to other targets. It's not the user's fault — it's a sizing problem you fix in CSS.

The right button size: the real numbers

There are clear standards, published by the people who build the operating systems:

• Apple recommends a tap target of at least 44 × 44 points.
• Google (Material Design) recommends at least 48 × 48 dp.
• WCAG, the accessibility standard, asks for at least 44 × 44 px at level AAA, and 24 × 24 px as a baseline (AA).

One thing matters most: this is about the tappable area, not necessarily how big the button looks. A small text link can still have a large tap target if you add padding around it. In practice, even a 24 px icon can carry a 44–48 px tap area through invisible space around it. The simple rule I give clients: if an adult can't comfortably tap it with a thumb, it's too small.

Spacing matters as much as size

You can have buttons that are big enough and still get wrong taps, if they sit right next to each other. When two targets touch, a finger that slips a little lands on the neighbor.

A few practical rules:

• Leave at least 8 px between two tappable elements, and even more between important actions (a "Delete" next to a "Save").
• Don't put opposite actions side by side. "Place order" and "Empty cart" have no business touching.
• In menus and lists, make each row tall enough to tap without catching the row above or below.

Empty space isn't wasted space. On a phone, spacing is what separates a clean tap from a moment of frustration.

The thumb zone: where the hand struggles to reach

Most people hold the phone in one hand and navigate with their thumb. That means some areas of the screen are easy to reach, while others — especially the top corner opposite the hand — force an awkward regrip of the phone.

What that means for your site:

• Put the main actions (call, message, book, add to cart) low and within reach, not hidden up in a corner.
• A fixed bottom bar with a single clear action button works far better than a button lost in the header.
• Don't bury the phone number or WhatsApp button inside a menu the user has to open first.

The best test is the real one: pick up your phone with one hand, hold it normally, and try to do what a customer would. If you need your second hand, something is badly placed.

How to check it yourself in five minutes

You don't need expensive tools to spot the problem:

• Open the site on your real phone, not just your computer. The browser emulator lies about how a tap feels.
• Try every important action with your thumb, holding the phone in one hand.
• Hand the site to an older person or someone with bigger fingers and watch where they miss. It's the most honest test there is.
• Notice whether you ever tap wrong the first time or tap twice — that's the button to fix.

At MPO Web Studio, when we build a site we test it on a real phone before handing it over, precisely so you never get this kind of feedback. We can even prepare a free demo based on your business, so you feel how it works on a phone before you pay anything. If you want a second opinion on your current site, message us on WhatsApp and we'll honestly tell you which buttons are too small — without selling you something you don't need.