A small icon can look tidy while being difficult to tap accurately. The usable area around the control and its distance from neighboring actions affect the experience on a touch screen.
Consider the complete target, including the space that responds to a tap. A frequently used action deserves room, and adjacent controls should not make an accidental choice easy. Check the arrangement with actual fingers on a narrow screen.
Keep other input methods in view too. The same control should have a clear label and a visible keyboard focus. A comfortable target supports ordinary variation in how someone holds, views, and interacts with the device.
- Check the actual interactive area.
- Leave space between adjacent actions.
- Try touch and keyboard interaction.
A small working example.
Imagine two adjacent controls for keeping and removing an item. Space between their targets helps distinguish the choices during an imprecise tap.
A note to keep beside it.
Look at the moment when a person hesitates. The question they are trying to answer can be a better guide than the arrangement that looks most balanced.
Follow a related question
Export a small representative sample.
Choose a tool with an exitNotice the heading hierarchy.
The building blocks of a pageKeep learning
Related background to continue exploring this subject.
W3C: web accessibility W3C: accessible image tutorials
