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"?
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).
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:
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.
Users expect clicking on menu to close
Users expect clicking outside to close
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.
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.
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.
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:
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).
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.
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?
The worthwhile answer here is:
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
