The Hamburger Menu - Eat me now!

History of the hamburger menu

Origin of the hamburger menu dates way back to the UI patterns of Xerox 'Star' workstation, one of the earliest graphical UI that became the setting stone for all popular UIs to follow through across two decades. Designed by Norm Cox who was responsible for the entire system's interface, the pattern was meant to bring out a contextual menu for the information displayed in a window at a certain point in time.

The visual of the icon was meant to mimic the menu list that would be displayed by clicking on it. At the time Norm Cox joked with the users to say they were AC ducts to keep the window cool.

Although this particular pattern did not take off in Mac and PC UIs, it was adopted recently by Google products specially the android UI. 

Even in desktop, it is found in the upper right corner in a chrome window.

With its original intent being much diluted, it is become a crutch to shove extraneous legacy features onto mobile apps without any thought given to its relevancy in the mobile context. Also an alternate use that emerged was to hide main navigation to save real estate for main content. The icon further popularized by Facebook when they hid their navigation in the hamburger menu to make more real estate available for news feed, became a standard with management taking the call to safely imitate Facebook. Untill when Facebook conducted A/B test and reverted to their original tab design that showed all major frequently related navigation upfront at the bottom of the screen, people realized the mistake and reverted back too. The A/B test revealed a significant loss of user engagement with the hidden elements in the hamburger menu that were otherwise widely used. Companies realized their mistake of blindly copying a pattern before they understood its real purpose without a deeper understanding of their user's preferences. 

Why not to use Hamburger menu?

There are 2 main reasons why alternative options to hamburger menu or its icon would be a better choice.  

Firstly people prefer most used functionality upfront where it is visible and easily accessible. 

People care more for usability than minimalistic clean layout. Out of sight is out of mind and so people would rather be content with options provided upfront than use extra taps to explore a hidden menu to get more options. Mobile users hate extra taps.

Secondly, people understand the word MENU much better than a 3 bar icon to relate it to its intended use. Loads of A/B testing between hamburger menu icon and the word MENU for side navigation,  by various companies around the world, reveal that most people prefer to use MENU as they understand it more clearly a as piece of navigation that will be brought out when clicked on it. In the A/B test done on the above options, users engagement was maximum with second option the bordered menu. 

Can it be used at all?

Of course it has its plus points. The paradigm of a slide out or off canvas menu creates space in the main content area to display more relevant pieces of information.

For information that is rarely accessed, hidden menu is a good option. The hidden menu should be used for settings and rarely configured pieces of functionality. 



It can also be used to show multitude of categories that the used would require to change infrequently. 

So things to remember while designing 

1. For functionality that is barely accessed and is best hidden unless really warranted, a slide out menu makes sense. 
2. Visually indicate the word menu instead of solely relying on hamburger icon as most people do not understand what it means. 
3. If the site has frequently accessed navigation do not hide it in the menu. Rather display it as a tab upfront for users to access.