4.1 Types of Navigation
Last updated
Last updated
Often times we don't think about how navigation within mobile apps work because the navigation cues feel so intuitive, but if we were to look closely at Android apps, you'll notice that there are several different ways to navigate between activities and fragments, and each technique has its own benefit and use cases.
The bottom navigation bar is one of the most common navigation system and it is present in almost all mobile apps. It is often used as the highest level of navigation. Here are some examples of what a bottom navigation bar looks like:
The bottom navigation bar is great for switching between different fragments that each independently serve as one topic or page of the app. Generally, the most frequently visited page is featured on the left or center and the user profile is featured at the right.
Generally, the user interaction to move between different pages using the bottom navigation bar is through tapping the icons. If the no other navigation systems on the page, the app may sometimes allow for swiping to switch between pages, though this is more rare. Visual cues, like highlighting the current fragment/screen, are also present since the bottom navigation bar persist across the lifecycle of all these different screens.
Many apps with complex fragments will often also feature a top tab layout for even more granularity of pages and topic breakdown as the secondary navigation system.
With the two examples above, we can see that the apps feature both a bottom navigation bar and a tab layout at the top. The tab layout provides clear organization for pages that only pertain to an single fragment, and it is often triggered through a swiping gesture. Having different gestures for the bottom navigation and tab layout makes changing different fragments easier and more intuitive. There is also often a sliding indicator to notify the user which page they are on.
You'll notice that there are apps that break this pattern like Eatery:
In Eatery, the secondary navigation is to switch between campus and Collegetown eateries is featured at the bottom through a button pill, and it is triggered through clicking the pill rather than swiping. It can be argued that a swiping interaction may be more intuitive, but designing the navigation this way isn't wrong either. This is just to show that there is not one right way to design a navigation system.
Many apps will also feature a hamburger menu that contains a ton of different hidden pages and features that are nice to have but are not crucial to the app's main functionality. This is because the user takes more "effort" to trigger the hamburger menu to open and thus, are less likely to access the menu. Furthermore, the pages are hidden from sight, so the user will be less likely to memorize what pages are available to them in this menu.
Here are some examples of hamburger menus in apps:
Generally, hamburger menus will only cover a portion of the screen (where the uncovered screen is greyed out) and it will feature pages that the user may not need to access everyday. This is also usually where the navigation to the setting page is stored.
You'll notice in the screenshot that Uber has its hamburger menu on the left while Instagram has coming from the right. Several years ago, almost all hamburger menus in Android apps came from the left, but recently, Google changed the Android OS navigation system to emulate Apple's "swipe to go back" gesture. This change disrupted many Android apps since the hamburger menu is usually triggered through a swiping gesture, and users were often confused if they swiped, and a menu came out instead of the app "going back" a page. As such, many apps moved their hamburger menu to the right or removed the menu altogether.
