Web Design with Thumbs in Mind

Anyone with a big phone knows that the comfortable reach of your thumb when holding the phone in one hand does not extend to the top corners of the screen. Far from it. The only comfortable area of reach on larger phones is in the lower ½ to ¾ region. (Scott Hurff wrote a great piece on this which includes some pretty compelling graphics of “pain maps”. Definitely worth a look.) Even so the traditional position of main navigation and other interactive elements has been at the top of the screen, often a Hamburger icon in the top left corner.

This is design based on convention and laziness, and it ignores the reality of current user behavior – which is holding a large phone in one hand.

Observe as I use my statistically large hand to navigate a standard website on my not-quite-as-large-as-the-gigantic-iPhone-Plus Sony Xperia Z3:

Painful, and dangerous as the thumb reach makes me prone to drop my phone.

Design with Thumbs in Mind

At WordCamp Miami 2015 I presented the slide above and suggested maybe a better position for important navigation would be on the bottom of mobile screens in easy reach of the thumbs of its users. This is hardly revolutionary, but it still a rarity on the web.

This design pattern is now starting to pop up on sites all over the mobile web (I’m not taking credit for this btw. I’m just observing what’s happening). Or rather, a version of this pattern is appearing in which the mobile screen is divided into two sections: A high interaction area at the bottom of the screen and a low interaction area at the top.

What’s interesting about this is it allows us as designers to decide what type of behavior is to be considered high interaction and what behavior is low interaction.

In the examples below, from CarThrottle, Gizmodo, and Medium respectively, overall site navigation and interaction is placed in the low interaction area while the high interaction area is populated by content interaction tools like social sharing, liking, recommending, and saving:

On other sites, like Quartz below, social sharing and content interaction elements are placed in the low interaction area while site navigation is found in the high interaction area:

I’m tempted to infer from this something about the overall goals and intentions of the respective sites: The use of the two interaction areas is obviously deliberate and meant to make certain types of interactions easier for the visitor. Based on this we can stipulate that while CarThrottle, Gizmodo, and Medium are mainly focussed on single content items and social sharing of these, Quartz puts greater emphasis on keeping the reader on the site and getting them to dive deeper into the content.

This is of course pure conjecture.

Anti-Patterns

With these newly defined interaction areas, whether by design or by accident, one particular anti-pattern is emerging, as exemplified by Forbes and IFL Science:

The choice to place 3rd party advertising in the high interaction area by these and other publications creates a situation in which it is easier for the user to click an ad and leave the site than it is to interact with the content or site itself in a meaningful way. It is tempting to think that this is intentional, but I am inclined to believe this is either a matter of poorly informed design or clever advertising networks taking advantage of old design patterns. That said, Forbes also forces the user to go through a full-page ad before accessing their content, so…

Building Interfaces for People

The conclusion here is pretty obvious: If you want the people who visit your sites to interact with them, place your interactive elements in the vicinity of their interaction tools. On a computer or laptop, the natural place is either at the top of the screen with the other chrome elements or in the context of the content. On mobile screens, that is most likely along the bottom of the screen.

App developers have known this for ages, and most apps have all their major interactive elements in the high interaction area. Now it’s our turn to make the web more thumb friendly.