Have you ever tried to tap a button on your smartphone and ended up placing an unwanted order or calling the wrong number? It happens to everyone and it’s called mobile misclick. As humans, we’re generally pretty clumsy and get distracted easier than some of us would like to admit, so when the mouse and keyboard were traded for fingers and thumbs, it’s not hard to imagine why we struggle with our tap accuracy. Fortunately, as mobile developers and designers we have the ability to help our users avoid these type of mistakes by designing finger-friendly mobile experiences, part of which is done by properly sizing touch targets.
Simply put, a touch target is anything a user can tap within a mobile app to make something happen. For example, a button that submits a form or an icon that favorites a post are both common touch targets. As a general rule of thumb (pun intended), the smaller a touch target the harder it is for users to hit, increasing the likelihood of a misclick. You may be saying, ok then, I’ll just make all my buttons really big! Not so fast, there’s a little more to it than that.
According to a MIT Touch Lab study, the average width of an index finder is 1.6 to 2cm (16-20mm) for adults, which, in the web world, converts to a width of about 45-57 pixels. Taking this information into account, the design guidelines of any major mobile operating system provide suggestions on how big to make touch targets. Apple’s Human Interface Guidelines suggests a minimum tappable area of 44pt x 44pt for all controls and Google’s Material Design Guidelines suggest a minimum tappable area of 48dp x 48dp with at least 8dp of space between any two controls.
Screenshot from Apple’s Human Interface Guidelines
Screenshot from Google’s Material Design Guidelines
It’s important to remember, however, that standard rules don’t work for every design. As developers and designers we have to keep in mind that our context is unique and may not have been accounted for by Apple or Google. For example, you may be building an app for users with motor deficiencies, such as children, the elderly, or the disabled, who need a greater margin of error to avoid misclicks. In these situations, you may want to hold yourself to a minimum touch target size greater than what is suggested by these guidelines.
Additionally, you will have user experience and business goals to consider. For example, if you are building a photo sharing app, a key action in your app is probably taking a photo. To promote this action and to make it easier for users to access their device camera, you may want to make the associated control larger than others. Conversely, there are situations where you will want to discourage users from taking an action, for example, something destructive like deleting an account. In this case, you may want to make the touch target smaller to prevent users from accidentally clicking it.
An example iOS tab bar where the touch target for the take a photo action is larger than the other tabs.
To sum it up, our fingers are not precise pointers, so we should account for this by sizing touch targets within our mobile applications appropriately based on research and suggested best practices. But remember, at the end of the day these are just suggestions. As developers and designers we should use these suggestions as a baseline and make conscious decisions to follow, extend, or break them to optimize our designs for our unique context.
Other posts in the Mobile UX Series:
Mobile UX Tip: Permission Priming