Wither Navigation Drawer?

I’ve been thinking about mobile app design for our new Ponzu iOS app.

I’ve noticed that the Navigation Drawer has been removed from the new Facebook app, and instead, they are using either the native Tab Bar Controller in iOS, or Tabs in the Action Bar for Android. Let me explain.

Facebook changes

I’m using images I got from the web instead of my own devices, because I’ve already updated them to the newer versions of the Facebook app.

Previous Android Version

The hallmark of the previous Android version is the “Navigation Drawer“. This is summoned by clicking the button on the upper left of the screen with causes the top view to slide to the right, revealing a menu list (right image).

On the left image, you also see use of drop-down menus from the Action Bar (the top bar). Interestingly, these items on the Action Bars are also included in the Navigation Drawer, creating redundancy.

The Navigation Drawer pattern was invented by Loren Brichter and was popularized by Facebook. Since then, it has been included into the Android SDK so any Android developer can easily use it, and it has been used extensively in mobile optimized web sites.

To see why Google thinks that this is a good navigation pattern, see their documentation. They basically use it at the root-level in the app’s navigation hierarchy.

New Android Version

In the new Android version, we can see that Facebook has totally ditched the Navigation Bar, and instead are using Navigation Tabs within the Action Bar (a more graphical example).

This navigation scheme is very similar to Tab Bars in iOS. Tab Bars have been supported in iOS since the very beginning (iOS 2.0). Android used to have them as in iOS but they don’t seem to be actively supported in the SDK any more.

In fact, Facebook is using Android Navigation Tabs within the Action Bar in a manner that is much closer to the iOS Tab Bars in comparison to how Google is using them in their own apps. In Google’s apps, Navigation Tabs are typically present only at a high-level of the navigation hierarchy. They disappear as you move deeper into the application hierarchy. On the other hand, iOS Tab Bars are always present, providing the user with a global navigation element. In Facebook for Android, they put Navigation Tabs on every page, much like how iOS works.

Summary

In a nutshell, Facebook has ditched the Navigation Drawer pattern that it popularized. Instead it has migrated to the Tab Bar navigation pattern that was present since the very first iPhone.

This really shows how much thought went into the original iPhone UI, and how much they got right the first time.

As for reasons why the Navigation Drawer was not a good idea for Facebook, let me give my thoughts;

1. To serve as a global Navigation Element, the Navigation Drawer has to be present at all times. However, the position of the Navigation Drawer button is the same as the “Back button” (or the “Up button” in Google’s weird terminology) and hence the two cannot coexist. If you want to display a “Back button”, you can’t display a Navigation Drawer. Hence the Navigation Drawer is relegated to the root-levels of the app navigation hierarchy and cannot be used in deeper levels. Essentially, the Navigation Drawer cannot be used for global navigation.
2. The contents of the Navigation Drawer are hidden. Therefore, features that are only accessible from it will tend not to be noticed by many users. That is why in the previous design, Facebook put the more important menu items in the Action Bar (top bar) as well. Naturally this causes confusion because the same buttons are present in multiple locations but it’s better than losing large amounts of user enagagement.
3. Since the Navigation Drawer is used mostly at the root-level pages, you could easily use a root page instead. Instead of sliding the Navigation Drawer from the left, you could simply provide a Back Button and show the list of menu items as a separate page. Since everybody is familiar with the Back Button, it becomes very natural for users.

Items 1. and 2. are closely related and have very much to do with the feeling of being “lost” within an app’s hierarchy. Regarding 1., having a global navigation visible at all times makes it easy to get back “out of the woods” so you always feel safe. Without one, you would have to tap the back button many times, and you probably have no idea how may taps you need. Unless your app hierarchy is shallow, you need global navigation at all times. As for 2., if the contents are hidden, users are not going to quickly learn what features your app provides. You should help users learn as quickly as possible by showing the list of important features often.