We all love these little treats on a responsive site. I’m not even sure when it became commonplace for three lines to represent a menu. It’s become a common icon across all devices and platforms that is understood internationally. A very powerful icon indeed.
Although this icon originated when space was at a premium and this would be a toggle for the menu, the latest trends in menu design are seeing this icon replace menus on larger screen devices too. I was always taught to keep the number of ‘clicks’ down where logically possible when it comes to user journeys and this goes against this somewhat. The positive side of this is that when you are in the menu, you are focused on what menu item you want. The negative side of this is that you are somewhat hiding keywords from your users that then have to hunt the homepage to find them. This is especially true if you have product / buzz words in your menus.
I do think the most recognisable variant of this icon is three lines of equal proportions. Sometimes it seems that people want to add bacon and cheese (extra lines), which I think is moving a little away from the instant recognition of the icon itself. Other adaptations try and brand the hamburger too much resulting in some hamburger-logo variant which is somewhere confusing in some instances.
Lots of people are moving away from drop-down menus because of the soaring traffic on mobile devices. I would imagine that a lot of that is because of the lack of a ‘hover’ trigger on mobile devices. The issue this creates is potentially different behaviours for menu items on different devices which is an interesting talking point in terms of consistency, user experience and also how the website / application is built.
Drop down menus have always highlighted the need for good hub pages at the parent level, which not all websites / applications address. I think its completely valid to obliterate levels of navigation on smaller screen devices as long as these hub pages are in place to allow for navigation to all of the same pages.
Mega navs have served a great purpose over the last decade or so for allowing for a lot of links to be shown in quite a small space. This is an evolution of the drop down menu and usually goes 2 or 3 levels deep. It’s considerably nicer than having a drop down menu within a drop down menu. But is this user friendly on a mobile? Is the only real way to do this feasibly and keep parent elements as clickable pages by having a ‘select’ form element for mobile devices? I’ve yet to see a mega-nav mobile equivalent that works well outside of this format.
I was always taught when I learnt to make websites that there should always be two ways of navigating a website. Usually, the logical place for this alternate navigation is the footer, but this is not always the case nowadays with footer menus not mimicking top level navigation in many cases. A lot of larger websites have legal and ‘boring’ navigation (legal jargon) at the bottom, almost like the terms and conditions on a print ad, or those mad ramblings of the end of a radio advert (which we all pay full attention too of course).