Business Insights
The problem with drop-down menu navigation
Before we begin, lets remember just what they are for
What were drop menus originally designed for?A trend of the late 90’s saw drop menus popping up, all over the internet.
This phenomenon could be attributed to the advent of dynamic HTML; suddenly web designers could do it. The rationale was that drop menus allowed the user to access any page of the website with just one click, from wherever they were in the website.
But wait, is it really important for users to navigate the entire website, or are they usually just looking for a specific product, specific information?
What if there are sub sections? Lets try a pop-out menu. Now it gets messy on all but the smallest websites.
Another reason for the development of drop menus is that it allows the designer to store away all those ugly links that clutter up the page design, like putting our clothes in a wardrobe and closing the door. It keeps the room clean and tidy but how does it help us find what we are looking for?
But desktop applications use drop menus
Yes, they do but the difference is they are applications.As you would expect the boundaries between website interface design and desktop application interface design have become blurred.
As people have become familiar with the common interface elements of applications, web designers have come to incorporate some of these elements into their website designs.
Straight from the desktop application, the drop-down menu that runs across the top of the program interface and provides access to a multitude of tools and options has been adopted for use in the navigation of websites.
The drop menu of a desktop application is used to perform actions, to save to print, to copy to paste. They are used to provide access to functions that allow a user to perform a particular action. A drop-down menu is a means to do something - not a means to get somewhere.
The problem is that the drop-down menu was never intended for navigation. As such there are a number of reasons that make the drop-down menu a poor method for navigation.
The menu is hidden
The content of a drop-down is hidden from the user. A good website design should make it as easy as possible for the user to find what they are looking for and hiding the navigation presents an immediate barrier.Because the destinations are hidden from the user to begin with a user has to know that a button actually has a menu hidden behind it. A first time user does not know what lurks within unless they position their mouse over the button and wait for the menu to appear.
This takes time and effort and while we may consider this insignificant, we should all know how easy it is to frustrate a user.
They're hard to use
Applications can be completely standardised in terms of the appearance, functionality and behaviour. They can also employ accessibility features such as keyboard shortcuts. Websites drop menus are all different and the user is forced to work out each one individually.Even for the most experienced computer users drop menus can be difficult to use.
Because drop menus need to be compact, the active area for the link is made small and fiddly. This is particularly frustrating when you have to follow a pathway of drop downs, down ways and sideways, all the time keeping your mouse on the active area of the menu. Watch out, if you accidently roll off the menu, it will collapse and you will be forced to start the tedious process again. To make it more challenging try doing this with the touch pad of a laptop; think of it as playing a game of operation.
Other times you're just not expecting the drop-down behaviour and it comes as a surprise. For example when one top level category has sub links that drop down, but others don’t have any; the category link remains static. Is it broken? Is it still loading?
These maybe minor frustrations to the experienced user, simply overcome in a matter of seconds, but replace the experienced, able bodied computer user with a disabled or older user and these become major, if not impossible hurdles.
They're not scalable
Remember the majority of website users are looking for information. A good website Even a relatively simple website should have many pages with many sub-levels, and if it doesn’t have them to begin with then it should build them over time as it grows.Drop menus are inflexible and impossible to grow past a certain depth. They become completely unusable.
Remember there is limited and variable space on a user’s monitor that the website has to fit within. 10 – 17% of users still use monitors with a screen resolution setting as little as 800 x 600 pixels. This allows for very little space to fit a list of links. Now think what happens when the drop menu extends past the users browser. And before you ask, no scolling is not a good idea.
It is not just the downward space that is limited, when the menu requires a second level we are forced to move sideways. Now things become really complicated. For example what happens when the drop down menu toward the right hand side of the screen requires a sub menu that extends to the side, usually this would be to the right, but what happens if there is no room to the right? Does the menu then change to display to the left? If so this will require a lot of additional code to detect the size of the users browser and change the position, also consider the usability when the sub menus alter their orientation.
Some of the top performing websites do not use them
The only way to really know for sure, just how effective a style of navigation really is, is of course to test it. Unfortunately accurate usability testing is a long and expensive task, especially testing something as complicated as the navigation. The next best thing is to look to those websites that we know spend significant time and money testing and improving.Look at some of the top performing websites such as
http://www.amazon.com
http://www.apple.com
http://www.youtube.com
http://www.sears.com
Why do these websites not use drop menus if they are really that useful? It won’t be because they can’t afford it or have technical restraints. Perhaps their user testing suggests that they are less effective, that it is not a good idea to implement.
For some reason which I find hard to explain, drop-down menus are common with blue chip websites or large brand oriented sites such as the global Sony, Dell and Nokia. Often the websites of this genre are very image intensive and the screen real-estate is reserved for large and beautiful imagery.
Two clicks or one challenging click?
One of the so-called advantages of a drop down menu is that they reduce the amount of clicks. This was an obsession of many website designers of the 90’s.Yes a drop menu may allow the user to access any page of the website with just a single click, but it is not a simple click. First of all the user has to find the right link, buried within the hidden lists. Because the labels are often abbreviated to fit the limited menu space, it is often easy to be confused, become lost and hit the wrong link.
Is it really that important to remove the additional click? Is an extra click really that hard? These days I think that we understand that two easy clicks can be better than one challenging click.
The difference I see with navigating a drop menu system and a click menu, is the pathway. A drop menu is a very abbreviated and dull pathway that relies on the users familiarity with the website and the labelling. A click navigation system guides the user through the website to the information they require. Think of it as a wizard, a step by step navigation that explains each link and the page behind, before the user clicks it. This ensures that the user knows where they are going, they know what to expect.
I think that a good search is a better replacement for a drop menu. A good search will allow the user to find the information they seek with a single click
Reduced orientation and persuasion
A drop menu saves clicks and page loads and could make the users navigation faster, as long as they can quickly find the link and they get the right link.However this method does of course remove the intermediate index pages from the users navigation. These pages can be important steps in the persuasion pathway of a websites conversion goal.
These pages contain content and help to orientate users to their new location. We can then use a sub-menu to list the content within that section. We have a lot more space available, in fact an entire page to ensure that sub links are well described and compelling to the user. This will ensure that the user knows exactly where they will be taken for their next click. The additional space allows us to use images or icons if that helps.
Reduced cross sale opportunities
By displaying the sub menu in the left hand column we have more space available to ensure the links are more descriptive and are displayed right there on the page in front of the user. They stand a greater chance of being noticed and read by the user than if they were wrapped up in a menu and only displayed on rollover.It would make sense that this combination of relevancy to the top level category of interest, greater description and longer period of time in front of the user should increase the click through rate.
No signposts to let me know where I am
Because the idea of a drop menu is that it keeps our page clean and tidy and folds up back into the wardrobe, it leaves no clues or signs as to where we are. Because a page is accessed directly through the menu, our navigation is not a step by step process; the website cannot display a trail or pathway back.A good tab system at the top of the page provides a great signpost to let us know exactly where we are and where we can go next. A well designed tree menu in the left hand column will let the user know exactly where they are within the sub pages of the site, it also lets them know where else they can go within that top level category.
To further orientate the user a breadcrumb trail is a great way to show the current location within the website and offer a convenient way of stepping back through the sections above.
These navigation aids improve the users experience and they instil confidence in the site
Explore More Topics
Elevate Your Online Presence with Zeald, Your Premier Google Partner
Discover the power of partnership! This esteemed status places us in the top 3% of Google’s trusted collaborators globally, a testament to our expertise in digital marketing. ensuring your campaigns are not just managed, but optimised for exceptional performance.