Since my first explorations, a handful of modules have made great progress and you can achieve full-featured mega menus with the excellent Megamenu module. There are also some other now-mature projects like Nice Menus, and the Superfish module, which includes mega menu support. Upon further reflection, though, I became increasingly troubled by various usability drawbacks and SEO concerns. My notes on the topic got rather long, so I’ve divided them into a series that sums up some thoughts on the usability advantages and disadvantages of mega menus and then looks at the SEO concerns with mega menus. You can see an example here from the new YosemitePark.com site (click to view full size):

Lots of Options!

You might be able to see some potential problem areas there, but let’s take a look at the good, bad and ugly of mega menus in the next post. Read on about Mega Menus and usability ——»

Usability Advantages of Mega Menus

• All options visible. A traditional dropdown menu hides almost all options from the user until she hovers over the parent category. If the user does not think with the same hierarchy as the designer, she will have to play Treasure Hunt, hovering over many parent items to find an item. This can lead to frustration too if the dropdown keeps disappearing when the user is not asbolutely precise with the cursor. In theory, mega menus can solve that problem.
• Organizing options. Mega menus allow friendly and visual grouping of options into logical groups. A traditional dropdown becomes completely dizzying when the number of options gets too large.
• Images and Icons. Often, mega menus are designed to have images or icons that correspond to, and quickly confirm for the visitor, the content of the menu. So the Contact category might be illustrated with an address book or telephone icon or some such thing.

Usability Concerns

So mega menus are a no-brainer right? What could go wrong? As it turns out, plenty. Jakob Nielsen has highlighted a few mega menu usability issues. Usability expert Jared Spool noted early on that mega menus could get you into trouble in his article on 6 Epic Forces Battling Your Mega Menus. Usability aside, Spool explains the sudden popularity of mega menus thus:

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.

He lays out his six arguments against mega menus, most of which are in fact not unique to mega menus at all and I don’t find them inherently problematic (not that germane here; scroll to the bottom of the article for some thoughts on Spool’s six problems). He notes that Amazon, a rigorous conversion optimizer, tried mega menus for a year and dropped them. Spool concludes:

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).

I wouldn’t go so far as that, but the it’s easy to see some of the issues that might arise with mega menus.

1. Forest of Options Obscures the Trees. I know, that metaphor usually runs the other way around, but with mega menu, you often see a pretty forest, but have trouble finding the tree you want. You can see in my screenshot from the introduction, there is a temptation to make the mega menu into a sitemap (cick image to enlarge).
   

   Lots of Options!

   Since you can throw in every imaginable option, you do. As a result, the user is presented with a dizzying array of options and, one might guess, becomes paralyzed by the number of options. It creates an easy out for designers and site architects who don’t want to make choices. Now, I don’t want to get into the old saw about only presenting users with seven choices in menus. It is not true now and never was, but at a certain point, the number of options becomes visually distracting and difficult to read, and it seems to me quite common to see mega menus cross that line simply because they can.

2. Screen Size problems. This is not unique to mega menus. This can be a problem with options dropdowns (i.e. select boxes) that have long options or standard dropdown menus if they get big enough. The problem is that the mega menu is, well, mega, so this is a lot more common. You can see from this screenshot that mega menus can become completely non-functional if the window is narrow, as on a mobile device, or short, as on a netbook (click images to see full-sized):
   

   Oops! A not-so-mega menu

   

   Oops! Short window problems

   You can see that the mega menu is cut off on a narrow or a short screen. Anything that sticks out past the browser window is missing. With most types of content, this isn’t a big deal. Sure, the user has to scroll right to see it, which is annoying, but it can be done. With a mega menu, however, the user cannot scroll! Why? Because it only stays displayed when the mouse is hovering over the menu. Move the cursor down to the scroll bar, and the mega menu disappears. Scroll, and the link goes off screen. You literally cannot use the mega menu on a narrow screen.

   The Yosemite Park site solves this by allowing you to click on the root term and be taken to an index page, where the sub-options are displayed by default. That’s a pretty good solution, but it means the user needs to know, or guess, that the root term is a link and is clickable. It would be interesting to track visitors and see how they ultimately use this navigation.

This was part of what ultimately took the blush off mega menus for me personally. I just found that you compound implementation problems and if you’re not careful and don’t test on a lot of platforms, you have a high chance of letting a significant usability problem creep in. In addition, I was also concerned with the SEO impacts of mega menus (next section) ——».

