Did you know that we single-handedly spend almost 50% of our phone time using only one hand?
This means you’ll want your site to not only be mobile-friendly, but also get the thumbs up from the single hand scrollers! (Only a few more thumb jokes, I promise!)
The average adult thumb is about 2.5cm in width (I’ll wait while you measure your thumb like I just did), which converts to 72 pixels. Thumbs can be fat little screen blockers, so also keep in mind where it might rest naturally and avoid putting important readable content under the thumbrella area.
Also keep in mind that users may switch hands, but the most common is the right hand, with 2/3 usage.
Safe zone example:
As you can see, the Green Zone is where your thumb can travel happiest. The Yellow Area is a bit of a stretch, but still doable, but the Pink Zone is just too far for people with short thumbs and will result in people having to take things into their own two hands.
That may not seem like such a massive issue, like “Come on, Sam, just use both hands!” Sometimes that’s not as easy as it sounds, your customer could be carrying bags, holding that crucial morning cup of coffee, hanging on for dear life on the bus or holding their child down at the dentist.. just for example. Always keep the human aspect in mind!
So just a few quick tips to round this off:
- Keep important clickable aspects and elements in the natural thumb zone (green zone), like form fields and CTAs.
- Text and images that don’t have clickable functions can sit in the Yellow and Pink areas, as this is out of the thumbrella space.
- Test out menu placement at the bottom of the screen. Hamburger menus tend to be too high up in the Gabrielle Zone (Out of Reach).
I hope this was informative! You may even notice it on a few other sites now.
