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.
Consider selecting a tiny link while holding a phone in one hand. A larger, well-spaced target can help the intended action remain easy to reach.
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
Keep a small current entry point.
A reading list with an entry pointName the page’s essential task.
A useful first version of a pageKeep learning
Related background to continue exploring this subject.
W3C: web accessibility W3C: accessible image tutorials