If you aren’t designing yet for touch screens, you soon will be.
 

Chapter 7

view in browser

Designing for thumbs

In the previous chapter, we dove into the 5 states of a user interface: ideal, partial, empty, error, and loading.

Now we’re going to talk about how your interface should take into account the physical world.

No, we haven’t suddenly jumped into the world of Minority Report, Back to the Future, or gotten to play with those awesome holograms Tony Stark made with his friend JARVIS (or is he his friend? Hmmm … )

We’re actually going to be talking about thumbs.

See, if you aren’t designing yet for touch screens, you soon will be.

Don’t believe me? Look at this. IT’S A BABY USING AN IPAD.

ch07-img01

For the first time ever, a generation is growing up touchscreen-first. Let’s just say touch-based interactions aren’t going anywhere anytime soon. The mouse is becoming a relic of the past. We now must design for screens that can be tapped, pinched, swiped, zoomed, and more.

So how do we handle this?

Well, remember when we explored the history of product design in the first chapter? We looked at the work of Lillian Gilbreth, Henry Dreyfuss, and Scott Cook. What was the big theme?

Research. Namely, we need to understand how people hold their phones, tablets, and how they use touch-enabled desktops.

And we’re in luck.

Mobile expert Steve Hoober conducted a study with 1,333 people in early 2013. He discovered that people held their phones in the following ways:

  • 1-handed: 49%
  • Cradled: 36%
  • 2-handed: 15%

Handedness figures were also instructive:

  • Right thumb on the screen: 67%
  • Left thumb on the screen: 33%

Hoober notes that left-handedness figures in the population are around 10%. So the observed higher rate of left-handed use could be correlated with people doing other things at the same time—smoking, riding a bike, drinking coffee, eating currywurst, etc.

ch07-img02

Created by Luke Wroblewski.

And the way people hold their phones is becoming more important. With the release of the iPhone 6 and 6+, the 3.5-inch and 4-inch screens of yore will start their inevitable decline very quickly. That means that those of us who’ve gotten comfortable building apps, responsive sites and mobile-optimized web views with the old ways in mind have some learning to do (myself included).

The decline is already in motion. Adobe’s 2014 Mobile Benchmark Report (opens PDF) claims that mobile browsing among phones with 4” screens or smaller is down by 11%.

ch07-img03

But this only accounts for phones sold up to May 2014. If you remember, Apple reported the most successful quarter ever of any company well... ever, in January 2015. Almost 75 million iPhones were sold, with the iPhone 6 being its most popular device.

That means that learning how to design for thumbs is now more important than ever. Luckily, it helps that these phone display sizes are going to be practically universal. A cursory examination of the most popular Android screen sizes points to a range of 5.1 inches and 5.7 inches.

Apple’s changes will make our lives easier as smaller screen sizes die off, since the iPhone 6 and 6+ clock in at 4.7 inches and 5.5 inches, respectively.

But why do we need to adapt our designs? As Hoober’s research showed, people using their phones tend to switch their grip depending on the interface’s demands. They seem to do this subconsciously, too, repositioning their hands or setting things down to take an action.

That sends up a red flag for me, though. Why should people adapt to yourapp? Why is your app special? Why not create app controls that are the most comfortable for most people’s grips and thumb arcs?

Designing for thumbs?

What does it mean to design for thumbs? It means building interfaces that are the most comfortable to use within our thumb’s natural, sweeping arc.

But this gets complicated. We unconsciously adjust the way we hold our phones to reach certain controls in various areas of the screen. During any given day, I’ll wager that you stretch your grip, choke up on the phone, or angle it in ways that make reaching difficult areas easier.

But we have to start somewhere. Hoober’s research suggests that most of us hold our phones with the bottom of the thumb anchored on the lower-right-hand corner:

ch07-img04

The Thumb Zone

This leads us to the idea of the Thumb Zone. It’s a heat map of sorts—a best guess for how easy it is for our thumbs to tap areas on a phone’s screen.

