No matter where I run, I cannot seem to hide from them.
They fly out of website navigation menus with no warning. They assault my senses with link overload.
…they are…mega menus.
Are they a new navigation paradigm or just a bad fad – like acid washed jeans?
And whose idea were they anyways?
It’s difficult to trace the starting point of the mega menu (or mega fly-out, or maxi menu, or whatever you call them); they started popping up on e-commerce sites a couple of years ago. The first one I bumped into one, my brow got that wrinkle it gets when I am at once curious and horrified – horrious? curified? I remember thinking, really? This is what we are doing now instead of putting effort into making our drop-downs more usable? Let’s just add more drop-down…
Once the initial feeling of horriosity passed, I just forgot about it. None of our clients were using them, so I didn’t really have to pay attention. And THEN, this March Jakob Nielsen put out an Alertbox saying “Mega Menus Work Well.” That was really the clincher. If Jakob/NNG says it’s ok, well there goes the neighbourhood.
Since then, we’ve had a couple of clients go down this road. And I’ve kind of gotten used to mega menus… in the way that one gets used to white noise or a bad hair cut. To the point where I think that it’s time that we acknowledged that a lot of websites are using them – for better or for worse – and that they are here to stay until the next navigation fad comes up. So it’s probably a good time to set some basic best practices, to “limit the disasters” (limiter les dégas, as we say in French).
Some of the basic navigation usability principles still apply as-is whether it’s a classic drop-down or a mega menu. But there are definately some new considerations brought about by this new format, and some specifically concerning taxonomy. Over the next few weeks, I’ll begin outlining these mega menu best practices via the blog, and then I’ll wrap it all together in an article.
One caveat. I will likely focus more heavily on the taxonomy and IA side of things rather than visual design or UX. I tried to find a UX colleague to write these with me, but I couldn’t find one who wanted to go on the record as condoning mega menus… which is telling :)
So off I go with Mega Menu Best Practice #1:
#1. Less is still more: mega menus are not an opportunity or excuse to inundate users
Even Jakob Neilsen admits “just because you can put anything into them doesn’t mean that you should.” I’ve seen some serious abuses of the mega menu… 3-5 column designs with more than 30-40 navigational choices… painful. Although the mega menu gives you more visual space, it is not a free pass to displaying your entire product line on the home page.
It is tempting to think that the mega menu allows you to expose not only level 1 or your navigation, but level 2 as well. However, that causes serious volume issues, so you have to be more judicious about what you include and sometimes even come up with intermediate grouping principles to accomodate the new paradigm. But I’ll talk about those approaches in a future best practice on grouping and labelling.
Here are some examples of good vs. bad volume:
BAD: Way too mcuh content here, 3 very long columns, different navigational principles (by boutique, most popular, by room, etc.). It would take a user a long time to scan all of this and make a choice.
GOOD: Very clean, not too many choices, nice visual separator between product categories and other ways of shopping.
It can be hard to find the right balance.. so much so that some sites have gone down the mega menu road and turned back to classic drop-downs due to an inability to keep them light and clean. Take Target for example: I’ll disclose that the “Good” example here is from their newly redesigned site since I’ll be complimenting them (I was almost disappointed to see they had redesigned – now I have to come up with all new examples.)
Target’s previous design had the biggest, most disorganized and unruly mega menus I’ve ever seen. Here’s the “before” picture for the same category as the “Good” screenshot above:
This wasn’t even the worst offender. Take the Women’s category – 5 columns of grab-bag navigational choices… no visual chunking help, lack of consistent organizing principles…
On their new and improved site, Target uses mega menus at level 1 and 2 of their navigation much more sparingly. Sometimes it’s just a simple drop-down, but where it is a mega-menu, they are cleaner, leaner and much easier on the users:
Target – Women’s Navigation Level 1
Target – Women’s Navigation Level 2
Target is an excellent cuationary tale for best practice #1… Less is still more.