The Customer Experience Experts

Moving Away From the Hamburger Menu in Mobile Apps – What To Consider

Home / Blog / Moving Away From the Hamburger Menu in Mobile Apps – What To Consider

Moving Away From the Hamburger Menu in Mobile Apps – What To Consider

Over the past several of years, the hamburger icon (menu-alt-512) has been a go-to design convention for displaying mobile app menus. However, it is not without its controversies, receiving mixed responses on its effectiveness to promote discoverability and attract users to click the icon in order to see the menu. In a quantitative study conducted by the Nielson Norman Group, users were less likely to engage with a hidden menu. Additionally, those who did engage with the hidden menu did so later than when compared to interacting with a visible one. From our own research, we have found that unless users are already familiar with the icon, the hamburger is not universally intuitive. Instead, pairing the icon with the label “Menu” performs better to draw users’ attention.

Recently, several major tech apps have been moving away from using the hamburger icon at all within their app designs. Earlier this May, Spotify announced that it was moving toward an exposed menu at the bottom of the screen. While they are not the first app to make this change (i.e., Facebook made this change in 2013), Spotify was one of the recent app changes that caught public notice.

                                            Spotify Mobile App (iOS) – pre May, 2016                                     Spotify Mobile App (iOS) – post May, 2016

blog_Spotify_P1

 

An exposed menu, as seen in the latest Spotify app, improves discoverability of the different areas of the app by placing the categories directly in front of the user. While introducing an exposed menu does help mitigate issues created by a hamburger menu, there are some key points to take into consideration when transitioning to an exposed menu design.

Which categories should be included in the menu?

One of the notable differences between the hamburger and exposed menus is the number of areas on the app to which users have immediate access. An exposed menu allows for only five key categories within the primary navigation. This can be particularly challenging for companies with an extensive menu and/or multiple menu levels, which we will discuss later. In order to fit the menu into the new format, sections will need to be grouped and co-located into broader categories. Comparing an earlier version of Spotify’s menu with the current, the original menu of eight items was grouped into four categories; menu items such as Your Music, Settings, Profile / Friends, and Inbox are condensed within Your Library in the most recent app version.

                                               Spotify Mobile App (iOS) – pre May, 2016                                      Spotify Mobile App (iOS) – post May, 2016

blog_Spotify_P2

 

How best then to decide what the five key areas of the app should be? Consult your users. To unveil what users expect to find as the main categories, card sorting is an effective UX research method that asks users to identify what key areas they expect to see at the highest level of the app organization.

The use of a Home Icon

While there are technically five possible menu items that fit along the bottom, a clear beginning, or “home”, for an app experience is crucial. Without an anchor, the experience becomes disorienting for users, which we have seen consistently throughout our user testing. Furthermore, it takes additional time for them to adjust, as navigating between sections requires more effort for users. Users are forced to recall which section they had started from in order to move to other areas.

The LinkedIn app provides a good example of using a home icon, to indicate to users from where they can start.

Linked Mobile App

blog_Facebook_P3

Alternatively, apps with distinct logos use their icons as the home button, as seen below on the Airbnb and Artsy apps. With the placement to the right, the logos play the same role as the home icon in LinkedIn’s app. One caveat, however, is that users need to be able to associate the logo as the starting screen; using a house proves to be a more standard convention.

Airbnb Mobile App                                               Artsy Mobile App

blog_Airbnb_Artsy_P4

 

What are the most effective icons?

Without ample space to display a full label within an exposed menu, icons can be effective at drawing attention to the individual sections. Among their benefits, as explained by Andrea Bedford in an article called Icon Usability, icons are quick to recognize and visually appealing. However, as Andrea indicates, “icons must first and foremost communicate meaning” and rarely are icons universal. Often we have seen that icons which do not represent the content and/or category clearly can cause extra confusion. If an icon is not immediately recognizable, users are less inclined to explore the section.

In order to avoid confusion, it is key to ensure that the icons resonate with users, and they are able to understand the meaning of the icon. Additionally, simply adding a label to the icon can help reduce confusion about what content will be seen within that particular section.

Incorporating multiple menu levels

A challenge for complex apps is how to provide the range of menu items and/or secondary menu labels when they are only limited to 4 icons (assuming one is “home”), and this creates a need to find unique ways to build in these options.

The simplest version that we have tested is a labelled More button as the icon on the far right. This option performs well in testing, with the majority of users understanding to click the button for additional options.

Facebook Mobile App

blog_Facebook_P4

Alternatively, several apps, for example Flipboard, incorporate the secondary menu of a section as tabs along the top, creating an interactive experience that allows users to toggle back and forth between areas. Keeping the secondary menu level clearly separate from the main menu along the bottom minimizes confusion for users about which is the primary vs secondary navigation.

Flipboard Mobile App

blog_Flipboard_P5

Importantly, clear indicators let users track where they are in within the app. The red highlighting below an icon and the color changes of the text gives users context as to which sections they are exploring.

What to remember

As research suggests that the hamburger icon is not the easiest for users to interact with, companies are shifting to a visible mobile app menu as a way to promote discoverability of different areas. This change toward an exposed menu highlights the app’s content upfront to the users. However, there are some important points to consider when transitioning to this new format, particularly for apps with extensive navigation, making it challenging to showcase all the key areas within limited number of sections possible on the home screen.

Key takeaways:

  • Consult your users to determine what categories should be included in the menu
  • Ensure a ‘Home’ or an intuitive starting point is easily accessible among the categories
  • Test the icons to gauge users’ comprehension of what the images / symbols mean
  • Include labels along with the icons to avoid confusion
  • With multiple menu levels, include clear indicators (underline and colored text) to ensure that users understand where they are within the app

You can read more about Card Sorting and In-person Mobile Usability Testing that can help brainstorm and test potential designs.