5

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.

Types of navigation

  • For clarity, can you provide a screenshot/wireframe of a bottom nav bar so everyone is clear what you're referring to? – Midas Apr 13 '16 at 9:28
6

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.

Steve with the iPhone 1

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.

Android app with top tabs

Android app with top icon tabs

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.

Android intent system flow

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).

Material Design bottom tabs

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? 😂

iPhone 6+ average thumb reach

This is probably more realistic ...

Big iPhone being used with 2 hands

  • +1 Great answer. And I love the "This is probably more realistic" picture. As a user of the original Samsung Galaxy Note - my first (and only) smart phone - I never understood single handed use... – Marjan Venema Apr 14 '16 at 7:06
  • To defend single-handed use, don't forget that sometimes you're doing multiple things at once. No matter how many finger-wagging nannies out there will hem and haw, people use their phones while driving. That said, the app I'm working on has an extremely low probability of use during driving. – JClaussFTW Apr 14 '16 at 21:35
  • @JClaussFTW Within the next 24 months it won't matter anyway because we'll be accustomed to yelling instructions at our phone as it drives us down the road. 😓 – plainclothes Apr 14 '16 at 21:37
  • +1 Great answer! But I think the more "technical stuff" about Intents (and the image) is out of place and doesn't add anything to the answer other than complexity. – Rolf ツ Apr 15 '16 at 23:08
  • @Rolfツ Interesting perspective. I think the Android team's codification of app-agnostic activity flow is critical to how we think about navigation. OTOH, I'm a nerd. – plainclothes Apr 15 '16 at 23:35
4

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).
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.