Android UX - When to use Bottom navigation and when to use Tabs

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

  • Tory

    Tory Correct answer

    5 years ago

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM