Mega Drop-Down Menu, Enjoy It Responsably!

9 Feb 2010

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

A perfect website is the result of the application of several techniques that come from different fields. The most famous trends in the modern web design are just the perfect combination among rules from design, web usability, user interface design, science behind HTML, CSS and Javascript.
A relatively recent trend is the use of mega drop-down navigation menus. They are simple to build and have a great appeal for the users.

What Is a Mega Drop-Down Menu

Drop-down menu is a design element that allows the user to choose a value from a list of possible options.
It seems, at a first glance, a simple navigation menu, but when your mouse arrow points an item of the menu a magical two-dimensional panel appears through a drop-down effect. The panel provides more navigation options for the users and, often, these options are organized in groups to emphasize connections among items.

Its aim is to provide a tool for digging into the sections of the website in a clever and tidy way. In order to simplify navigation, the drop-down menu has to show the list of items, contained in the panel, at once without the need of scrolling.

Drop-Down Menus in Recent Web Design

This kind of navigation menu has the great asset of displaying at once more navigation options. So it could be a great solution when the designer has to organize several categories, products, sections or to reduce the number of steps to do an action (e.g. sign-in or login forms).
It has the big task of helping users to navigate the website in a correct way, it should provide a complete view of the contents and sections of the web application… and it would seem perfect for many web applications and, in fact, it is widespread. Below we can see some examples in wich a mega drop-down menu might be useful.

Organize Topics for a Web Magazine or a Website for Breaking News

Websites with a large amount of information and articles, like mirror.co.uk and sportsillustrated.cnn.com, require an easy-to-use navigation menu. A well-done mega drop-down menu might be a working solution in this case.

Arrange and Organize Categories and Tags in a Articulate Blog

A brilliant blog with good posts and a fresh design needs an effective navigation menu and when there are several topics a fresh drop-down effect for displaying subcategories is the best solution to create an impressive menu.

Show Several Products in an E-Commerce Website

In e-commerce website design is essential a clear presentation of products and services, and a limpid organization for the categories of articles. The drop-down menu is always a working feature for the on-line stores.

Display Login and Sign-Up Forms

The registration on a website is an operation that often annoys the user. A drop-down can be a good solution to build a quick sign-up form for saving space on your layout and for creating an user-friendly, one-step, module for the registration.

When there is the need of saving space on our home-page, a drop-down box is useful also for a login form. The famous microblogging service, Twitter, adopts a drop-down effect for the sign-in button in the home page.

Multi-Level Menu

Many usability experts recommend to avoid the use of drop-down multi-level menus because they aren’t user-friendly. In my honest opinion, the key isn’t to understand if a multi-level drop-down menu is usable or not, but if it’s possible to make it usable.
Porsche.com use a well-done multi-level menu and, friends, can you say that it isn’t usable? No!

Issue Behind Drop-Down Menu

It would seem that the mega drop-down menus are the resolution for many navigation problems. Caution: if something shines, it doesn’t mean that is gold.

Low Visibility for the Links

A drop-down menus is very useful to save space on your layout, they take up just the area of the title (or main category) in the layout, but is this a real advantage?

It’s evident that the “secondary” links (in the panel) don’t have a great visibility, they practically are hidden and only an interaction with the mouse pointer can activate the panel. A common mistake is that of not indicating the presence of a drop-down panel, thing that can be done through a little arrow or a similar symbol.
A hasty choice, in planning your navigation menu, may be counterproductive for the usability of your website.
Drop-Down Menu, Enjoy It Responsably

Difficult Organization of the Navigation Options

An hard thing to do when we plan a mega menu is to organize the options within a relatively small space. A working approach is to separate links into groups of navigation; a general rules is of not offer huge groups with numerous options that are hard to scan.
We see, often, huge panel with many options that confuse the users. You should consider other design elements, and not a drop-down navigation menu, when you have to show a lot of information for a single item (e.g. a section for showing events).
Drop-Down Menu, Enjoy It Responsably

If the menu panel have a huge list it can be very high and wide and, so, there is the possibility that low-resolution screens show only a portion of the mega drop-down.
Drop-Down Menu, Enjoy It Responsably

Designer vs Response Time

Building a mega drop-down navigation menu we have to deal with the mouse movement, why?
There is two ways for displaying the panel: first, hover to activate; second, click to activate.

Remember that web interface elements should render within 0.1 seconds to provide users a complete sensation of control.
In the first case the panel appears when the pointer is over the item on the navbar, and to keep it active, the mouse arrow has to be over the menu to scan all options.
Now consider the normal activity of a user on a web page: the mouse pointer is in movement and at any passage over the drop-down menu it will cause the opening of the panel (0.1 seconds), your interface will become absolutely unusable for the simultaneous scrolling of several panels. So we can’t make the response time too fast to avoid the screen flicker. A good choice could be to add a delay of 0.3 – 0.5 seconds, so the pointer has to remain stationary for 0.4 – 0.6 seconds before of displaying the complete panel (a sort of fade-in).
Besides if the user lose the focus on the menu, or the user temporarily takes the pointer outside the active area, the panel disappear. To avoid that accidental movements of the mouse out of the active area can hide the panel (diagonal problem), we should plan the same delay also to hide the box.
Drop-Down Menu, Enjoy It Responsably

In the second case the users have to click twice to open and close the panel, in this case there isn’t the problem for the movement of the pointer.

Designer vs User Behavior

It is well-known that the user don’t read, they scan a web page, so the designer have to emphasize the elements that might attract the user. A well-designed navigation menu is essential to stimulate the user at visiting more sections of the website.
A drop-down menu couldn’t be direct and intuitive for the visitors. They always choose the easy way and not the best way to obtain a gratification (an interesting content) and a big (and hard-to-scan) panel might not represent the easy way for our user.

Enjoy It Responsably!

Modern web design is influenced by some misused and abused trends. Often the designer’s choices, in building a working web interface, aren’t completely focused on the purposes of the website and on usability; but they are driven by the frenzy of using new trends and techniques and, in most cases, a simple design element works better than a complicated and new solution.

We have just seen as a mega drop-down menu might be really useful, but it must be perfect to work well. So the designer has to find the right balance for his navigation menu and he has to understand which is the right choice between a standard navbar and a complete mega drop-down menu.

Below we can see some simple solutions that simplify navigation without the use of drop-downs.

Smashing Magazine – A simple navigation menu with main categories and sub-categories for the most famous web design magazine.

Ugmonk – A nice and clear solution for a navigation menu.

A last thing. It has been proved that a well-designed mega drop-down menu has a great appeal on the clients, it is sexy and make dynamic the website, but you must describe strengths and weaknesses to your client to allow an aware choice.