How should hamburger menu open in mobile apps?

Question

I have seen many mobile apps which currently use hamburger menu as sidebar menu as it is very convenient and user friendly. Now, we have started to use it in our mobile apps design and it is very important how should hamburger menu open.

In android mobile app of StackExchange, as well as in all Google apps, it slides out on the current page and behind it I am able to see where I am. On Facebook's android application, is pushes the content to the left. The opened part is flat and without shadow.

Which one is the right way to choose and which is the main distinction between these two approaches?

Answer 1

The primary differences are :

1. The "Hamburger" icon gets displaced in the pushing-menu-to-the right instance. Incase of an overlay, the icon still remains at the same place.

2. For some users, especially users who have not yet caught up to the functionality of a hamburger(even though it is existent since the 80's and was developed by Xerox), the experience of the screen being pushed to the right might be a tad jarring. On the other hand, an overlay seems more close to the regular experience that users have on when clicking on tabs such as "View,Edit,File" etc.

3. Whether the app is responsive or not might be another factor(not so sure about this though).

Finally, this might be a good read for you :

http://www.linkedin.com/groups/Should-functionality-hamburger-be-standardized-22206.S.5841225973038596100

Cheese!

Answer 2

They are both indicating how you can get back to the other content (before you opened the menu). This is generally known as affordance. Since both methods leverage the user's ideas about how object should behave in the real world, they can be considered intuitive. I wouldn't say one is inherently better than the other, but if I was designing an application I would stick to one or the other rather than using both (consistency is also important).