Mega Nav – Bullet Dodged

Starbuck's website has a mega navigational menu.
Starbuck’s website has a mega navigational menu.

While working on a major site overhaul I suggested possibly using a mega nav (designer-daily.com). I thought that it looked pretty and contained a lot more information than traditional navigational menus. Heck, more information and context about your links is better right?

We spent many hours designing our own navigation to look good, provide good context, and pull content in directly from our CMS. It even seemed to test fairly well. Then I attended UIE 17 and listened to Jared Spool (twitter) lambast mega navigations and really drop-down navigation all together.

His argument was one of simplicity. When a visitor to your site views the content they use their eyes (or ears) to understand context and to begin the way-finding process. We all follow what is called the “scent of information”. Much like an animal follows a scent trail to find its pray, we follow information trails to find the content that meets our need.

The main problem with content that reveals itself after a click is that a user doesn’t have a good chance to find that scent trail. If the keywords they are looking for are not visible on the page they are unlikely to find the right link. I wanted to argue that users explore the website with their mouse. But he even had data to show that, in large part, they actually don’t.

Another issue with drop down navigational elements is that most sites don’t provide a clue to the user that there will be animation to display more information. Yes, designers are coming up with more an more ways to hint at animation, and you may test these patterns to discover for yourself which works better. But most people are fully accustomed to the ubiquitous page load. They expect the page load and when the drop-down appears it comes of a bit of a shock. This shock interrupts the scent of information.

After all a page load is intuitive, automatic, and cross-browser compatible! A user expects a link click to cause a page load. When it does occur they can naturally transition to the next page and continue following the scent of information. However, when an animation occurs instead of the expected page load their scent of information is thrown off and they have to start over again. Not the best case.

Also, what are you planning on doing for small mobile devices or touch devices? A mega nav is a bit of a nightmare for mobile users. So, you will have to generate a new page for mobile users that has the same content as the mobile navigation. Doesn’t that seem a bit strange that you force mobile users to a new page that desktop folks don’t see? Wouldn’t it be simpler to just send everyone to that page?

Conclusion: Remove the mega-navigational menu to improve the user experience and provide a more consistent experience across all devices.

After a lot of deliberation around these points we decided to remove the mega-nav and haven’t had an issue yet. Usability testing showed no issues at all in navigation with this change where before we had an 80% success rate.

Bullet dodged! Score one for simplicity. Thank you Jared for opening our eyes, or rather removing the ‘this is cool’ blinders.

One thought on “Mega Nav – Bullet Dodged”

  1. Good read. I hate mega navs 8^) We found that dropdown menus in general (especially nested ones) were hard for people w/motor disabilities to use and in general they meant that people didn’t understand their priorities or IA well enough to focus the content.

Leave a Reply

Your email address will not be published. Required fields are marked *