- Mega Menus: SEO Concerns and Usability Pros and Cons (Intro)
- Usability Advantages and Disadvantages of Mega Menus (Mega Menus Part 1)
- Mega Menus and SEO Concerns and Solutions (Mega Menus Part 2)
In 2009, usability expert Jakob Nielsen argued that, when done right, mega menus could enhance usability. Mega menus have a few notable advantages over traditional, hierarchical dropdowns or more spare navigation, but they also have some serious drawbacks as we’ll see in a second.
Usability Advantages of Mega Menus
- All options visible. A traditional dropdown menu hides almost all options from the user until she hovers over the parent category. If the user does not think with the same hierarchy as the designer, she will have to play Treasure Hunt, hovering over many parent items to find an item. This can lead to frustration too if the dropdown keeps disappearing when the user is not asbolutely precise with the cursor. In theory, mega menus can solve that problem.
- Organizing options. Mega menus allow friendly and visual grouping of options into logical groups. A traditional dropdown becomes completely dizzying when the number of options gets too large.
- Images and Icons. Often, mega menus are designed to have images or icons that correspond to, and quickly confirm for the visitor, the content of the menu. So the Contact category might be illustrated with an address book or telephone icon or some such thing.
So mega menus are a no-brainer right? What could go wrong? As it turns out, plenty. Jakob Nielsen has highlighted a few mega menu usability issues. Usability expert Jared Spool noted early on that mega menus could get you into trouble in his article on 6 Epic Forces Battling Your Mega Menus. Usability aside, Spool explains the sudden popularity of mega menus thus:
Mega menus seem like such a good idea. After all, they make the marketing team happy, as they remove all that nasty navigation away from the prime real estate of the home page, leaving room for the team’s messaging goodness. At the same time, the mega menu gives the design team a rich sandbox to play in, with much flexibility on how they display the site’s main links.
He lays out his six arguments against mega menus, most of which are in fact not unique to mega menus at all and I don’t find them inherently problematic (not that germane here; scroll to the bottom of the article for some thoughts on Spool’s six problems). He notes that Amazon, a rigorous conversion optimizer, tried mega menus for a year and dropped them. Spool concludes:
If your design would benefit in some desperate manner from this navigation cliché, go ahead and use it. However, you probably want to watch it real close. Make sure you’re watching your users and your key performance indicators (especially revenue, if you’re an e-commerce concern).
I wouldn’t go so far as that, but the it’s easy to see some of the issues that might arise with mega menus.
- Forest of Options Obscures the Trees. I know, that metaphor usually runs the other way around, but with mega menu, you often see a pretty forest, but have trouble finding the tree you want. You can see in my screenshot from the introduction, there is a temptation to make the mega menu into a sitemap (cick image to enlarge).
Since you can throw in every imaginable option, you do. As a result, the user is presented with a dizzying array of options and, one might guess, becomes paralyzed by the number of options. It creates an easy out for designers and site architects who don’t want to make choices. Now, I don’t want to get into the old saw about only presenting users with seven choices in menus. It is not true now and never was, but at a certain point, the number of options becomes visually distracting and difficult to read, and it seems to me quite common to see mega menus cross that line simply because they can.
- Screen Size problems. This is not unique to mega menus. This can be a problem with options dropdowns (i.e. select boxes) that have long options or standard dropdown menus if they get big enough. The problem is that the mega menu is, well, mega, so this is a lot more common. You can see from this screenshot that mega menus can become completely non-functional if the window is narrow, as on a mobile device, or short, as on a netbook (click images to see full-sized):
You can see that the mega menu is cut off on a narrow or a short screen. Anything that sticks out past the browser window is missing. With most types of content, this isn’t a big deal. Sure, the user has to scroll right to see it, which is annoying, but it can be done. With a mega menu, however, the user cannot scroll! Why? Because it only stays displayed when the mouse is hovering over the menu. Move the cursor down to the scroll bar, and the mega menu disappears. Scroll, and the link goes off screen. You literally cannot use the mega menu on a narrow screen.
The Yosemite Park site solves this by allowing you to click on the root term and be taken to an index page, where the sub-options are displayed by default. That’s a pretty good solution, but it means the user needs to know, or guess, that the root term is a link and is clickable. It would be interesting to track visitors and see how they ultimately use this navigation.
This was part of what ultimately took the blush off mega menus for me personally. I just found that you compound implementation problems and if you’re not careful and don’t test on a lot of platforms, you have a high chance of letting a significant usability problem creep in. In addition, I was also concerned with the SEO impacts of mega menus (next section) ——».
Addendum: Spool’s issues with mega menus
If you’re really interested in Jared Spool’s Six Epic Problems, here’s a quick rundown, but it’s really more the SEO issues that you should read about next. Anyway, I’m not all that concerned with most of these issues, but here are some supplementary thoughts on Spool’s Six Epic Problems.
- Menus are not Buttons. Since a menu isn’t a button, users don’t know they have to do something to make it expand. Realistically, they may simply not know it expands and will go there to click, only to see more options revealed. It’s better than not expanding.
- Missing Trigger Words. In other words, since most options are hidden, users can’t see that they exist. But short of the navigation taking up the whole page as a sitemap, you’re not going to change this, and a mega menu at least gets you half way, though as you’ll see in the next part on the SEO problems with mega menus, that halfway solution is often a result of a bad information architecture decision.
- Category Names not always inherently sensible. Well, of course not. This is a problem with any navigation and, again, is an information architecture problem more than a user interface problem.
- Users Wait Before Moving Their Mouse. In other words, if they can’t see what they want, users sit there paralyzed and won’t click anything at all. Again, mega menus aren’t the root problem. If the design only allows, say, seven navigation links, then that’s what there is and they may not always have enough information scent to get the user to click, whether on hover those menu items reveal nothing (i.e. it’s a single-level menu hierarchy), reveals a cascade of hierarchical dropdowns (classic model) or is a mega menu. Realistically, the mega menu at least removes a one or more decision points vis-à-vis the classic hierarchical dropdown, where the user will have the “pause” problem at every level, instead of just at the root level.
- Mega menus hide the information that’s under them. That’s a problem when the user accidently hovers over the menu while trying to read the content, which suddenly get’s hidden. That can be annoying, but in a minimally usable design, the mega menu should disappear simply on mousing out and most users today will know this. I find this a much less problematic usability issue than the one I noted where in a small screen, parts of the mega menu are not visible, clickable or usable at all.
- Problems with hoverless devices. As we move to devices that don’t have cursors and mouses, they can have trouble triggering the menu expansion. Of course, this again is not unique to mega menus, but concerns anything that uses hover behavior as a trigger. This has become so ubiquitous that I think this is largely solved by most devices these days, though I am an iPad virgin, so I can’t say for sure.
Read on about the SEO impacts of mega menus (next section) ——».