Originally published: Aug 24, 2011
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.
You don't have to go much farther than the popular TV fan site, Television Without Pity, to see how these wonders of modern navigation work. The home page when the mega menu is hidden gives room for the site's featured content.
The bulk of the navigation is neatly out of view when users first arrive at TelevisionWithoutPity.com.
When the user moves their mouse over the Shows icon in the main navigation, a secret panel emerges to display the mega menu featuring the popular shows.
Moving the mouse over the Shows icon reveals a hidden panel Ė the popular shows mega menu.
On the surface, mega menus seem like they are the perfect solution. Yet something's not quite right with these interaction design jewels.
People don't realize this, but mega menus have been around for a while. In 2006, the mighty e-commerce giant, Amazon.com, introduced their own mega menu. It was a last attempt to salvage their tab strategy, which had become unmanageable due to the breadth of their offerings.
Amazon debuted their mega menu in 2006, but it's nowhere to be found today.
The Amazon mega menu seemed like an ideal solution to the growing tab problem. Finally, their design team had a way to show everything you could do on the site without eating up rows of tabs in the header.
Yet, just as suddenly as it had appeared, the mega menu suddenly disappeared. Replaced by a more sophisticated navigation scheme (that's still on the site today), the mega menu's lifespan was less than a year. This is curious, as Amazon isn't known for removing things that are working. If the mega menu had been a successful design (Amazon measures success in revenues), it would have remained in some form. Yet, poof, it was gone ever so fast.
The disappearance from Amazon added to our suspicions about the hype around this ultimate solution to all of our navigation problems. As we watched our clients continuing to move forward with implementing their own mega menus, we were wondering what was happening.
As each implementation launched, we saw problems. It was not unusual for our e-commerce clients to experience a 15%-20% drop in revenues immediately upon deploying their new mega-menu-based navigation Ė revenue that didn't seem to come back, even once users "got used to" the change. Non-e-commerce clients also saw dramatic changes in their key performance metrics, mostly declines, as they rolled out their own mega menu implementations.
While the underlying concept of mega menus seems sound, further study shows there's a battle going on, which makes the navigation element's job hard to do. What's fighting our mega menus? The basic nature of our users. Ugh. Thatís not good.
Here are six epic forces weíve observed battling our mega menus for our users' attention and success:
When we watch users, we realize quickly there's no visual clue that any mega menu exists. There's a handful of navigation elements, but the user can't tell which one will produce a menu with dozen of items and which will just go straight to another page.
The TelevisionWithoutPity.com main navigation. Users can't tell which items bring up menus.
In the Television Without Pity navigation, there are only two elements that produce mega menus (Shows and Forums). Two more elements produce standard single-column, drop-downs and the rest are stand-alone, button-like links. Visually, there's nothing to clue the user into the idea that there are dozens of options awaiting them, if only they move the mouse.
Users come to the Television Without Pity for a specific reason, usually to catch up on the gossip of their favorite shows. If it's a really popular show (or really hot gossip), it may find its way to the featured content on the home page. But if it doesn't make the cut, the user will want to head straight to that show's page.
Yet, without experience, there's no visual clue to tell them there's a list of shows waiting for them. Sure, users may learn it over time. However, when discovery is important (and discovery is almost always important), this implementation of the mega menus isn't helping.
No de facto standard has emerged to help designers communicate when mega menus are hiding behind navigation links. Without this, this epic force will continue to battle the menus' usefulness.
Our studies repeatedly show that when users come to a home page or landing page, they have words and phrases in their mind that will cause them to click on a link. We call these trigger words. They are essential to good navigation.
Someone coming to Staples.com to find a whiteboard easel won't see their trigger words without the menu expanded.
For example, a user who was looking for an erasable whiteboard surface they could mount on an easel had several trigger words when they arrived at Staples.com: erasable, whiteboard, easel. (For others looking for the same product, china board and wipe-off were trigger words. Users vary in their trigger words for the same thing, which makes design a challenge.)
When the mega menu is hidden, all of the trigger words on the menu are also hidden. Users can't predict the future, so they don't know they need to reveal the menu to get what they need.
When this epic force wins the battle, users go to alternative techniques, like the search engine. That works great if their trigger words match the results, but often they don't.
Related to the problem of missing trigger words is the issue of the category names. Can users figure out where youíve put the target content they seek? This is not a new problem ó every multi-level navigation scheme has this problem. However, mega menu implementations typically donít make it easier on their users.
At Staples.com, do users know which mega menu contains their desired purchase?
Staples has 13 mega menus hanging off the main navigation on their site. Our user, coming to find the erasable surface he could mount on an easel, had trouble deciding which of the 13 categories heíd find such a thing.
Some of the categories are easy to eliminate. Itís unlikely heíd find his desired product in Back To School, Ink & Toner, Cleaning & Paper Supplies, or Custom Stamps & Promotional Products. Heíd narrowed it down to Furniture (an easel is a piece of furniture), Technology Products (itís iffy, but on some level, wipe-off pens are a technology he reasoned), Paper & Pads (heís looking for a pad-substitute), and Office Supplies.
Office supplies troubled our user though, because, after all, isnít everything Staples sells an office supply? It seemed like a miscellaneous category to him. (And to us too!)
Like many users, he was forced to pull open each mega menu and search them. If you see a user grazing through each menu, thatís a clue the categories arenít targeted enough for that userís needs.
One of the first things we noticed when we started watching users on web sites (oh, so many years ago) was how they kept their mouse still or on the scroll bar, until after theyíd made a decision on what to click on. This behavior hasnít changed in recent years.
Sure, there are sites where the only option is to wave the mouse around until the browser gives you the finger (aka the hand-pointer cursor that commonly indicates a clickable object). However, the user resists and often resents these sites. Ideally, itís absolutely clear what they should click on before they start to move.
With the hidden trigger words, unclear categories, and lack of distinction as to what is or isnít a mega menu option, this force is strong. Just wait for the sigh you hear from users when they are forced to move their mouse before they are ready.
Another issue for most mega menu implementations is that they are big. They eat up a lot of real estate. And what they are eating up often covers something the user wants.
Itís a real problem when the user didnít mean to open the mega menu. If their mouse just happened to enter the hot area by accident, boom, up comes the menu they donít want. Dismissing that menu can be problematic.
Television Without Pityís designers tried a novel approach: the content of the page moves down with the expansion of the mega menu. However, this also moves the links. When the user sees something they like, they move their mouse off the mega menu, which immediately collapses the entire page, making it into a game of catch-me-if-you-can.
Having originated around 2005, mega menus havenít dealt with the reality of a hover-less device, such as a touch screen or screen reader.
Today, anything that uses hover events should send up a red warning flag to the design team. If current trends continue, itís likely thereís a not-too-distant future where the majority of users are not using a mouse device. Hover doesnít fare well in that future.
Itís possible to implement a click-based, non-hover-dependent mega menu. However, that adds more effort to manipulate the interface, which distracts the users from their goals.
Weíre not suggesting that mega menus are the ultimate enemy in some good-versus-evil battle against the users. Itís just that they are a troubled lot, with the world biased against them.
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).
Nothing comes for free and it seems the idealism of mega menus comes at a price. Make sure your organization is aware of what itís paying for that slick design.
Mega menus os just one type of web design pattern ó exactly the topic Hagan Rivers is talking about at our upcoming User Interface 16 Conference. If you're doing any design for the web, you need to dive deep into her full-day topic, as she fills your brain with exactly what you'll need to create delightful and useful online experiences. Check out all the UI16 speakers at UICONF.com.
Have you tried implementing mega menus? How did you deal with these forces? We want to hear your stories. Share them in the comments at the UIE Brain Sparks blog.
Read related articles: