Mega menu usability and development hazards
(May 22, 2013)


Some usability experts see only benefits for users in using mega menus. Others, in addition to myself, see too many user and site development hazards to out-weigh any possible user benefit.

Let me start with the basic problem; don’t make me think and cut out the noise. These are two guiding principals of UX. 

Presenting too many choices at the outset causes blindness, in the sense that the user sees nothing because they are overwhelmed. My personal case is that I can’t see the forest for the trees! I stare at the center of the thing and can’t get beyond it until I can convince my brain that it’s okay. I know how to read and if I am patient, I can find what I’m looking for. But more frequently than not, my mind has panicked; I find nothing after minutes, or I’m running off to another site.

I need visual breaks and easy clear choices in order to move on. I want some help.

So you need to knock a few trees out of my way. Information Architects and UX professionals have the job of judiciously editing menus, giving more care and time to this act than individual pages. It is our job to enable users and guide them as quickly as possible to their target. As UX designers and IA specialists, it’s our job to curate and help the user find what they are looking for. We’re supposed to do that heavy lifting before the user gets there. I’ll talk about the trigger word issue a little later because it’s a big underlying problem in all navigation planning.

The second major reason that I find mega menus a dangerous road to take, is that they just don’t work on mobile devices. Sure when you pinch you MIGHT be able to get the thing open but good luck getting it closed and out of your way. While you might not have bought into the designing for mobile first philosophy, mobile users cannot be ignored. Are you ready for the complications?

Accessibility is the third major reason I see for not using mega menus. With so many links to click through, it becomes a real nightmare if someone is not using a mouse.

So why do so many sites use mega menus?

My opinion is that it makes it easier to please site stakeholders and yes, there are usability gains to be had – it’s taking a peek inside (window shopping or fast-forwarding if you will) before committing yourself.

But of course there are users who enjoy the fast-forwarding to see what’s in a site and especially if they use a site regularly, to dive deeper in what feels like one simple action. I get both of these arguments.

Of course, with a recent mega menu (or any dropdown menu for that matter) dealing with the diagonal user action has been a problem. Today, the diagonal problem can mostly be controlled by jQuery’s hoverIntent or menu-aim but these require extra testing and don’t totally cover the spectrum of users’ some sites have. If your site’s target audience tends to be rather broad – all ages and technical skill levels, you may well have a nasty problem on your hands. 

5-16-2013-3-53-52-PM.jpg

Getting to Riding Toys without having the Sports & Rec or Outdoor Living sections open accidently is now possible. But there are other issues with the fixes for this. To get beyond the issues with the darned things getting in the way of going to another point on your site, you can use this jQuery-menu-aim that solves the problems that you see here.

Still, in pointing out the positive, it is possible to render a mega menu visually appealing and eliminate the overload of information, as Amazon does in one of their mega menus. Please note that this menu is for only one section of the site. 

Nikon.jpg

 

I’m not convinced that the optimal way to deal with the mega menu above (Amazon) might just have been a landing page for the store.

It’s the job of your site’s IA to curate for your users. Mega menus are crutches or an enabler. In fact most of these tend to get worse over time as instead of finding the right place to put something on your site, you just add to the mega menu without giving any real thought to your users’. Even worse, some CMS have a difficult time with these menus if they are over more than one column.

Even UX experts who have been proponents of mega menus have gone on to write about how easy it is for these mega menus to go wrong.

Then there are the trigger word(s) problems.

So once we start talking about visions and stakeholders, what we’re really talking about are getting the desired trigger word(s) on screen as fast as possible.

Your trigger word and my trigger word for almost the same thing don’t necessarily match. If mine is there, then I’m in luck. You may not be so lucky.

Can’t find my trigger word(s)

Recently while testing the site of one of Montreal’s suburb cities with a small group of citizens, I was struck by the trigger word blindness. Two users were very familiar with their cities’ services and immediately began to search for their own trigger words, neither of which was on the mega menu. One user spent 7 minutes insisting that the service she was looking for was called a specific way and it HAD to be there. The thing she kept repeating, “It’s the biggest program that the city runs, so it has to be there.” It wasn’t.  It was 7 minutes before she gave up. She felt like a failure. It became a blocking point for the other tasks in the test. Certain that she had already seen another trigger word in the mega menu, again she quickly got lost. 

The other user suffered from being overwhelmed with the amount of information. Even though the mega menu was organized in somewhat logical sections, she spent minutes looking for HER trigger words without ever finding them. The mega menu was open/closed multiple times before she finally settled in to search though them. There was much muttering about it being too difficult. When a user’s keyword or trigger word is not on the list, they have nowhere to go.

Of the testers who were from the city in question, the all had failures with the site’s mega navigation. Only those testers with no knowledge of the city made it through the initial navigation without a failure of some sort.

As Johanna Wright, Google’s head of product development for Google Now said during io2013 talk, “Paint a vision. Once you paint a vision, people will follow.” 

So you need to knock a few trees out of my way, cut through the noise, and tell me the story that gets me where I need to go.

Mobile & Responsive

