Web Design Trends 2015: The Hamburger Menu Debate

With the increased development of responsive and mobile web design, there is no doubt that the hamburger menu, also recognised as the 'three horizontal lines' has become a widespread icon which has been receiving a lot of attention and causing much debate among many web design and UI experts. Despite its increasing familiarity with web/mobile users, many studies have suggested that the hamburger menu icon is still not a universally recognised icon. The concern among designers is that this lack of understanding can lead to users not being able to discover your content effectively.



Anthony Rose the co-founder of Zeebox found that after redeveloping their mobile app, that the use of ‘side drawer navigation’ i.e. navigation which is hidden or discoverable through one icon/button, decreased their user engagement by half.

So, let’s look at the pros and cons.



1. More Complexity/Inefficient

The hamburger icon requires that users will need to first click on a button in order to view the menu and then click again on the menu item they wish to be redirected to. This extends the user journey and instead of a ‘one click’ process, it is extended to ‘two clicks’ making it more complex and inefficient for the user.

2. Negative Impact on User Engagement

According to Anthony Rose, the co-founder of Zeebox, the ‘out of sight, out of mind’ approach to navigation can unfortunately mean that users are not exploring all of the content on your website. It reduces the ability for an ‘impulsive’ journey throughout the site as there are no prompts or indication of what content is ‘hidden’. Therefore, this could negatively impact the time a user spends on the site or reduce the number of web page visits.

3. Lack of Understanding of the Icon

Although the familiarity of the hamburger icon is constantly increasing with its continued use, it is apparent that not all user groups and audiences have an understanding of what the icon is used for. This may cause frustration among users and also limit their ability to find vital information on your website e.g. if a user quickly wants to find contact details and they are not immediately guided to that information, this could lead to a negative impact on sales enquiries and leads.


1. Cleaner Design

Designing for smaller screens can have its complexities and trying to fit all of the vital information onto a small screen means that the hamburger menu icon is a perfect way to provide more space and still retain all of the necessary components. It also means that decisions to be made on the priority of menu buttons do not have to be sacrificed and the full menu can still be accessed with the click of a button.

2. Avoids distractions

Although the hamburger icon has proved in recent studies to be a negative impact on user engagement, it could also be argued that it has its benefits if you have priority content which you would like users to focus on without navigating away from that page if they are distracted by content within the other menu items.

What are the alternatives?

Although the debate continues, the use of the icon will still remain and most likely continue to increase in popularity. However, testing on the use of the button has found that there are certain things that can be done to improve engagement, such as, putting a border around the three lines has proven to increase a users usage of the button. Another method that proved to be more effective than the standard ‘three line’ hamburger menu can be to simply put the word ‘Menu’ into a button.

Despite the icon receiving a lot of negative attention, it can work and in fact provide a benefit for certain user interfaces. Content heavy websites which depend on the user journey and page clicks may not benefit from the icon, however, portfolio websites or websites which require the user to focus on certain content for a period of time can use the icon to avoid user distractions and to avoid the user easily navigating away from the priority content. Likewise, it can also be useful for specialised menus, rather than for use with the main menu, such as a ‘my account’ menu or sub menus which do not need to be always fully on view.

Another instance when the hamburger may not negatively impact user engagement, is when it is used in a parallax website. This type of ‘one page’ website already allows for a seamless user journey and gives the user the ability to scroll in order to visit each section of the website, without necessarily navigating using the main menu buttons.

So, what are your thoughts?

Read 93462 times
Rate this item
(0 votes)