Summary: Big 2-D drop-downs can facilitate site navigation - if they're properly designed. Two examples illustrate some mega-menu usability pitfalls.
Last year, I reported that our then-recent usability studies had found good results from sites using mega-menus for navigation. Such menus have now spread far beyond the sites we tested.
In fact, mega-menus are now so popular that I decided to stop covering them in our seminar on Emerging Patterns for Web Design — they aren't "emerging" any more, they've arrived. (In-depth analysis of mega-menus has now moved to our seminar on Web Page Design.)
Mainly, it's a good thing when research highlights that something works and it's then widely adopted. If only site managers would act equally fast to remove bad design elements after the many columns I've published about usability problems :-(
However, in the rush to implement mega drop-downs, some sites have gone down the wrong path. Let's look at a few recent problematic designs.
Use Mega-Features for Meaningful Choices
Mega-menus offer at least two huge benefits: they let you
- structure choices into panels or sub-areas and
- illustrate choices.
Neither is done well in this menu from the main U.S. government portal www.USA.gov:
Are there 2 or 3 categories in this menu? Although vertical separators clearly divide 3 areas, the bulleted items seem to form a single list that flows through the first 2 areas. The site missed a great opportunity here; designers could have easily structured this long list of options into subcategories, each with its own subhead.
The third area seems to be its own separate category, as indicated by the "Audiences" subhead. But instead of actually listing the audiences, there's a lame image with no communicative value, followed by a single menu item with the same name as the subhead.
What an abuse of the mega-menu concept.
As always in user interface design, just because you can do something doesn't mean you should . Megas can benefit from illustrations, but only when they illustrate actual options and make them easier to scan. We already know that users ignore content-free pictures on Web pages. Menus should be edited judiciously — and pruned even more ruthlessly than full pages. Menus must focus on enabling users' choices and on guiding them as rapidly as possible to their desired destination.
In the example above, the designers should use the space to show choices, not fluff. And the 2-D layout should explain and structure these choices, freeing users from having to read through a long list.
Alphabetize for Scannability: Columns, Not Rows
Following is a mega-dropdown from Hulu.com — a subscription site for professionally produced video. Has any particular rule been applied to govern placement of the menu items?
The organizing principle (if any) is difficult to discover at a quick glance, which is all that Web users are likely to grant it. People don't have time to study your design to determine why you put certain things in certain places. And sadly, if they can't quickly discern a structure, they're likely to assume randomness, since they've seen so many other sites with horrible IA.
(Every site with poor usability poisons the well for everyone who's trying to do business on the Internet.)
If you do look carefully at the Hulu.com example, you'll see that the menu items are sorted alphabetically. Let's leave aside the point that A–Z might not be that great a way to present the universe of filmed entertainment genres. The options must be sorted in some fashion, and my point here is simply how the site presents its A–Z sequence.
In the screenshot, the sequence of options runs horizontally. This is wrong, because people tend to scan vertically .
In other words, when users first look at the menu, they're likely to read: All, Classics, Health, Reality, Action, Comedy, Home, Science. Or, if they start by looking in the middle of the mega-menu, they'll perhaps see Drama, Horror, Sports, Arts, Family, Music.
Whatever way they look at the menu, they're not likely to discover that it's sorted alphabetically, as long as their eyes follow columns rather than rows as they roam around the area.
Now, if you're writing a table, it's natural to tab horizontally because that's the way you write: along horizontal lines. That's also the way people read narrative text. But a menu is not narrative text. It's scanned, not read. And scanning tends to proceed down a list in a vertical manner. (That's also why left-justifying navigation menus makes them easier to scan.)
Mega Drop-Downs Are a Design Canvas
In the bigger scheme of things, the usability problems mentioned here aren't too serious. They'll reduce site use a few percent, but they won't destroy anyone's business metrics. But still: why degrade the user experience at all, when the correct design is as easy to implement as the flawed one?
As I stated last year, mega drop-downs can enhance the usability of website navigation. But, as these new examples show, megas can have usability problems of their own.
Of course they can.
Any user interface design technique has pitfalls and must be used correctly for the best effect. An old design style with every detail polished will always beat a hypothetically better style with poorly designed details. That's why we keep doing user research to discover all the intricacies.