News

Why you need to design for thumbs, not just fingers

Product designer Scott Hurff discusses how to make thumbs work better on big screens

ScottHurff

Product designer Scott Hurff discusses how to make thumbs work better on big screens

ScottHurff

The decline of smartphones under 5” is no longer something product designers can ignore. So-called phablets are projected to reach around 60 per cent of smartphone usage by Q2 2017, and are already driving three times more usage than all other form factors according to Flurry Analytics (bit.ly/1Sz4TvS).

Unless we learn to adapt our designs to this new ergonomic reality, the future is going to be pretty painful for our 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. 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.

PhabletThumbs

We have to start somewhere. Research suggests that most of us hold our phones in the following way – with the bottom of the thumb anchored on the lower right-hand corner. This assumption comes from a study that mobile expert Steve Hoober conducted (bit.ly/IwvBFa) with 1,333 people early last year. He discovered that 49 per cent of people held their phones in one hand, 36 per cent held it in a cradled position and that 15 per cent held it two-handed. Handedness figures were also instructive: with the use of a right thumb on the screen at 67 per cent and left thumb on the screen at 33 per cent.


Research suggests that most of us hold our phones in the following way – with the bottom of the thumb anchored on the lower right-hand corner


Hoober notes that left-handedness figures in the population are around 10 per cent. 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 a currywurst and so on.

The ‘Thumb Zone’ is a heat map of sorts. It’s 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: a user with one-handed use, their right thumb on the screen and a thumb anchored in the lower-right-hand corner.
Here’s the Thumb Zone heat map (bit.ly/1TFSyGK) applied to various phone sizes, ranging from 3.5” to 5.5”. You’ll notice that the ‘safe’ green zone stays roughly the same. That’s because our thumbs don’t magically scale with the screen size. And that’s unfortunate, because I loved playing Dhalsim in Street Fighter as a kid.

But what changes is the sheer amount of ‘Ow’ space, which becomes startlingly apparent with the 5.5” screen. Furthermore, you’ll notice how the shape of the ‘Natural’ zone changes for the 5.5” screen. That’s because it requires a different type of grip due to its size, using your pinkie finger as a stabiliser.

So what does this mean? Mobile screen sizes are becoming more similar, and that’s a good thing. But it also means that we can’t just treat 5.5” screens as a scaled-up smaller phone. Grips completely change, and with that, your interface might need to do so as well.


GET THE LATEST ISSUE OF WEB DESIGNER NOW


×