Slide Out The Hamburger Menu

Let me start by saying this: Hamburger menu is all good, absolutely no problem with menu itself, we will only discuss the trends and overdose of hamburger on the internet.

There is a history about why and when hamburger menu was created. Designers got a taste of this hamburger and they completely went crazy about it. Remember, it is just another site navigation menu which includes a few links and/or some text content. Hamburger menu is represented by a few horizontal lines, which on-click (or hover) can slide from either side of the screen displaying the menu options to choose from — it slides back when the selection is done. It looks cool and behaves even cooler. Now, you can even create hamburger with very lightweight code. Awesome, correct?

Not really! There is a big problem: this menu system is hidden to begin with (on page load) and there is a huge misconception that users know how to find it, open it, explore it, and use it like a pro. Nevertheless, this hamburger was included as part of almost every template created for mobile and almost all the mobile site owners and designers felt a need to use it.

Facebook can be blamed partially as they were the initial adapters (for mobile site/app). And of course, if Facebook does it, it has to be right and everyone should blindly follow it. However, keep in mind, Facebook later moved their primary menu items out of this and placed it right on the screen leaving only secondary links and options as part of the hamburger. Facebook had an opportunity and resources to rethink this approach and they were able to correct is, but not everyone else.

Mobile site design has its own limitations and challenges. Screen size is one of them. You need to fit a lot of site content within a limited size and that is where a sliding menu comes handy. Like it or not, we call it hamburger menu. Name is not an issue, you can call it whatever you want, just make sure, you use it (or not use it) wisely.

Hamburger is NOT a must have. No one is going to judge you based on the availability of hamburger menu on your mobile site.

Let’s start with keeping your mobile site focused and less crowded — easier said than done, but I will keep going. Let’s effectively optimize your mobile content. Let’s try if you can have all the menu options and other site content presented right on the screen. Let’s use progressive disclosure as much you can. Reduce clutter, confusion, and cognitive workload for the users. Keep in mind, creating a simple yet effective interface is always harder.

What if optimizing content doesn’t work — what if the site content you have genuinely requires a sliding menu with hidden items (AKA Hamburger), still, make sure you use it ONLY for secondary navigation and content. Primary navigation and options should still be easily accessible for users. Most importantly, don’t rely on hamburger, don’t ever assume that users will easily locate it (and effectively use it). Keep in mind, there could be a lot of back-and-forth between the site content and the hamburger sliding menu options. This could be annoying to users. If you do decide to use hamburger menu, don’t just start dumping everything under it you don’t find a place for.

Also, you don’t have to use the same overused hamburger icon, you are still allowed to use something else or just call it “Menu” which is a lot more obvious. Alternatively, you can include the “Menu” text with hamburger icon. Create your own icon based on the content you have hidden there.

It is also important that we talk about hamburger on tablets. Tablet menu and content should not be a leftover from mobile. Let’s avoid the same hamburger menu items and behavior when you render the site on tablet. For tablet, you do have a bit more real estate to play with. Your desktop menu could still work there — Try it! Mobile device screens are getting bigger and this is a good opportunity for hidden menu items to get refined and come out.

When you go to a restaurant, don’t just order a hamburger — explore the menu, you might find something better.

Get Expert Design Feedback: Improve UX!