Stuart Bellis
02-10-2014
Drop downs

Drop-down menus can be seen as a way to tidy up website clutter. But it can be compared to hiding messy things away in a wardrobe. It isn't actually tidying!

Although they can be useful in some situations, they do not by any means provide a universal solution. They can cause navigation issues and confuse the user journey.

Clear navigation

Information architecture and website navigation are two of the most essential parts of the web design and development puzzle. Without clear, concise navigation tools how can you be sure that your users will end up where they want to get to? This can lead to lost opportunities, particularly with regard to revenue streams.

Drop down menus often seem like an obvious solution when it comes to maximising screen retail estate, grouping various links under one overriding header and at Code 7 we are often asked the pros and cons of drop down menu options.

Bounce rates & mobile devices

Many users visiting your website will quickly scan the page and decide within one or two seconds whether what they're looking for is readily available.

Visitors will ordinarily have to click or hover to access the information they may be looking for. Most don't bother. Many users will be viewing your site on a mobile or tablet, and drop-downs can be difficult to navigate on smaller screens where a mouse is not available for hovering.

Assumptions

An assumed pro is that drop downs enable a user to reach their destination in fewer clicks or that every area of your website needs to be accessible within three clicks.

Neither of these assumptions are true. In terms of a faster user journey, ordinarily it's the same number of clicks. By not using a drop down menu you have a greater range of design and content elements, plus the user has a clearer pathway.

Is it in fact you that wants the quick way to get a certain piece of content you use often? You, unlike your users, know where it is and want a quick way to get there, if so its best to bookmark in your browser.

With regard to every page being accessible within three clicks, I'm not sure that's necessarily still a valid argument. Providing you have clear links and clear navigation most users nowadays are comfortable with a greater range of options. It's contextual. You can have several links provided they are clearly grouped and defined. Drop downs often frustrate, confuse and annoy users by not giving them a clear indication of where they are going on a site.

Reasons to use drop down menus?

Now, we're obviously not going to say that you should never use a drop down menu and there are sometimes genuine reasons for using them, for example an e-commerce site where there are many categories and products. In these instances often the products contained within the sub categories don't require much further explanation and the pathways are relatively self explanatory - for example a top category might be 'football boots' which would then be broken down into 'men's / women's / boys / girls' and then into sizes. A nice simple path.

Where categories need further clarification, drop downs are not quite so easily navigable.

Amazon use a series of drop down mega menu options on their site and theirs is one of the most commonly used sites on the net. In their case they continuously test every aspect of their business with real users to ensure high levels of customer satisfaction. They have also added some coding trickery to detect the mouse cursors path to make sure the correct sub menu stays open, the site is not responsive as they have native apps.

The reason their site is so easily navigated is simply that - it's been tested and tested and tested again. And after they've done it, they test it all over again.

Our advice

Drop down menus should be avoided in favour of clear overhead menu navigation. User experience should be your primary concern, resulting in higher traffic, lower bounce rates and greater profits.

Drop down menus should be used only if the user's experience is improved by their presence - usability testing will be very important here. Drop down menus are almost ubiquitous with most online retailers today although they can be fiddly when not implemented well, particularly on mobile devices. If you need a drop down, test it first and continue to test it to make sure it's the best option.

Think about the reasons that you may want to use a drop down menu. If you're convinced that this is the best way to display your content then make sure that the development is well thought out and the menu accessible to all your users.