The three horizontal lines you often see on a menu bar denote a Sidebar menu—also known as the Hamburger Button. It may be cute and simple in its setting within a website design, but it could very well be causing more harm than good.
We now have public data suggesting the Hamburger Button could be costing you half your user engagement, among other things. You may be
asking yourself, "what is the hamburger button and does it really work?" Read this blog post to learn more.
The problems with the Hamburger Button include:
A lot of people don't even know what a Hamburger Button is. Why is that? First of all, it is small and hidden in a tiny corner of the screen. Then, the website design is so plain that it is hard to notice its very existence. Even if people are aware and value this feature, there's navigation friction due to it forcing people to first open the menu and only then allowing them to see and reach their objective.
Discoverability is "the ability of a product or service to be found by people who want it or might like it." The Hamburger Button is simply not noticeable. Unfortunately, it acts in accordance to this motto: "what's out of sight is out of mind." In its default state, the Hamburger Button and all of its contents remain hidden within the website design.
People need to first be able to identify the Hamburger Button as actionable — companies are supplementing the menu icon with a ‘menu’ label or tooltip, and they also have to feel the need to do so — which might not be the case in applications where the main screen offers majority of the value.
It is quite difficult to surface information about specific items since they are only visible when a user needs to navigate into other sections. A good example of this is the Jawbone UP app. It displays an icon representing the nature of the notification next to the Sidebar Menu button. The problem with this setup is that it does not scale well.
It requires the user to maintain more icons, and a designer may be forced to display a generic notification icon, reducing its meaning in the process. However, the Tab Bar (from Twitter), lets the user understand the context of the notification and navigate directly to the screen associated with it. This is makes it easier for the user and puts the Hamburger Button to shame.
On top of these issues, in platforms such as iOS, the Hamburger Button simply cannot be implemented without clashing with the standard navigation patterns. The left Navigation Bar Button would need to reserved for the menu button but we also need to allow the user to navigate back. Web designers will either overload the Navigation Bar - not even leaving space for the screen title - or force people to navigate several screens to get to the menu.
A website design that includes the Hamburger Button is incompetent, has low discoverability, is not glanceable, and clashes with platform navigation patterns. Your user engagement could nearly double with a solution that replaces the cute, little Hamburger Button.
