For years website navigation menus have been the same. A line of text links at the top of a page with dropdown menus below them so that users can quickly dig into the content of a website. They are simple, effective, and a little boring. Sure, we have dressed them up many different ways over the years, but the result is the same each time and the user gets the same old navigation they are expecting.
Then mobile came along. With smartphones came mobile sites and apps that needed a different and more effecieint form of navigation. Enter the “hamburger menu.” The hamburger menu is those three horizontal lines that you see in the top right or left corner of a mobile app or site. When tapped they slide out (or down) to reveal a robust menu for the user. Interestingly, for years the hamburger menu dominated mobile, making navigation much cleaner and more effecient, but standard website menus remained clunky, ineffecient and dominating too much space on the web page.
Then came along the idea of the mixed menu. Why not put a hamburger menu and traditional menu together? Users already get the hamburger menu, and the hamburger menu allows for so much more detail and customization that adding it to a stand website seems like the next logical step.
Here are 5 reasons I like the mixed menu (hamburger & traditional) approach:
- It helps the user focus. In a traditional menu you have to put all the standard junk into the menu and usually end up with 6 links across the top of the page. Typically the user only cares about three of those links and the other three are just taking up space. With a mixed menu you can take the three lonely, rarely clicked on, links and put them into the hamburger menu. Doing this will draw your users attention to the three remaining links that really matter to them, helping to make sure they find the right page on your website.
- It saves space. Space is unlimited on a website, except that its not. Though we can use as much space as we want, users will get lost if we don’t use it well. A mixed menu saves space in the context of the design, allowing for some nice spacing between elements and give the user a better experience on the site.
- Hamburger menus can do a lot. From having basic pages and subpages to containing maps and contact information there is a lot of flexability within a hamburger menu. You can drop a phone number in there, or even a tastfully done call to action button.
- It seamlessly ties into mobile.