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.
Picture this situation.
Imagine two adjacent controls for keeping and removing an item. Space between their targets helps distinguish the choices during an imprecise tap.
A second way to look.
An element needs a role in the whole experience. Spacing, emphasis, and feedback work best when they help someone make a particular decision.
- Check the actual interactive area.
- Leave space between adjacent actions.
- Try touch and keyboard interaction.
Follow a related question
Export a small representative sample.
Choose a tool with an exitAssign colors to clear roles.
A palette with a few clear rolesKeep learning
Related background to continue exploring this subject.
W3C: web accessibility W3C: accessible image tutorials