You can’t talk about the Internet today without giving serious consideration to mobile browsing. A visit to the Oakley site indicates that in the store the hierarchy begins with Men and Women. 

The thing is that these menus don’t work on “hoverless” devices until you change them to clickable events. This eliminates the fast forward benefit that is the real UX gain. Smartphones and tablets are rapidly becoming the devices of choice, so you must be willing to say that you don’t care about these or you don’t care if users have a different experience on these devices.Smartphones and tablets are rapidly becoming the devices of choice, so you must be willing to say that you don’t care about these or you don’t care if users have a horrible experience on these devices.

The thing is that mobile users get stuck on sites that use mega menus. I mean that they can’t actually get anywhere. Even when Oakley adapted their site have the menu as a clickable event and also to load the store with images of Men and Women, once you pinch up the resolution to something that you can read the text, it fills the entire window and so you can’t actually get it closed or move on until you select something. 

photo-1.PNG   photo-2.PNG

The importance of mobile

If back in 2009, PayPal had said that mobile wasn't worth a special effort for optimization, they’d have missed out on $141 million in sales. If they still felt that way, they’d be saying no to something like $10 BILLION dollars in 2012. Okay, so your site doesn’t reach as many users and you don’t have the same budgets, fine! All the more reason to get your site development done in an efficient and effective manner!

Of course, it’s not that difficult to redo the navigation and optimise a version for mobile. But you have to be ready to assume the time and development cost.

The same argument holds true for Responsive Design. If you have a mega menu today, the next version of your site, the one you’re working on now, should include responsive design techniques. For the most part, mega menus don’t fit into the responsive reality.

Other considerations

There are a couple of other issues to be considered as well, SEO, Page Speed and Accessibility.

SEO is an issue as well. Mega menus actually go against recommendations from Google in its Webmaster Guidelines. “Keep the links on a given page to a reasonable number.” They recommend that you should avoid “creating complex webs of navigation links, eg. Linking every page on your site to every other page” (pg. 12 of the Search Engine Optimization Starter Guide)

Menus are supposed to be about relevancy. Search engines use them to determine your site’s relevancy and rank on a topic. It’s how they understand your site’s overall content. How it decides which pages are more important. Mega menus confuse this signal.

See Ted Ulle’s post about this (it is dated but the points remain true). More recently he has weighed in on the semantic confusion  in relevancy. With today’s HTML standards we tell Google that it’s navigation by using nav element, but Google expects this to also be an indication of importance… too much and now even Google is having difficulty cutting through the noise.

Page Speed is important to Google because it’s important to users. If you have a mega menu on ALL pages, it definitely slows your site down. While easily outweighed as an issue by one larger image on a page, repeating this mega menu on all pages means that this is a site-wide issue.

As the powerhouses of the Internet – Apple and Google – both move away from keystrokes with Siri and Now, we should take note of this soon to be outdated method of navigating a site. In fact, what these two examples show is that search needs to be contextual and thus offering a mega set of choices runs counter to this.

Google’s Now (voice search) is moving to the desktop as well. Equally, Google search offers Cards, boxes with information on traffic, weather, sports, stocks, flights, events, etc. They are curating for us in SEARCH!

Accessibility

If you look at Oakley’s site, this menu would make you think that anyone should be able to find anything easily. In fact, this mega menu actually has a fair amount of curation in it, as they indicate that Men/ Women are the two top hierarchies, and apparently women aren’t interested in 3D Optics.  But just imagine that you’re not using a mouse, you need to tab to get where you want to go, and you want to go to Women and browse around. It actually takes a minimum of 15 tabs to be able to get there! 

Oakley.jpg

Responsive design becomes next to impossible.

So again, why did you want to use a mega menu?

Okay, so you HAVE to use mega menu for x,y,z reason, then here are some tips that might help your users.

Don’t use two levels. Change jobs if you think you need to have three levels. One level is at least manageable. You are still forced to do some curation but you can do less and perhaps please more stakeholders by having their trigger words appear. You can manage this with some rejigging on a hoverless device.

You can still curate. As I’ve argued, it is an IA person’s responsibility to do some curation for your users. You don’t have to put a link to every page on your site. You can create logical paths and forms of heirachy and or put the most important /most used at the beginning. Remember if Amazon, Apple and other mega content providers can create sites with only two levels of navigation, so can you!

Use visual clues when possible, everything from hierarchy to icons and images. You will need to be prepared to do the extra work of making these works on all browsers though.

Mashable-nav.jpg

If possible, move the content below or to the side of the mega menu so that it isn’t covered and is accessible. Something like this table of contents at the right works too but only on newer browsers.

Try not to use mega menus site wide.

Don’t be afraid to ask a user to scroll on your home page. Here is a great example where there is a lot to be gained for the stakeholders with a little scrolling.

And finally, to quote Steve Jobs (and now a bunch of other web technology leaders), it is important to “surprise and delight” your users. Yes, there is surprise and delight when a mega menu opens. Try not to make the next emotion be frustration. 

Comments
Blog post currently doesn't have any comments.