6 Epic Forces Battling Your Mega Menus

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.

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.

On the surface, mega menus seem like they are the perfect solution. Yet something’s not quite right with these interaction design jewels.

Amazon’s Brief Mega Menu Foray

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.

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 Epic Forces Battling the Mega Menu

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:

Epic Force #1: Menus vs. Buttons

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.

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.

Epic Force #2: Trigger Words

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.

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.

Epic Force #3: Category Names

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.

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.

Epic Force #4: Users Wait Before Moving Their Mouse

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.

Epic Force #5: Occlusion

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.

Epic Force #6: Hover

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.

Mega Menus Aren’t Evil, Just Troubled

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.