≡
We all know the infamous hamburger menu. It's those three lines that stretch horizontally, that tries to look like a vertical list. It's become incredibly ubiquitous ever since website had to update their websites to support mobile resolutions.
And I hate it. I despise it. The user-experience is terrible; why hide such an import piece of your website behind a mandatory interaction? Do you have more than four items? Having more then four/five items in a menu will overwhelm many people, so maybe you should not even bother.
Why not show the four most important items, and hide the rest behind a menu? You don't have to hide your entire menu. Let people click on 'Contact' without first having to wade through the terrible experience of opening a drawer.
Why not use a horizontal scrolling menu? It's sleek, and doesn't overwhelm the user.
They're also nearly always at the top of the page. That was fine when phones where smaller, but with the current trend of tall and big phones (not to mention smaller tablets) it takes me having to reorient my hand to get to it.
Hamburger menus add bulk, they add useless complexion. They add a terrible interaction that should have never existed in the first place.
But I have to use it, because clients demand it. Because it's recognisable.
Do any of you have any tips how to deal with this?
I haven't written many posts. Would you like to read more things? About JS, ES6, ReactJS, Preact, (S)CSS? Might be able to whip something up if you want, so let me know.
Top comments (19)
In general I feel like adding steps to get to content is a bad idea. This is similar to image carousels. Some people feel like it makes contact more "compact" and easy to digest. This is true to some degree, but they also obfuscate the content and make it harder for users to find stuff.
A little brevity goes a long way to fix the negative side effects of hamburger menus.
That being said, they are a sort of standard and most people expect them now, but there are things that I can think of that would help:
I think a menu with three options is the sweetspot for exposed menus on mobile. If they're intuitive, you might also get by with emoji for the menu labels. In any case I feel like the hamburger is the "best of a bad bunch" solutions for the mobile web. I don't particularly like it but it does work.
There are many, many more important challenges to be resolved on the mobile web before we think about replacing something that works in general!
Oh that’s a good one. And you know it works, because mobile apps use icons in the toolbar as well.
Many of your arguments doesn't make much sense to me:
What's the difference when you'll have a horizontal scrolling menu? It will be still on the top of the page. I think the only solution for this case is a drawer coming from a left/right swipe from the edge of the screen.
It's just a click/tap. I don't think it influences user experience that much.
Because IMO this won't be obvious for most of the users.
That's the point. From the business/user perspective, It's a lot better choice to use a solution that everybody knows and understands, instead of reinventing the wheel and hoping for the best, that anyone will understand.
To sum up, I don't think this is a bad solution. Never had an issue with it. It's just a click/tap to open up the menu on mobile, and on desktop it's mostly not an issue. I'd rather see a hamburger on the top on my phone screen and see more of the content of the page, rather than a horizontal menu which most likely would need to take some height because it wouldn't make sense placing it next to the logo/branding.
I get where you're coming from here, and how I might look like I'm nitpicking. I am!
The thing with menu's at the top also goes for 'regular' menus; I wasn't very clear on that, my apologies. Definitely agree that a swipe from a side would be nice, but it would break convention so much that people will never figure it out. It's also used for forward/backwards navigation in most mobile browsers, so that's another hurdle.
A click/tap can really be a nuisance for a website. It depends on the implementation, of course. But I'd mostly just want to scroll down at my own leisure when I visit a page, or see content that I would click. Maybe I tap the menu button and it doesn't even give me the page I'm looking for. Maybe there's a scroll within the hamburger menu.
I know it seems nitpicky, but with nearly every site using it, it's more widespread then you might think.
This also goes into why it sucks that it's recognisable. A hamburger menu is now the default go-to option. Even if there would be a obvious better option, you won't get to implement it.
I agree that it sucks that there's not much interest in how to improve it because everybody just agreed that the hamburger is the standard and it's a waste of time trying to improve it / propose a better solution. But I guess when it comes to innovation - it's always a problem, as people need to learn it and get used to it, which takes a lot of time.
I also agree that a single click can be a nuisance and it would be great to have a solution that could allow us to get rid of it, but there are also many solutions a lot worse than the hamburger. I just found this argument to be too nitpicky 😄
If someone will propose a better alternative which would be intuitive for users and would require less interaction than the hamburger - then I'm all in of course 😃
I'm not quite well versed on the alternatives, I can agree about not liking the current popularity of this menu display.
I think the key reason for those menus is so that content can be seen on the initial page load. This is similar to "above the fold" for a printed newspaper so it can attract the user's attention. Devoting that space to a navigation bar or header may mean that users leave the site or do not view the ads, which are missed opportunities for business. I see the hamburger menu not for convenient browsing around the site (I agree, it is not convenient in that regard), but as a way to save the initial space for what matters and will engage with the user.
Most of the time when I browse a mobile site, I'm coming from an external link and only visiting that one page, so seeing the content without having to scroll is reassuring that they care about the user experience. If I have to scroll through too much, I'm usually not going to continue. It isn't out of laziness, it is out of principle. They got me onto the page with the promise of some content that I'm interested in and then they are making me work to get it. It makes me question what their intentions are and what they are trying to sell me.
I hate it too, mostly from a developer stand point 😂
Why not use a horizontal scrolling menu?
Can you share some examples?
Bear.app has a really neat one. It just turns on overflow-x scroll when the viewport gets smaller.
I'm not a fan of the bear.app menu - on mobile it looks cut-off, and if I hadn't come to it through this post I wouldn't have easily realised I could scroll it. It also doesn't scroll without touch (or keyboard focus), I originally opened it on my PC and resized the window, and I couldn't get to the end of the menu using the mouse.
That’s a very good point. On certain breakpoints you won’t see if there’s more. There’s a way to remedy that with some css magic (local background attachment), but it’s not really a perfect solution.
well when screen real estate is so physically tiny...something's got to give.
i think that a mini-menu fixed to the bottom would be the best compromise for mobile devices
I set up my ghost site to auto expand the sidebar and hide the hamburger on desktop/tablets in landscape. On phones it has the hamburger for ease of use.
Can you provide an example?. Real or mockup.
Of what? A hamburger menu? Those should t be hard to find — nearly every website has it.
No. How should your ideal menu looks like?. :P
I was expecting this article to be about the authors disgust when ordering food at the local burger joint.
🍔 > ≡