An Introduction To Hamburger Menus
Take a look at what’s on the VPS.Net menu today.
You may not be familiar with the concept of a hamburger menu, but you’ve probably used one in the last 24 hours without realizing it. This navigation shorthand is commonly used on mobile devices, despite being surprisingly unpopular with many people. Its growing usage reflects the breakneck rate of web design evolution. The majority of online traffic now arrives from mobile devices rather than conventional desktop or laptop computers.
What are hamburger menus?
Also known as sidebar menus or hotdog buttons, hamburger menus are named after their appearance. A button contains three parallel horizontal lines, to suggest the presence of multiple options. These are usually displayed prominently in the top corner of mobile home pages and subpages. Moving or clicking the mouse over this button will reveal a drop-down menu. This offers shortcuts to other pages, or may contain a different set of navigation options.
Seriously, who came up with this?
Hamburger menus were created in the early 1980s for Xerox computers, and have since been widely adopted to resolve the challenge of mobile-friendly site design. The classic horizontal menu bars of desktop websites don’t replicate well on small portrait-oriented mobile devices, where vertical displays work better. However, with some smartphone screens only 360 pixels wide, even vertical menus would occupy a large percentage of any available space.
Not all gravy…
Of course, hamburger menus have their drawbacks, not least requiring two taps on separate parts of the screen. The drop-down menu obscures anything beneath it, while the unfolding can be slow or jerky if the website hasn’t been designed efficiently. Because the menu’s buttons or icons are still quite small, it’s surprisingly easy to accidentally click the wrong link or call up part-submerged content below the menu.
Perhaps more troubling is the fact that desktop and mobile sites end up with different appearances and navigation systems – which have the potential to cause confusion among people familiar with one version but not the other.
There is also evidence that hamburger menus reduce the effectiveness of content. The requirement to click on a button to reveal sub-pages effectively hides this secondary content, making it less discoverable and slashing the number of people who will ever view it. One UK survey reported a 50% drop in engagement time after introducing hamburger menus – people simply didn’t realize a button had replaced the menu bar used to access sub-pages.
All the fixin’s
Nonetheless, hamburger menus do offer some advantages. Because drop-downs are only fully displayed when requested, individual page design can prioritize content over menus. That’s beneficial for both loading times and modern attention spans, with various surveys and reports indicating consumers will abandon a website after three seconds of loading. Since the usability of a website is now factored into search engine results, hamburger menus can improve SEO rankings and push a site up the results pages.
As the adoption of hamburger menus grows, more and more people are becoming able to use them instinctively. Adding the word “menu” beside the button can also clarify that additional content is available by clicking or moving the mouse over it. After all, until a more effective method of harmonizing desktop and mobile sites can be found, hamburgers are likely to stay on the menu for some time to come.