Addendum: Spool’s issues with mega menus

If you’re really interested in Jared Spool’s Six Epic Problems, here’s a quick rundown, but it’s really more the SEO issues that you should read about next. Anyway, I’m not all that concerned with most of these issues, but here are some supplementary thoughts on Spool’s Six Epic Problems.

1. Menus are not Buttons. Since a menu isn’t a button, users don’t know they have to do something to make it expand. Realistically, they may simply not know it expands and will go there to click, only to see more options revealed. It’s better than not expanding.
2. Missing Trigger Words. In other words, since most options are hidden, users can’t see that they exist. But short of the navigation taking up the whole page as a sitemap, you’re not going to change this, and a mega menu at least gets you half way, though as you’ll see in the next part on the SEO problems with mega menus, that halfway solution is often a result of a bad information architecture decision.
3. Category Names not always inherently sensible. Well, of course not. This is a problem with any navigation and, again, is an information architecture problem more than a user interface problem.
4. Users Wait Before Moving Their Mouse. In other words, if they can’t see what they want, users sit there paralyzed and won’t click anything at all. Again, mega menus aren’t the root problem. If the design only allows, say, seven navigation links, then that’s what there is and they may not always have enough information scent to get the user to click, whether on hover those menu items reveal nothing (i.e. it’s a single-level menu hierarchy), reveals a cascade of hierarchical dropdowns (classic model) or is a mega menu. Realistically, the mega menu at least removes a one or more decision points vis-à-vis the classic hierarchical dropdown, where the user will have the “pause” problem at every level, instead of just at the root level.
5. Mega menus hide the information that’s under them. That’s a problem when the user accidently hovers over the menu while trying to read the content, which suddenly get’s hidden. That can be annoying, but in a minimally usable design, the mega menu should disappear simply on mousing out and most users today will know this. I find this a much less problematic usability issue than the one I noted where in a small screen, parts of the mega menu are not visible, clickable or usable at all.
6. Problems with hoverless devices. As we move to devices that don’t have cursors and mouses, they can have trouble triggering the menu expansion. Of course, this again is not unique to mega menus, but concerns anything that uses hover behavior as a trigger. This has become so ubiquitous that I think this is largely solved by most devices these days, though I am an iPad virgin, so I can’t say for sure.

Read on about the SEO impacts of mega menus (next section) ——».

How many characters left?

What’s wrong?

1. It only gives me 255 characters. This is probably because they have chosen to store the text in a fixed-length database field for rapid retrieval. That’s what happens when the usability people and the marketing people get overrruled by some engineer who thinks that this minor efficiency improvement is sufficient reason to cripple the interface.
2. It doesn’t tell me anywhere how many characters I’m allowed. It wasn’t until I submitted my original version that it rejected it and came back and told me there was a 255 character limit.
3. It has no running count of characters used. This has become a standard feature everywhere else. We’re used to it on Twitter and most places that have low character limitations.

So what? Well, it took me three tries to get my feedback accepted. And by the time I did, the glowing testimonial I had for the merchant was gone. No room left.

All the merchant got out of this was my comment that I think they should make their free shipping offer appear more prominently on the page.

What the merchant did not get was my comment that when I factored in free shipping, their price was significantly better than the competitor’s price.

Okay, I just placed the order, so I can’t comment on speed of delivery and all that, but I would say that the shopping experience on US-Mattress.com was close to ideal. It’s easy to navigate, there are no real surprises (except why did they offer to let me upgrade to “standard front door” delivery for $49? What is the delivery I’m getting for free?).

Anyway, the bad part is that I agreed to do the Bizrate survey because I like to reward e-commerce merchants who do it “right”. I arrived at the survey with a good feeling, wanting to leave a great testimonial. But the frustrations of using Bizrate’s system left me feeling, well… frustrated. Of course, I don’t hold US-Mattress responsible, at least not consciously, but that’s the thing about usability problems — often they operate on a sub-conscious level. The good feeling I had upon completing the purchase is now forever associated with the stupid Bizrate survey.

And then, there’s Bizrate’s enticements to get you to take the survey, promising all sorts of free stuff. Obviously, everyone who spends a lot of time on the net knows by now that these are not “rewards”, but affiliate offers from which Bizrate makes additional income, but that’s a whole other story.

AOL or Apple customer? Click for full size

