User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Building a responsive site for a big consumer brand, and we're using a hamburger slideout menu from the right. This slideout will move the content off screen to the left, rather than sliding out over the page content.
I'm designing the hamburger menu to change to a directional arrow facing back to the right, but people on the team feel that it should face to the left, indicating that the user's view will slide back to the content.
Is there a convention here?
I will first leave this article, taken from WWDC 2014, which discusses Apple's attitude on using hamburger menus: http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus
Here is another article that actually discusses user engagement in a real application that switched to a drawer (aka: hamburger menu) and then promptly switched back when they realized what they had done: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
If a drawer is still the "right choice" for your team, here are a few points that come up based on your description.
You are hiding all the content, not just sliding it over. Traditionally a drawer will slide out but still show the application "off to the side". Such as Mailbox:
What you are doing is changing the view. The fact that your drawer is sliding in from the side, the top, the bottom, or wherever, does not matter. Once it is "open" it consumes the entire screen and is, therefor, an independent screen; it's not a slide out menu anymore.
You might as well have a button labeled "Menu" that reloads the screen to the show menu, and a button that says "Back" (or similar) to return to your content screen. It does the same thing and is actually much clearer.
Your swapping a non-directional action for a directional action. A hamburger menu has no direction. Given the below, which was does it act?
It doesn't. Once the menu is hidden you are swapping it out for a directional icon:
Why is there direction to one action, but not another? If your button "points" to imply the direction it will close, it should point to imply how it will open too.
By not totally hiding the contents (see the point above) the hamburger icon is still visible and is still a target for the user to hit to close it. "I hit it to open the menu, perhaps I can hit it to close it... sure enough, it worked!".
The directional arrow makes no sense anyway, since you've removed all context that this is a drawer. The user doesn't know there is content that has "slide off to the side" to make any sort of direction meaningful. A button that reads "Close" (or "Back") is meaningful.
If an arrow must be used -- your content slid in from the right, and closes to the left. The arrow points left.
How do you best solve the problem? In order of usability:
There isn't really a need to change the look of the icon, as users experienced with "hamburger" menus know that most of them close the same way that they are opened: by pushing the hamburger button.
However, if you really want to change the button icon to help improve the user experience by providing more information to the user, then why not change the icon to indicate the function of the button - that is, to close the menu (i.e. an X). The close icon is more or less ubiquitous, so if you change the button to an X or something similar, virtually every user will understand that the button will now close the menu.
My gut feeling is that if the whole page slides to the right, revealing the new menu, then the arrow facing left makes sense, because I want the page to slide back to the left. (That's also consistent with left arrow typically representing "Back").
If the menu covers up the content, then I want that button to tell the menu to hide itself again, in which case the right arrow makes sense. I've seen a lot of menus like this that hide the content, so that makes sense to me.
