Home > Graphic Designs | Web Design | Web Site Planning | Web Usability > Designing for Thumbs – The Thumb Zone

Designing for Thumbs – The Thumb Zone

thumb zone featured

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?

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.

Credit to Scott Hurff for making the Thumb Zone known to me through this great article

The post Designing for Thumbs – The Thumb Zone appeared first on The Usabilla Blog.

, , , , , ,

TOP
Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin