Case Study: Designing a Better Mobile Navigation

I was reminded during last week’s Apple Keynote reveal extravaganza of one of the more obscure features of iOS.

It was on the slide where they were discussing the iPhone’s home button where there was a brief mention made of “Reachability”.

With two taps to the iPhone’s TouchID sensor (See: Home button), the bottom part of your screen is folded down, giving you easier access to the top part of your screen. This was implemented in 2014 with the iPhone 6 and has quietly existed inside iOS ever since.

giffffr-1
Reachability in action

The existence of “Reachability” reminded me why our hands are often cramping while we are using our phones. Navigation on mobile as we typically know it is stuck in the 80s.

Origins

Since the first true graphical user interfaces in the early 80s, (Or 70s depending on who you ask. I don’t care, I wasn’t alive) navigation in world of screens has been handled via elements at the top of whatever screen you were looking at.

iigsfinder
The Apple II

Look at the web browser you are reading this in. Your navigation is probably located above the content you are reading. This makes sense for a desktop or laptop computer. But on a mobile screen, having navigation at the top of your content is making less and less sense.

The Mobile Device

The mobile screen is growing. Most mobile screens are now simply too large for most users to be able to use all of it’s real estate comfortably with one hand. I came across this chart recently that outlines the pain most of us are probably all too familiar with on a mobile device.

thumb-zones-lineup
source: scotthurff.com

When using a phone one-handed, by the time you get into iPhone 6 sizes, anything on the top part of our screens ventures into “ow” levels of stretch territory. I pity the poor hands of iPhone 6 and 7 Plus users.

For the foreseeable future, screen sizes are only getting bigger.

If our screen sizes are changing, why isn’t the way we design?

Current Mobile Nav Design

As you probably well know, a lot of mobile navigation is handled via the very top of our screens.

Need to go back a screen on your Facebook app? Get ready to stretch your thumb into “ow” territory.

img_3921

Want to open the nav on your Google News app? “Ow”.

img_3920

So why are we still designing navigation on mobile this way?

Is it because it’s what users are used to? Yes.

Is it because we are scared to challenge standards? Yes.

Are we just that lazy? Probably.

The Future of Mobile Nav

Let’s go to the bottom.

That’s where I see our navigational elements moving in the future. To the bottom of our screens.

Can it be reached naturally with one hand? Yes.

Is it out of the way enough to highlight our content? Yes.

Can it still be done in a recognizable way? Yes.

Can I see an example?? Yes.

ezgif.com-optimize

This is a prototype I created of a news application where the navigation has been moved to the bottom of the screen. Designed from the ground up to be used with one hand. Downside, if you’re a lefty, it will be covered by your hand. (Lefty switch mode anyone? Nobody steal my idea!) Upside, no more “ow” zone just to navigate and move around between states of the application.

Some mobile sites and applications are already doing some form of nav across the bottom. Checkout m.pitchfork.com  for a cool example of this being done well.

I think it’s only a matter of time before mobile nav has fully accepted it’s location at the bottom of our screens. But until then, keep your thumbs stretched!

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s