How to Prevent Users from Mistapping Icons

If you’ve designed a mobile app before, you know how useful and prevalent icon buttons are. But what you don’t know is how often users mistap them when they’re placed too close together.

This is a common problem when icon buttons are aligned in a row. Users can easily hit adjacent buttons if there isn’t enough padding between them. This mistake can frustrate your users and slow down their task performance.

Add Extra Padding Between Icons

To prevent users from mistapping your icons, add extra padding. Check and see if you have enough padding by placing your finger over the icon.

If the adjacent icons are visible with spacing around them, you have enough padding. If the edges of your finger are touching or near touching the adjacent icons, you need to add more padding.

Use Circle Pads for Visual Affordance

If you compare tapping an icon button to a normal button, the edges of a normal button stay visible when the finger is over it. On an icon button, the edges disappear when it’s tapped.

When users can’t see the button edges, it’s harder for them to know if they’re hitting their target. The button edges act as a visual affordance to confirm their touch accuracy.

An effective way to give your users a visual affordance is to place the icons on a circle pad. Make your circle pad large enough so that the outer edges are visible when the user’s finger is over it.

Circle pads are padding so you don’t have to add extra padding between them. In fact, the larger the circle pad you use, the less padding you need.

The size and shape of circle pads allow users to see the edges of their target. This prevents them from mistapping the space between buttons by mistake. Without circle pads, the lack of target edges increases the chance of the finger landing in the space between buttons.

A fine example of circle pad usage is the iPhone’s control center screen. Each icon button has a circle pad and ample padding between them. With so many buttons, getting the padding right is essential.

Your circle pads don’t have to be in a circle shape. You can also use squircle pads (square + circle shape). Both are acceptable and work just as well.

Easy to Tap

Whenever you design icon buttons, use your finger to measure the padding. If there’s not enough, add more until the adjacent icons are visible. Use circle pads if you want to increase the user’s touch accuracy.

The padding around icon buttons affects task performance. Don’t just work on making your icons look appealing, work on making them easy to tap too. Then your app won’t only look good, but it’ll also feel good to use.

Book

Affiliate