Touch isn’t just inaccurate, but it’s inconsistently inaccurate.
And what is most interesting is that the largest variable is not environmental conditions, familiarity with touchscreens or anything. It’s the position on the screen they are trying to tap.
We know that people are more accurate at the middle of the screen. And that’s pretty much any screen, any way they hold their phone or tablet. They also subconsciously know this — or it may be tied to their preference for reading in the middle — so are more confident at the center, but will slow down to tap corner or edge targets.
If we map the research to a screen the right way we can see how much more room is needed between items in various parts of the screen. The sides are a little worse than the center, but the top and bottom require much more room, and corners are the worst.
Design by Zones
Design by zones, spacing selectable items to prevent interference based on how well people touch parts of the screen.
You can almost get away with calling this tip “Avoid the corners” instead. Edges and corners have less accuracy. When putting items here, space them further apart, and use fewer tabs or menu bar items. The sides are also a bit worse, so avoid actions that take place only at the left ends of a list; take advantage of the natural middle-selection preference and improved accuracy.
Touch accuracy varies by part of the screen, in such a consistent and predictable way you can use this to design your interface. Space items farther apart at edges, and especially along the top and bottom of the screen.
These neatly correspond to sort of structural zones that already exist in much of our design with content in the middle, and secondary labels and controls along the top and bottom edges of the screen.
Whether you check digitally, or as I’ll show later, with real world tools, you measure space between centers. Center the size target in the tappable area [CLICK], and if anything else is in the circle, that has a chance of being tapped by accident.
These top icons are a bit too close together, [CLICK] and the tabs are far too short, so you can tap the action buttons or a tweet by accident.
[CLICK] the icons in the middle of the page are small, but most important is that missing them selects the tweet for viewing. This is a tactic; if interference is likely, design for resilience, so the user can make do, but certainly never so there’s an unrecoverable condition.
Email format controls, for example, should never be right next to the Send button. Send is unrecoverable.
Once you’ve accounted for interference, [CLICK] you want to design to not annoy. Things like this, where you try to click the link and instead open the reply dialog are not a catastrophe, but could be better.
There isn’t much data on how we use tablets. Till recently. I went and got my own as part of this latest round of research, and was able to confirm that these same pointing accuracy levels apply to 7,8 and 10 inch tablets as well.
People click most accurately in the center… a little less well along the sides…
And notably less well along the top and bottom of the screen, and especially in the corners.
This test app is hybrid, with their default target sizes and many users couldn’t select the menus — on handsets or tablets — as a result.
Just space things out more along the top and bottom edges, and place unrecoverable or annoying-to-exit items far from others to avoid frustrating accidents.
People Tap in Multiple Ways
One nice thing about doing your own research is that you have this giant pile of data that you can refer back to whenever something sounds worth investigating. So, I decided to sift through some of my data on how people were holding their devices and replotted the charted positions of taps for a 5.1-inch phone—a small phablet. In a very recent article, Mikkel Schmidt posed a similar question about the one-handed use of mobile phones and performed his own study of tap times on an iPhone 5S—a 4-inch phone—held with only one hand.
Both of our results demonstrate similar findings, as you can see in Figure 3. Our research on touching a mobile device’s screen—including the speed of using the thumb to touch the screen on the left and people’s preference for tapping on the right—shows that, while the center of the screen is still the easiest part to tap, people can easily shift their hold to touch anywhere on the screen.
The center is easiest to tap, but people can shift their hands to touch anywhere. As I’ve observed before, users are most accurate and faster when touching the central area of the screen. This data bears out even when grasp and reach are restricted to one-handed use. But, when people can choose their grip, those grasping with one hand and tapping with that thumb typically use a fairly small area of the screen in this way. Extending beyond that area seems to present no particular burden—most users simply slow down and add a hand to stabilize the device, allowing more reach for the thumb and enabling them to get to the entire primary tapping area.
According to my observations, interactions outside this central area almost always involve the use of two hands, with users either cradling the device and moving the tapping hand to reach something or simply holding the device in one hand and tapping it with the index finger of their other hand.
So, instead of thinking that reaching various zones of a mobile phone’s screen becomes increasingly burdensome to the user, we should understand that people can easily reach any part of the screen. If they’re not comfortable with the way they’re currently holding the device, they’ll simply change their grip to one that works better for them.
Conclusion
Summarize
* Design by zones. * Don’t force edge selection. * Very large spacing along the top and bottom.
Design by zones, spacing selectable items to prevent interference based on how well people touch parts of the screen.
The sides are less accurate than the centers, so if you use lists, avoid things like delete or select being only along the left or right side. If you have to do this, then pick your vertical list spacing from the side accuracy. When you DO put things in the middle, and follow these guidelines strictly, you can get away with quite dense information, whether closely spaced lists, or small selectable areas in any layout.
When you place controls along the top or bottom use as few items as possible and space them out. The Android Action Button spacing is too tight, so loosen it up. More than 4 items on an iOS Menu bar is just asking for trouble.
And remember to plan for interference, and space unrecoverable or annoying-to-exit items far from others, provide undo features, etc.
ADD IN MULTI-TOUCH AND SHIFTING GUIDELINES...
References
- d