Site navigation is a major aspect of both design and usability. For websites, navigation is a major aspect of interactivity that should be easy to distinguish and use. More often than not, a navigation element can be quite simple, acting as a bridge to the various major sections of a website. On the other hand, there is a point at which a website reaches a size where an all-inclusive simple site navigation plainly isn’t feasible.
It is usually at that point when some sort of navigation structure is implemented, often consisting of a dropdown architecture. These dropdown navigations mirror functionality of desktop application menu design. There are categorized entries grouped together under an umbrella category with the intention of hierarchical organization. Sometimes there are implementations consisting of three or more levels of dropdowns, as is the case of many desktop applications.
The question to ask is: are dropdown navigations the best we can do?
Taking a step back and examining a dropdown navigation in its simplest form gives some insight. At first glance, a dropdown navigation provides a (usually short) list of sections to choose from. Naturally, one of the sections piques your interest and you go for it. To your surprise, upon hovering your intended subject, an entire new set of choices appears out of thin air. You’re forced to reexamine your initial choice and make another decision before [hopefully] finding the information for which you’re looking.
While this analysis might be a bit over the top, many people view dropdown navigations as having this sort of problem when it comes to their natural usability. I can agree to an extent in that a reader has already made their decision on the item they’d like to explore, and giving an entirely new set of options at that point doesn’t make complete sense. On the other hand, computer users in general have really become accustomed to this process. We find ourselves interacting with this sort of menu architecture constantly when using a computer. A well designed dropdown navigation would provide contextual choices for a reader to make a more detailed choice.
While my opinion on the general usability of dropdown navigations isn’t completely black & white, one usability issue I can be completely positive about is graceful degradation.
The worst of the worst
We can all remember the old DHTML days where JavaScript-based navigations were implemented left and right. These navigation systems used JavaScript to provide dropdown-like functionality in a variety of (often disgusting) ways. The obvious issue here is the use of these documents with an application lacking JavaScript support. Site navigation, the most important interactive feature of a website, would no longer function. To this day there remain a number of websites relying on JavaScript-based dropdown navigations in their obtrusive, inaccessible glory.
Miniature case study: Dell
One such example that has been consistently bothering me is the site navigation for Dell. Dell has been implementing poor JavaScript-based site navigations for as long as I can remember. As you can see, with a browser that supports JavaScript, the site navigation appears as you might expect:
Viewing the Dell website as a whole using a browser without JavaScript support is a different story entirely. Focusing on the site navigation:
As a last resort, Dell does provide a severely limited navigation in comparison to their JavaScript version:
Opinions?
How do you feel about the implementation of dropdown-style website navigation? Do you think there are truly some underlying usability concerns that should be taken into consideration? Does a dropdown navigation add a level of convenience that would otherwise be unavailable? There have been other pieces written on this exact subject, but dropdown navigations are continually implemented. What do you think?
Further reading:
Comments
I think that too many people use dropdowns when they could have used a better alternative for their navigation. There are some sites where the architecture is so deep, that it becomes hard to show all options without cluttering the page. I am not advocating drop downs – just looking at the other side and trying to understand why dropdowns are used. In these instances it might add a level of convenience (versus scouring through all of the options on a page).
Accessiblity is key when dealing with these. There simply is no excuse to not build an accessible drop down. We have the tools and the knowledge. The biggest barrier is your WYSIWYGs. They give you the option to create neat dropdowns, but if you never look at the code at the core – you don’t understand the mass chaos that just took place (I’m talking to you, Dreamweaver).
So, there is a problem – but it lies with poor execution, not with the dropdown itself – in my opinion.
In my opinion, accessibility is important for any site I create. Therefore, I tend to stay away from dropdown menus and stick to the simple navigation. I agree that dropdowns are a good way to navigate, for the reason that they are used everywhere. If someone has javascript disabled, then your site is broken (and possibly useless). I have tried a couple types of dropdown menus, the SuckerFish Dropdown and CSS dropdown menus by Stuart Nicholls . Suckerfish is clean and easy to integrate but uses javascript. CSS dropdowns are nice, but over-uses the conditional comments which make the code messy.
Personally, I code websites using little or no javascript for accessibility reasons. For menus, just a simple top level menu is good enough. But that all depends on the type of site you are building.
Dropdowns have become a ubiquitous design pattern that most web users are accustomed to, but I think they present many usability issues. From a site organization perspective, CSS-based drop downs are only viable on a small-ish to medium sized site – not so small that it can get by without it, not so large that the menus become cumbersome and complex (I would NEVER suggest going below 2 levels of drop down menus – that is a mouse-handling issue even for experienced mouse users, myself included!)…not to mention that most users would get lost at that point.
Another growing problem with drop downs as navigation – on top of accessibility – is the growing use of mobile devices. Sure, mobile devices may begin to support the necessary scripting or CSS, but try navigating that with a tiny track-knob.
Whenever I’m tempted to design a drop-down menu interface, I always look for alternatives first and make sure I have darn good reasons for going against these rules. Although admittedly when I’m feeling lazy, I am occasionally tempted…
Perhaps the problem is not with drop downs themselves – rather, that large sites (like Amazon) with thousands of possible destinations list them all on every page load.
It’s like going to a museum and getting a floor plan on every wall in every room. They’d call it the museum of floor plans, to be sure.
Drop downs will hide the huge amounts of pages – my contention is, do we need to see them at all on every page we visit?
I think Erik Ojakaar puts it best in the “Users Decide First; Move Second” (referenced in this post’s “Further readings”):
“…We recommend [designers] focus their efforts on achieving their goals. If the goal is to get users to the content quickly, simple usability tests can help designers identify any problems that prevent users from this goal. If you are using these interactive elements on your site, you want to do some simple tests to ensure they are helping your users.”
Generally, usability studies find that dropdowns hamper user experience, and as a best practice should be avoided. However, best practices should not be implemented without user testing to see if they still apply in the specific context of a given site.
I agree with much of what has been said, not only in your article but also here in the comments.
In my experience, and this probably fits with your example of Dell’s web site, the decision to show the user every single possible page to visit is the work of an overly zealous marketing or sales department combined with a ‘not so good at information architecture’ web designer.
The home page, and any “main section” landing page, on a site should always “describe” what might lie beneath it. Every individual page of a site does not need to be in the site’s main navigation. The home page might be structured in a way that it describes all of the main areas of the site. The landing pages for these main areas of the site should throughly, and quickly, describe what lies beneath them, and so on.
I think the answer to using complex navigation systems is to stay away from them entirely and provide context on every section of a site that will inform the user what they might find if they drill down into the site. Combine that with a powerful search and a well structured site map – and users should have no trouble finding what they are looking for.
Again, these comments relate only web sites, and perhaps stores, and not to web applications that actually strive to replicate the way an application might be structured on one’s desktop.
Colin – this is what I was trying to get at, but you explained it a fair bit more in depth than I did.
I’ve always liked the navigation that Apple use at the bottom of each page – providing links to related topics. There’s a lot of them, but it looks friendly enough to use – and each link is categorised.
Such an example is here: http://www.apple.com/imac/
The box changes when you go to different sections, such as the iPhone.
The advantage with Apple’s method is that not all the links are shown – related topics are, and they are more likely to be followed than something completely out there. And you can see all the related links at a glance, which isn’t possible with dropdown menus.
@Nate Klaiber: I tend to agree with your thoughts as well. There comes a time where it simply isn’t acceptable to provide everything in blatant plain sight. If you must use a set of dropdowns, ensure they’re accessible at their root.
@JR Tashjian: CSS dropdowns can take messy JavaScript out of the picture, until you take a browser like IE6 into consideration. It’s at that point where some examples have surfaced making extensive use of IE6 behavior using
tablesto mimic the:hoverstate which CSS provides us. I agree, the implementation using multiple conditional comments is far from ideal, while something like the Sons of Suckerfish is an implementation I find myself using all the time. The important thing to keep in mind is that JavaScript isn’t something that should be considered an enemy. When used properly, JavaScript can work wonders as far as increasing the overall usability of any particular document. Disasters pop up with the improper use of JavaScript.@Rachel: You bring up two really great points. First and foremost is the implementation of sub-levels within dropdowns. I can absolutely see some major concerns with a multi-level implementation simply by the nature of it. I too try to avoid using anything more than a single level dropdown. The other great point you bring up is the use of mobile devices. Even on the iPhone, a device touted to bring the “real” Internet to a mobile device, results in some confusion when using dropdown menus. On the iPhone, interaction with a dropdown menu sometimes requires two clicks; one to invoke the
:hoverstate, and then another to make your selection from this new set of choices. That very example was partial inspiration for writing this article.@Ben: That’s a great point. I agree in that there should be an upper limit as to how large a navigation should be. What good is an entire site map nestled in a series of dropdown navigations?
@aliotsy: That’s a great article. It’s definitely ideal to allow your readers the luxury of knowing their first choice will be the only decision required to go to a new page. Dropdowns throw another surprise decision into the mix, but on the other hand they provide some organizational structure. There are definitely arguments on both sides of the fence.
@Colin Devroe: You’ve hit one of the many nails of this issue on the head; contextual navigation. I’m finding effective contextual navigation being used more and more and I really think it makes a lot of sense. When the time is taken to really think out the overall architecture of a website, there are a lot of great things that can be done. Part of the job as a Web designer, information architect, or otherwise is to ensure that your readers have the best possible experience. That includes finding what they’re looking for quickly and efficiently as much as allowing them to be aesthetically pleased as well.
@Ben: Again agreed; contextual navigation is a great avenue to take.
Yeah agree, drop the javscript drop down menus…
[…] Can we do Better than Dropdowns? Is there even a problem? […]