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:
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.
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:
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:
Plenty of websites out there have nicely-organized drop-down menus like this. Check out Garmin’s website for a great example.
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:
(Regarding the White House’s website, how they used a mega drop-down menu is one of the things that I really liked about the new design of the White House website, which I wrote about back in January.)
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.
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:
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.
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:
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.
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!