Breaking down 8 kinds of navigation in mobile apps
Mobile users search for products using navigation.
Mobile navigation helps users:
It is more difficult to make convenient navigation in the app than on the website. It should be more compact because of the smaller screen size, so as not to distract the user from the main content.
Mobile interface designers do not need to invent from scratch how to make navigation understandable. They use navigation patterns that are predictable and maximize usability.
At HeyInnovations, we have developed 500 digital products that are used by 60 million people each year. We unraveled the most unobvious navigation techniques and created the perfect experience for mobile users from different countries. In the article, we will speak about navigation patterns, tasks they are used for and the ways we use them in our m-commerce apps.
In the article, we mention two names of interface elements: for Human Interface Guidelines (iOS) and for Material Design (Android).
The buttons on the bottom navigation bar, when clicked, switch the user to the corresponding top-level section of the app.
📲 When it is possible to select from 3 to 5 top-level navigation sections that are equally significant for the product.
📲 Tab bar in iOS is the main recommended way for top-level navigation.
🔘 In iOS, a tab bar can have any number of tabs, but their visibility depends on the size and orientation of the device. If the tabs do not fit, the last visible tab is transformed into the “More” section, which has the remaining tabs on a list on a separate screen.
🔘 The last icon can be used for additional navigation parameters: user profile, loyalty program, app settings.
🔘 Android guidelines do not recommend using the bottom navigation bar for quick settings and single tasks, for example, viewing a single email.
🔘 iOS recommends using the tab bar strictly for navigation and not to assign actions there.
🔘 Users are used to a certain order of buttons on the tab bar. The first element leads to the home screen, and their subsequent order should reflect the use logic.
🔘 The tab clicked by the user must be active and highlighted.
🔘 Icons must obviously show the purpose of the tab. Check the readability of icons with the five-second rule: if it takes more to understand the assignment of the icon, it is ineffective.
🔘 One can use captions under icons.
✅ It tells the users which section they are in.
✅ Navigation elements are accessible from any section and are always visible.
✅ This navigation is easy to use with one hand.
❌ Navigation features are limited, since the tab bar can freely have only up to five sections.
❌ In Android smartphones, the built-in bottom navigation bar may distract users from navigation.
This navigation is placed in the upper left corner and is usually hidden behind the hamburger icon, but can be any other icon and even the word “Menu”. Another option is when there is no icon at all and the menu is opened using a horizontal swipe.
📲 When many additional menu sections that are rarely used must be hidden.
🔘 Analysts from the Norman Nielsen Group do not recommend using the side menu, but to unravel navigation, highlight the main menu items and make them visible.
🔘 A side menu is acceptable if the main content is on the main screen, and sections that are used very rarely, such as application settings and support requests, can be hidden in the hamburger menu.
✅ It allows a large number of navigation elements.
✅ It frees up space on the home screen so that the user is fully focused on the content.
❌ Hidden navigation offers a worse user experience than visible navigation: users spend more time searching for sections.
❌ It takes at least two taps to navigate to the required page.
❌ Users do not see which section they are in.
❌ It is a navigation standard only for Android smartphones.
The hamburger icon is placed on the top app bar, but other navigation elements that did not fit in the tab bar can also be placed there.
📲 When there are 1-2 navigation elements that should be visible, but they do not fit in the tab bar.
🔘 For additional navigation. For example, combining with a tab bar, fullscreen.
🔘 A point to keep in mind is that in iOS the title is in the middle, and in Android it is on the left.
✅ The navigation element is visible.
❌ It is impossible to reach with a thumb.
This pattern assumes that the screen space is allocated for navigation. It is used both on the main screen and on internal pages.
🔘 The pattern works well when the user needs one navigation direction per session: switches from the overview page to a specific section.
✅ Fullscreen navigation is the simplest and most consistent.
✅ A large number of sections can be displayed.
❌ It is not advisable to show any content other than navigation, as users may get confused.
We have already mentioned one way to use gesture navigation: when the side menu opens on a horizontal swipe. But there are others.
📲 There are few sections and categories of products.
📲 To draw attention to the content.
📲 To buy ads.
📲 To disable.
🔘 Use visual cues, for example, show part of the next screen, content, or tutorial when the app is opened for the first time.
✅ Gestures allow to create minimalistic interfaces and leave more space on the screen for content.
❌ Navigation remains invisible, which means it is more difficult for users to find it.
❌ Not all users are familiar with gestures.
❌ If several gestures are used in navigation, they will have to be memorized, which complicates the use.
❌ In Android, when swiping horizontally to the left, users can accidentally touch the system navigation sidebar.
This is the type of navigation that is located directly under the navbar. It can be used as additional navigation on the main screen and in the catalog.
📲 To make the main categories as visible as possible.
📲 When a small number of categories can be left on the main screen.
✅ Tabs can be used with scrolling, which allows to place a large number of categories.
✅ They reduce the number of touches in navigation.
❌ It is difficult to reach when using a smartphone with one hand.
❌ In Android, only up to 4 fixed tabs can be used.
❌ If scrolling is used, part of the navigation is hidden. Users may not reach the last categories.
A floating action button or FAB button looks like a round icon that hovers over the interface. Android users are more familiar with it. The FAB button is for the most frequent action that users perform. It is almost never used in m-commerce.
📲 According to Google, the FAB button motivates users to perform desired actions. Such navigation assumes a key function that will be used constantly.
🔘 Use only one FAB button on the screen, only on the screens with the main desired action.
🔘 The list expands when clicking on the FAB button.
✅ It takes up little space on the screen.
✅ Research by Steve Jones has shown that the FAB button is inconvenient at the first interaction. However, after the task is successfully completed, it is used more often than other interface elements.
✅ A good way to direct the desired action.
❌ It may distract from the main content.
❌ It may block the content.
❌ The FAB button does not use text, so the meaning of the icon may not be clear.
❌ The component is not typical for iOS.
Subnavigation allows access to the lower-level categories. The main difficulty with it in apps is the small size of the screen, which does not allow to freely place a lot of subcategories.
This is the arrangement of a catalog with a drop-down menu: when the subsections drop down. It works when there are few items inside the section, usually less than 6. Otherwise, it takes up too much space: the user will have to scroll the page for a long time.
🔘 Categories and subcategories must be different in style so that users can distinguish between them.
🔘 The up-down arrow can be used so that users understand exactly how the element works.
✅ To access the subcategories, the user performs a minimum of actions and does not wait for the screen to load.
❌ If there are many sections inside the main category, they will take up the entire screen and it will be inconvenient to scroll down.
The sequential switch from the top-level navigation sections to the subsequent ones is on a new page with a return through the back arrow.
📲 It is suitable for menus with a small nesting.
📲 The right arrow can be used for menu items so that the users understand where they will go next.
✅ It allows a large number of subsections.
✅ When the “Back” button is clicked, the user switches to the parent category, and does not exit the menu as with accordions.
❌ It takes the user longer to get to the desired product category.
❌ The user needs to wait for the screen to load.
We have mentioned patterns specific only to m-commerce. In fact, there are more of them. But for any navigation, the main thing is to observe a few rules: