44

We are using a hamburger menu on the mobile view of our responsive website, http://edmdesigner.com

There's a debate going on in the team:

a) Should the hamburger menu close if you click/tap outside of the open hamburger?

b) Or should it only close if you click/tap on the actual "hamburger icon"?

  • 30
    My two cents: I see hamburger menus as basically a type of modal. If I click outside the modal I generally expect that modal to close. – David says Reinstate Monica Jan 14 '16 at 14:16
  • 1
    I don't see a hamburger menu on that website at all. Which is probably a good thing :) If you decide to have one, please allow the user to close it by touching any visible area outside of the expanded menu. – Slavko Eror Jan 14 '16 at 18:49
  • 12
    If you want to force your users to click the icon to close the menu, please dim the rest of the page to indicate that it is not clickable. I dislike popups that force me to find the X or "No Thank You" link. – Chloe Jan 14 '16 at 19:48
  • 3
    I'm on mobile Safari, I can't see the menu OP is referring to. Could anyone point out where the menu is he's talking about? – Patrick Roberts Jan 14 '16 at 21:03
  • 1
    As far as I'm aware when you click outside any menu at all the menu should disappear -- makes no difference if it is a "hamburger" based menu particularly. Actually, is there any case where you leave a menu open, when one clicks elsewhere?? – Fattie Jan 16 '16 at 19:06
59

Some facts:

The image below is from the article How Do Users Really Hold Mobile Devices?. You can find plenty of other articles on the web about how users use a mobile phone. The data was collected by observing thousands of mobile phone owners remotely.

Dark Orange / Red - percentage of people who use their phone using thumb alone

Violet - Percentage of people who use their phone in cradle position

Magenta - two hands

Others were engaged in a call or other activities (see the article for details).

Pie chart showing that orange is the largest group, violet is not far behind (between them making up half of the total), and magenta is a small proportion of the whole.

The above results show that 60-70% people use a single thumb to use the phone. Mobile phone devices are getting larger and larger these days. The reachability of a single thumb is mostly on the lower part and towards the right.

The following image shows the areas where that thumb can reach: One Handed Thumb Reach

In case of a hamburger menu, it would be an extra effort for the user to move his/her fingers to the position just to close it.

So it would be better if they can close it by tapping anywhere outside it.

Another point is the user expectation. Most users are familiar with the hamburger menu these days, and they will expect it to close if they tap outside the menu (just like a pop up box).

Edit

Adding the suggestions from the comments-

A swipe to close/open option is also highly recommended.

Users are used to swiping it in and out , this can be done independent of the screen positions - so highly recommended.

  • 9
    Also consider 'swipe to open' for the same reason. – Gusdor Jan 14 '16 at 12:01
  • 4
    and swipe to close menu, too. – Mołot Jan 14 '16 at 14:24
  • 10
    The pie chart in itself is very confusing without more details. – JonH Jan 14 '16 at 15:22
  • 1
    I suppose you mean: "The reachability of a single thumb is mostly on the lower part and towards the left"? – KlaymenDK Jan 15 '16 at 11:58
  • 2
    A percentage of people do refuse to buy larger phones for this very reason; I typically won't buy a phone if I can't reach the far top corner with my thumb while holding it in the "thumb-only" position. – TylerH Jan 15 '16 at 18:48
20

Let's evaluate the scenarios

Users expect clicking on menu to close

  • If it closes on menu clicking => good
  • Whether it closes touching outside or not=> don't care, because they'll use the button. Moreover most people won't be expecting a toggeable component to remain open when you click outside it and even if someone expect this, redoing the action won't be a pain or feel like a blocking situation. Dropdowns, nav menus, modals,etc closes when touching outside them most of the time.

Users expect clicking outside to close

  • if it closes on menu clicking => Ok, it's expected
  • if it closes touching outside => Great, as expected.
  • if it DOES NOT close touching outside => Users getting mad

Conclusion and advice

So if you want to reduce the probability of users getting mad, let them close the menu by tapping outside.

Also you should prevent actions to execute (like links or buttons pressed) when the hamburger is open and the user tap outside it. Although it's likely that this expectation is not the same for desktop.

  • 8
    Your last point, preventing actions from executing when tapping outside a menu or modal to close it, is incredibly important. A lot of sites don't do this, and on mobile many sites are so heavy with elements that can be interacted with that it makes tapping outside to close almost useless. – recognizer Jan 14 '16 at 17:52
  • If only the stackexchange app reflected this, it would be a better app – Ferrybig Jan 16 '16 at 22:38
