Is top navigation an accepted pattern for mobile devices?

Question

I have always found the bottom nav bar to be one of the worst UI conventions in common practice, as it is a violation of information hierarchy. Of course, the hamburger menu is also universally hated, so I'm not wanting to do that.

How well tested and established is the top nav bar on mobile devices? Obviously it is the gold standard for desktop experience, but I'm specifically designing for phone at the moment.

Answer 1

The good and bad of bottom nav

Bottom nav was a great idea when Apple first came out with it. Steve was laser-focused on one-handed usability. The bottom nav was designed to accommodate fast and convenient view switching where the mobile use case seemed to demand it.

Unfortunately, bottom nav is a hierarchy nightmare when used for an app's main info architecture. Product designers primarily familiar with iOS began to take the lower position as a given and put everything down there. As web apps became a viable mobile solution and the top navigation was carried over as part of simple responsive layouts, a new pattern started to take shape.

Enter Google's gradual shift to an experience-centered org ...

Top nav makes sense

Look at the Material Design guidelines for a well-developed perspective on top nav. They've recently added bottom nav for frequent switching scenarios, but it has a little different angle in MD.

Part of the logic behind MD's top nav solution, in addition to the obvious info hierarchy win, is the fact that action should guide you through an app's views. We don't have to force users to tap tabs and manually move through their workflow.

Taking that even further, Google has advocated an activity-centric feature model: regardless of the view or even the app, an "intent" will take the user where the app component they need.

The recent addition of bottom tabs in MD is not just in response to the iOS-minded product designers of the world. The use of bottom tabs can be used where manual rapid view switching is needed. Thise seems particularly good in a gesture-based view where you want to provide guideposts for left/right swiping behavior (though top nav can do the same).

Ironic sidebar

The bottom nav perspective on physical usability has an issue: user's have made up their mind that it's not a big deal. How many 4" phones are making hot tech lists these days. The remaining small-format phones are mostly budget devices. So how many users are one-handed phoners now?

For one-handed iPhone 6+ users, should we develop a bottom-left nav? 😂

This is probably more realistic ...

Answer 2

I think you should reconsider the bottom navigation:

• Bottom navigation is very well established in mobile apps, far more so than top navigation, and there is good reason for this.
• In most cases i disagree with your point about incorrect information hierarchy - the content takes prime visual position in the interface, and the navigation is simply a tool for users to find the content they want. Where it is positioned should be governed by the usability constraints of the device in question. On handheld touch screen devices one of the primary usability issues is covering/obscuring the screen with the hand whilst touching and interacting. The bottom navigation avoids this issue, offering full view of the screen whilst interacting, to see any immediate feedback that is given. It is also easier for the thumb of the hand that is holding the phone to access a bottom menu than a top one, simply because of the distance.
• The top bar has an established, conventional use, and this is for 'Back' actions, some core application functions (e.g. to create a new Tweet, in Twitter), accessing search functionality or for things like close actions on modal windows.
• Lots of people hate the hamburger icon, but not because in general this way of displaying navigation is not effective on mobile. I know some people will argue that navigation should not be hidden, but this depends on the use case, and the size of the navigation. You can have a hidden navigation menu in an off-canvas side panel, and instead of having a hamburger icon, have a menu button with the word 'menu', or similar in it. It also depends on your market - there are certainly markets that are very familiar with the hamburger icon, for whom its use is not a usability issue.
• Other options all come with their own, more significant issues, e.g. using a less well established off-canvas menu interaction like swiping comes with issues around signifying its presence (its discoverability).

Answer 3

One line answer to this is the Usability of choosing that position.

When you hold your mobile in hand, your thumb immediately gets into action and the bottom position is easily accessible to it than the top. In the era of large screen devices it's difficult to hold the phone in hand and access the navigation placed on top. Which is why Apple has changed the positions of Volume buttons for the iPhone 6+ devices to make them accessible by one hand.

There could be many more reasons to it, but I think this is the primary. The bottom navigation is more Useful than the top.