Designing for Thumb Flow

by Luke Wroblewski May 28, 2013

Lately I've become increasingly interested in the ergonomics of software design. That is, how human factors influence both the interactions and layout of an interface. In New Layouts for the Multi-Device Web I outlined the impact touch interfaces can have on layout across diverse screen sizes. This time I want to focus on interaction and designing for the flow of a thumb.

The Ergonomics of Software

Traditional graphical user interfaces (GUIs) are controlled by indirect manipulation through a mouse, keyboard, or joystick. So we design software for GUIs to work with digital representations of our movements by relying on interactions and layouts that accommodate mouse cursors not hands.

Human factors do play a role in GUI design as we need to consider a user's distance from the screen, the range of motion they can get from a mouse, proximity of keyboard actions, and occasionally environmental conditions like lightning. But the importance of ergonomics increases dramatically when indirect manipulation gives way to direct manipulation.

Interfaces that support direct manipulation through multi-touch, gestures, and voice are different. These natural user interfaces (NUIs) make direct use of our hands, fingers, and bodies. So human factors have a much more direct impact on software interactions and layout.

When you add in the diversity of device sizes out there today and their impact on user posture and its not surprising that a company like Netflix refers to their software experiences in terms of human ergonomics: 10 foot user interface guy (for TVs), two foot guy (laptops) and 18 inch guy (tablets).

In a world of diverse devices and direct manipulation, human scale matters. And human scale on mobile devices is increasingly measured in thumbs.

Thumb Flow

In a study looking at over a thousand people using mobile devices in the street, Steven Hoober found that about 75% of people’s interactions with a smartphone were managed with a thumb. Whether holding the device with one or two hands, it was the thumb that was doing all the work.

So when it comes to designing for mobile, it makes sense to follow the thumb. Let me illustrate with an example from our mobile application, Polar, which was designed and tested for one-thumb use. Polar is a fun way to collect and share opinions so we wanted to make that process as fast and easy as possible -especially with one thumb. You can how we went about it in the video below.

Dragging your thumb up on the screen reveals new questions you can vote on. Tapping on either side of a question with your thumb allows you to respond. Once you get to the end of a list, just pull up on the screen with your thumb again to reveal more questions.

The first time time you do this, a tip slides up from the bottom letting you know that questions you might not be interested in can be skipped by swiping across them with another simple thumb gesture. It’s important to note that we’re showing this tip to you only after you’ve scrolled and voted on a few things -not before you ever use the application.

Now that you’ve made it down the list a ways, you might want to explore other parts of the application. To do so just drag your thumb down on the screen. Once you scroll the list a bit, we slide the main navigation menu down for quick access sparing you the need to keep scrolling in order to reach it.

Want to refresh the list to see the latest questions being asked? Just pull down on the list to reload it. Looking at all these interactions together, you can see just how much you can get done with one thumb:

  1. Swipe up to move down the list
  2. Tap on either side of a question to vote
  3. Swipe up to load more
  4. Swipe down slightly to reveal the main menu
  5. Swipe down more to refresh the list
  6. Swipe across to skip questions

Making all this possible requires comfortably sized controls and a lot of one-handed testing. But in return, people will be able to easily use your application anywhere and everywhere they are -all they need is their thumb.