Over the last year or so there have been a lot of articles all decrying the use of the hamburger icon for navigation. The icon itself isn’t a hamburger, it’s just three horizontal lines that resemble one.
In the early days of the iPhone and rise of mobile sites, the hamburger icon was a popular choice for showing a menu. And depending on which sites and applications you use, it might still be.
For something so hated, the hamburger icon for such a long time was the default choice for designers and developers. Then like all hate trains that start on the internet, it becomes cool to jump aboard and start hating something because everyone else hates it too.
The problem with all of these articles and so-called A/B tests painting the hamburger icon in a negative light is they all suffer from severe confirmation bias. The author starts out with the viewpoint that hamburger icons are bad and any “tests” will be skewed to strengthen the authors point.
A familiar argument
This whole hamburger icon debate reminds me of the late 2000’s when people started hating on the use of tables for layout. While I agreed with many of the arguments about not using tables for layout we ended up causing a lot of damage.
The message started to get mixed. Instead of the initial message decrying the use of tables to create the structure of a site, people started interpreting the use of tables altogether as being a bad thing, even for tabular data.
As a result, developers started using DIV’s and CSS styling like display:table to replicate what tables did using DIV’s. The problem was never tables, it was the fact they were being abused and like all hate trends, the message spread and soon people were hating on tables but couldn’t actually tell you why.
The ironic thing is when the hatred of tables started in favour of CSS solutions, people soon realised they took the flexibility of tables for granted. It wouldn’t be until a few years later that we could actually achieve similar things that we could in tables thanks to things like CSS Multicolumn’s and Flexbox support.
It’s a generational thing
Yes, a hamburger icon to a 50 year old Internet user might be confusing. A hamburger icon to a 15 year old? Not confusing at all. Why? Because all of the apps and sites they use most likely use the hamburger icon.
I am sure there probably was a point in time where the magnifying glass was confusing to users. These days the magnifying glass is universally accepted as a standard part of UX to signify searching. But perhaps in the 90’s users might have confused it for being able to magnify text in a page.
I realise I am not backing anything up with actual data or tests, but I did take the liberty of asking a few friends and colleagues if they have ever been confused by the hamburger icon.
Not one person I asked (which was about 7 people) said they have ever been confused by the icon. I asked my dad who is in his 50’s if he knew what a hamburger icon was and he just gave me a blank look.
We’ve been conditioned to know what the hamburger icon is. Anyone in the target demographic for a social networking app or website which uses a hamburger icon will not be confused by the use of such an icon (unless you’re putting it in a weird spot or doing something else).
While the hamburger icon might not be as nice as say a condensed menu, it still is as functional in my opinion. As much as people like to hate on hamburger menus, there are not that many decent alternatives that do any better of a job to not confuse or exclude users in a particular demographic.
Of course if you provide users with both a menu and a hamburger icon, most will choose the menu because it saves time and it’s right there. A hamburger menu icon introduces an extra step because the items are hidden off of the screen and need to be triggered to be revealed.
We are intrinsically drawn to text over imagery, the web started out as just text. But that is not to say that users thanks to small-screen devices like the iPhone can’t learn new design paradigms.
Conclusion
I agree that there are suitable solutions that do not involve using the hamburger icon for navigation. If you can, providing a simplified and text based menu will always be the best choice. Even consider reevaluating if your menu has too many items in it as well.
However, if you’re dealing with incredibly long navigation menus (especially using nesting) the hamburger icon and navigation draw approach is one of the easiest and best solutions out there (until something better presents itself).
