Touch Friendly Target

Problem

Because of the small screen, the nonexistence of tactile feedback, and the lack of precision of our fat fingers, hitting a target on a mobile device can be a challenging task. You need to design an interface that must be effortlessly used by touch.

Solution

Design all touchable elements large enough and generously spaced so they can be easily triggered.

With a mouse we can easily trigger very small targets, on mobile devices, because we are using our fingers as an input device that can be a more changeling task. Our fingers are much more imprecise than a mouse, as such, you should design touchable elements large enough so users can easily interact with them.

It is frustrating when we press a button and nothing happens. Currently devices provide no haptic feedback, so users cannot know for sure if they just missed the target or there is a problem with the website. You can reduce the problem of the lack of feedback by providing some visual response to the fact that a target was tapped; for example, changing the background color of the target.

In addition to larger targets, you need to account for the space between targets. You should have generous space between elements to minimize errors. If the implementation of this pattern leads to enormous targets, you can use an ICEBERG TIP instead.

Optimal Size

The recommended minimum size for a target differs depending on which user interface guideline we may be following. However, the optimal size should be approximately that of an adult finger, which largely have a diameter of 16mm to 20mm1. The size in pixels varies depending on pixel density.

  • The iPhone Human Interface Guidelines2, recommends a minimum of 44x44 pixels for targets. Since the release of devices with higher DPI, Apple updated that value to an abstract measure of 44x44 points.
  • User Experience Design Guidelines for Windows Phone3 recommends a 9mm target as the ideal size for all devices across Microsoft platforms, and 7mm as the minimum for the height when the width of the target is larger. It also recommends 4.2mm as the minimum visual size for a touchable item; and 2mm for the space between targets.
  • Nokia Developer’s4 resources recommends that touchable elements should be no smaller than 10x10mm. And the minimum size for target should be: 7x7mm with 1mm gaps for index finger usage; 8x8mm with 2mm gaps for thumb usage; and list type of components should have a minimum of 5 mm line spacing.

***

Web Design Patterns for Mobile Devices
Etsy, 06/2012
Web Design Patterns for Mobile Devices
Microsoft, 06/2012
  • Generous Borders in Designing Interfaces

  1. Saffer, Dan. Designing Gestural Interfaces: Touchscreens and Interactive Devices, 2008. 

  2. iOS Human Interface Guidelines 

  3. User Experience Design Guidelines for Windows Phone 

  4. Nokia Developer’s website