Android UX - when to use Tabs and when to use Navigation Drawer?

Question

I'm looking for guidelines regarding when to use Tabs vs. when to use a Navigation Drawer(sidebar).

For example, as of these days, Facebook and Dropbox, which are extremely popular (+100M users), use tabs and do NOT use the sidebar. See screenshots below.

Many other Android apps, including Google's, do use the sidebar.

It feels like both tabs and the sidebar belong to the same navigation concept but have a different implementation.

So, If my app includes 3-4 main views, what should I use? Tabs or Sidebar?

Thanks.

Answer 1

Per the Material Design Guidelines on top-level view strategies, three main strategies are:

Focus on a single view with embedded navigation. By putting all the necessary navigation directly inline with other app content, you make it extremely visible to the user. This can be appropriate when the app’s navigation model is very simple. However, presenting a large number of navigation paths in this manner can reduce the space available to display content. These pathways could be distributed throughout the screen rather than co-located in a predictable and convenient location.

Use in-context navigation if:

• Your app has a strong primary view, and no or few alternate ones.
• Your users can complete the most common tasks easily within the main view.
• You expect users will use your app very infrequently and will appreciate well-exposed paths.

Use tabs to switch between a small number of equally important views. If your app has only a handful of functional areas, each with shallow hierarchies, using tabs increases the awareness of these peer top-level views. It also accelerates switching between them, bringing them into view with just a click or a swipe. However, displaying the tabs takes up significant space on smaller displays, and is efficient only for a small number of peers with succinct labels.

Use tabs if:

• You expect your app's users to switch views frequently.
• You have a limited number of top-level views.
• You want the user to be highly aware of the alternate views.

Manage more complex structure through a left navigation drawer. The left nav panel can display large numbers of navigation targets concurrently. It is particularly useful when your app has a single, natural “home”, and the drawer can then act as an index of less frequently visited destinations. If your app requires cross-navigation directly from a lower-level screen to other important sections of your app, the ability to swipe in the side nav panel from any point in your app can make that context switch more efficient for the user. However, because it is a less obvious affordance, it may take the user time to familiarize themselves with the contents.

Use a navigation drawer if:

• Your app has a large number of top-level views.
• You want to enable quick cross-navigation between views which aren’t directly related.
• You have particularly deep navigation branches and want to accelerate returning to the top of the app.
• You want to reduce the visibility and user awareness of less frequently visited destinations.

Therefore it seems like tabs would be the best fit if you have 3-4 main views of near equal importance.

Answer 2

The issue with tabs is the space that you can show them on mobile devices. It's really good if you know that you only have say three items to show, but when it comes to future proofing, there's not enough space to go width wise without paginating. The way in which I see it is the use of tabs should be for the immediate usage in the journey and the draw is for other less frequent journeys from the where the user is. As long as you don't have heaps of interactions available to the user they will home in on what you have displayed as important. So you could just use the draw as it would potentially be the only interaction (in icon form) on that given page.