Back to all posts

Hamburger Menu Alternatives for Mobile Navigation

If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.)

Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for this very problem. None of the ideas listed here is better than the others, their viability and performance obviously depend on the content and the context.

“Viability and performance depend on the content and the context.”

1. Tabs

If you have a limited number of sections in your website or app and users should be able to quickly switch between these sections, a tabbed navigation might be the solution.

 

Tabs seem to be the simplest navigation pattern, however, you need to consider a few things when designing them:

  • You should have no more than five sections to display
  • One of the tabs should always be active and should visually be highlighted
  • The first tab has to be the home page or home screen and the order of the tabs should relate to their priority or logical order in the user flow
  • Tabs can either be displayed at the top or at the bottom of the screen, based on the context or platform (however, bottom tabs are now a pattern in Android, too)
  • Icons without labels only work for common actions with really well known icons and for interfaces that the users use frequently (e.g. social media apps)
  • More tips on designing tabbed navigation

Examples: LinkedIn and Google Photos

Icon-only tabs on LinkedIn and icon+label tabs on Google Photos

Icon-only tabs on LinkedIn and icon+label tabs on Google Photos

2. Tabs with a ‘more’ option

When there are more than 5 main sections, a practical solution might be to show the four most prioritized sections and have a fifth element list ‘everything else’:

 


14j5uSBlUujdP39uQioxbeA

The design principles for this solution are basically the same as for simple tabs. The ‘more’ item can either link to a navigation page or work as a dropdown menu with the remaining sections:

 

You could argue that the ‘more’ item isn’t better than the hamburger menu (it’s kind of hidden and its label does not refer to its content at all), however, if you have made the prioritization right, most users will be looking for one of the four visible items anyway so the navigation experience for the majority will still be improved.

Example: Facebook

News feed, friend requests, notification, and search is always available in the header, all the remaining functionality is available from the ‘more’ menu on Facebook

News feed, friend requests, notification, and search is always available in the header, all the remaining functionality is available from the ‘more’ menu on Facebook

 

3. Progressively collapsing menu

A more sophisticated version of the ‘tabs + more’ navigation is to design a menu that adapts to the screen width, shows as much of the navigation as possible, and puts everything else under a More item if necessary:

1jT8yOdJXH7lN5JxfqYYfEA

 

This means that the More menu contains more items on a lower resolution?—?items ‘jump’ under More when there’s not enough space to show them. The flexibility of this solution provides a better experience than the ‘tabs + more’, especially on in-between screen sizes.

Example: BBC

bbc responsive navigation

The main menu of BBC is rendered according to the actual screen size to always show as many items as possible

4. Scrollable navigation

If you have a number of navigation items without a big distinction in priorities and having a ‘more’ category would be a bad compromise, another strategy is to list all the items in a scrollable view:

1fdte_FzZ0uh-f-3t5GrwwQ

 

The downside of this solution is that still only the top few items are visible without scrolling and all the remaining ones are off the canvas. This is, however, an acceptable solution when the users are expected to explore the content, e.g. in a web shop or news categories.

As far as visual design is concerned you need to make sure to provide enough visual hints to suggest that there are more elements available upon horizontal scrolling (e.g. by fading and/or off positioning the last visible element).

Examples: Medium and Google

The main categories can be scrolled at smaller screen sizes on Medium.com

The main categories can be scrolled at smaller screen sizes on Medium.com

Categories of the Google search results page are available in a scrollable view

Categories of the Google search results page are available in a scrollable view

 

5. Dropdown menus

An uncommon but interesting pattern is to use dropdown-like menus when the visibility and accessibility of the other sections is not essential:

1nKlPdP8w6xPmdQCsguwfJg

The dropdown menu actually has a double role in this case: first, it serves as a page title and the downward arrow suggests that there’s a possibility to quickly switch to similar sections. Although the options are hidden in this case, the dropdown design suggests that the list would contain options that are either siblings or children of the current page (and it should primarily be used for this purpose).

Example: Barnes & Noble and Duolingo

When browsing books, the current category and the navigation/filtering options are always available in a dropdown menu on bn.com

When browsing books, the current category and the navigation/filtering options are always available in a dropdown menu on bn.com

While not a common interaction for most users, Duolingo allows to quickly switch between the languages you practice via a dropdown

While not a common interaction for most users, Duolingo allows to quickly switch between the languages you practice via a dropdown

 

And sometimes, surprisingly, the hamburger menu might be a good choice

Since the main downside of the hamburger menu is its low discoverability, it’s recommended to consider one of the alternatives when it comes to designing the main navigation menu. However, when designing secondary navigation options, this pattern might be an appropriate solution.

If the primary options are available as prominent on-screen call to action buttons, the hamburger menu seems a good place for all the secondary navigation:

1PYJ_Hvs7ng9abfl-dLKDpQ

 

This pattern can be used when the main navigation is designed around a user flow and the related options are clearly available on the screen. Uber might be a good example:

 

1hPnxkp_z9oEzgl-6mbSuZA

Since everything about this screen is designed to request a car, secondary options such as History and Settings should not be available more prominently than from a hamburger menu.

Google Translate is really similar to this:

1BpNyxtQQpD2Hwj8xBU8bTw

 

Since the main functionality (switching languages and entering text to translate) is the most prominent part of the screen, the hidden menu is a great place to host sections like Help and Community.

Conclusion

“There isn’t a one-size-fits-all solution for mobile navigation”

There isn’t a one-size-fits-all solution for mobile navigation, it always depends on your product, on your users, and on the context. What works well for others might not work for you and vice versa. However, the foundation of every well designed navigation is information architecture – clear structure, priorities, and labels based on your users’ needs. So why not start finding the most efficient mobile navigation for your product today?

 

This article was originally posted at:
https://blog.marvelapp.com/hamburger-menu-alternatives-mobile-navigation/

Can we take you from stuck to unstuck?

We'd love to hear from you

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.

Got a problem to solve with your service? 

We'd love to hear about it. We can add value to any business that has a digital product/offering.

Book a FREE 30 min consultation

You can also call +44(0)20 3653 1310 or email us

Book a FREE 30min consultation