UX/UI design / DIJION
Small icons, wrong taps: mobile target areas and spacing
A review guide separating visible icons from interaction areas, with checks for neighboring actions, screen edges and enlarged text.
A small close icon is more than a visual choice: a mistaken tap can dismiss a draft. Enlarging the icon is not the only possible response. In an illustrative toolbar, review the actual interaction areas of Edit and Delete, their separation and how the phone is held as parts of the same task.
Separate the visible shape from the interaction area
An icon can remain visually small while its active area is larger. Overlapping active regions make the result unpredictable. Expose interaction bounds during development and inspect their actual edges. Additional spacing can be as useful as a larger target, especially when neighboring controls have substantially different consequences.
Keep measurements in their proper context
WCAG 2.2 AA addresses 24 by 24 CSS-pixel targets or its specified spacing conditions for web content, with defined exceptions. That is not a universal comfort recommendation. Do not confuse CSS pixels with native platform units; assess relevant platform guidance and actual device tasks separately.
Review neighbors alongside their consequences
Scroll the table horizontally to see all columns.
| Location | Risk | Check |
|---|---|---|
| Delete beside Edit | Accidental irreversible action | Separate bounds and spacing |
| Screen edge | Conflict with system gesture | Test on a physical device |
| Compact card | Competing label and icon | Define target priority |
Make the outcome of a tap visible
A generous target still needs clear feedback. Pressed, loading and disabled states should not be indistinguishable. A keyboard, enlarged text or scrolling can change the usable area. Review targets after errors appear and content grows, not only in the clean initial screen shown in the design file.
Try to reproduce accidental taps
- Expose interaction bounds and inspect overlaps.
- Reach every action on a narrow screen with enlarged text.
- Begin scrolling over an action and check for accidental activation.
- Review consequential neighboring actions one-handed on a real device.
The deliverable is a review of relationships between targets, not a pixel value alone. Size, separation and outcome feedback need to work together.