Open Search

Hamburger menu on desktop

June 16, 2016 9:49 am
Categorised in:
Reading Time: 3 minutes

Should I use a hamburger menu on desktop?

You’re asking me if you should use a hamburger menu on desktop? What, on like a proper site? A brochure site or an ecommerce site? You can feel free to do what you want, but be aware of the usability implications of hamburger button based navigations:

  1. There are many arguments as to how effective hamburger nav buttons are for letting the user know that there is a menu that is but a button tap away
  2. If you hide something from the user you must be prepared for the fact that users will not use it. Not so much of an issue for content inside an accordion, but for your main navigation? Yeah, I’d tread carefully there. And when I say “tread carefully” that’s actually a code word for “No, never, never, are you mental? Don’t do that”.
  3. As a user I hate having to click more than I need to. If I am likely to be navigating around your site, those extra clicks and animation time add up and make me as a user feel frustrated.

Well I’m going to do it anyway…

Ahh, so you like sites with high exit rates. Well good for you. If you are going to hamburger anywhere remember the following:

  1. Put the word menu underneath your chosen hamburger symbol. This is so people that aren’t entrenched in Internet design trends day-in, day-out can also derive some semiotics from your appropriated symbol.
  2. Put an outline around your hamburger symbol and menu text to make it look like a button. This is so people that aren’t entrenched in Internet design trends day-in, day-out can further derive that this is a button they should push.

Will this make it easier for users to use my hamburger nav on desktop?

I still don’t know why you are persisting with this. Lets say we are excluding resized windows and we are dealing with a minimum of a 1024px window with a height of 600px. With that amount of space you can have a menu running horizontally across the top, or a vertical menu down either side. What content do you have that is so important that you can’t use one of those spaces? Is the answer is “I really wanna make this image really big”? Well stop it. Visual design should not trump useable design.

Are there any instances where I could use a hamburger menu on desktop?

I can think of two use cases that I would test it

  1. You have a one-page site. Mostly the user will scroll down through sections and your hamburger will jump them to relevant sections. The user has little opportunity to miss swathes of content
  2. You have a site where you want to immediately direct the user down a conversion funnel e.g. you have a site search for holidays, or products on eBay for example. The page-to-page navigation is secondary at this point and could almost distract the user from the journey that you want them to take to convert. In this instance it could make sense to de-prioritise the navigation. I am not advocating removing site navigation entirely here at all and I personally would be testing the shit out of this first before I rolled it out because of negative implications listed above.

Anything else?

Yeah, I’m still not sure hamburgers are the best solution on mobile anyway. I’m quite a fan of overflow scroll on the nav container so that when it breaks past the width of the window the user can scroll it. Your navigation is visible to users. Your most important pages should be on the left and visible to users without having to overflow scroll where necessary. As a solution it feels like it’s a step up from hiding everything with a hamburger but as always test, test, test.

you do know this site has a hamburger menu on desktop, right?

This site is just a blog mate, it’s rolling content. I have no pages. No portfolio, No About, no cookie warning, no t&cs. Just categorised and chronologically ordered posts accessible from a side navigation. And my hamburgered side nav is open by default on desktop (except on specific post templates). But thanks for checking.

This joint was penned by @elmarko