Design Drop-Down Menus According to the “3 W’s”

Drop-down menus are one of those “love ’em or hate ’em” elements in web design. Many designers or developers shy away from using them, and I used to be no exception to that. As I’m learning more about them though, I’m coming to embrace them – as long as they meet my “3 W’s” criteria.

Those who don’t like drop-down menus say that they make a website less usable, but I think the opposite is true. They can open up a website’s content to its visitors from anywhere on your website, making it that much easier for people to find what they’re looking for. And from a designer’s point of view, they can be very useful in helping to clean up a busy layout so that you’re not overloading the page with content links.

Here’s my take on drop-down menus: if you are going to use them, they need to meet three criteria in order to enhance the overall usability of the website – what I like to call the “3 W’s”. They should be:

• Well-planned – how the content in the menus is organized
• Well-designed – how the menus actually look
• Well-developed – how the menus function

Let’s go through each of these in a bit more detail. I’ll give you some things that you should do under each category in order to make your drop-down menus as user-friendly as possible.

Planning the content of your drop-down menus

The most common way that drop-down menus appear is what you’re probably familiar with already – simply a vertical list of links that appear beneath the main navigation links. These can be used when you want to organize such things as:

• Pages in a section
• Categories in a blog
• Products in a particular category

But it’s not as simple as just creating a list of the links that you want to appear in each drop-down menu. There are a few things to keep in mind when it comes to the content of this type of drop-down menus:

• Keep the links manageable – Don’t provide so many links that it becomes too time-consuming for someone to look through it to find what they’re looking for. Making the menus into a long list of links guarantees that they’re not going to be usable at all; Lehman College’s website is an example of this.
• Don’t have more than two levels at most – This can be very distracting to the user, and if you have a lot of content, your menus start to really stretch out across the screen. Drop-down menus should help your visitors get to main topics of interest within your site’s information architecture; they don’t necessarily have to touch every single page on the website.

Plenty of websites out there have nicely-organized drop-down menus like this. Check out Garmin’s website for a great example.

The recent design trend

Fortunately, there is a new trend within web design that is helping to solve these problems. Recently you have begun to see the widespread use of bigger “panels” that group options together, helping users have greater access to information. Jakon Nielsen, one of the leading usability experts, even published a study on this topic in which he found that using these “mega drop-down navigation menus”, as he calls them, can improve how your visitors navigate through your website.

A lot of popular websites are incorporating these types of menus. You can find them on such popular websites as:

• ESPN.com
• Food Network.com
• HGTV.com
• White House.gov
• Samsung.com

I’m a big fan of these mega drop-down menus, providing that they’re done well. The links still need to be organized in order for them to be useful – something I think the last 3 examples above do well, but that ESPN doesn’t. Grouping them into categories with headers is a great way to make it even easier for visitors to find what they’re looking for.

Making your drop-down menus look nice

When it comes to styling your drop-down menus, here are a few things that you should do to make sure that they’re as usable as possible:

• Provide visual separation – You want to make sure that your users are able to easily look through the links in the drop-down menu, so adding in some padding around each link, or using a horizontal line as a separator to distinguish between links, is a good idea.
• Use the hover effect – If you have your links set up as block elements, then having the background change color when a visitor is hovering over that link in the drop-down menu is a good touch to incorporate. Again, visit the White House’s website for an example of this in action.
• Semi-transparent backgrounds – If you have a nice background image and you want it to show through, then doing this might be something worth considering. Don’t make the menu too transparent though – make it just enough so that the background shows through. You want to maintain enough contrast between the menu and the background so that your users can tell what the links are.
• Keep things consistent – The most important thing to keep in mind is that drop-down menus should look like  a natural extension of the main navigation bar. This means using the same colors, fonts, etc., with the goal of making everything appear to function as one.

Just remember that the ultimate goal of all of these tips is to make sure how the menus are designed doesn’t get in the way of the user’s ability to browse through the links contained within them. It would be a shame if you had drop-down menus where the content is well-planned and organized, but the design gets in the way of people using them.

Getting your drop-down menus to function properly

So now that you know how to organize the links in your drop-down menus, and how to make them look nice, there’s one final piece of the puzzle you have to think about, and that’s how they actually work.

You can definitely have drop-down menus that meet the first two W’s, but that have a problem with the third. And this might be what website users find the most frustrating about drop-down menus – when they don’t work properly. We’ve all had experiences where a menu takes too long to display, or where it disappears too quickly. It’s the small things like those that have the biggest impression on your visitors.

Here are some thinks to keep in mind when figuring out how your menus should function:

• Be careful of hover menus – Some drop-down menus appear when you move your cursor over the main navigation link, but this can be a double-edged sword. It’s good that the menus will be obvious to your visitors, but it’s bad and can cause confusion if someone unintentionally hovers over the link, only to have the menu appear when they don’t mean for it to.
• Indicate when clicking is needed – Some drop-down menus are only activated when you click on the main navigation link; Digg is a perfect example of this. Because the menus can only be activated by clicking, there is a little arrow telling people that those links are to drop-down menus – a good thing to incorporate if you choose this display method.
• Delay deactivation – Say someone moves their cursor off of the drop-down menu, and it disappears right away. You don’t want that to happen – if they moved the cursor by accident, they would have to go through the whole menu to get back to where they were. Having a slight delay gives them the time to move their cursor back over the link in the menu, and can cause less frustration for your users.
• Make them appear smoothly and seamlessly – However you want your users to activate the drop-down menu, it had better load immediately when they do activate it. You don’t want to disrupt the visitor’s experience in any way, and you certainly don’t want to make them wait for something to happen. It’s the same principle as with load time – if your website takes too long to load, chances are they’ll hit that “Back” button unless they have some compelling reason for being on your website.
• Skip the tooltips – As I’ve written about in the past, you need to know when to use your TITLE attributes wisely. Unfortunately, Microsoft didn’t heed my advice. On their website, the drop-down menus are nice, but if you hover over the main navigation link long enough, a tooltip appears that (a) shows the exact same thing as the link itself, and (b) obscures the first option in the drop-down menu. My point is, just be careful how you use your tooltips, especially in cases like this.

Remember!

Drop-down menus are unfortunately one of those design elements that can leave a big impression about your website – especially a negative one. If they’re done poorly, people will remember that, and might be less likely to come back to your website in the future because of how difficult it is to navigate around. If you’re in business and trying to sell something through your website, that could be fatal, but the same applies to any other website as well – organizations, colleges or universities, news, etc.

If you are going to implement drop-down menus in your website, give it some thought first and make sure that they meet the criteria of the “3 W’s” from above.

When you are ready to actually create them, there are plenty of resources and guides available for how to create drop-down menus on your website. You can create them in CSS, Javascript, AJAX, or many other programming languages – there are too many for me to list here.

Thoughts?

What do you think of drop-down menus – do you love them or hate them, and why? Or what about the new mega drop-down menus – do you like that trend and wish other websites would start using them? Share your thoughts about anything I mentioned or that relates to drop-down menus by leaving a comment below!