We’ve been designing a large number of mobile and touch interfaces at MAYA lately (no surprise there, I surmise). This means we’ve had a number of discussions amongst ourselves and with our clients about the optimal size for touch targets. While there are subtleties and confounding factors (I’ll get to these later), guidance is available, and it is well-researched and documented.
(Note that many of these resources are assuming capacitive touch screens, although they don’t necessarily say so.)
From the Apple iOS Guidelines:
Different iOS-based devices can have displays of different dimensions and resolutions, but in all devices the display affects the user experience in the same ways:
- 44 × 44 points is the comfortable minimum size of a tappable UI element.
- People are very aware of the quality of app artwork.
- The display encourages people to forget about the device and to focus on their content or task.
Note: Pixel is the appropriate unit of measurement to use when discussing the size of a device screen or the size of an icon you create in an image-editing app. Point is the appropriate unit of measurement to use when discussing the size of an area that is drawn onscreen.
On a standard-resolution device screen, one point equals one pixel, but other resolutions might dictate a different relationship. On a Retina display, for example, one point equals two pixels.
44 typographic points = 0.61 inches = 1.55 centimeters, so Apple’s advice here is to create targets that are just over six tenths of an inch (assuming square).
Designing for touch is a complex balance between size, spacing, and visuals. Achieving this balance reduces what is known as the “index of difficulty in target acquisition,” or, in other words, it makes controls easier to press.
Extensive user testing has dictated that 9 mm square be the ideal touch target size across all Microsoft touch platforms.
The minimum target size where smaller hit target heights are warranted is 7 mm. It is better to have a wider visual asset in these cases. For example, list items or menu items should be wider.
About the 9 mm Requirement: The recommended touch target size is greater than or equal to 9 mm square. Use this for controls that support the majority of tasks.
If space is severely constrained, defer to a minimum touch target size of 7 mm, provided the width is much larger.
Nine millimeters is a number determined by hundreds of hours of user testing, and represents the lowest average error rate (or the ratio of false taps to the total number of taps) for both discrete and serial tasks. A 9 mm minimum touch target size can limit error rate to as little as 1.6 percent.
The minimum touch target size is 7 mm. Use this for controls infrequently used or controls that are wide enough (greater than or equal to 15 mm) and only when too much height limits the design.
…so Microsoft’s guideline is a little smaller than Apple’s (9mm for MS, 15mm for Apple). Surprising that the Apple recommendation is about 50% bigger, but they both claim to have performed the research.
Nokia’s Developer’s Library
Nokia says: “Interface elements a user has to select and manipulate should not be smaller than the smallest average finger pad, that is, no smaller than 1 cm (0.4”) in diameter or a 1 cm × 1 cm square.”
Their recommendations go on to say, more specifically:
- 7 × 7 mm with 1 mm gaps for index finger usage
- 8 × 8 mm with 2 mm gaps for thumb usage
- List type of components should have minimum of 5 mm line spacing
- The width of a finger limits the density of items on screen. If the items are too close, the user will not be able to choose a single one.
MIT’s Touch Lab:
…Something about a monkey and finite analysis. Actually, I read (and referenced) this paper because some other sources have referred to it (and because it is fascinating), but it doesn’t directly cover touch target size. It discusses more about how you (a human) feel and touch (and how that can be modeled), as opposed to what can be sensed from a mobile device or a touch screen.
Raluca Budiu and Jakob Nielsen repeat the 1cm square research: “Research has shown that the best target size for widgets is 1cm x 1cm for touch devices; however, we still see some apps that have tiny targets, far below that recommended limit.”
We (at MAYA) have seen this same issue. It seems that applications will often have tiny targets if they are derived from desktop applications. (Also: merely because the developers are using desktop machines and emulators and not trying their application on the actual hardware.)
Smashing magazine (a good resource despite the name) found all the same resources we’ve been using.
Mozilla’s design wiki references Apple, MS, and Nokia.
 Fellow MAYAn Nate Bishop saw my article and pointed out this resource: 4ourth has a plastic Mobile Touch Template that you can use to inspect and prototype mobile interfaces and interactions. It uses a preferred target size of 1cm, which is in line with the recommendations I’ve mentioned so far.
Caveats & Commentary
First, note that there are many kinds of touch screens, even within the general categories of capacitive and resistive. One manufacturer’s resistive screens may differ in behavior from model to model. The original HP TouchSmart screens were infrared and behaved differently from other touch technologies. The main difference is the additional finger pressure typically needed for resistive screens, and capacitive screens can typically handle multi-touch.
Resistive screens can be used with a stylus (in fact, a very simple stylus, versus the more involved styli that are being used these days with capacitive touch screens like those on smart phones). A stylus is obviously more precise and can handle smaller hit areas, but it’s something users must keep track of (i.e. not lose) or it must be placed on an annoying tether. We’ve also learned that people will improvise if they lose a stylus: soldiers will use a bullet (yes, a bullet) and workmen will use a screwdriver; both will scratch the screen.
Sometimes a simple trick can be employed where the touch area is larger than the visible screen element. This can help achieve visual design goals while still supporting usability. We’ve done this often with considerable success.
Touch interfaces must be considered in context. Apple’s iPhone, for example, makes use of gestures where you begin to swipe from off the screen (e.g. swiping down to view the notification center). This makes it easier to operate something that would normally be a very small target, but it only works thanks to the flat glass that’s the face of the iPhone. If a device has a bezel, even 1mm, it will be harder to touch things near the edge of the screen, not easier.
Be conservative. Don’t take these minimums as a challenge, or as a reason to crowd a lot of interactive elements on-screen. They’re minimums; if you can make hit targets bigger, do it. If you can separate controls so there’s less chance of ambiguous touches or gestures, great.
Although we haven’t seen much of this technology gain traction yet, there’s much promise for dual mode pen and capacitive touch screens like N-trig’s DuoSense and Wacom’s Cintiq Touch. These devices let you use your fingers for gestures and gross control and a pen for fine, high-resolution work (far more accurately than merely using a stylus on a capacitive touch screen). They also promote a more natural interaction method — using your fingers for moving and manipulating things (turning pages, zooming, and panning) and using a pen for writing and drawing.