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

Screengrab of an imaginary version of Wired.com where the main navigation bar is on the bottom on mobile screens.
Screengrab of an imaginary version of Wired.com where the main navigation bar is on the bottom on mobile screens.

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.

On phones, the top part of the screen is a low-interaction area while the bottom is a high-interaction area.
On phones, the top part of the screen is a low-interaction area while the bottom is a high-interaction area.

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:

The high interaction area is typically populated by social media and other content interaction tools.
The high interaction area is typically populated by social media and other content interaction tools.

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:

Quartz has flipped the script placing content interaction in the low interaction area and site navigation in the high interaction area.
Quartz has flipped the script placing content interaction in the low interaction area and site navigation 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:

Some sites choose (by accident or design) to place 3rd party ads in the high interaction area.
Some sites choose (by accident or design) to place 3rd party ads in the high interaction area.

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.

On Trust and Opacity

Yesterday Tom McFarlin published an important article titled The WordPress Community (A Comedy of Drama, Ego, Oligarchies, and More). If you work with WordPress or the WordPress community, it is mandatory reading and worth some serious reflection. Tom shines a light on some of the darker parts of flat-structure communities and asks poignant questions about communication, language, […]

Various covers for Do Androids Dream of Electric Sheep?

#BCPWDRF no.1: Do Androids Dream of Electric Sheep? July 3rd, 2015

I know you’re all waiting with bated breath for the announcement of the first meeting of the Book Club for People Who Don’t Read Fast (#BCPWDRF). In my original post I hinted that the first meeting would be the last Friday of June. That obviously didn’t happen. Life intervenes etc. Irrelevant. The official date of […]

Opening slide for my talk titled "Responsive Images in Real Life"

Responsive Images in Real Life – my presentation for JavaScript Open 2015

Above are the slides from my presentation on Responsive Images in Real Life at JavaScript Open Day in Vancouver, June 25th, 2015, organized by Lighthouse Labs and Microsoft Edge. Below are the relevant links from the talk: responsiveimages.org developer.mozilla.org scottjehl.github.io/picturefill/ srcset and sizes by Eric Portis What is the purpose of the sizes attribute? Responsive […]

WordPress, Responsive Images, and Dynamic Image Sizes

This is an addendum to my article WordPress Image Handling in a Responsive Images World. If you haven’t done so already you should read it to get the background. Responsive Images in WordPress Core opens up a previously unattainable opportunity for the application to allow theme (and plugin) designers and developers to take control over image […]

WordPress Image Handling in a Responsive Images World

Note to the reader: This post falls under the umbrella “Morten thinking out loud”. You have been warned. This is the first of a 2-part article. Be sure to read the 2nd part WordPress, Responsive Images, and Dynamic Image Sizes once you’re done. Consider the image above. Depending on your screen resolution and size, the image […]

Designing Informational User Experiences: My WordCamp Miami talk

Above is the video of my talk at WordCamp Miami 2015. Below are the slides in an un-squished format, and below that are all the links. All the data in the talk is based on source material and research. Links to all relevant information (including Tweets, photos, stats, and tools) are provided below. Superhero Cheeskake […]

It is time to rename the “Happiness Bar”

tldr: The “Happiness Bar” needs a new name. I’ll start the brain storming here: Help Desk Help Bar Admin Bar WordPress Help Q&A Desk Support Desk Support Bar Service Bar Oracle Bar I’ve been a volunteer at the Happiness Bar of close to 10 WordCamps in the last 5 years. The experience of interacting with […]