Mobile Touch Targets: Actual Device Handling Debunks Assumptions
What if our baseline for measuring touch targets is off?
The original prescribed size of touch targets was 11.6mm2 (40px2) by Apple. But these recommended sizes did not take into account how people actually hold and manipulate devices. Study after study we observe how touch targets hinder participants in a variety ways:
- Too small touch targets for the size of fingers or thumbs, that do not account for the angled position of fingers and thumbs.
- When a finger or thumb covers a target, any way to see visual feedback (such as a hover state) is hindered.
- A navigation element is only selectable when tapping the text, rather than the whole element, causing users to wonder why it doesn’t work.
- Failed tapping, swiping, dragging, and flicking motions due to javascript issues, that went untested in QA.
In real situations, a hard to tap button can easily make the difference between “Add to Cart” and abandonment. An untappable navigation element closes the door to further shopping, no different than a blocked off aisle in a store. A blocked target increases disorientation, and a missed target guarantees it. In studies, participants often blame themselves saying, “I just have fat fingers,” and power on. But this begs the question, if everyone has “fat fingers and thumbs,” are these really the problem?
How People Actually Hold Their Phones
Two issues reframe the debate for touch target size: people’s pressing targets at an angle rather than straight on, and people’s preference for using their thumbs. Rather than pressing down with the tip of their forefinger, users tend to angle their finger or thumb, using the pad of the digit to tap the screen. For navigating with fingers, the actual finger pad is 10-14mm in width. Interesting, ISO 9241-9 recommended a button size equal to the distal finger joint of a 95th percentile male, which is 22mm2!
How Phones Were Held
In one study “How Do Users Really Hold Their Devices?” Steve Hoober, watched 1,333 people in their natural environment to discover how they held their devices. He observed:
- 49% held their device with one hand, using their thumb to navigate.
- 36% cradled their devices, using one hand to hold it, and a thumb or finger to navigate.
- 15% held their devices with both hands, using both thumbs.
Collectively, over 64% of people used their thumbs. Add to this angled thumbs, and a larger target size is necessary. Further research in a study called “The Fat Thumb: Using the Thumb’s Contact Size for Single-Handed Mobile Interaction” shows while the actual contact point of the thumb is less than 70pt, this largely depends on the angle at which the thumb is hitting the screen and the pressure applied. To compare, my own angled thumb impressions on a phone screen measures 18mm (width) x 13mm (height). Though this hardly counts as research, this suggests that our plumb-line for measuring touch is off.
Beware the Thumb’s Sweep
In a recent blog post, Scott Hurff documents the minimizing sweep of the thumb. Ironically, the larger the phone, the more constrained the thumb is.
Scott Hurf details the devolving thumb area.
Accomodating for thumbs goes beyond target size to the actual placement of targets. Scott Hurff details thumb sweeping behavior, observing that the optimal placement is in the lower, left portion of the phone screen sweeping up midway towards the upper right corner. Ironically this vital real estate dramatically decreases as phone size increases.
This observation implicitly raises many questions, as typical mobile site (responsive or adaptive) UI components exist outside of this area, including:
- Navigation
- Back to Top Buttons (anchored in the lower right)
- Breadcrumbs
- Sliders
The thumb’s sweep forces us to confront:
- Where is the best placement for the above elements?
- Given a blank slate, that is rooted in thumb movement, rather than the desktop, how would mobile interactions be redesigned?
- What touch interactions are easiest for the thumb?
- What are the implications for designing for lefties?
In the same study referred to above, the most efficient interactions for the thumb were observed, all taking place within the diagonal plane of lower left to mid-upper right of the phone screen. These include: swiping left, swiping right, circling clockwise and counterclockwise.
This list challenges the most recent touch mechanics recommended by Google. Though rich is many prescriptions, fingers are still assumed to be the baseline, not thumbs. While the above interactions should not be set in stone, it does compel us to ask:
- Are we creating inherently easy interactions for the thumb? Consider the ubiquitous pinch and zoom: how does this translate for the thumb user?
- What other interactions exist that may be less common, but more versatile for thumbing?
Failed Swiping, Tapping Necessitates Rigorous QA
Most swiping and tapping fails can be traced to hiccups in implementing the javascript on particular browsers. This underscores the importance of testing multiple devices in multiple browers, to ensure consistent interactions.
Tips for QA testing:
- Recruit people with have larger fingers and thumbs.
- Consider using online testing tools to recruit those on a variety of mobile devices and platforms. Aim for testing the best selling devices over the last three years.
AirBnB's filters afford the large real estate required for the thumb.
Google Mail deftly leaves ample room for the thumb's easy sweep.
Particular elements that should be tested include:
- The full navigation element (not just the copy)
- All swipe functionality
- All button, tapping functionality, asking:
- Can the visual feedback still be seen when the digit rests on the button?
- Can the user tap the right buttons, without hitting the wrong button?
- Areas of importance: navigation, filters, category page, breadcrumbs, product page, checkout.
With care, interfaces will evolve for the broad angled thumb's comfortable sweeps.
