Understanding minimum touch and pointer target sizes and how to implement them correctly is critical when designing apps for older people!

Recommended shape sizes are a function of vision and movement control considerations.  For clickable or tapable shapes in a user interface, targeting precision is generally the controlling factor. It is particularly important when designing apps for older people who have vision or movement control impairments.

Conflicting Guidelines

Apple’s iPhone Human Interface Guidelines recommend a minimum target size of 44 pixels tall/wide. Google’s Android recommendation is 48 pixels tall/wide with a minimum separation of 32 pixels in all directions.  Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34 pixels tall/wide with a minimum touch target size of 26 pixels tall/wide. There are two problems with these guidelines.  First they are not consistent with each other.  Second, the physical size of a pixel differs with screen size and resolution.

Just consider the difference between the original iPhone and today’s models.  An article by Dave Kearney in Fluid UI explores this.

Not only do the sizes of the screens differ, but the resolutions (number of pixels) of the screens differ widely as well.  We call the combination of screen size and resolution the “pixel density” of the screen and measure it in terms of pixels per inch (PPI).

The table below shows pixel density in PPI vs. screen size in inches for various iPhone and iPad models.  Note the large PPI variations.  The physical size in inches of a 44×44 pixel icon (as recommended by Apple) will vary proportionally to these variations in PPI pixel density.  But the size of an average finger does not.  Hence specifying shape sizes in terms of pixels may not be the best choice.

When it comes to implementation, software coding is typically done in terms of some combination of:

Pixels – A picture element: a single dot of color on a screen
Screen size – In inches diagonally
Screen resolution – Number of pixels horizontally and vertically
Screen density  – Measured in pixels per inch or PPI (note that dots per inch or DPI is the same thing).
iOS Points – An abstract measurement for iOS (note that “points” in iOS is different than “points” when discussing fonts).
Android Density Independent Pixels (DIP) – A similarly abstract measurement for Android

Pixels, screen size, screen resolution and screen density all refer to the physical attributes of a screen.  In contrast iOS points and Android DIP refer to a coordinate system which is separate from the device it’s running on.  Hence iOS points and Android DIP can be employed to solve the problem of varying pixel density on various devices.  But because they are abstract units of measure, it can be very difficult to write specifications or testing criteria with them.

Recommended Strategy

We think it is much better to think in terms of “finger size” as a unit of measure when designing apps for older people.  This makes good sense in a time when touch screen devices are replacing the mouse.  An article by Anthony T in Smashing Magazine explores this.  Here are some important points from his article:

• Users use the fingertip (rather than finger pad) to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit.
• A touch target that’s 1.6 to 2 cm wide (the average adult index finger width) allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides clear visual feedback on hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. A small target slows users down because they have to pay extra attention to hitting the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy when designing apps for older people.
• Many users prefer the convenience of using only one hand and their thumb. The big difference with the thumb is that it’s wider than the index finger. For users who use their thumbs, using 2.5 cm targets (average width of an adult thumb) works well. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

But how do you go about achieving the recommended size minimums across all of your target display devices?  Most experts recommend using abstracted pixel density independent units of measure, for example, “device independent pixels” in Android and “points” in iOS.  This may be a good way to approach coding, but it does not have guaranteed results, especially when writing common code across operating systems.  Ultimately you need to verify your implementation by actually measuring your user interface elements.

Here are our simplified target size recommendations when designing apps for older people:

1. Whenever possible, make touch targets 2.5cm wide or larger (average adult thumb), but never narrower than 1.6 cm wide (smaller adult index finger). The height should be no less than the width.
2. The separation between targets should be a minimum of 0.5 cm in all directions.
3. Because many personal computers are also becoming hybrid mouse/touch devices, follow these same size recommendations for mouse targets as well. This will ensure that your user interface works for both touch and mouse targets when designing apps for older people.
4. To reduce confusion, rather than writing coding specifications in terms of screen size, pixels, resolution, DPI, points and/or DIP, write them in terms of average index finger width (1.6 cm), and/or average adult thumb width (2.5 cm).
5. Test the final product on various devices for adherence to specifications. If needed, go back and rework the design and code for the particular device.  After font size, getting target sizes and spacing right is probably the most important thing you can do when designing apps for older people.

Below are some references that might be useful:

• iPhone Human Interface Guidelines
• Google Touch Target Guidelines
• Android Accessibility Scanner (checks target sizes)
• Windows Phone UI Design and Interaction Guide
• Windows App Design and UI Guidelines
• Ubuntu Designing for Finger UIs
• One-Handed Thumb Use on Small Touchscreen Devices
• MIT Touch Lab study of Human Fingertips to Investigate the Mechanics of Tactile Sense

Related Articles: User Interface Best Practices Guidelines for Seniors | Understanding Recommended Font Sizes | Understanding Recommended Color Contrast | Using Color When Designing Technology for Seniors