Small on screen, big for fingers
How GreedUI keeps checkboxes and tiny buttons delicate to look at but easy to tap, with a switch that shows the hidden tap areas.
In 20 seconds
Why small targets get missed, with the math behind it.
The sizes the guidelines actually ask for.
How to keep controls delicate and still easy to tap.
Tap near the boxes quickly, like you would on a phone.
Small things are harder to hit. There's math for it.
In 1954 a psychologist named Paul Fitts showed something that sounds obvious but turned into a law: the smaller and farther away a target is, the longer it takes to hit, and the more often you miss. Every interface designer has bumped into it since.
Touchscreens make it worse. Your finger covers the thing you're aiming at, and it's a lot wider than a mouse pointer. One study on thumb use found people did best with targets around 9 millimeters across, which is far bigger than a typical checkbox.
The smaller the button, the more often people miss it. On phones, much more often.
Feel it
Same three checkboxes, two builds. Tap or click near them quickly, a bit sloppy, like you would with your thumb. Watch the miss counter.
Bad: Each box only reacts to its own 12 pixels.
Bad: A tap a tiny bit off does nothing.
Bad: People tap again, harder, and blame themselves.
Good: An invisible ring around each box catches taps too (dashed here so you can see it).
Good: Slightly-off taps still count.
Good: The boxes look exactly as small as before.
What the guidelines ask for
The web's accessibility rules set the floor at 24 by 24 pixels for anything you tap or click, unless it has enough empty space around it. Apple's guidelines go further and recommend 44 by 44 points for controls on its platforms.
The catch: 44 pixels of visible checkbox looks clumsy. So don't make it visible. Make it reachable.
Design for the eye, build for the thumb.
How to do it
Keep the visible control small if that's the look you want.
Add an invisible pseudo-element around it that also receives taps. It grows the target without moving anything.
For text links, add a little vertical padding and cancel it with negative margin, so the line height stays the same.
Leave space between targets, so the invisible rings don't overlap.
Mistakes I see a lot
Icon buttons sized to the icon. A 16 pixel icon is not a 16 pixel button. Give it room.
Close buttons in the corner with no padding. The most-used button, made the hardest to hit.
Targets packed tight. Big targets that touch each other cause wrong taps instead of missed ones.
Only testing with a mouse. Try your page on a phone, one-handed, walking.
Sources
[1] The information capacity of the human motor system in controlling the amplitude of movement. Paul M. Fitts. Journal of Experimental Psychology, 1954.
[2] Target size study for one-handed thumb use on small touchscreen devices. Pekka Parhi, Amy K. Karlson and Benjamin B. Bederson. ACM MobileHCI, 2006.
[3] Understanding Success Criterion 2.5.8: Target Size (Minimum). W3C. WCAG 2.2, 2023. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
[4] Accessibility. Apple. Human Interface Guidelines, accessed 2026. https://developer.apple.com/design/human-interface-guidelines/accessibility
| GreedUI | ||
|---|---|---|
| Push | SMS | |
| I can explain why small targets get missed. | I know the minimum: 24 by 24 pixels, and why bigger is better. | I'd grow the tap area with an invisible ring instead of making everything chunky. |
| Each box only reacts to its own 12 pixels. | A tap a tiny bit off does nothing. | People tap again, harder, and blame themselves. |
| An invisible ring around each box catches taps too (dashed here so you can see it). | Slightly-off taps still count. | The boxes look exactly as small as before. |
| 12 by 12 pixels | 24 by 24 pixels | 100 by 100 pixels |
Full component index: llms.txt