Features

XXII.3 May - June 2015
Page: 48
Digital Citation

Fingers, thumbs, and people


Authors:
Steven Hoober

Lessons Learned

The ubiquity of smartphones has made many of us excited to work on mobile. But in important ways, it has also actually hindered the development of good heuristics. Principles of “natural UI” have been taken to heart, and we believe our experiences are representative of the experiences and preferences of everyone.

ins01.gif

All too often we make decisions based on anecdote, opinion, personal bias, hearsay, and rumor. We malign others, and even discount user preferences and patterns that oppose our own. As just one common example, I have encountered many designers who automatically assume that only iPhone users are worth building for, often with no data to back up that assumption.

More frustratingly, much of the foundational research cannot be applied completely or uniformly to modern devices. The devices have changed enough in use, form, and technology just since the 1990s that care must be taken even with international standards on ergonomics and human factors.

For the past two years, I have been looking closely at the existing body of research and have filled in the gaps with several studies I performed myself or in coordination with others. I have found much of our knowledge to be outdated or grounded in poor assumptions but have come to useful, actionable conclusions about how people really hold and touch their phones and tablets.

There are a handful of interrelated interactions, ergonomics considerations, and human behaviors that can be thought of as 10 distinct guidelines for touchscreen design.

1. Your users are not like you. It’s easy to make assumptions and confuse empathy with your own point of view. Your users are not like you—or your friends—but rather work in myriad ways, changing the way they work and regularly shifting their grip.

People are very comfortable changing their hand position as they change tasks and contexts, touching the screen in different ways to do different things with their devices, as shown in Figure 1.

2. People prefer to touch the center of the screen. Regardless of whether the behavior is innate or learned, users prefer to touch the center of the viewport on a handset, phablet, or tablet, and will do so when given a choice.

For example, people will naturally move a list of content to the center of the screen before selecting it. When you account for content position and different devices, you find that most taps are in about the center half to two-thirds of the screen.

3. People prefer to view the center of the screen. Conveniently, this behavior extends to viewing as well. When given a chance, people will scroll content to the middle to read it.

Follow the classic mobile pattern of list views and put your main content and interaction in the middle of the page. Provide padding to scroll the end of content toward the middle, and make sure menu bars, tabs, status displays, and action items on the top or bottom are secondary.

4. Fingers get in the way. Fingers, hands, and thumbs are opaque and can get in the way. Because we shift our grip and use different devices, where our fingers and thumbs are varies, so it’s hard to plan that specifically.

This also influences how we gesture. Users will scroll by dragging along the middle of the screen, but only when they will not cover content. When your selectable list has long labels, people scroll to the far right to get to the most-empty area they can. And for Arabic or Hebrew, right-to-left languages, the opposite is true.

Always provide room to make sure touch targets can be seen—enough room to see the clicked state when the target is selected—and try to provide empty space for users to feel comfortable scrolling.

5. Different devices are used in different ways. Respect user choice instead of complaining about fragmentation. Large tablets like the 10-inch iPads are used almost as computer replacements, about two-thirds of the time in a stand and a quarter of the time with physical keyboards.

As devices get larger, they are less and less handheld. And the smaller the device is, the more it is used on the move, while walking around the house or office, instead of finding time to place it on a table or sit and type at a computer on a desk.

The larger devices get, the farther away from the eye they are used. Due to angular resolution, minimum text sizes vary from 4 point for small handsets to 10 point for devices set on tables or in stands. These are minimum sizes, so use much larger text for most content of course.

6. Touch is imprecise. Capacitive touchscreens detect only the centroid (or geometric center) of the part of your finger that gets flattened against the screen.

The phone can’t sense how big your finger is, how hard you pressed, how big the contact area is, which way it is facing, or anything. All it gets is a point that it assigns to be the touched coordinates. And that point is never, ever perfectly aligned. Some example tap-accuracy data is shown in Figure 2.

When we accept everything is imprecise, we stop calling these errors and refer instead to tolerances. We need to plan for imprecision and problems as part of the process. Be sure to provide the largest practical touch targets and don’t just code the word or icon as a link inside a non-selectable box.

