Three problems with drop-down website navigation

Have you ever played the game "Operation" when you were a kid? The object of the game is to remove plastic bones and organs from a guy named Sam.

The way you remove them is by using metal tweezers but you have to be very careful. If you touch any other part of Sam's body, a loud buzzer goes off and his nose lights up bright red.
I always think of this game when I see drop-down navigation menus in websites.

What are drop-down navigation menus?

Drop-down navigation menus are used in many websites to reveal secondary links that are normally hidden from view. To access a drop-down menu, all you have to do is place your mouse over the main navigation bar and the menu will appear. At this point, you scroll inside the menu and select the link you want to visit.


Example of a typical drop down menu with two level navigation.

Drop-down navigation systems are popular with web sites because they look like the menu bar at the top of a computer screen. Visitors are already used to this kind of interaction so, in theory, they shouldn't be confused by them. The reality is that drop-down navigation systems, if not implemented correctly, can be hard to use and create more problems then they solve.

In this article I will examine three main problems found in drop-down navigation system:

- It can be difficult or even impossible to select the links in the menu
- They are not scalable when there is a lot of web content
- Search engines may not index pages correctly because of them

Why is it difficult to select the links?

The reason why drop down navigation reminds me of the game "Operation" is because if I am not careful, after activating the menu with my mouse, I may move the pointer outside of the drop down area. When this happens, the menu closes before I even have a chance to select a link. So I have to start over and open the menu again. This problem happens often when I use my laptop because using a trackpad is not as precise as using a mouse.

In some cases, when I move the mouse over a link in the menu, another sub-menu will open on the side of it and to keep going I have to move the mouse sideways and then down again, which can be tricky.

But the main problem with drop-down menus is when a website is accessed by devices with a touch interface, like a smart phones or an iPad. In this case, there is no mouse and the visitors have to use their fingers and fingers act differently from a mouse.


Drop-down menu can create problems with a touch interface

With a mouse, you can move the pointer over the navigation bar without clicking. The navigation bar will sense when the mouse is over it and activate the drop-down menu. This effect is called "rollover" because the mouse rolls over a hot area on the screen.

But when you are using a finger, you either touch the navigation bar or not. There is no concept of rollover. If the finger touches the navigation link, the web page will simply sense a click, so it will start loading the next page without showing the drop-down menu at all.

This problem is even worse if the active area in the navigation bar has no link but its sole purpose is to show the drop-down. If this happens, touching the area won't have any effect whatsoever and the user would be highly confused. But there's a second problem with drop-down menus. It's a problem of scalability.

Drop-down menus are not scalable when there is a lot of content

Scalability is the property of a system to grow. When you add content to your website you make it grow. That means that the number of web pages increases and the number of links that lead to those pages increases as well.

Since the whole idea behind drop-down menus is to have users go directly to all the pages of a website, when more pages are added they are included in the drop-down navigation. When this happens, the drop-down hierarchy becomes too large and confusing.

There is a limit to the amount of information that visitors can keep in short term memory and when they have to scroll over menus and submenus that open and close every time the mouse moves, they quickly become overwhelmed and often abandon their task. And this leads us to the third problem of drop-down menus: search engines may not be able to follow the links.

Links in the submenus are difficult or impossible to index by search engines

Search engines index web pages by following links in the page itself. Links lead to other pages and by following them, search engine robots quickly build a map of the website that they keep on their servers ready to be searched.
Drop-down menus are often implemented in Javascript, a popular programming language for web pages. The problem with this is that many search engines like Google and others have difficulties reading the links inside the Javascript so they skip them altogether. This means that if there's no alternative navigation, those pages will never be seen and indexed by the search engines.

But, aren't drop down menus the best way to enable visitors to reach internal web pages with only one click?

The main argument in favor of drop down menus is that they enable the visitor to access all the content in a website with as few clicks as possible. But is this still a valid argument?

Studies have demonstrated that it's not the number of clicks that matters but the difficulty in selecting a path. What do I mean by this? If you think about it, when you navigate a website you follow a path. You go from place A to place B to place C. At every fork in the road you have to decide which way to go and your choice is expressed with a click of the mouse.

If when you encounter a fork in the road you only have two ways to choose from, and each pathway is clearly labeled with an explanation of where it will lead you, then the choice is simple. You quickly pick the one that's more appropriate with the goal you want to achieve.

But if, at every intersection, you have to choose between several paths your choice becomes much more complicated and you get confused on where to go.

Drop-down menus are like busy intersections, with many possible directions to take. As you know, when the number of choices increases, the sense of confusion and overwhelm also increases and the website visitor may not know which way to go and abandon his task altogether.

In other words, a well thought out sequence of many easy choices, expressed with multiple clicks, is easier on the website visitor then only one complicated choice to take with a drop-down menu.

In summary:

Drop-down menus are used frequently in website navigation because they resemble the canonical menu bar found on computer screns but they can have serious problems.
It's often difficult to properly select the links especially when using a trackpad or a mobile device.
They are not scalable when the website content has many pages.
They also make it hard for Google and other search engines to index the website content if they are only implemented in Javascript.
Even though they enable the user to reach deep content without many clicks, their structure makes them highly complex and this complexity may scare visitors away.

A little bit like Sam, the "Operation" guy, used to scare me with his sudden buzz while I was all focused in removing a butterfly from his stomach.

So, are drop-down menus a no-no?

In general it's better not to use them but there is one kind of drop-down menu that addresses almost all of their pitfalls and is actually becoming very popular. It's called the "Mega drop-down" and I will talk about it in the next article.