3 Responsive Navigation Patterns That Work For Mobile Apps

Responsive web design has been a pioneering factor in the last decade – it has changed the way various industries interact with their audiences. Designers and developers have adapted to handle complex patterns and approaches. However, when it comes to mobile apps and responsive designs, navigation becomes a critical issue – a hindrance rather than being an assistance to make the audience/user’s experience better.

Before we look into responsive navigation that can work wonders for mobile apps, we have to first learn the basics of information architecture and the purpose of navigation.

A mobile-first approach has altered the way we look at information architecture and content strategy. We have learnt to prioritize and focus on important aspects of the applications we design rather than creating complex, canopy products that shove everything into users’ faces and overwhelms them.

In fact, mobile can serve as a starting point to rethink and revisit your navigation. An analytical approach can reveal the key focus areas where users spend most of their time and act upon the prompts your app provides. A lack of screen space on mobile can help you put both Information Architecture and content of your app under the microscope, to remove or move down the unrequired sections, prioritize high-activity sections and design a navigation pattern which is easy to follow through.

Optimizing your app’s information architecture ensures that your responsive design is not just beautiful, but also functional. To reduce cognitive friction and create a clear navigation structure, one should align the navigation with user’s end goal and primary action. It also helps to cut out complexity and label different section clearly. Nobody wants to get lost in ten levels of navigation, even if they are just “browsing” through for later usage. If at all, this would just prompt the user to uninstall the app.

However, sometimes it’s not possible to declutter and minimize the navigation structure. Apps based on e-commerce and financial services cannot function without a complex, multi-layered, deep navigation. In such cases, search feature come to a quick aid for ease of navigation. It’s an effective alternative of wading through complex navigation to get to the desired section. Search and navigation complement each other at various instances.

However, Nielsen Norman Group states that on mobile devices, both navigation and search come at a price: they occupy screen space and grab users’ attention. A search box or navigation links at the top of a mobile page can interfere with the users’ ability to interact with the app. It also advises to pay attention to navigation and search, make them accessible and discoverable, but don’t forget one of the basic tenets of mobile usability: prioritize content over chrome. Different approaches sacrifice either content prioritization or the accessibility of the navigation.

To tackle complex navigation in a responsive, intuitive manner, we must learn the purpose of navigation. Derek Powazek proposes: “Navigation also has three parts, which are used to communicate to the user about their past, present, and future. Any good global navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind on any page:

• Where am I? (Present)
• Where can I go? (Future)
• Where have I been? (Past)”

Moreover, in case of mobile apps with a complex structure, the navigation bar and the tab bar should be allotted main chrome area of the screen, while keeping the extra area should be reserved for search and other utility-navigation options.

Keeping these basic elements in mind, it gets easier to design and decode responsive navigation solutions, which work positively for mobile apps.

While there is no dearth of complex yet responsive navigation options meant for mobile apps, here’s my pick on three which work well in most cases –

• Hamburger
• Priority Plus
• Multi-level toggle

HAMBURGER NAVIGATION

I know, I know, it’s enveloped in controversies and most designers have a love-hate relationship with a Hamburger menu. But hold your horses, and observe. A large number of the mobile apps boast of a pretty functional Hamburger menu, viz. Gmail; Google Drive; Google’s Play Store; Nike Training+; and more. The main debate around the hamburger icon is whether the icon is self-explanatory, or does it need a textual indicator? In the latter case, it would occupy more screen space and defeat its original functionality. At the same time, the icon, when present individually, hides the navigation options neatly behind the fold unless the user requests for them. It might make navigation less apparent and clear for some users, but with more accessibility of mobile apps, hamburger icon has emerged as a well-known signifier for navigation menu. As for clarity issues, the hamburger icon can be supported with a textual indicator, using the word “Menu”. The downside of using hamburger navigation is that it is less discoverable; whereas the main advantage of the hamburger menu is that it can contain a fairly large number of navigation options in a tiny space and can also easily support submenus, if needed.

Thus, the hamburger navigation is best suited for content-heave, browse-mostly mobile applications.

If users rarely care about navigating to specific sections of the app and are mostly content to digest whatever information is presented to them or are required to follow through a sequence to get to next level/category, then a hamburger navigation is appropriate. It also has the advantage of stealing a minimum amount of space from content, making it easier to use apps without being interrupted.

PRIORITY PLUS NAVIGATION

The Priority+ pattern was coined by Michael Scharnagl to describe a navigation pattern that exposes the most important navigation elements and tucks away less important items behind a “more” link. The less important items are subsequently revealed when the user clicks the “more” link.

Gaining popularity in last few years, priority plus navigation is a really good option for mobile applications which have multiple sections, categories and features at the same hierarchy level. It also claims to expose the most accessed features, thus bringing in more engagement and raising sticky quotient of your mobile application. Nevertheless, there is a downside to using an assumptive methodology to decide important features of your app at the beginning. What you think is the most important feature for your app users might not be possibly so. Burying navigation items, based on assumptions of what you think comes down on the users’ priority list might turn off some users and cause churn. With improving algorithms and data accessibility, we can hope that our assumptions as mobile app designers and developers are getting more accurate by the day. Further ahead on the road, the priority plus navigation pattern poses another issue. While it works well for apps which have a lot of items at the same hierarchy level, it still has to work upon the sub-navigation dilemma.

Two apps which show how to use priority plus navigation right include Facebook and The New York Times.

MULTI-LEVEL TOGGLE NAVIGATION

In most successful mobile applications today, a single navigation pattern seems to be insufficient. In fact, they implement multiple or at least two levels of navigation and while this is not very aesthetically pleasant always, it is indeed very functional and a stable way to keep the users on board. The multi-level toggle is basically just nested accordions or a set a Russian nested dolls, designed and built to reveal navigation menu items progressively.

In a multi-level toggle navigation, the user taps on the parent category to reveal children categories underneath, through a drop-down or plus sign. Once enough screen real estate becomes available, they convert to the usual multi-level dropdown to scroll and choose from. It makes the scanning quite quick and easy. At the same time, it also accommodates multiple levels of navigation in a neat manner.

Many e-commerce apps like ASOS, Amazon, Etsy, et. al. widely use the multi-toggle navigation in conjunction with hamburger or top navigation. Another great example of multi-level toggle navigation is INSEAD Knowledge App, which sorts and nests all the information neatly for its audiences.

OTHERS

Apart from these three, other honorable responsive mobile app navigation options include the old, simple, top navigation; off-canvas fly-out; and simple toggle, which are frequently used in different apps individually or in conjunction.

Conclusion:

Fitting a complex navigation into small screen real estate is unequivocally difficult. However, if you focus, prioritise and iterate your Information Architecture, you can implement an accessible and responsive navigation for your mobile app, without weighing down its functionality or making it overbearing or interfering with your app’s core offering.