Loading
Loading
Hitting it first time
The people who make the phones cannot agree on how big a button should be. What settles it is the empty space around the button, which is the part nobody looks at.
About 10 minutes
The short version
A mouse has a point on the end of it. One pixel wide, visible the whole time, aimed by a hand resting on a desk. Almost every website in the world was drawn by somebody using one.
A thumb has no point on the end of it. It is a soft pad somewhere around a centimetre across, it arrives at an angle, and on the way down it covers the thing it is about to touch. The screen never sees a point. It sees a patch, works out roughly the middle of the patch, and decides what you meant.
Most of the time it decides correctly. This piece is about the rest of the time.
On a computer a mis-click is a twitch of the wrist. You watch it happen, you undo it, and the whole thing costs about a second.
On a phone the wrong tap commits you. Something starts loading, on mobile data, in a car park, and by the time it has finished arriving you already know it is not what you wanted. Then this happens, and it is the part nobody counts.
Wrong pageBackAnother waitWhere was I
That is the cheap version, where the thing they hit was another page of yours. The expensive version is the one where they hit a small round symbol sitting next to your phone number, and now they are not on your website at all. They are in a feed built by people whose entire business is making sure nobody leaves it.
There is no report with this on it. From the outside a miss does not look like anything at all. A visit, a page, a press of back, an exit, which is precisely what somebody who simply changed their mind looks like as well.
The customer does not file a complaint either. Nobody rings a plumber to say the buttons were fiddly. They come away with a vague sense that the website was hard work, they could not tell you why if you asked them directly, and they go back to the search results, where there are four more of you.
The obvious next question is how big the thing ought to be, and there is an answer. There are four. They come from the people who make the phones and the people who write the rules for everybody else, and they do not agree with each other.
Apple
44
The smallest thing they will tell you to put on an iPhone screen, in Apple's own unit of measurement.
Google, for Android
48
A different unit again, and this one comes with a request for at least 8 of clear space around it.
The accessibility rules
24
A third unit, and the lowest bar of the four by a distance. Their higher grade asks for 44.
Google's automated check
48
The one inside the page report. Anything under this is flagged, and so is anything sitting nearer than about 8 to its neighbour.
Three different units between four numbers. Working out whether any two of them describe the same physical size is a genuine piece of work, it changes from one phone to the next, and you cannot act on a single one of them from inside a website builder anyway.
So try this instead. Put your own thumb flat against the screen and look at how much glass it covers. The pad of an adult thumb runs somewhere between about a centimetre and a centimetre and a half across.
Every one of those official minimums, including the largest, is smaller than the thing doing the pressing. They are not describing a comfortable size. They are describing the floor below which somebody is prepared to call it broken.
Once a button is around the size of a fingertip, making it larger buys very little. Accuracy has gone about as far as it is going to go, and what the extra size costs is the rest of the screen.
A page of enormous buttons is a page with three things on it. Whoever wanted the fourth now has to scroll past all of them to reach it, which is a more expensive way of losing the same customer.
An automated check did once look at part of this. Whether the things you tap are far enough apart was one of four questions in Google's mobile-friendly test, and that test was switched off at the end of 2023: what it checked, and what it never could.
Watch somebody miss and it is almost never a wild miss. The thumb lands two or three millimetres off. That is the entire margin this whole subject is fought over.
If there is nothing in those few millimetres, nothing happens. The phone rounds the patch to the nearest thing worth pressing, everybody carries on, and neither of you ever finds out how close it was. If the next control starts there, the same two millimetres are the difference between your phone ringing and somebody scrolling a page that is not yours.
So the thing that decides the outcome is not the size of the button. It is what is beside it, and how far away.
The exception nobody quotes
The accessibility rules that big organisations and government sites are written to set the lowest of those four minimums. They also carry a clause almost nobody repeats: something smaller than the minimum still passes, provided nothing else is close to it.
Read that the other way around and it is the people who wrote the rule conceding the argument. Given enough space around it, the size stops being the thing that matters.
There is a standard trick here and every large business on your phone uses it. The area that responds to a tap is larger than the thing you can see. A small symbol, a generous invisible margin around it, and a control that quietly catches near-misses without looking heavy-handed on the page.
It is also worth knowing where it stops, because this is the one people complain about. An invisible margin rescues a near-miss. It does not help anybody aim, since nobody can aim at something they cannot see, and once the invisible part is a lot bigger than the visible part it starts catching taps meant for something else.
Which is why the space is usually better spent where it can be seen: as distance between things rather than as padding hidden around them. That is also the version you can do yourself. No website builder will let you near the invisible half of a button. Every one of them will let you put a gap between two rows.
Not every miss costs the same, and this is the part worth an afternoon. Landing on the wrong service page costs somebody a press of the back button. Landing on your social page costs you the whole visit.
The rule the big ones work to is roughly this. Two things sitting next to each other should have about the same consequence, and where the consequences are different, so is the distance.
Your phone number and your social icons
The most common one on a small business website, and the only one where a miss of two millimetres hands your customer to somebody else entirely.
Call and email, shoulder to shoulder
Two buttons of equal weight with a hairline between them. One opens the dialler. The other opens a mail app a good many people have never set up on that phone. Stack them.
Two links in the same sentence
Words in a paragraph are the smallest things on the page and have no space around them at all. Which makes a line of text the least reliable place on your website to put its most valuable link.
The cookie notice and everything under it
It sits across the bottom of the screen, which is exactly where a thumb already is, and it is the first thing anybody meets. If yours is tall, whatever it covers is not there for that visitor.
A small cross and whatever is under it
The only pair on this list where the two are stacked rather than side by side. A miss does not just fail to close the thing. It presses whatever the thing was covering.
Two choices side by side on a phone are two targets with a hairline between them. The same two stacked, one above the other, with a gap in between, are two decisions. It is also the direction the thumb is already travelling, since everything else on a phone moves up and down.
And where the two do different amounts of damage, do not give them the same weight. Fill in the one you want pressed and leave the other as an outline. Same size, different weight. Making the second one smaller is the wrong fix, because you have made it smaller for the person who actually wanted it.
Aiming is the expensive part of using a phone, which is why the businesses with the most customers on one have quietly moved everything anybody browses onto a push sideways instead: what the biggest businesses learnt about the thumb.
About five minutes, and one condition decides all of them. Use the hand you actually use, at the speed you actually go, standing up. Sitting at a desk being careful, every website ever built passes. Nothing here is scored and there is nothing to send anybody.
Empty space looks like nothing at all.
It is doing the work.Do the touching test, and only across the top of your home page. That is where the phone number usually is, it is where the row of small symbols usually is, and it is the one place on a small business website where two millimetres reliably costs the whole visit.
Worth saying plainly, because the obvious way to act on all this is to go and make everything larger, and that produces a worse website than the one you started with.
Nearly every fix in here is a subtraction instead. Two symbols in the header rather than six. One button where there were three. The phone number given a line of its own instead of being squeezed into a row with everything else. What you get back is space, and space between things is the whole of it.
A button nobody can miss is not a bigger button. It is a button with nothing else near it.
Next