Basic Patterns for Mobile Navigation and The Best Practices

Share on linkedin
Share on twitter
Share on facebook
Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices_Storyly

Product managers pay special attention to mobile navigation since the available real estate of a mobile phone screen is limited. Mobile navigation usually should take very little screen space and be discoverable and accessible easily.  

There are many different mobile navigation patterns for different needs, and they all come with their good and bad sides. Let’s examine the basic navigation patterns and best practices. 

Navigation Menu (Hamburger Menu)

Navigation menus are commonly known as the hamburger menu as one of the most widely used icons for them is a hamburger. Navigation menus hide the detailed options and make them available upon request. Although the hamburger icon is widely used, some researchers suggest that using the word “Menu” is more popular with users than using a hamburger icon. 

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices_Storyly
Image: NN Group, a hamburger menu

Navigation menus provide a large space for content in a small place with a clean and clear design. However, when the navigation is hidden, users are less likely to use it even though these menus are very popular. So, the navigation menus or hamburger menus are the least discoverable. 

Another downside of hamburger menus is that they clash with some platform rules. Although hamburger menus are very popular among Android apps, for iOS apps, it may overload the top navigation bar.  Also, some of the hamburger menus are accessed by swiping the screen right, which is problematic for iOS users since the same gesture means “back.”

Image: Muzli, a hamburger menu and “back” button

Hamburger menus are traditionally placed on the left top part of the screens. This practice makes it harder for users to reach the icon since mobile phone sizes are getting bigger and bigger.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Muzli, thumb zone for different iPhone models

While containing many contents, hamburger menus hide the context when the user opens them. So, the user can’t see the current section they are in. In such a case, the user may need to go back to create the relevance again, tap the menu again, and tap where which page they want to go. This process requires extra effort, even without losing the context.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Usability Geek, usage of a hamburger menu

More visible menu options increase user engagement and experience overall. The out of sight, out of mind rule works in mobile app navigation. Hence, you should keep that in mind and prioritize your content accordingly. For example, you shouldn’t use hamburger menus as your main navigation menu. While you are using a hamburger menu in your app, support it with other types of navigation elements. To improve your navigation menu, you can place it on a tab bar to make it more accessible. If you don’t have many contents, you can directly export the contents of the navigation menu to the tab bar too. 

Tab Bars

Tab bars appear at the top (generally on Android apps) or the bottom (generally on iOS apps) of the screen. Tab bars come from desktop designs, and they take valuable real estate on the screen.   

Tab bars with or without icons don’t hide the navigation and the content and easily communicate with the users. Thanks to their persistence, users can see the tab bars even if they scroll or change the page. With this last feature, they are different from navigation bars. Navigation bars are usually present at the top of the page as a start but disappear once the users commence scrolling.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Muzli, top and bottom tab bars on Facebook app

One of the downsides of tab bars is that they have a limited capacity for content to carry.  Generally, if you have more than five options, tab bars aren’t as effective. Some apps use carousels on tab bars, however, remember that out of sight, out of mind. Especially if the options are irrelevant, it would be hard for users to find the options on a carousel tab bar.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: NN Group, carousel tab bar, options are not similar nor predictable and discoverable

When it comes to using tab bars, you should keep in mind that the size of the touch target is still significant as it is on any other part of your app. The size of our fingerpads and fingertips are, on average, between 10-14mm and 10mm x 10mm. Making these sizes a minimum touch target size is essential.

On tab bars, be as clear as you can with the labels and icons. Use familiar language and icons to ease communication and eliminate the ambiguity. Users should be able to understand quickly where that option takes them. If it takes more than 5 seconds to understand the function of a particular icon, then the effectiveness of that tab is low. 

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Smashing Magazine, Although many users are familiar with these icons, labeling them according to their functionality reduces the ambiguity.

When you place a tab bar on your app, you should order the navigation to reflect the priority of the tabs. In its essence of the tab bar, the user is active on one of the tabs, and it should be clear and visually highlighted which one that is.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Usability Geek, Use of a bottom tab bar with 5 choices, highlighting the active tab

Full-Screen Navigation

Full-screen navigation list all the navigation options on one page, usually on the homepage. It allows users to follow a clear path of navigation with simplicity and coherence. Full-screen navigation is very efficient in task-based and direction-based apps where users usually complete one task during one session.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Smashing Magazine, full-screen navigation lists

Although full-screen navigation allows users to consume content without distracting them, because the real estate is occupied with it, you cannot display any other content. However, you can consider putting a hamburger menu to display additional options. 

Floating Action Buttons

Floating action buttons (FAB) are generally shaped like a circle and not surprisingly float over the interface. Google says that FABs promote user action and that users understand these buttons as a wayfinding tool. When users see an unfamiliar screen, they will use FABs to know where they are and what to do next. 

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Usability Geek, Floating Action Button

FABs shows the users what is important so you can use them to prioritize your content. You can use them to increase user engagement and boost the design of your app. FABs can be used as core elements in your app.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Material Design, use of FAB as “play” button

Although FABs take little space on the screen because they are colorful and float, they can distract users from your content and even block your content. 

Don’t use FABs on every screen on your app and use one FAB per screen to show the importance. Be sure that this FAB takes only positive actions such as “create, favorite, search” and not negative actions such as “delete.”

Search

Search is an undebatably important part of mobile app navigation. It has many uses, especially in content-based, e-commerce, productivity, and listing apps. The design of where the search bar, tab, or icon should be, and its size and color depends on the application’s purpose.

A well-functioning search feature saves users a lot of time and improves the user experience. 

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Smashing Magazine, search feature

Voice

Your app can respond to voice commands to become more accessible. To do this, the user first needs to give voice input to the application to be recognized. Voice recognition is still a developing technology. Some business customers may already have experienced what speech recognition can provide.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Amx Snitser, Voice commands are commonly used by mobile platforms’ virtual assistants.

Gesture-Based Navigation

From the introduction of touchscreens into our lives, gestures became popular quickly among users, designers, and product managers.

 Gesture-based navigation is effective, especially when we are looking for content details.. It reduces the interface clutter and doesn’t take the screen real estate. 

With gesture-based navigation, the user interface is more intuitive. According to a study, gestures tend to be similar across cultures and experiences. In this study, 40 people from 9 different countries were asked to perform gestures for particular tasks. For example, the most common gesture to “delete” was dragging it off the screen.

Some of the apps use gesture-based navigation as a different feature. Tinder popularized swiping left and right; hence gesture-based navigation and other dating apps followed.

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Giphy, Lunarpapacy, Gesture-based navigation

One of the negative sides of gesture-based navigation is that it is invisible. Visibility is essential when it comes to the user interface to ease discoverability. This invisibility may add up to the learning curve and distort the user experience. 

Make sure that your users are educated about the gestures and use familiar gestures. For example, Snapchat popularized stories and usage. Swiping the stories change allows users to change stories and swiping up takes the user to the deep-linked content. Users are familiar with how to use stories and deep links, so many apps adapted the story format. If you want to discover how you can use stories in your app too, check Storyly

Basic_Patterns_for_Mobile_Navigation_and_The_Best_Practices
Image: Pinterest, Instagram stories “swipe up”

Making navigation discoverable and accessible is a challenge due to mobile screen sizes. Product managers try to improve the situation with different navigation patterns. You can also decide on which works for your mobile app and come up with the best user interface to satisfy your users. 

Leave a Reply

Storyly - Bring superb stories to your app | Product Hunt Embed

Recent Posts

Get the latest content first.

Storyly uses the information you provide to us to contact you about our relevant content, products, and services. For more information, check out our Privacy Policy.