To blog

#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

Intro 1. Tab bar 2. Sidebar 3. Top app bar 4. Fullscreen navigation 5. Gestures 6. Tabs for categories 7. Floating action button 8. Subnavigation Key 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.

last update

September 14, 2022

Get in touch with us

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

Pattern 1. Tab bar and bottom navigation bar

Use cases

How to use

Pros

Cons

Pattern 2. Sidebar and navigation drawer

Use cases

How to use

Pros

Cons

Pattern 3. Navigation bar and top app bar

Use cases

How to use

Pros

Cons

Pattern 4. Fullscreen navigation

Use cases

Pros

Cons

Pattern 5. Gestures

Use cases

How to use

Pros

Cons

Pattern 6. Tabs

Use cases

Pros

Cons

Pattern 7. Floating action button (FAB)

Use cases

How to use

Pros

Cons

Pattern 8. Subnavigation

Accordion

Use cases

Pros

Cons

Sequential navigation

Use cases

Pros

Cons

Conclusion

Read more

Subscribe to our newsletter