The hamburger button. It is effective?

Reading Time: 5 mins. 23/10/2018

The hamburger button of a website is a menu that is hidden behind an icon and that is displayed when you click on it.
The hamburger button icon consists of three parallel horizontal lines, the most usual is to see it in the web’s responsive version for mobile or tablet (which is where it really comes from), but more and more websites are using it on their desktop version.
As we have commented, this menu comes from the web in its mobile versions, and is where it is most used, since the screen is much smaller and needs more space. So the menu items are not grouped or occupy a wide part of the screen, and they are hidden in those three ‘little lines’ appearing when the user clicks on them.
This tool helps improve the optimization of the web page and keep all the elements of a web design organized, so that we will no longer need to leave the sections at a glance. The Hamburger button has become a trend in web design, but it seems that it has arrived not to leave due to the help it provides in keeping the website organized and visually cleaner.
In addition, as we have said, the disposition of the elements tends more and more to look closer to the mobile devices such as tablets or smartphones, since they facilitate navigation and allow more space for content.
At the same time, this menu helps the user to find information more easily, as we already talked about once in the pill "The importance of the website loading speed", it is also very important to find the information you are looking for quickly.

In BookingCore we also trust on this type of menu and we have implemented this change in order to improve the experience of our users. If you still hesitate to join this trend, here are some examples of websites that we have created:

The main advantage of this menu is basically that the menu does not hinder the user's experience when browsing from your smartphone or tablet. And the advantage of using it in the desktop version is that the web design is much cleaner and clearer than with the normal menu.
In addition, in many cases it only appears when the user clicks with the finger, which is when he/she intends to browse the web through the menu.
Above all, if a website has lots of items on the menu it can give the impression that there is over information and the user does not read anything, turning it into a hamburger button can be one of the solutions to improve the design.
There are many benefits of use, but to summarize in three points, we explain the following:
  • A more practical and useful navigation: This design manages to collect all the elements of the menu so that they will only be visible when the user clicks on the icon, all this with the use of a single button.
  • Minimalist style for our website: Thanks to the use of a single icon to represent a menu that sometimes has more than 7 elements (although we advise against it), we can achieve a clean, simple and organized style on our website.
  • Easy adaptation to mobile devices: Being a simple icon, it is easy to adapt the design of our website to the different mobile devices in which it will be displayed while occupying a small space within them.

Although like all the good things in this life, it also has some factor that is still to be improved, but we are sure that how it is still a pretty new tool, will eventually achieve its maximum splendor. 

Due to the fact that it’s quite new, many users do not recognize this icon. In some cases, people engaged in online communication and marketing should remember that there are many people whose knowledge about the Internet is scarce or null, since they do not use to them. Although it is true that every time you see more websites and applications, the first thing we have to do is to understand our audience and to know if this icon will be recognized by the majority.
In this case, if this element is unknown, many of the users will not click on the menu and therefore will never access the different sections of our website. But, as we have said, it is still a new tool, and the user will be getting used to it. And if we do not risk developing new technologies, we could always get stuck with the same as always.
We will give an example of one of the best-known platforms of all time, Facebook, which was evolving in its design, starting with a two-line grid in 2008, then a three-line grid in 2009, to finally become three bars (the classic hamburger button) in 2010 in its mobile version, where many have taken inspiration.
After this fact, the hamburger menu was extended to both the app and the mobile web. And, in a few years, numerous companies, such as Coca Cola, Aquarius or Font Vella, began using hamburger menus on the web pages of their computer version.

What seems clear is that users are becoming increasingly used to its use, as we have seen in these examples of major brands known worldwide, so its use is an option that we should consider when establishing the design criteria of our website, due to its functionality and usefulness.
As always, all recommendations always serve to guide us to one way or another, but anyway we must analyze and reflect on who our client is and what they want to find on our website. In this way we can choose the best way to show them the content and get a better user experience.