Tap Targets and Fat Fingers

The size of a fingertip

A mouse pointer is precise to a single pixel and you can see exactly where it is.

A fingertip covers an area roughly the width of a thumbnail, arrives at an angle, and obscures the target at the moment of contact.

The person tapping is aiming with something they cannot see the tip of, at something their own hand is covering.

That is the whole problem, and it explains why controls that work perfectly with a mouse fail repeatedly with a thumb.

The numbers that are actually used

The established guidance across the major platforms is consistent enough to treat as one rule.

Around forty-four by forty-four pixels is the widely used minimum for anything tappable, with some guidance suggesting closer to forty-eight.

Just as important, and more often ignored, is the space around it: roughly eight pixels of clear area so that a slightly inaccurate tap does not land on the neighbour.

Note that this is the tappable area rather than the visible one. A small icon can have a generous invisible touch area around it, which is usually the right solution for anything that must look compact.

Where sites fail

• Text links in a paragraph, at body text size.
• Menu items stacked with no vertical spacing.
• Small icons, particularly social and close buttons.
• Pagination and numbered lists of pages.
• Checkboxes and radio buttons at their default size.
• Two links side by side separated by a comma.

The last one is worth singling out. Two adjacent links with a comma between them are a near-guaranteed misfire, and they appear constantly in footers and category lists.

The close button

Deserves its own mention because it is the worst offender on most sites and the consequences are the most serious.

The small cross that dismisses a pop-up or a notice is frequently the smallest tappable element on the page, placed in a corner, sometimes over a moving background.

Somebody who cannot dismiss an overlay cannot use the site at all, so the failure is total rather than partial.

It is also the element most likely to be read as deliberate. A visitor who taps three times without closing something concludes the difficulty is intentional, and leaves with an impression that is hard to recover.

Labels are part of the target

An easy improvement that most sites miss.

A checkbox on its own is a small square. A checkbox whose label is properly associated with it means the entire text is also tappable, which turns a tiny target into a wide one.

The same applies to cards and list items: making the whole block tappable rather than only the heading inside it removes the aiming problem entirely.

Neither change alters how anything looks. Both substantially change how the page behaves under a thumb.

A worked example

A parts supplier had a mobile category page listing about forty products, each a small thumbnail with the product name beside it as a link.

The links were body text size and the rows were tightly spaced to fit more on screen.

Customers were repeatedly opening the wrong product, which nobody realised until a staff member watched a regular customer using it and saw him back out twice on one page.

Two changes were made. Each row became tappable across its full width and height rather than only on the name, and the row height was increased so each was comfortably over the minimum.

Fewer products fit on screen, which had been the objection.

Product pages viewed per session rose, back-button use within the category fell sharply, and orders from mobile increased over the following quarter.

Test with a thumb, one-handed

The specific test that finds these, and it has to be done deliberately.

Hold the phone in one hand, as somebody standing in a shop or walking to a van would, and use only the thumb of that hand.

Not two hands with an index finger while sitting at a desk, which is how everybody tests their own site and which is far more accurate than real use.

Try every important control that way, including in the header and the footer, and note anything you miss or hesitate over.

A useful additional pass is to try it while walking, which is how a substantial share of mobile browsing genuinely happens.

Checking it systematically

Testing by hand finds the problems on the pages you check. For the rest, the automated tools will do a pass.

Mobile usability reports flag targets that are too small or too close together across a whole site, which is the efficient way to find the pattern rather than the instance.

Page auditing tools built into browsers report the same thing for a single page, with the specific elements named.

Treat the output as a list of candidates rather than a verdict. These tools measure geometry and cannot tell whether an element matters, so a flagged link in a legal footer is less urgent than an unflagged one that is technically adequate and still awkward to reach.

Spacing matters more than size

If you can only fix one thing, fix the gaps.

A slightly small button with clear space around it is usable, because a near miss lands on nothing and the person simply tries again.

A correctly sized button with another control immediately adjacent is worse, because a near miss triggers something else, and the visitor now has to work out what happened and undo it.

Accidental actions cost far more than failed ones, particularly where the neighbour is a delete, a remove, or a submit.

The counter-case

Minimum sizes are a floor rather than a target, and applying them mechanically produces its own problems.

A page where every element is enlarged to meet the guidance becomes a page with very little on it, requiring more scrolling, which is its own usability cost.

Dense information displays sometimes genuinely need small elements, and the right answer there is a larger touch area behind a compact visual rather than making everything physically bigger.

The judgement is about consequence. Primary actions and anything destructive should be generous. A tertiary link in a footer can be tighter, and pretending otherwise wastes space that better serves the reader.

The fixes

1. Make tappable areas at least about 44 pixels square.
2. Leave clear space around each one.
3. Associate labels so they become part of the target.
4. Make whole rows and cards tappable, not just headings.
5. Enlarge every close button on the site.
6. Separate adjacent links that sit side by side.
7. Test one-handed, with a thumb, while standing.

Item five takes ten minutes and removes the most complete failure on the list.

Crowded navigation is covered in menus with too many things in them.

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.