Buttons That Are Too Small to Hit

The physical constraint

A fingertip contacts a screen across roughly eight to ten millimetres, which is around forty to fifty pixels on a typical phone.

A thumb is larger still, and most people hold a phone one-handed and tap with a thumb.

Which means a target smaller than about forty-four pixels is smaller than the thing hitting it, and accuracy depends on luck.

Designers work with a mouse cursor, which is precise to a single pixel, and the gap between those two experiences is where this problem lives.

Who this excludes

Everybody is inconvenienced. Some people are stopped entirely.

Anybody with a tremor, whether from a condition, medication or age.

Anybody with reduced fine motor control, arthritis, or limited hand function.

Anybody using the phone one-handed while carrying something, which is most people some of the time.

And anybody on a bus, in a van, or walking, where the surface is moving and precision drops sharply.

The usual offenders

• Close buttons on popups and cookie notices.
• Social icons in a tight row in the footer.
• Checkbox and radio inputs at their default size.
• Pagination numbers, set close together.
• Menu items in a compact dropdown.
• Text links inside a paragraph, which are single-line-height.

The first is the most damaging, because failing to close a popup can mean leaving the site entirely rather than merely mistapping.

Spacing matters as much as size

An adequately sized button surrounded by other buttons is still difficult.

Adjacent targets need space between them, so that a near miss hits nothing rather than hitting the wrong thing.

Hitting nothing is a minor annoyance. Hitting the wrong thing can mean deleting something, ordering something, or navigating away from a half-completed form.

Which is why a row of five social icons packed together with no gaps is worse than the same icons spaced apart, even at identical size.

Around eight pixels of separation is a reasonable minimum, and more where the consequences of a mistap are significant.

A worked example

A business whose newsletter popup had a close icon roughly fourteen pixels square in the top corner.

Analytics showed an unusually high exit rate on pages where the popup appeared.

Testing on a phone, it took several attempts to close, and tapping outside it did nothing.

People were not dismissing the popup and leaving. They were unable to dismiss it and leaving.

Enlarging the tap area to forty-eight pixels and allowing a tap outside to close it removed the exit spike within a week.

Nothing about the design visibly changed, because the tap area was enlarged around the same small icon.

Hover as the only way to reveal something

A related failure specific to touch devices.

A menu that opens on hover, a tooltip that appears on hover, or a caption that shows on hover has no equivalent on a phone.

Touch devices approximate it by treating the first tap as a hover and the second as a click, which produces menus that open when somebody meant to navigate.

Anything important should be available without hovering: tap to open a menu, put the tooltip text on the page, show the caption permanently.

The same applies to keyboard users, who cannot hover at all, which makes this a touch problem and an accessibility problem simultaneously.

The invisible tap area

The technique that resolves most of these without changing the design.

A tap target does not have to look as large as it is. Padding around a small icon extends the area that responds without making the icon bigger.

Which means a fourteen-pixel icon can have a forty-eight-pixel target, and the design is unchanged.

That is the answer to almost every objection about aesthetics, and it is a few lines of styling.

Worth checking on your own site by tapping slightly to the side of an icon and seeing whether it responds.

The phone number specifically

The single most valuable target on most small business sites, and frequently the worst.

A number rendered as ordinary text within a paragraph is a single line high, which is around twenty pixels, and it is what somebody in a hurry is trying to hit.

Making it a proper button, or at least a link with generous padding, roughly doubles the target.

In the header it should be a distinct element with space around it rather than one item among several in a row of links.

And it should be a proper telephone link so that tapping dials directly, since a number that has to be copied out by hand is a target problem and a friction problem at the same time.

For a trade whose enquiries arrive by phone, that one element deserves more attention than everything else on this list combined.

Forms and their controls

The second place where size costs money.

Default checkboxes and radio buttons are small, and browsers vary in how large they render them.

The fix is making the label part of the target, so that tapping the words selects the option rather than requiring a hit on the box itself.

That is standard behaviour when a label is correctly associated with its input, and it is missing whenever somebody has built a form from styled elements instead.

It roughly quadruples the usable area of every checkbox on the page, and it costs nothing.

The counter-case

Where smaller targets are acceptable.

Elements only ever used with a mouse, on a desktop-only application, which is rare and is worth verifying rather than assuming.

Inline text links within a paragraph, which cannot be enlarged without breaking the text, and which are handled by browsers reasonably well.

Even there, a link should be long enough to be a usable target, which is an argument against single-word links like here.

And dense interfaces used repeatedly by trained users, where efficiency outweighs first-time accuracy, which almost never describes a small business website in any respect.

Where to check

The elements that cost money if missed.

The phone number, which should be a large tappable area rather than a line of text.

The form submit button, which should be full width or close to it on a phone.

Any popup close button.

Quantity selectors, checkboxes and anything in a checkout.

And the main navigation, particularly a hamburger icon, which is frequently smaller than it should be.

Testing it

1. Use a real phone, not a resized browser window.
2. Use your thumb, one-handed.
3. Try it while walking or on a moving vehicle.
4. Tap slightly off-centre and see whether it responds.
5. Close every popup that appears.
6. Complete the form without a second hand.

The third sounds excessive and is exactly the condition under which a substantial share of all mobile visits actually happen.

The keyboard equivalent of this test is covered in tabbing through your own checkout.

Frequently asked questions

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.