In short
Your mouse pointer is one pixel sharp. Your thumb is not. If buttons are too small or too close together, people tap the wrong thing, get annoyed and blame themselves.
Ensuring interactive elements are large enough to tap reliably with a finger — roughly 44x44px minimum is a common guideline, since fingers are far less precise than a mouse cursor.
Think of it like this
The big buttons on a calculator
Old shop calculators have big chunky keys with gaps between them. The shopkeeper can punch numbers fast, even while chatting. Imagine those keys shrunk to the size of rice grains. Touch targets need calculator-sized keys.
Watch it happen
Common minimum target sizes
1/424 by 24 CSS pixels: the WCAG 2.2 AA minimum target size. Think of it as the floor, not the goal.
The big ideas
What you need to know
Fingers are wide
A fingertip covers far more screen than a cursor. Small targets mean mis-taps.
Hit area beats icon size
Keep icons visually small if you like, but pad the tappable area around them.
Space between targets
Gaps between buttons stop people hitting the neighbour, especially next to delete or call buttons.
Helps everyone
Bigger targets help people with tremors, older users, and anyone using a phone on a moving bus.
Save yourself the pain
Common mistakes
Oops
Making text links in a dense paragraph the only way to do an action on mobile.
Do this instead
Give important actions their own button with a generous tap area.
Oops
Placing 'Delete' and 'Edit' icons right next to each other with no gap.
Do this instead
Add spacing and separate risky actions, or move delete into a confirmation step.
Your mission
Measure real targets
Quick check
You want a small 20px close icon. How do you keep it easy to tap?
Go deeper
- 1Audit a design's smallest tap targets against the 44x44px minimum guideline.
- 2Learn why insufficient touch target size disproportionately hurts accessibility for motor-impaired users.
- 3Practice designing a compact but still accessible list item with an adequately-sized tap area.
More topics at this stop
Responsive Design Principles
Mobile-First Design
iOS Human Interface Guidelines (Overview)
Material Design Guidelines (Overview)
Breakpoints & Adaptive Layouts
Designing for Multiple Screen Sizes
Cross-Platform Design Considerations
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
