Designing for Thumbs – The Thumb Zone
Thumbs. The very instrument that makes us human. Separating us from our pet cats and dogs. Passed down through the generations, our thumbs have allowed us to do all manner of things; from gripping wooden clubs, to navigating our smartphones.
In modern life wooden clubs are rarely called upon, unfortunately. Yet all too often we find ourselves standing with phone in one hand, interacting, exploring, talking and texting with our thumbs. Thumbs are more relevant than ever..!
The Thumb Zone
In his 2011 book “Designing Mobile Interfaces”, Steven Hoober coined the term “The Thumb Zone”, “the most comfortable area for touch with one-handed use”. With 49% of users holding their phones in one, and using it with one thumb, this mythical zone is an all important mantra for designers to follow.
Note: I’ve based this on my own – small – hands, and my own – out of date – phone (iPhone 4 with a 3.5 inch screen). Your results may differ!
Important content needs to be aimed towards the thumb, to where it is natural for the thumb to be. Stretch areas are in reach but can be considered a relegation area for less important touch interaction. Ow areas should be avoided however. Your user can see it, but would rather not touch it. Keep that in mind.
Obviously, the thumb zone is something which alters with each and every device. Larger phones will entail more extension and less contraction, and vice versa. Equally, lefties’ thumb zone will mirror this one (but with the majority being right handers, sorry guys).
Why should we place emphasis on design for that 5th digit? For the same reason we ensure websites are easy to navigate via mouse. Accessibility – A key UX principle. Ensuring consumers can efficiently – and painlessly – browse our content. Producing happier users through seamless experiences. Ultimately increasing the amount of content served – which is what we’re all aiming for.
The Thumb Zone in action
It isn’t too difficult a concept to grasp, this thumb zone business. Simply design to the rules.
Facebook (iPhone 4)
Facebook does a great job of conforming to this principle almost perfectly.
We see the main content, the newsfeed, in the centre of the screen. This takes up the breadth of the natural area – allowing the user to easily scroll through endless swathes of content, consuming. The only oddity here is the friend request notification’s inclusion, a position that may benefit the ‘Messenger’ button.
Filling the “Ow” areas we see just a part of the search bar (no problem here), and the ‘More’ button. This is smart placement. Facebook knows that users won’t head to the content behind the more button all that often. Otherwise it wouldn’t be hidden behind the hamburger. Hence its placement in a hard-to-get-to area makes little to no difference.
A thumbs up for Facebook then.
BBC Sport App (iPhone 4)
For those of you that haven’t used this app, its great (especially for following the World Cup). Effectively just a mobile version of the BBC Sport website, it is 95% content. Everything is achieved by browsing that main content area which fits snugly into the natural zone. The only button to hit is the all too familiar hamburger.
And by hitting that, we see the app walk right into the “Ow” trap. Moving its placement to the top left to close the menu makes logical sense, but in doing so makes it harder to close. That’s right, by attempting to make it easier to close – through logic – it becomes physically harder to close.
This is the balance between HCI and psychology that UX has to, and can solve. Balancing intuitiveness with what is actually achievable by our user. A simple trick like the Thumb Zone to verify our design does wonders for that.
Since publishing, I’ve seen lots of people bring up the subject of left-handedness, and its affect on this theory. Obviously, a left handed person’s Thumb Zone will mirror a right hander’s. Thus, when designing for both in mind the obvious answer is to use a pattern as follows:
Credit to Crispin Bailey for the image
Here we have a shared Neutral zone, and Stretch zone, with Ow zones and additional Stretch zones which alter dependant on handiness.
Design in an equal world would design with only this pattern in mind. However, with right handedness afflicting up to 90% of the world’s population, it is still worth referring to the right handed Thumb Zone. We should design for Both > Right > Left. Harsh on the left handers, yes. But unfortunately, statistics don’t lie.