Coding for Thumbs
As mobile use continues to rise we need to ensure that our sites are not only responsive, but that they are taking into consideration how the user is holding their device and why they are using their phones to reach the webpage.
We know that even more so than with desktop, when users are on their phones they are often multi-tasking. It becomes even more important to be super clear and considerate with our layouts.
Scott Hoober did some great research about how users are typically holding their devices.
Luke Wroblewski has lots of great resources on his site about the topic of mobile device and elaborated on the topic in depth.
It’s believed that most of us hold our phones with one hand with our thumb over the bottom third. Scott Hurff wrote a great article and created various heat-maps to show where the natural reach zone is on the IPhone 6, 6 plus and 5.
Note that the area is flipped horizontally for the 10% to 20% of people who are left-handed. He’s created templates that you can download here for the various sizes and grips. There is also a template for the choke-up; another common way users hold their devices with both hands which changes the area.
The heat maps show where it’s easiest for our thumbs to reach: the green is the easiest while the yellow is more of a stretch. The red in the top corner is an area where if there was a small button they needed to push they might have to use their other hand and means for a potentially awkward juggling of the device.
Luke Wroblewski wrote that there are 4 main navigation patterns; top navigation, toggle menu, select menu and footer anchor, each with their strengths and weaknesses.
The menu option would mean the use of the much debated hamburger icon. If possible it’s good to avoid it as it hides the options from the user and means for one more click. Plus if it’s in the top corner it’s a stretch for the thumb. The top navigation seems like a natural choice, but after reading about the thumb hot-zones I’ve decided to adopt the bottom anchor where possible. It means the site’s navigation buttons are in easy reach of the phone’s GUI.
Rangle.io uses the anchor footer technique well with their mobile site. When you go to their site on a mobile device the navigation flips to the bottom (easy to reach with a thumb.) The top of the site is freed up to allow a large CTA (call-to-action) button. They’ve designed their mobile site to make it really easy to find their phone number, which is often what mobile users would be doing on their devices if they were looking at the site on that screen size. The user would probably have to change grips at that point.
There’s also this great resource that Nicolás J. Engler and antonela to check your screenshot against the thumb zone or while you are in the mock-up phase before you get to coding.
In order to create a basic anchor footer here’s some code that can be used:
Don’t forget to include viewport in your meta data to get it to work.
And the media queries that can be used for mobile screen sizes:
It goes without saying that whenever you create anything; test it, test it, and test it. I’m guilty of not testing enough. There’s only so much time it seems, but test and iterate as much as possible as different groups of users have different needs and habits. Things are constantly changing too. Thanks for reading.
