Inconsistencies in hamburger menu direction a mobile vs desktop problem?

Question

This question isn't about placement of the hamburger icons nor is it about the 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)

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

Google Chrome Hamburger menu slides down from top of screen

Facebook app on iOS Hamburger menu navigates to entirely new pane (no animations)

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

The left or right placement of the hamburger menu button and it's sliding container is not bound to a specific standard.

There are platform recommendation/rules though, for example on iOS the design style guide suggest using it on the left side for maintaining all apps consistent.

But on the web it's placement is pretty flexible, without a need for standardizing it. As long as you are keeping your designs less distracting by moving navigational and other elements off the screen, available upon request, you have already solved a lot of user pain points!