Adam Tengku
Design Director

INTRODUCTION

Is it Time for Mobile Navigation to Step Down?

Today I’ve got a bit of a rant for you on a commonality within mobile user interface designs that has bugged me for a while: Why the hell do so many apps still put navigation at the top of display?
It’s just. Too. Far. Away.

I’m serious, have you seen how big mobile screens have gotten? The iPhone 8 Plus has a 5.5-inch screen, the X goes up to 5.8, and the Samsung Galaxy S9+ sits at 6.2 inches! The new mobile app design trend of edge-to-edge displays now stretching screen sizes to practically cinematic aspect ratios has me struggling to devolve my hand back into Orangutan proportions with obscenely fingers just to use my phone without dislocating a point.

Nothin to see here. Nothing at all

Maybe they’re the real target market?

But There is Some Hope. . .

As hamburger menus become less prominent and tab bars are seeing a bit of a resurgence, key navigational elements are slowly moving to the bottom, into the thumbs sweet spot areas, but I think we could do better.

Back buttons still sit at the upper horizon of the screen, often unreachable without adjusting your grip or - god forbid - using your other hand . Plus, we've got a lot of search bars sitting up there, along with URL bars, in some cases submit buttons; the list goes on. Tricks like Apple's Reachability* don't count either, that's like a plaster on a gunshot wound. The damage is deeper, we're going to need to go under, stat!

Double tapping the Home Button to pull all content down within a reachable distance

I admit I have seen some steps towards genuinely addressing this; Apple Maps comes to mind. Say what you want about its actual mapping, but the entire interface sits at the bottom of the screen, with options to slide it up for more options or detail. Here at Mobile Five, we developed a bunch of Canon apps that had their primary navigation bar at the bottom of the screen too, if you'll excuse the plug. But what other apps have really had the boldness to completely discard the top nav bar?

There are some arguments against doing this, concerns might be raised about users missing it because it's in an uncommon place, that it will interfere with browser controls in the case of web apps, or that it interferes with scrolling. Sadly (for them), they're all wrong. Each of these has a workaround if you just design apps better, and don't be a whiny baby that's afraid of change (not me, I'm a rebel).

Users will see it because footer navigation isn't new, and are mobile screens that big that someone wouldn't spot it in an instant? Nonsense.
In the case of it interfering with controls, well just use more padding, dummy! In the bin. Interfering with scrolling? Not with a scroll-up bar. Those are the ones that hide while you're scrolling down and looking at content. Seems like checkmate to me.

We also don't have to just limit this kind of solution to tab bars, you could even bring back contextual menus like Pinterest's contextual pop-out button. Tapping and holding down on a pin reveals possible interacts with it.
   
This behaviour has also been seen on Android, where a single highly prominent button hovers permanently over the screen, taking up very little space, which can be tapped at any time to reveal more options.

Gestures are also becoming more of a thing these days, since physical buttons are so passé, darling. Although this method does risk being too opaque due to lacking visual cues to the actions it offers, it has the potential to grow into the natural de facto way forward given the prevalence of edge-to-edge buttonless phones.

If we allow ourselves to dream a little, what would also be awesome is if the display knew where my fingers were and brought up contextually positioned controls like Microsoft tried not too long ago with their 3D touch technology experiments. Unfortunately, this is likely not to become mainstream, but it's good to be ambitious!

Conclusion : Be Better.

The whole point of discarding physical keys on mobiles to be replaced by software controls is that they could adapt to the functions that were needed. Technology is supposed to adapt to us, not the other way around. Mobiles, and app design in particular, making us struggle and stretch to reach controls on the screens is a failure for this goal. So let's solve it, and save our species from a horrible future of thumb-elongation!

Share

Next article