≡

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.

Comments 19 total

Anthony MarquezNov 21, 2019

I'm not quite well versed on the alternatives, I can agree about not liking the current popularity of this menu display.
ChernyNov 21, 2019

I hate it too, mostly from a developer stand point 😂

Why not use a horizontal scrolling menu?

Can you share some examples?
- ⚡️Nov 21, 2019
  
  Bear.app has a really neat one. It just turns on overflow-x scroll when the viewport gets smaller.
  - JoAlfieNov 21, 2019
    
    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.
    - ⚡️Nov 21, 2019
      
      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.
Jakub SarnowskiNov 21, 2019

Many of your arguments doesn't make much sense to me:

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.

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.

why hide such an import piece of your website behind a mandatory interaction

It's just a click/tap. I don't think it influences user experience that much.

Why not use a horizontal scrolling menu?

Because IMO this won't be obvious for most of the users.

Because it's recognisable

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.
- ⚡️Nov 21, 2019
  
  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.
  - Jakub SarnowskiNov 21, 2019
    
    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 😃
TrevNov 21, 2019
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:
- Again, brevity. As few items in a menu as possible. Things like a contact form could be moved to the footer (or just above the footer). We can try to make the most of pages to reduce the number of pages that we need.
- Avoid nested drop-down menus and put our menu in plain at the top of the page. Again, brevity goes a long way.
- If we really need a collapsing menu for really small resolutions, use the word "menu" for those edge cases where the hamburger is ambiguous.
Ryan SmithNov 21, 2019

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.
chillhumanoidNov 21, 2019

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.
Mr. DNov 22, 2019

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
Juan CarlosNov 22, 2019

Can you provide an example?. Real or mockup.
- ⚡️Nov 22, 2019
  
  Of what? A hamburger menu? Those should t be hard to find — nearly every website has it.
  - Juan CarlosNov 22, 2019
    
    No. How should your ideal menu looks like?. :P
KoaNov 24, 2019

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!
- ⚡️Nov 24, 2019
  
  Oh that’s a good one. And you know it works, because mobile apps use icons in the toolbar as well.
Tea ReggiNov 25, 2019

I was expecting this article to be about the authors disgust when ordering food at the local burger joint.
- ⚡️Nov 25, 2019
  
  🍔 > ≡

Add comment

⚡️ @matthijsewoud

I really, really don't like hamburger menus

≡

Comments 19 total

🍔 > ≡