AOL or Apple Customer - fill in the right blank. Click image to view full size

Especially with the AOL triangle thing looking like an arrow, to me this looks like one blank for AOL customers and one for Apple customers. It’s even worse when your login fails, because then it draws an arrow between the AOL logo and the blank, which just emphasizes the connection between AOL and the bottom blank. One has to wonder, has Apple tested the usability on this at all? I thought it was just me, but I showed it to Theresa and she had the same reaction as me.

By the way, one blank is for username and the other for password. Of course, this is a pretty standard interface, but as more sites (like my banks and credit cards) now have two or three-step logins, so you enter your username, then you get a verification image, then you enter your password. I assumed it was like that here.

I would say the thing that drives me nuts the most about Gmail, is the fact that every time you delete a message, you’re kicked back out to the message list. Google, taking a page from Microsoft, has decided to do your thinking for you and take this option off the table because you really shouldn’t delete emails. But if I know I will never want that message again, I delete it. And am stuck back out at the message list. This, more than anything has stopped me from adopting Gmail.

It turns out there is a ‘Delete’ and go to next conversation Greasemonkey script that will do just what I’m looking for, but recent Gmail upgrades broke that script. So out of luck again. [Update, June 22, 2009: this script has been fixed. Check it out.]

Over at JimsTips.com, Jim suggests using Gmail Keyboard shortcuts (Gmail Help article) deleting with the # key, which does kick you back to the message list and then using the ‘k’ key to move to the next message and the ‘o’ or <enter> key to open the message. The thing I dislike about that is that it is three page loads when it should be two (in other words, why do I have to see that damn message list?).

So my similarly kludgey, but somewhat more elegant solution (or maybe not) is to:

• Turn on keyboard shortcuts (in Settings -> General).
• Create a label named ‘Delete’ (or ‘aaDelete’ if you want to be sure it is at the top of your label list).
• When reading a message, type ‘l’ (that’s a lower-case L) to bring up the label list.
• Hit the downarrow key once to select my top aaDelete label at the top of my list
• Hit the ‘k’ key to move to the next message.
• When I’m all done, I can view the messages deleted aaDelete and select and delete them all.

Yeah, stupid, crappy, cumbersome way to do it. I know. Tell Google.

Now if only they would come up with a proper way to view all unlabeled messages, but my solution to that is reasonably workable, if a bit cumbersome.

So I went hunting for Firefox extensions that would save me from this aggravation and found that you can strike back at these miscreant web developers using built-in settings in Firefox. Hooray!

First, let’s just stop this nonsense of letting other people decide how big my main browser window should be. They can still set windows to open at a certain size, but resizing an existing window will not work with this simple tip. In Firefox, in the top menu bar, go to Tools » Options.. » Content and click on the first Advanced button, not the Advanced tab or the second Advanced button in that panel (talk about good UI design).

Now you’re in the Advanced Javascript Settings window. Just uncheck them all. I don’t see any reason to let a script on a web page do anything for me. If I really need to resize my window, for example, I’ll do it myself thank you very much.

Now we come to the case, though, where the developer has not created a resizable popup window, so I can’t resize it and, as often as not, can’t use that page at all. Nice design buddy. But, again, Firefox comes to the rescue. Up on the address bar (i.e. where you normally type http://raisedbyturtles.com, or would if you didn’t already get updates via the RSS feed or email), you enter the Firefox configuration screen by entering about:config and hitting the enter key (in other words, no http or anything like that, just about:config). This will bring up thousands of options. To pare down the list to what we want, down where it says “Filter” type in dom.disable_window_open_feature. Now you have a list of just the features you want. Double-click on any line to toggle that feature between true and false.

You can have your pick of which options you want to change and which you don’t. This is working pretty well for me:

You can see a full write-up on those features on the Firefox tips page, but these are the ones we care about:

dom.disable_window_open_feature.resizable

Set this to true to make sure all pop-up windows are resizable.

dom.disable_window_open_feature.minimizable

Set this to true to make sure all pop-up windows are minimizable.

dom.disable_window_open_feature.menubar

Set this to true to always display the menu in pop-up windows.

dom.disable_window_open_feature.location

Set this to true to always display the Navigation Toolbar in pop-up windows.

dom.disable_window_open_feature.scrollbars

Set this to true to prevent sites from disabling scrollbars.

Enjoy better surfing without those annoyances!