Let’s use Hoober’s research to create a Thumb Zone map representing what seems to be the most common use case:

  • 1-handed use
  • Right thumb on the screen
  • Thumb anchored in the lower-right-hand corner

Here's the Thumb Zone heat map applied to every iPhone display size since 2007:

ch07-img09

Here's a more direct comparison of the iPhone 6 and iPhone 6 Plus next to each other:

ch07-img05

You’ll notice that the “safe” green zone stays roughly the same (more on why the iPhone 6 Plus is different in a second). That’s because our thumbs don’t magically scale with the screen size. And that’s also unfortunate, because I loved Dhalsim in Street Fighter as a kid.

ch07-img05-1

But what changes is the sheer amount of “ow” space, which becomes startlingly apparent with the iPhone 6 Plus.

Furthermore, you’ll notice how the shape of the “natural” zone changes for the iPhone 6 Plus. That’s because it requires a different type of grip due to its size, using your pinkie finger as a stabilizer. It surprised me how different the experience was.

A note: my thumb doesn’t reach fully across the phone’s screen. Maybe you have bigger hands than I do. So terms and conditions certainly apply.

Choking up

Let’s analyze how the Thumb Zones change when you shift your grip. Sometimes you might be in a situation where it’s easier to tap the phone with your thumb’s anchor at the vertical midpoint. This is demarcated by the white dot on the right side of the Thumb Zone mockups.

Here’s an illustration of this in action for iPhone 6 and iPhone 6 Plus:

image43

Notice how the iPhone 6 Plus actually gains natural thumb space because of its screen size. By comparison, the iPhone 6 just runs out of real estate.

Thumb-friendly interfaces in the wild

Mobile screen sizes on the whole are becoming more similar, and that’s a good thing. But it also means that we can’t just treat screens above the 4.7 inch range simply as a scaled-up version of a smaller phone. Grips completely change, and with that, your interface might need to do so as well.

But how would that look? Let’s explore a few thumb-friendly interface ideas.

Airbnb

After Airbnb’s rebranding, the home rentals app went through a redesign to place some primary actions near the bottom of the screen. Take a look at these 2 examples below:

ch07-img06

ch07-img07

Both screens have obvious primary actions, and they don’t depend on obscure gestures or OS-level controls— like Apple’s Reachability feature, which brings the top of the screen down into thumb zone green territory with the double tap of the home button.

Airbnb, however, does incorporate Apple’s “edge swipe” to prevent needless hand stretching to reach the top back arrow.

Tinder

ch06-img02

Tinder’s primary controls are nice and obvious at the bottom of the screen, and well in the comfortable realm of the Thumb Zone. But what’s even more fantastic is that swiping each card away (both “Like” and “Nope”) lives in the green zone, as well.

Finally, the app’s been geared to respond to broader swipes for navigation—so swiping between Settings, Discovery, Messages, and Moments can be done with 1 hand. Beautiful.

What about your world?

How can you change the design of your products to reflect the real-world ergonomic realities of humans?

Doing this requires you taking into account not only the device on which your product is being used, but the context as well.

That’s a great transition to, well, a look at the role of transitions and animations in your product. That’s where we’ll be going in the next chapter.

 
 
 

Action items

  • Apply the Thumb Zone overlays to your product’s designs. How many of your product’s primary controls rest in the easy-to-reach areas?
  • Rethink what you know about layouts. Adapt them to the various devices used by your customer base. Refer to Luke Wroblewski’s excellent “Responsive Navigation” piece for inspiration
  • It might be worth conducting your own study of your customer base. How do you observe them holding their phones? What’s the context in which they’ll be using your product and what are their hands doing?
 
 

About the author

 
 

Scott Hurff

@scotthurff

Scott Hurff is the lead designer and product manager at Tinder. He also teaches designers new skills at designers.how.