Hamburger menus are becoming increasingly ubiquitous as responsive design evolves, and the UX community is taking notice. Luis Abreu’s article in Smashing Magazine and Josh Constine’s article in TechCrunch have both recently addressed some of the pitfalls of using this menu option on mobile sites. At Cooper we’ve noticed another concerning trend: the use of hamburger menus on desktop designs. Why are designers using these menus? Could it be:
- An assumption that hamburger menus create a modern website feel, or convey mobile savviness?
- An attempt to simplify navigation or create the cleanest page possible?
- Desire for consistency between mobile and desktop versions of sites?
- A “design once” approach -- an attempt to come up with one elegant design that works across all breakpoints?
Although there is an elegance involved in creating a single design that is relatively consistent across all screen sizes, the difficulty is that as troublesome as hamburger menus are on mobile, they are arguably more troublesome on desktop. We need to remember that people are using the mobile and desktop experiences at different times. Consistency of the information architecture matters, but consistency of menu design can vary by platform. We also need to recognize that people care more about clarity than simplicity. It’s not helping your desktop design to hide the user’s key choices behind a hamburger icon.
Top 4 Reasons for Not Using Hamburgers on Desktop Designs
Cooper has deep roots in both UX design and research. While I was ranting about why these designs were horrible and broke long-standing guidelines for good UX, our amazing research team was actually testing some of these designs for clients. The results have not been favorable. Users have strongly preferred standard desktop menu designs, where menu items are exposed on the page, to hamburger menu designs, where menu items were hidden behind the hamburger icon. Here are four reasons, supported by our research as well as our design knowledge, not to use hamburger menus on desktop designs.
1. When Users Search, Hamburger Menus Are a Last Resort
Our user studies have revealed that hamburger menus are consistently a last resort for users searching for a specific piece of content. When looking for something specific on a website, whether on mobile or desktop, users will explore the body of a page before resorting to a hamburger menu. They will force themselves to use what’s available in the body of a page, making many wrong turns in the process, when the answer to their problem is sitting there hiding in a hamburger menu. Example: Hyper Island. There is so much to explore on the body of the page that users are unlikely to use the navigation to aid in a search for specific content. Don’t expect users to ever access a hamburger menu on a content-rich page such as this unless they’ve exhausted all other possibilities. If you do use a hamburger on a page like this, ensure that all items in the hamburger menu are also accessible via on-page promos.
2. When Users Browse, Hamburgers Hinder Discoverability
If you have content that users are unlikely to know exists, putting it in a hamburger menu is extremely inadvisable. When options are hidden behind a button they become invisible until users take the additional step of clicking. Particularly if there is a lot of content in the body of the page, users are unlikely to ever touch a hamburger menu to try to find more. Hamburgers are also not effective when people deep-link into content. Although many designers repeat their menu items in the body of their homepage, these navigation options are often not repeated on deeper pages. Thus, on deeper pages, users may never discover that additional content exists. Example: HSBC Premier Your Personal Economy. Without going to the hamburger menu, there is no way for the user to know that there is also content about “Legacy” and “Family”.
3. Hamburgers Create Inefficiency
Hiding a full navigation structure behind a hamburger menu when it’s not necessary creates an extra click for users each and every time they want to navigate to a new section. Example: SquareSpace . Imagine as a user you want to know both about pricing and what templates are available. The hamburger menu doubles the number of clicks necessary. Is the simplicity worth it?
This problem is worse on sites with large amounts of content and broad/deep information architectures. Having to house a complex menu structure within a drop-down hamburger menu can create unwieldy designs that can create frustration for users.
4. Hamburgers Cause Excess Cognitive Load
Hiding a full menu structure behind a single icon forces users to remember where options are. This places undue load on a person’s memory. Recognition is easier than recall. This means that it’s much easier for a user to have their options laid out in front of them in a full menu than to force them to remember the existence of menu options hiding behind an icon.
Example: HUGE. Out of sight, out of mind. As a user who navigates to the “Work” page, it’s quite possible that I’ll forget there is an “Ideas” page to explore, because it’s not visible as global navigation.
A Desktop Hamburger Menu is Less Egregious When...
Though we would not typically recommend going this route, there are some desktop sites where hamburger menus may be more acceptable.
- Familiar content: When a site has fairly standard navigation options (e.g., the site is a news site, and the user knows it is likely to have a Business section, a Politics section, etc.).
- Browse-oriented design: When a site is much more oriented to browsing for interesting content than seeking out specific content, and it’s not critical that users be able to find the content in a hamburger menu (or they can infer that only supplemental information is in the hamburger menu).
- Hamburger menu content repeated: When a site repeats the items of its hamburger menu -- even the deep IA items -- in the body of the page, so that it’s not critical users see the menu to access important content.
- Minimal page design: When the pages of your site are extremely minimal and users have no navigation choices but to use the hamburger menu. (This is still inefficient, however!)
- Minimal information architecture: When you have so few pages in your IA that users won’t have an issue with recall, and/or won’t be navigating much between sections.
The Bottom Line
Why are we making it harder for our users to find content that’s relevant to them, particularly on desktop designs where screen real estate is not at a premium? Just as there are very few circumstances where a hamburger menu makes sense in a mobile design, there are even fewer circumstances where they make sense in a desktop design. Designers, let’s not take the easiest way out in this case. Though it may be easy to design a single menu and be done with it, I implore you to consider how to use the space available to you on mobile and desktop (and all breakpoints between) as separate, but related problems. The key is designing a single information architecture that can be exposed through different menu designs, depending on the context.
Recommendations for Those Considering Hamburger Menus on Desktop
- Test, test, and test some more! If you are considering using a hamburger menu in any design, mobile and/or desktop, it is absolutely critical that you test your design and implementation with users. Let us know if we can be of service in this regard.
- Avoid using a hybrid approach, where you have some global menu options and hide others in a hamburger menu. This can create even more confusion (trust us, we’ve tested it) — unless the hamburger is the last item in the menu and is used as “overflow”. Foolproof does this fairly well:
- If you’re sure you want to use a hamburger menu, ensure that you’re using it with a lean or extremely well-balanced IA, where you’ve both minimized the breadth of your site map as well as the depth. Having people navigate through too many options within a hamburger menu is not advisable.
- If you use a hamburger menu, consider designing your page in such a way that the opened menu can be persistent on the page, i.e., that the user can choose to have the hamburger open all the time.
- If you hide your navigation behind a button, ensure that it uses the text “MENU” in some way. Did you know that Medium’s “M” icon opens up its own navigation? How’s that for poor discoverability?