How To Deal With Mobile Navigation And Why Do We Need Hamburgers?

We are used to making mobile menus so they do not fit the mobile screen. This is why we are hiding them and providing a switch for them. This is the state of mind of the current web developers. 

However, hiding a navigation is not a good idea. So let’s dig deeper into this topic and investigate the hamburger icon in general. After all, it has been a very popular topic in all online discussions. Is it good or bad?

But first, let me ask you a fundamental question. 

Why Didn’t We Hide The Navigation When There Were Desktop Websites Only?

Because, we are not stupid! We know that the navigation is there to perform the following tasks:

1. To serve as a map – users should easily understand the website structure and should be able to find what they search for.
2. To serve as a pointer – users should clearly understand where on the map they actually are. 
3. To advertise content – it is in the website owner’s interest that users don’t miss anything important.

Now tell me, how does a hidden navigation perform the above-mentioned tasks? You say in no way? Bingo!

If the navigation is concise, the problem is solved. We just don’t hide it on mobiles. But that is wishful thinking. 

There are websites with complex navigations and also devices of various screen sizes. 

How To Think When Designing The Main Navigation?

Design the navigation as simple as possible. When designing the website structure, apply the Mobile First approach. Simply forget about twenty-six items in the main navigation and about the second and third level. This will save your butt when designing the website. 

Design the website as if the navigation was not there. It is absolutely clear that on the smallest devices, we will have to hide a part of the menu. Therefore, we have to start designing websites without it. Just duplicate the navigation scheme in the content and place something like the site map on the homepage.

If you can fit the whole navigation in, show it on mobiles as well. It may sound a little funny, but the world is full of menus with 4 items that hide the menu under a hamburger icon just because it is cool. If the resolution is high enough, just show the menu. 

If you can’t show the whole navigation, consider using different design patterns than the show / hide pattern. I suggest you take a look at The Priority+ Navigation Pattern. 

And if nothing of this works, then choose the show / hide design pattern – the one we call a hamburger, based on the icon shape.   

Keep reading - by choosing the hamburger design pattern, you are very likely to run into a lot of problems. 

The Hamburger Icon Is a Troublemaker, But We Need it

The hamburger icon and hiding the navigation has recently been under fire from critics. I say that on some websites we can’t do without it and web design as a discipline needs it. 

It is well-known that icons take time for people to get to know them. The mankind was not born with the knowledge of what the play, pause and stop icons stand for. 

One of the main reasons we’re able to use these symbols (play, pause and stop) unlabeled is the fact that it worked its way into our cultural repertoire thanks to continued repetition on tape decks and VCRs.
– Andy Budd, In defence of the hamburger menu

The hamburger icon is relatively new and it gets even more complicated when you consider operating systems and their native apps. These apps use various icons for opening the navigation (hamburgers, kebabs, meat balls…). Users simply don’t know what these icons stand for. 

Earlier in the text, I said we need the hamburger icon in web design. Therefore, we have to educate users by using test labels. 

In the age of minimalism and flat design, it is also important to say that an icon should look like a button. 

Does The Hamburger Icon Reveal What It Represents?

Every icon is an abstract simplification of what it triggers. In the case of the hamburger icon, it stands for a list of items. This may correlate with a simple navigation with items stacked onto each other. However, it may also reveal a multilevel menu or a whole secondary content as we can see at the website of the Czech magazine Respekt. This is just not right. 

If we don’t want to discourage our users, we should use the hamburger menu icon as an abstract simplification of the content it represents. 

In connection with this issue – my Czech fellow Adam Fendrych is saying that it might sometimes be beneficial to replace the “Menu” label with something that describes the content we will find when opened, e.g. “Categories”, “Recipes”, etc. 

What To Do If a Hamburger Icon Must Be Used?

Some websites can display the whole navigation on mobiles, some do not even need it and some use a better navigational pattern - item prioritization. 

Therefore, we are left with websites where hiding the menu, or its part, is simply inevitable - especially when talking about really small screens, e.g. 240 pixels. Well, in that case we will need some icon to do that, won’t we? 

In conclusion, the hamburger icon is a good thing, but the following conditions must be met:

1. We should not use the icon for showing content it does not represent.
2. We should label the icon as “Menu”, especially when the target group is not “geekish”.
3. We should not hide the navigation on screens where at least a part of it can be displayed.
4. We should make sure the area around the icon looks like a button.