How to increase website usability with mega drop-down menus

We have all seen him: the clueless museum visitor.
He is standing confused in the lobby looking around in search of help. Is the dinosaur exhibition on the first floor? Will the pop art gallery be at the end of this corridor?
But hand him a map and everything becomes quick and easy.

In the same way, when your website shows right on the home page all the possible paths that your visitors can take, it makes it so much easier for them.
One way of creating a mental map for your visitors is by using mega drop-down menus.

What are mega drop-down menus?

Mega drop-down menus are a variation on the old fashioned drop-down menus that are activated when your mouse rolls over a navigation item.
Although drop-down menus are losing appeal in large websites because they often create more problems than they solve, mega drop-down menus are actually very effective if designed correctly.

They are called mega drop-down because, when activated, they take up a large section of the web page.
Here's an example of a mega drop-down menu from monsters.com

What are the advantages of mega drop-down menus?

Mega drop-down menus have three main advantages that make them useful as a design solution:
- all user options are clearly visible all the time
- they allow chunking of information
- they allow the use of icons or other images

All user options are clearly visible all the time

The first advantage of mega drop-down menus is that all user options are clearly displayed and visible all the time.
This is a great way for visitors to quickly familiarize themselves with the website.

It's comparable to having a map when you go to a museum.
With just one glance you are able to see which sections the site is divided into and you can decide which part you want to visit first.
In addition to making all the sections of a website clearly visible, the other advantage of mega drop-down menus is that they allow chunking of information.

How mega drop-down menu make information more accessible with chunking

Chunking is a design technique that's used when there is a lot of information to present.
Viewers are often confused and overwhelmed by a long list of links and tend to glance over it.
By grouping related links into chunks, or small subsets of links, the list becomes more manageable and easy to digest, even though the total amount of items is still the same.

If you look at the image below, you will see how the information has been chunked for easier viewing.

But there's one more advantage that makes mega drop-down menus effective: the use of icons.

Icons and images make the information more memorable

Since mega drop-down menus are technically built like mini web pages, all the design elements of a normal web page are available, including images.
It's a known principle of design that text associated with images is more effective then text or images alone.
So, you can easily improve your mega drop-down menus by placing images or small icons near the information that you want to emphasize.
Here's an example that uses images associated with links.

In this example, each link is like a short paragraph that describes what the link is about, therefore making the whole mega drop-down more compelling.

Help, my screen is small!

There is a problem that often comes up when using mega drop-down menus. Visitors that access the site on a smart phone or iPod, often magnify the web page to compensate for the smaller screen.

By magnifying the web page, they are only seeing a portion of it. If the mega drop-down menu is too big, it will often extend beyond the browser window and will be only partially visible.
There are two solutions to this problem: a quick-and-dirty solution and a more-involved-but-elegant one.

The easy solution is to make each top level link (the link that activates the mega drop-down menu) clickable.
This leads to a regular web page that displays all the choices available in the mega drop down.

The second, more elegant, solution is to have the web server detect the kind of device the visitor is using and load a different version of the website optimized for mobile devices, without mega drop-down menus.

But what are the mistakes that designers often make with mega drop-down menus?

The worse mistake is to put too much content into it.
A mega drop-down menu is like a mini web page so theoretically you can include anything you want in it. But you should restrain yourself and add only the navigation links and maybe an extra item or two. If there's too much in it, and especially if the information is not consistent, it will lead to confusion and abandonment.

Here's an example of too much unrelated information in a drop-down.

Anther mistake is forgetting to include a visual clue that the navigation link will open a drop-down menu.
A visual clue can simply be an arrow pointing down, like in this example.

Visitors need to see right away that something will happen if they activate that link, especially if it's the first time they check out the site.

Let's briefly recap what we discussed in this article:

Mega drop-down menu can be an efficient way to create a mental map for the site visitor.
They are similar to the old fashioned drop-down menus but they are bigger and can organize information more effectively.

The three advantages of mega drop-down menus are:
- all user options are clearly visible all the time
- they allow chunking of information
- they allow the use of images or icons to make the information more memorable.

One problem of mega drop-down menus is that they may be too large for small screen devices like phones and iPods.
To avoid this problem, the best solution is to have the web server load a different version of the website optimized for small touch screen devices.

Mistakes in mega drop-down menus include:
- too much information in them
- no visual clue that a drop-down menu will open when the mouse is over a certain navigation item.

As you can see, mega drop-down menus can be an effective way to lead your visitors through the site without exposing them to the no-map museum experience.

Note: if you enjoyed this article, and want more, please subscribe to our weekly newsletter by clicking this link.