The "hamburger icon has become one of the most controversial techniques in the web design right now. Designers and customers both hate these three little bars that are used to indicate a link to a menu. Now the question is: Why is it still everywhere?
Table of Contents
The icon is scalable and owns an ability to cleanly fit into a pixel grid. Originally a list icon, it has been forced to come into its current role; but since menu is simply a list of options, it’s logically correct to use a list item in this way.
Many designers argue on the value of the hamburger icon itself. In fact, there is a great deal of conflicting evidence as to whether the icon is even useable as a menu indicator or not. Some designers believe that the hamburger icon is easily recognized by a younger demographic, while others argue that an older demographic recognizes it. As such no definite conclusion can be drawn from the usability testing.
The only fact accepted universally is that users do not take the hamburger icon as a single link and this is probably because it is designed to appear like a group of links instead of a single thing.
First and foremost, the hamburger icon adds an extra action to your navigation process. When it should require a single click to reach a page, it will now take two. The rule of thumb for web designers calls for a maximum of three clicks, wherever possible. As such, the hamburger icon does not solve the problem; it just exchanges one problem for another.
Of course, this problem would remain intact with any navigation scheme laid out in this manner. It won’t matter if you use the word ‘Menu’ in place of the hamburger icon, you’ll still face the same hinderance; but yes, the hamburger icon also hides its contents. Considered from a UX point of view, users shouldn’t be made to take an action in order to find out what actions they can take. It would be difficult for them to share on Facebook or Checkout, if these options are not immediately in front of them.
The main reason why hamburger icon is still employed is because the designers and even the clients are not fully committed to a mobile-first approach. They want a regular website that can be squashed onto their smallest mobile screen.
The dissenters of the hamburger icon replace it with the word ‘Menu’, but they don’t realize the fact that user’s understanding about the button is not the issue here. It’s the hiding of navigation and users’ options which is creating the real trouble. In short, the icon is an indicator of our collective failure to fully embrace all the aspects of the mobile-first approach.
In order to truly resolve the hamburger issue, we have to accept that the Web now doesn’t work the way it used to be before. The rise of the mobile web demands to reduce the number of columns and drop some of the heavy images.
Facebook’s app replaced their hamburger icon with a tab bar and consequently they witnessed improved conversion rate; but Facebook has done something far more substantial than simply swapping the menu designs. They recently launched their Messenger app and compartmentalized their functions; by focusing on each app’s role, they’ve arrived at two simple apps rather than a single complex one. The reduced functionality has resulted in a reduced set of menu options, and thus, less need for a hamburger menu icon.
Quality apps are focused, and they’ve evolved to that level through a far more rigorous user testing than the Web is subjected to. To deliver such an app-type user experience, sites need to be simplified to a level where they present the users with a simple set of options and the problem of a complex menu never arises. If required, you may also break your architecture into manageable pieces too.
Only if the mobile-first approach is truly accepted and applied to design, content and information architecture, we will be able to consign the hamburger menu to history.
