2016 Design Trend: Responsive Thumb Navigation

Every once and a while, a UI trend comes along that is so obvious it makes an interaction designer embarrassed about their entire responsive portfolio to date. Brace yourselves, UXers, because this one is going to be a doozy. For years now we’ve been building navigation systems based on a common pattern using a hamburger menu in the top-right or top-left hand corner of the screen. In terms of traditional interface design the location seems to make a lot of sense. That's because we know the human eye scans a traditional webpage in an F-Shaped pattern. We’ve known this to be true since at least 2006. It's accepted as law.

I invite you to step back and consider what happens when we follow that UI pattern on a mobile device. Using an excellent company as the primary example, let’s have a look at Apple’s responsive pattern for 320dppi. 

Forget everything you know about Apple’s UX supremacy for just a moment and look at it with fresh eyes. What do you see? I’ll stress that there is nothing wrong with Apple here. They have followed a usability pattern so standard that it’s taught in every respectable UX or UI program in the world. UX architecture, however, is all about maintaining perspective.

Do you see the problem yet?

I’ve got some big hands, piano hands even, but that location is a heck of a stretch even for me. Throw in the prevalence of super-sized devices like the iPhone Plus or the Samsung Galaxy Note and you’ve got a very real usability issue. Let’s consider the range of problems:

1. The location of the menu is remarkably difficult to reach with one hand.
2. The primary navigation funnels are hidden underneath an icon with minimal context.
3. Therefore, a new user is required to perform a tap action in order to have even a basic understanding of the information on the site.
4. The menu style also stresses recall over recognition, breaking a classic heuristics metric authored by the same group who publicly identified the F-shaped pattern we're basing it on.

 If you were a student in a course I was teaching and turned in a UI object (for anything other than global navigation) with issues so profound, I’d send you back to the drawing board for ideation and iteration at the very least. More privately I would be concerned about your ability to consider the user's perspective in a design. The mistakes are that obvious. Despite this, we use top-corner hamburger menus for almost every responsive navigation element on the modern web without even thinking about it.

 Simply put, this is because it's considered best practice.

For those who have been paying attention though, the most impactful UI trend of 2016 started several years ago (2013) when Facebook decided to make their responsive website function like an iOS 7 application. This year, data is finally starting to filter in that indicates a responsive website built to feel more like its application counterpart than a traditional 12-to-4 column translation has measurably better user engagement metrics .  As a result, the broader trend is that big brand websites are now being treated more like web apps than overgrown CMS platforms. In terms of micro-interactions though, there is no greater poster child for this trend than the iOS style thumb menu (Also called "Bottom Navigation" in Google's Material Design as of March 2016).

Let’s consider the advantages of this UI pattern in the context of our earlier complaints:

1. The navigation is remarkably easy to reach, being situated right next to a user’s thumb.
2. The primary navigation funnels are fully exposed in order of business/user value.
3. Therefore, the user is able to take in at least four of the top use cases in an IA at a single glance.
4. The menu stresses recognition over recall, which lowers the cognitive load required to understand its hierarchy.

Granted, this menu style requires a bit more technical work to pull off, mostly because it's a new pattern. Nonetheless, the pattern can be easily accomplished by any UX Engineer of even intermediate skill. Ironically, the pioneers of this technique have backed away from it. Facebook, Twitter, and even Quora now put their responsive menu funnels in the header on mobile, despite using an ergonomically correct UI pattern within their mobile apps. This decision is baffling from a UX perspective and I expect it will be corrected in the near future.

Let’s go back to the Apple example though.

Consider the usability of the current version of the website (left) vs. the same website with its primary funnels exposed (right). Assume that the “more” option simply opens Apple’s current menu drawer with the full range of options. This change would have a minimally disruptive impact on the overall site UI and would be constrained to 320dppi devices. The HD/browser navigation would remain unchanged. 

Which one is easier to use?

The bottom line here is that in a blind effort to simplify mobile interfaces we have over-stated the value of screen real estate vs. context. While a certain percentage of readers will prefer the graphical simplicity of the hamburger, many more will recognize the utility of putting the key funnels and a global navigation trigger under the user’s thumb.

Because this style of menu represents a massive departure from what we have been doing for the better part of a decade, it’ll be a fair bit of work convincing your stakeholders to buy in. The result, however, is likely to increase your engagement and better serve users exploring your content.

So go on then, get out on the bleeding edge of 2016 and make a ding in the universe.