Back

#e-commerce

#best practices

8 min

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

Breaking down 8 kinds of navigation in mobile apps

Anna Baida

UX Designer

Eva Petritski

Content Manager

September 14, 2022

Intro1. Tab bar2. Sidebar3. Top app bar4. Fullscreen navigation5. Gestures6. Tabs for categories7. Floating action button8. SubnavigationKey takeaways

Mobile users search for products using navigation.

Mobile navigation helps users:

  • to search for products without inventing search queries,
  • to find products not knowing their exact names,
  • to buy without cognitive effort, only by clicking.

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

Pattern 1. Tab bar and bottom navigation bar

The buttons on the bottom navigation bar, when clicked, switch the user to the corresponding top-level section of the app.

Use cases

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

How to use

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

Pros

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

Cons

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

Pattern 2. Sidebar and navigation drawer

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.

Use cases

  • When many additional menu sections that are rarely used must be hidden.

How to use

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

Pros

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

Cons

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

Pattern 3. Navigation bar and top app bar

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.

Use cases

  • When there are 1-2 navigation elements that should be visible, but they do not fit in the tab bar.

How to use

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

Pros

  • The navigation element is visible.

Cons

  • It is impossible to reach with a thumb.

Pattern 4. Fullscreen navigation

This pattern assumes that the screen space is allocated for navigation. It is used both on the main screen and on internal pages.

Use cases

  • The pattern works well when the user needs one navigation direction per session: switches from the overview page to a specific section.

Pros

  • Fullscreen navigation is the simplest and most consistent.
  • A large number of sections can be displayed.

Cons

  • It is not advisable to show any content other than navigation, as users may get confused.

Pattern 5. Gestures

We have already mentioned one way to use gesture navigation: when the side menu opens on a horizontal swipe. But there are others.

Use cases

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

How to use

  • Use visual cues, for example, show part of the next screen, content, or tutorial when the app is opened for the first time.

Pros

  • Gestures allow to create minimalistic interfaces and leave more space on the screen for content.

Cons

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

Pattern 6. Tabs

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.

Use cases

  • To make the main categories as visible as possible.
  • When a small number of categories can be left on the main screen.

Pros

  • Tabs can be used with scrolling, which allows to place a large number of categories.
  • They reduce the number of touches in navigation.

Cons

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

Pattern 7. Floating action button (FAB)

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.

Use cases

  • According to Google, the FAB button motivates users to perform desired actions. Such navigation assumes a key function that will be used constantly.

How to use

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

Pros

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

Cons

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

Pattern 8. Subnavigation

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.

Accordion

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.

Use cases

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

Pros

  • To access the subcategories, the user performs a minimum of actions and does not wait for the screen to load.

Cons

  • If there are many sections inside the main category, they will take up the entire screen and it will be inconvenient to scroll down.

Sequential navigation

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.

Use cases

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

Pros

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

Cons

  • It takes the user longer to get to the desired product category.
  • The user needs to wait for the screen to load.

Conclusion

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:

  • Navigation must be visible. Do not hide the main items.
  • The main sections can be reached with the thumb of one hand.
  • The fewer touches the user makes to the desired section, the better.

Read more