Summertime often means rolling down the windows, heading outdoors, and enjoying your destination of choice. It probably means a cool drink and busting out the grill — but summer could also mean it’s time to pass on the hamburgers and find a healthier alternative.
It’s also a good time to do the same for websites and mobile apps. It’s becoming clear that the beloved hamburger menu (you know, the square button that has a stacked hamburger-looking icon inside it) — a staple in design patterns the past two years — tend to do more harm than good.
As designers, it’s often a goal to create the simplest, most minimalistic interfaces possible. We love to free up valuable screen real estate in any way possible. Back in 2013, even Facebook tested moving all of its navigational buttons into a single hamburger menu (also called a navigation drawer). Fewer options means fewer distractions, right?
Well, not exactly.
It turns out that these catch-all hamburger menus — much like the hamburgers we’re enjoying this summer — have some not-so-great side effects.
Luke Wroblewski recently documented the results after redesigning the Polar app, changing from a Tab Row menu (buttons along the bottom of the screen) to a hamburger menu. In the new design, the app’s pages and screens were swept away into the drawer. The results were staggering — engagement plummeted (by, well, a lot). Zeebox reported similar findings after switching from a tab row to a hamburger menu — their analytics data confirmed they found themselves in a pickle (another hamburger pun, sorry): “out of sight, out of mind” was an actual phenomenon. A hamburger menu made increased difficulty for people to discover or glance at new screens.
The takeaway? Obvious is better than simple. Hamburger menus don’t always cut the mustard (these puns are too easy).
As data from both the Polar and Zeebox examples clearly communicate, people will interact more with screens or tabs that are persistently visible.
Another alternative navigational pattern to the hamburger menu is the Priority+ menu, where the most important links are featured on a list first, with additional options — often dependent on screen or device size — are tucked neatly away in a “more…” menu alongside the top priority links. While perhaps not the end-all solution, they solve the issue of non-persistent navigation links.
Whatever the alternative, there seems to be a consensus: a hamburger menu probably isn’t the best option if increased user interaction is the goal (and it probably should be a goal). Consider testing a tab menu or Priority+ menu. Find out if your website or application really requires the level of complexity it has today, or if it could stand to go on a diet. Like the burgers you’re throwing on the grill this summer, use hamburger menus in moderation.
Addendum: This isn't to say hamburger menus are always bad. They're not. Sometimes, the best design choice is to intentionally keep focus on page content and calls to action instead of encouraging visitors to meander through a website or experience. When there's a simple focus and call to action, it oftentimes makes sense to tuck extraneous links into a menu and allow the page content to do the work. Other times, a hamburger menu is the most efficient way to contain a longer list of links. The best course of action is to talk to and observe real users. There's an appropriate solution for every problem.
About Steve Luvender
Steve Luvender is a Senior User Experience Designer at Liquid Interactive, where he works with organizations to design and implement solutions that delight people and create business results.