Touchscreens are fundamentally different from mice. A finger is imprecise, covers what it taps, and cannot hover. Designing for touch requires deliberate attention to target sizes, spacing, and interaction patterns.
Minimum Touch Target Sizes
The most common mobile usability problem is targets that are too small. Industry guidelines are clear:
- WCAG 2.2 (Level AA) — minimum 24x24 CSS pixels, with at least 24px spacing between targets
- Apple HIG — minimum 44x44 points
- Material Design — minimum 48x48 dp
- Practical recommendation — aim for at least 44x44 CSS pixels
You can also increase the tap area without changing the visual size using pseudo-elements:
Spacing Between Targets
Targets that are large enough can still cause mis-taps if they are too close together. Always provide clear spacing:
A common failure is dense navigation with many small links packed together. On mobile, rethink the layout entirely — use a hamburger menu, bottom sheet, or vertical list instead of cramming a desktop nav into a small screen.
The Thumb Zone
Most people hold their phone in one hand and operate it with their thumb. Research by Steven Hoober shows that the "thumb zone" — the area easily reachable by the thumb — is limited:
- Easy reach — bottom-center area of the screen
- Moderate reach — bottom corners and middle of the screen
- Hard to reach — top of the screen, especially the top-left corner
Design implications:
- Place primary actions (submit buttons, main navigation) in the easy-reach zone
- Avoid placing critical actions at the top corners of the screen
- Bottom navigation bars are easier to use than top navigation on mobile
Touch Gestures
Touch devices support gestures beyond simple taps. Use them purposefully:
| Gesture | Common Use | Caution |
|---|---|---|
| Tap | Primary action | Must work on first tap — no hover states |
| Long press | Context menu, selection | Not discoverable — provide alternatives |
| Swipe | Dismiss, navigate, reveal actions | Always provide a visible alternative |
| Pinch | Zoom | Do not disable browser zoom |
| Pull-to-refresh | Refresh content | Browser default in many contexts |
The golden rule: never make a gesture the only way to perform an action. Swipe-to-delete must have a visible delete button alternative. Long-press menus must have a tap-accessible version.
Mobile Form UX
Forms are especially challenging on mobile:
Additional mobile form best practices:
- Use single-column layouts — two-column forms are difficult on narrow screens
- Place labels above inputs — left-aligned labels waste horizontal space on mobile
- Show inline validation — do not wait for form submission to show errors
- Avoid dropdowns for short lists — radio buttons or segmented controls are easier to tap
Performance as UX
On mobile, performance is part of the user experience. A button that takes 3 seconds to respond feels broken. Key optimizations:
- Eliminate the 300ms tap delay — modern browsers do this automatically with
<meta name="viewport"> - Use
touch-action: manipulation— prevents double-tap zoom delay on specific elements - Provide instant visual feedback — use
:activestyles so users know their tap registered
Every tap should produce immediate visual feedback, even if the underlying action takes time to complete.