Mobile UI Mistakes to Avoid: The Touch Target

To err is human; to program, devine. Doing both can result issues ranging from user frustration to total app failure. Nobody wants either, of course, and a few simple app-design concepts will help keep your apps easy to use and hard to break.

This first-in-a-series installment on mobile UI best practices covers Touch Targets, the places that put functions at the fingertips.

Touch Targets

Human pointers have far less precision than mouse pointers. It's therefore important when designing your app's buttons and other touch targets that you optimize them for the imprecision of the human finger. Here are a few best practices.

In general, buttons should be large enough to remain visible and provide feedback when touched by a finger or thumb. This important visual cue lets the user know that their choice has been registered and that something is about to happen. Also, the button's appearance should remain "pressed" if the app doesn't immediately dismiss the current screen. This will help prevent subsequent presses of a button that the user thinks wasn't pressed the first time.

The ideal size for human-interactive buttons was included in research published in 2003 by the Touch Lab at MIT, which sought to understand the mechanics of tactile sense. It reported an average human index finger at 16 to 20 mm (about three-quarters of an inch) wide, and an average thumb at 25mm (about one inch). Of course to calculate button size, those length measurements must be converted to pixels using the target screen's pixels-per-inch (ppi) specification. Use this pixel calculator to determine the number. 

Interestingly, Apple's Human Interface Guidelines for iPhone currently recommend that touch targets be at least 44 pixels square; Nokia recommends an even smaller 28 pixels square and parent Microsoft advises 34 pixels x 26 pixels. While such dimensions might have suited a 640x480 screen, today's resolutions can make even Apple's suggestions look like a postage stamp on the other side of the room. So it's best to use absolute measurements and convert using the ppi of the target device. It's also good practice to place touch points away from the edge of the screen, where they can sometimes be hard to tap cleanly because of a protective case or cradle. The minimum size for a reliable touch target is 6mm square for stationary users; 8mm for users in motion.

Also important are variances in tap method. Sometimes people tap with the tip of the finger, other times with the pad of the thumb. What you might not have known is that touchscreens register touch input in the center of the contact area, a point known as the centroid. Depending on the platform, information such as touch size and pressure also are captured, but the centroid is the point of action.

From the illustration above, the thumb's "contact patch" appears to be touching both Nearby and Events buttons. But Nearby will be selected because its centroid falls within its boundaries. It's important to note that the so-called hot section should not be limited to a button's text. The clickable area should include button text and the area of its enclosing geometry, which in this case is a rectangle. To further reduce incorrect presses, known as interference, create an invisible 3mm gap between buttons by shrinking the clickable area at the top and bottom of adjacent buttons by 1.5mm. Conversely, if a screen object is too small to be a suitable touch target, increase the size of the clickable area surrounding it and make it transparent (and therefore invisible).

To minimize interference errors, touch targets should be separated by 8-10mm on center. If only a few buttons are needed, making them oversized can minimize errors and direct attention to the most common action. But be careful not to go overboard. Developers of the alarm clock app below clearly thought that most users would choose to snooze, and perhaps further believed that groggy fingers were better served by a larger landing area. Perhaps they're right, but experts say that touch targets should never exceed 15mm. Anything larger starts to look like a background element.

The UI design is ultimately up to you, and should be built according to the needs of its users. The Zebra Utilities app shown below offers six main functions, each on a dedicated button with plenty of separation between them. This app is easy to operate with finger or thumb. 

For an app that presents a scrolling list of selection objects, a stack of buttons or sets of functionality presented in tabbed screens, it's important to build it with minimization of interference in mind. Remember that design elements such as tab bars can be as slender as you like visually, and their touch targets can exceed those geometric borders. The figure below shows a pair of apps with an overlay of 8mm and 10mm concentric circles depicting the spacing for minimum and optimal interference reduction. The overlay can be achieved programmatically on the actual screen or by placing it over a screenshot. In the app at left, notice that the tabs overlap touch targets above and below.

Regardless of how carefully the UI is designed, it's normal to expect an errant selection now and then. It is therefore important to build your app so that it minimizes the severity of those wrong taps.One critical best practice is to avoid placing trivial functions near non-trivial ones. Non-trivial functions might include logging off, sending or deleting objects or other actions that are hard or impossible to undo. Such functions should be placed in a menu or at the very least require multiple taps to complete.

No app is perfect, just like no developer is perfect. By using some best practices for UI design, you can help minimize the errors that users will make when using your app. Here's a recap:

• Buttons should be large enough to remain visible and provide feedback when touched by a finger or thumb
• Appearance of a pressed button should remain "pressed" if the app doesn't immediately dismiss the screen
• Use absolute measurements for button sizes and convert to ppi for the target device
• The minimum size for a reliable touch target is 6mm square for stationary users; 8mm for users in motion
• Touchscreens register touch in the centroid, the center of the contact area
• Touch targets should be separated by 8-10mm on center
• Clickable area should include button text and the area of its enclosing geometry
• If a screen object is too small to be a suitable touch target, increase the size of the clickable surrounding area
• Touch targets should not exceed 15mm under normal circumstances
• Avoid placing trivial functions near non-trivial ones

SOURCES

http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

http://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

http://developer.android.com/reference/android/view/MotionEvent.html

http://touchlab.mit.edu/publications/2003_009.pdf

http://www.hfes.org/publications/ProductDetail.aspx?ProductID=69

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
http://sculpt-fx.com/alex-oliver/alex-oliver-clay-sculpture-1/
https://www.sven.de/dpi/