thumb zone in mobile web design

With the increase of mobile traffic and Google making it a ranking factor – having a properly responsive website has become priority for many companies.

It is no longer optional, or a nice thing to have – It is super important for anyone wanting to do business online.

Many companies are hiring web designers to make their website work on mobile, not understanding that it isn’t enough to simply work on mobile.

Google, and the user alike, will judge your website based on how good it is from a usability standpoint.

Google have announced (in a roundabout way) that mobile user experience  is going to become an even bigger factor in 2017.

So it’s important to understand the “thumb zone”

The What Zone?

The thumb zone is a term used to describe the area of a smart phone screen that is easily navigated using your thumb.

Because most people have two thumbs, and some people use their left hand you can’t always rely on the rules of the thumb zone for great user experience.

But it can help you make decisions on what could cause a bad user experience.

Take a look at these diagrams.

thumb zone diagrams

The green represents easy to navigate. The yellow represents an area that would require stretching to use. And the red represents an area that only the most dedicated yoga enthusiasts could reach.

As you can see, people who use both thumbs (combined) have it pretty easy.

Right handed people have issue with the top left of the screen and left handed people have issue with the top right of the screen.

I believe we should focus mainly on the right handed people – common sense tells us there are going to be more of those on your website…unless you’re building Ned Flanders’ Leftorium Website.

How To Use The Thumb Zone To Improve Mobile Web Design Usability

As you just saw, there are areas of the phone you wouldn’t want to place anything that require frequent interaction from the user.

The main area of the website I have found this to cause issue in is the header.

As you scroll down a website many elements pass through the thumb zone. But the header stays at the top, meaning it will always have something outside the thumb zone.

For example, the burger icon (for the mobile menu) is a nightmare when positioned on the top left side, for right handed people.

I actually first noticed this on a website a few years back that had its mobile menu in the top left corner. Being a right handed person (and somewhat unable to realise it’d be easier to use my other hand) I almost dropped my phone trying to reach my thumb all the way across.

(It didn’t stop me trying again though)

So a good rule of thumb (ha! first good pun of 2017) is to have the menu icon on the right. As it is something people will interact with fairly frequently.

Your company logo, on the other hand, isn’t something people will need to interact with when using your website. So it is perfectly acceptable for that to sit outside of the thumb zone.

thumb zone on ebay

eBay do a great job of this (above), notice how there is nothing of use outside of the thumb zone for right handed people.

When designing the mobile website, they could have centred the logo and placed the account and basket buttons left and right. Visually it would have looked good but in terms of usability it would have been hard on the user.

Do I think eBay done this because of the thumb zone – absolutely.

eBay (more than most) understand how important it is the have great user experience on an eCommerce website (more on eCommerce user experience here).

Take Aways

When designing it is vital to understand who is going to be using it and what they are going to be using it for…

…and from that sentiment, I believe it is fair to say, being as though there are way more right handed people, that you should focus your mobile web design on right handed people.

So next time you are designing a mobile website, give some thought the right handed thumb zone.

Did you find this interesting? If so feel free to share with anyone you feel may benefit from it.

Thanks for reading.

Share On Social Media