16

If you're going to use a hamburger menu, then it should collapse when you click or tap elsewhere (on desktop too, if the menu sticks instead of responds to unhover). Also on mobile other elements should not be activated when tapping off the menu.

But I think the correct answer, providing the best UX—which is your real goal, isn't it?—is: don't use a hamburger menu at all.

From deep.design:

The Hamburger Menu Doesn't Work

It's a beautiful, elegant solution that gets it all wrong, and it's time to move on

The hamburger icon has no information scent. That's a big deal.

  • 1
    True. And because of that, it tends to turn into a junk drawer. – Ken Mohnkern Jan 14 '16 at 22:22
  • Indeed. And a good article link. – Ken Mohnkern Jan 15 '16 at 1:20
  • 1
    @DevilsAdvocate That's ironic, given your name (that you were going to downvote for my playing devil's advocate). – ErikE Jan 15 '16 at 15:36
  • 1
    @ErikE What you did is not what "devil's advocate" means. Or are you saying you don't actually agree with your own answer? – PixelSnader Jan 15 '16 at 16:59
  • 1
    @Kevin I've updated my post event though it is really no different at all (in the context of the other, prior answers). Has that satisfied your rule-breaking annoyance? If not, please flag this post for moderator attention to be deleted (keeping in mind that at least 7 people have voted up my post so it's providing value to folks!). – ErikE Jan 15 '16 at 17:21
8

The hamburger "menu" belongs to the menu class of UI patterns. therefor if you look how menus behave, they close in both instances when the user clicks/touches it again or somewhere outside its hit area.

The same would apply to hamburger menus as well.

5

As the developer of Picnic CSS, I have been wondering the same for a long time. I decided on closing it when clicked outside, but in any case, the action should be made obvious.

To make it obvious, when the menu is opened, the rest of the content is obscured:

Picnic's image

A notable example of how not to do it is github. Visit it on your mobile, click on the menu and try to close it (you have to click the same menu item, and links outside still work).

  • I've been trying to make a sidebar menu that doesn't push the existing content but rather appears on top of the main content! The project website that you've linked does this really well and even disables the buttons of the main content. Really cool! Will I get this behavior (easily) by using picnic.css? – rohithpr Jan 16 '16 at 15:43
  • 1
    Thanks! However, Picnic CSS is a full library, so only including the nav might be tricky. But yes, it's there by default, just open the page and resize the browser to see it. You could also just copy the code for the nav and use it. – Francisco Presencia Jan 16 '16 at 15:52
3

Seems we're all in agreement here. I'll add another perspective on it.

Fitts' Law indicates that a larger tap target is easier to hit than a smaller one. So if you can make the entire background a target for closing the menu, then go for it.

1

Based on your current layout and menu, I would also forego the hamburger menu.

You have a pretty limited amount of options, with low letter count. I would make the menu collapse from 1 line in to 2:

EDMdesigner | API | APP | ECMS | JOBS | BLOG | Login 👤

EDMdesigner           Login 👤    
API | APP | ECMS | JOBS | BLOG

But if you want to use a burger afterall, definitely go for 'close when pressed outside'. When people press outside of the menu, this can mean one of three things:

  • they know (from similar cases) that it closes the menu.

  • they want to use a different element on your side, so the menu is no longer needed.

  • they accidentally mispress.

We're at the point where we can assume that the majority of users is 'literate' enough to know that to know that pressing outside of a menu will close it (see windows start menu etc) and those who don't yet know that won't randomly press outside of the menu, instead they will perhaps press the menu button again (if it opens when I click here, it must also close that way, right?) .

So we've got a majority group plus a minority that will press outside and get the expected effect, versus a (hopefully small, assuming your touch targets are large enough) minority that made a mistake. Would you sacrifice usability for the majority for the benefit of a minority of errors?

-2

The worthwhile answer here is:

What the heck is a 'menu'? It's not 1950!

Recall when software used to have insane numbers of "prefences" and stuff the user could "choose" - choose what font to display your text in! choose what font to display this menu in! choose opening sounds! choose the background color! and so on.

That is all ancient history, a mistake everyone learned from.

Ever since Google realised the correct design of a web page...

(ie: "NO design. In fact, NO NOTHING"...)

everyone's finally realized that, in a word, apps should be as simple as possible.

Try and convince me why you "really need" the items in the menu in question, and in each case I'll just say "You don't need that, users don't give a crap, users will never use it, only minimalist apps make money."

So for me the answer is "it should never be necessary to close that menu, since it should not exist". :O

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.