Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This question isn't about placement of the hamburger icons nor is it about the their usefulness.

I've noticed on several websites/apps that the direction in which the hamburger icon opens a menu differs.

Is this difference tied to a screen size or is it becasue designers implement them without much thought to consistancy? Is it just a preference?

Here are some examples:

http://www.squarespace.com/ Hamburger menu slides out from right side of screen (at any screen resolution)

enter image description here

http://getbootstrap.com/ (mobile view) Hamburger menu slides down from top of screen enter image description here

Google Chrome Hamburger menu slides down from top of screen enter image description here

Facebook app on iOS Hamburger menu navigates to entirely new pane (no animations) enter image description here

share|improve this question
add comment

4 Answers

up vote 1 down vote accepted

The hamburger menu or a slider don't have any consistency, really. The implementations are very different from web app responsive design to native app more link. Both implementation use the same icon, three horizontal lines, to represent some sort of navigation, which don't fit on the current screen. This is equivalent with Microsoft more link, represented by three dots (...), to add more options that didn't fit.

The reason why sliding left or sliding right, keeping the menu navigation visible, isn't implemented on mobile devices - it would slide off the screen width or the font size would be to small.

The growing popularity of the menus implementation will surely streamline behavior in years to come, but today there is no real convention. It's just the same on a web page navigation. How do you see consistency there? There is none, but still users manage to find their way. The reason for that is the behavior of the control is the same. User expects extra navigation, and gets extra navigation. Where or in what direction isn't important.

share|improve this answer
1  
Drawing a parellel to web page navs is a good point. Thanks. –  Mark Bubel Jan 7 at 14:08
    
@MarkBubel You're welcome! It's often good to make cross reference and see if the bahavior exist elsewhere. –  Benny Skogberg Jan 7 at 14:24
add comment

The hamburger icon has been used to represent draggable items in the past and in present days. Therefore the classic representation of 3 horizontal bars should not be used without consideration. It can confuse users from all kind of background. Those who are familiar with mobile and those who are just discovering it.

Hamburger icon on a Scrollbar

Hamburger icon in Wunderlist

Hamburger icon in iOS7 Music app

share|improve this answer
    
hmm ... you are referring to the gripper icon, not the hamburger menu icon. They are two different things ... but you are right, they do share the same visual image. That said, there is a common use of the three-stack to represent an entry point to a menu of options for use in cases of limited space. –  Erics Dec 12 '13 at 23:53
    
I think the hamburger icon is well enough established as means to access a menu these days. –  obelia Dec 13 '13 at 1:15
add comment

The drop down is the older and more established convention. The side-slideout menu does have the advantage of keeping the menu more compact - a full width drop down menu, on a 7 inch tablet, can seem unnecessarily big and spread out. Of course a drop down doesn't have to take the full width, but in most cases it does.

I think it's mainly a matter of aesthetics and where your your break points are. Note that both of the examples you give work, they're both usable and understandable enough. The side-slideout is less conventional, but looks a little tidier at tablet sizes. If fact I bet the side-slideout was a created in response to the recent popularity of mid-size tablets.

share|improve this answer
add comment

Is this difference tied to a screen size?
Maybe. Depending on the screen size and the screen space available it'll be better to show the menu on the left, on the right, on top of something, moving the content to one direction and then showing the menu in that place (the side menu, on mobile, are represented using a hamburguer icon a lot of times, take a look: http://pttrns.com/categories/1-activity-feeds).

Or is it because designers implement them without much thought to consistency?
I believe that the consistency involved in this component is that it opens a menu that is a list, like "here is a list of what you can do", how to open it is a different matter, and I don't believe there would be a default behavior regarding direction since we use the component on very different situations.

Is it just a preference?
It definitely happens. As you are designing, there are aspects about function that you will think about, like the screen size, available screen space, the information presented on the screen, but there will be more subjective things like your taste or aesthetics.

What else could influence this decision?

Should the menu be fixed? If that is the case, you probably don't want it to sit on top of the content, maybe you will want to open it from left to right, pushing the content to the right and reducing the space available for it.

Where is the menu located? Is it on the right? Maybe you will want to open the menu from the right to left, so when it is opened, the cursor will be already on the menu area or very close to it. Look at your example from squarespace.com, after you click the menu, the cursor will be right on top of stories! You don't need to move the mouse too much, seems efficient to me.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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