Hamburger Rant (5 reasons it's bad UX)

Hamburger header.jpg

I know this debate has come and gone multiple times, but I need to rant because, still in 2019 designers are using this design trend like it’s the next best thing since sliced bread. Here’s why it’s bad UX:

Disclaimer: My website uses a hamburger menu, not by choice. It’s a Squarespace template, and my ONLY option for responsive screens. Bummer I know. Squarespace, please read this article and fix this.

The placement of the icon is usually placed in the top corners, which is the hardest place for our thumbs to reach on mobile interfaces. As screens get larger, this problem is more and more persistent. it seems strange to put the main navigation in a hard to reach place. Almost as if  it’s not meant to be used.

Placing the main navigation in this place, also reduces the places other less frequently used functions could be placed.Functions that only need to be accessed occasionally. Like Profile, Notifications, or Settings.

Thumb zone.jpg

Read more: Steven Hoober wrote about the thumb zone in Designing Mobile Interfaces

There are solutions to avoid this placement issue. Such as using gestures to open and close the drawer or moving  the icon and functionality as the last item in a navigation bar at the bottom. Neither of these are proper solutions either because of the next few reasons.

Amount of taps

Part of a great user experience is completing a task with the fewest amount of taps or steps. With the use of a hamburger menu, the amount of taps is instantly doubled. We now are using taps that don’t move me any closer to our end goal. The more tasks we want to complete, the more useless taps.

Junk Drawer

Most often the menu used as what I’ll refer to as a junk drawer. Just like the junk drawer in our kitchen the hamburger menu is used to present us with every possible option the app has. There is no hierarchy or sense of relationship from one option to the other. We are just left to sift through all the crap we don’t want to eventually find that one thing we do want. To me, this isn’t a UX solution. It doesn’t solve a problem, it creates more problems.

You might argue that having all the options is a good thing, because we can always navigate to anywhere in the app no matter where we are. But the problem with endless options is we don’t read, we scan. Even reading this article at this very instant, you are probably only scanning and retaining about 20% of it. So scanning a list of 20 menu items might take us a few extra seconds to actually find what we are looking for. Slowing down a process to complete our task.

Junk Drawer.jpg

We don’t know immediately know where we can go

Moving through a mobile experience efficiently is key. If all of the features are hidden behind 3 lines we don’t immediately know where we can go within the app or what the app is even capable of. Because of this, we tend to explore less. Combine that with the junk drawer above and we may never find a useful and valuable feature you spent so much time and money working on for our benefit. Having a clear understanding of where we can go and an assumption of what we will see when we get there makes the experience much more engaging and useful.

Development time

Speaking of time and money, here is something as a designer you might not have even considered. The hamburger menu is a custom element that developers have to make, for iOS at least. Xcode has pre-made templates for a variety of other menu types, yet we want to spend more Time & money in development time to create a worse experience. That seems like money well spent. Though you might have saved money, as the UX designer probably spent less time designing this app than I did writing this article.

Bonus reason: Animations & Double menus

I’ve seen this more and more as well. We have a navigation bar on the bottom a hamburger menu on the top. I’m overwhelmed just thinking about it. This is when your app is trying to do too much and it becomes unusable. That's when it’s time to remove the app from our phone.

Now you’ve read many reasons why this navigation slows down the process and makes for a poor user experience. But, let’s make matters worse. Animating the drawer open and closed, greatly slow the process down even more. We now have to wait, and franking at this point it's impatiently, while a stupid animation completes before I can even begin my search for what I need.

What can we do instead?

There are many variations of menu options to choose from even without the Hamburger as one of them. But, before blindly choosing a navigation option, we really need to understand what this app at its core, is solving. Knowing and understanding this can help us choose the correct navigation option. If multiple options could be a solution, build quick prototypes and see for yourself how each one feels to navigate around. Ask yourself, Do I know where I am? Do I know where I can go? Do I know what I’ll find when I get there?

Do you agree? Think this is all wrong? Let me know in the comments below.