Look around and you’ll see this is a known best practice. The Google drawer menu or back arrow icon—at least before 5.0—isn’t as small as it appears, and it also opens when you select the icon or title next to it. Lots of hybrid apps and websites don’t notice this and code it wrong, giving the “hamburger menu” a bad reputation for being too small.

7. Touch is inconsistent. The largest variable in inaccuracy is not environmental conditions, familiarity with touchscreens, or age but the position on the screen your users are trying to tap. People are more accurate when tapping the middle of the screen on all mobile devices, as shown in Figure 3. They are also more confident at the center, so they will slow down to tap corner or edge targets.

The sides are a little worse than the center, but the top and bottom require much more room, and corners require about twice the space between targets as the center to avoid accidental taps.

Be sure to provide plenty of space for any menus and controls along the top and bottom edges of the screen, and place unrecoverable or annoying-to-exit items far from others to avoid frustrating accidents.

8. People click only what they see. Make sure selectable items are clearly selectable. If it doesn’t look clickable, people don’t know it is. Underlines aren’t bad for text inline, but especially for apps, you mostly need to bound items, being sure not to bound non-clickable items.

Visual targets, whether words, icons, or some other shape or UI widget, must:

  • attract the user’s eye
  • be drawn so the user understands they are actionable elements
  • be readable, so the user understands what action they will perform
  • be large and clear enough so people are confident they can be tapped.

Clickable items need to not just afford their action (making it clear what they do) but do so consistently. If most items in your design are whole selectable rows or buttons, don’t have one row suddenly be an underlined link.

9. Phones are not flat. People use their phone in real environments, so we must set aside the assumption that the interaction is entirely with a flat glass screen to which users are paying rapt attention. The way people hold and tap changes with their grip, and that changes because they are carrying items, talking to others, or opening doors.

All people are, as Robin Christopherson says, temporarily disabled, and designing like this can assure your mobile device works for every user all the time. We work in loud environments, in places with glare and rain, where we cannot touch the device, or where we are distracted. Subtle cues may not work, so be sure to multi-encode indicators and responses to interaction.

10. Work at human scales. Start your UI design at scale. There are many templates you can print that allow you to sketch at the scale of your device, or many devices.

Check your work on real devices in real environments. Get off the computer and try the interface and interaction on the actual device, outdoors, walking around, in loud places, and however else you think people will use it.

Classes of display sizes and device pixel ratios mean your intended design may be 20 percent smaller or larger on any particular device. Make no assumptions about what it will look and act like in the real world; instead, check for yourself.

Design for People

Most of all, within what you can control: Always design for hands, fingers, and thumbs.

And remember: You don’t design for iPhone or Android, for cars or kiosks, for Web or apps, but for people. Have empathy for users and respect their choices, their ways of working. Account for the limits of their lives, their environments and their abilities.

Even when your implementation is constrained by technology, avoid designing for pixels or code; always consider what effects your work will have in the real world, when people look at, hold, and touch the screen.

Acknowledgments

This article is derived from a series of presentations and research reports given and published over the past two years. I’d also like to thank the eLearning Guild, UserTesting.com, and ZIPPGUN for their contributions to my research efforts.

More Reading

Want more details on how people hold and touch their phones, phablets, and tablets? For the latest version of any data and guidelines, and a complete listing of annotated references, please visit 4ourth.com/Touch.

Author

Steven Hoober wrote the O’Reilly book Designing Mobile Interfaces, and has been doing mobile and multi-channel UX design since 1999, including the first Google mobile search and the first mobile app store. He is an independent consultant on design, and also writes about and conducts research on mobile interactions. steven@4ourth.com

Figures

F1Figure 1. How people hold and touch with their phones varies by the interactive context and its needs.

F2Figure 2. Red dots are the actual positions people tapped when trying to select a menu icon.

F3Figure 3. Accuracy varies consistently across all users by the position on the screen they are trying to tap or scroll.

Copyright held by author. Publication rights licensed to ACM.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2015 ACM, Inc.

Post Comment


@Kyle Bollinger (2015 05 11)

Source of these graphics? Thanks!

@haji yoon (2016 11 14)

Hi, Steven. Thank you for the good article. Can I translate and introduce it into Korean on my blog (http://www.brunch.co.kr/@userhabit)? I would share the original link on top of the post. If you feel bad about it, please let me know.