Mobile

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.

icon_buttons-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.

icon_buttons-edges

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.

icon_buttons-affordance

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.

icon_buttons-example

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.


Subscribe to Newsletter

Books

DV-tout

Toolkits

WP-tout
FP-tout
PP-tout

Affiliates

elegant-themes

Article written by anthony

Author and founder of UX Movement. Creating a better digital world for mankind by teaching and evangelizing best practices, standards, and techniques in user experience design.

This Post Has 6 Comments

  1. Muhammad Ahsan Reply

    I always read all your articles. They are explained and based on common UX sense.
    Keep on doing it

  2. Anne Reply

    This is my biggest frustration with the mobile version of Instagram. The Like and Comment icon buttons are too close together, and I’m constantly having to go back to get the right one.

  3. Slava Reply

    The iPhone example is demonstrating both, the good and the bad. The Rewind, Play and Forward buttons do not have “circle pad and ample padding between them”, and they actually cause many mistaps. I needed a lot of time to learn to slowly and precisely use the side of my finger to be able to press Play. Mistap rate is now about 20%, where initially it was like 90%. The other buttons have no mistap rate.

    • anthony Reply

      I agree with you and experience the same. For these particular buttons I don’t think putting circle pads on them would fix the problem if we’re limited to the same amount of space.

      One way that could decrease mistaps is if they moved the play button higher and the rewind/forward buttons lower so that they aren’t aligned on the same row. This allows the high priority button (play) to get it’s own slot in the prominent center and the lower priority buttons to get their own slot near the bottom with ample padding in between.

  4. sonduong Reply

    Thanks to you and all your posts, they are so helpful!

  5. Johannes Reply

    I think it is important to differentiate affordance and signifiers as it supports the understanding of underlying concepts. “Visual affordance” is really confusing.
    https://medium.com/@Ben.Olson/affordances-and-signifiers-in-mobile-interface-design-cf584696cda8

Leave a Reply

Your email address will not be published. Required fields are marked *