8 Mobile Navigation Patterns in M-commerce: Use Cases, Major Mistakes, and Best Practices

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

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

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

• There are few sections and categories of products.
• To draw attention to the content.

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

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

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

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.