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"?
Answer
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.
No comments:
Post a Comment