18

I look at Material Navigation pattern on material.google.com It shows that android officially has Bottom navigation for Android UI

Before March 2016 Android seriously put the page switch on top tabs or Drawer but today the guideline allow UI Designer to choose what we want.

enter image description here

What is criteria for UX designer to choose between Tabs and Bottom navigation? It makes sense for Material Design on iOS but Photo App also use Bottom tab on Android

enter image description here

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

Thanks

  • This question seems to answer your question: Tabs for mobile application. Basically keep the navigation elements together to establish consistency across the application. So if you have navigation elements besides the tabs at the top, make the tabs sub-headers. If the tabs are the only navigational elements, then choose what makes the most sense given the context of your application, just make sure to be consistent throughout the application as to where they are located. – Tory Dec 11 '16 at 18:16
  • @Tory my question is about How to come up with "The most most sense given the context of my application"... what context to choose Tabs and what context to choose Bottom navigation. – Bank Dec 11 '16 at 18:20
11

Keep navigation grouped together.

Keep the navigation elements together to establish consistency across the application. So if you have navigation elements besides the tabs at the top, make the tabs sub-headers. If the tabs are the only navigational elements, then choose what makes the most sense given the context of your application, just make sure to be consistent throughout the application as to where they are located.

As far as "choosing what makes the most sense given the context of your application", look closely at the Tabs and Bottom Navigation Bar sections of the Material documentation you linked.

Tabs:

Tabs allow users to quickly move between a small number of equally important views.

Appropriate for these hierarchies:

  • Parents with embedded child views
  • A group of sibling views

Recommended for:

  • Frequent switching between views
  • Apps with few top-level views
  • Promoting awareness of alternate views

Bottom Navigation Bar:

A bottom navigation bar allows users to quickly move between a small number of top-level views.

Appropriate for these hierarchies:

  • Parents with embedded child views
  • A group of parent views

Recommended for:

  • Frequent switching between views
  • Apps with few top-level views
  • Promoting awareness of alternate views
  • Mobile devices, as bottom navigation is located in a more ergonomic location

So the context in this situation is: what content is being presented when selecteing the different tabs? So if the different pages to be displayed are similar, in that they present similar content, however with a different view, then sub-header tabs work because each tab has equal importance in relation to the other tabs. If the different pages contain very different content, say a tab for settings and another tab for favorites, you would use a bottom navigation bar, as the two are parent elements. So the context is the relationship the content of each tab has with one another.

5

Use tabs:

If there are fewer than three destinations, consider using tabs instead.

Use Navigation drawer:

If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.

Don't combine Bottom bar and tabs:

Be cautious when combining bottom navigation with tabs, as the combination may cause confusion when navigating an app.

Use Bottom bar only on mobile:

Bottom navigation is primarily for use on mobile. To achieve a similar effect for desktop, use side navigation.

So:

0 - 2 : use Tabs

3 - 5 : use Bottom bar or Tabs

5+ : use Navigation drawer or/and Tabs

Now the doubt is in the 3 - 5 for mobile. I believe there is no correct answer here, and it might be true as we can see Google Material apps using both Tabs and Bottom bar indistinctly (apparently).

A difference I noticed and this might make sense depending on the case is:

Tabs make it easy to explore and switch between different views.

vs.

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

(Emphasis mine).


References:

Material Design - Bottom Bar

Material Design - Tabs

  • "Don't combine Bottom bar and tabs:" - There is a view in Android YouTube application when uses both at the same time – AppiDevo Oct 14 '17 at 9:37
1

The argument "ergonomic location" falls flat on it's back since proper tabs will also allow horizontal swipe as navigation. So I cannot see any good use for bottom tabs. Also they clash with the existing navigation buttons on Android. It's a complete fail in my book...

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.