The Silver Hamburger

Hamburger menus have a bad habit of putting entire pages of an app out of sight and out of mind.

If you have used a smart phone, you have seen and used the infamous Hamburger Menu. This is the icon composed of three stacked horizontal lines, and usually means "there's stuff under here". This surely came about from experience designers that needed to fit a lot of pages and data on a mobile app and ran out of space to put it. This brings up a problem regarding the volume of information and pages that should be presented to users in order to not cause information overload or hide information and options. Another problem with the hamburger menu is that it is an 'un-icon', in other words it does not give specific context to where you going in the app, or represent what you will find when you get there (that's why icons exist). This 'un-icon' status has caused it to be used as a catch-all for navigation pages, settings, account details, and anything else you can think of. A "Silver Hamburger" for anything you want to get into an app, but won't fit anywhere else.





If an app has a lot of pages or is a responsive website, a hamburger menu can make sense, but there are some cases where it is completely unnecessary and hides important content, especially in a native application. Hamburger menus have a bad habit of putting entire pages of an app out of sight and out of mind. Users have to remember what's behind the hamburger curtain. Let's take the Level Money app for example. I have used Level Money for a few years now, and love it. It's definitely the most useful money management app I've found and used over a long period of time (including Mint). One reason I love Level is its simplicity, there are only 5 main pages in the entire app, but for some reason there's also a hamburger menu with redundant navigation links. With just a couple of minutes in Photoshop, I was able to expose all page navigation, remove the hamburger menu, include a settings icon in the upper right corner, not lose any functionality, and not change a single page.

If you're still not convinced, head on over to Luke Wroblewski's website for more examples of this design adjustment in action.