4

Some of Google's iOS apps, as well as other apps (e.g. StackExchange for iOS) use a combined navigation model based on both a Tab Bar and a Navigation Drawer (aka Hamburger Menu). Typically, the Tab Bar will offer navigation to the major sections of the app while less-frequently accessed destinations (such as Help and Settings for instance) will be accessible from the navigation drawer.

What are your thoughts about this approach? Is it a good practice or a strange hybrid?

enter image description here

  • 1
    You can create good combinations with it. The Tab bar is faster to reach and the user see's it directly, while for the hamburger menu, he need to click the menu icon to see the menu. Put obvious menupoints in the menu, special things about your app, you could put in the tab bar since the user instantly see the tab bar items. or you could use the tab bar as an under menu. Put the main navigation-items in the hamburgermenu and put all underpoint in the tab bar for faster navigation. – Michael Schmidt Feb 2 '16 at 14:26
3

Like with most questions like this, the tl;dr is: It depends.

The correct navigational pattern is largely contingent upon three things:

  1. App structure (IA)
  2. Leaf page functionality (IxD)
  3. Desire to enforce prioritization by the product team (Organizational)


App structure

If your app is structured such that you can support fewer than 5 first-tier leaf pages, a tabbed approach is great. If there are additional pages that aren't contained in a core user flow, it can make sense to include additional functionality in the ☰ menu. These include:

  • account information (eg. sign in/out, add user, etc.)
  • outbound links (eg. help, feedback, bug report, etc.)
  • settings
  • folders and labels


Leaf page functionality

If leaf pages are sufficiently differentiated from one another but equal in hierarchy and priority, tabs is a pretty solid mechanism for navigation. Examples of this include:

  • stream types (eg. YouTube's Home, Trending, Subscriptions, and Account)
  • navigational patterns (eg. browsing per your example)
  • content types and interaction patterns (eg. Google Maps direction types)


Desire to enforce prioritization by the product team

This is less about the discipline of design and more about its practice. Product teams have ever-evolving requirements, and as a result, the product/service can become bloated and unfocused. Choosing a fixed number of core user tasks and placing them in tabs helps design teams push back against product creating a junk drawer filled with long-tail functionality and enables the team as a whole to spend more design and development time on core functionality.


Further considerations

Try to avoid user tabs as a sorting or filtering mechanism. In your G+ example:

there are states in which users have top and bottom tabs, and the top tabs serve as filters for content in "Collections." The content within the "Featured," "Following," and "Yours," tabs is the homogenous. This is a strong anti-pattern for tabs. There are much better filtering mechanisms.


Additional resources

An update on the Hamburger Menu - evolution of the usage of the hamburger menu

Who Designed the Hamburger Icon - history of the icon

Why and How to Avoid Hamburger Menus - practical guide

I hope that helps!

  • My pleasure Alex! I hope it helps guide your decision-making. Feel free to reach out to me on Twitter if you have questions! – SwankyLegg Feb 4 '16 at 16:10
0

You have already highlighted the core functionality of tab navigation and off canvas menu. The only drawback I could think of with such design is the screen estate available for the actual content. However mobile phones are getting bigger so I don't think this would be an issue in the future.

Whether to implement off-canvas or tab navigation or both depends largely on the site architecture and also the goals you want to achieve. If your goal is to drive more users to a particular page(s) or perform certain action(s), you may want to put the links in places where user can easily access. Since tab bar can be navigated and clicked with one hand, naturally you would want to put your links there.

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.