The Tarnished Golden Hammer -- Drop-Down Menus
The Tarnished Golden Hammer -- Drop-Down Menus
These days it's the rare website that does not have some sort of drop-down / fly-out menu system. They're usually pretty, and they include a massive amount of information in a small amount of increasingly precious screen real-estate. The best ones also gracefully degrade, allowing those without access to JavaScript a way to navigate the site. However, the very nature of packing that much information is the worst quality of drop-down menus. Their all-encompassing nature tends to make them the only navigation on the site. Also, even the most accessible drop-down menu can be hard to use for those who aren't completely immersed in computers. Too Much Information Drop-down menus are the ultimate solution for organizing as much information as possible in the hardest possible way to view it. If your site has only 5 sections, and each section has only 5 sub-sections, we've already got 25 links in a single area. Adding links and sections makes this information density even worse. Soon we'll have 60, 80, or even 100 links in a small bar only 40px tall by 600px wide. "But they're divided into groups!" they say. "They're easy to look through because they're divided into groups!" Most times, it's these very groups that provide the most problems. Which group does the link belong in? Should the layout of the groups match the directory hierarchy of your site? "But operating systems like Windows have drop-down menus!" they say. "That means they work!" They work best when there's a standard place for things. In an operating system's menus, the File menu contains file operations and the Edit menu contains edit operations. These standards don't exist on the Internet. "Downloads" could contain your free product trials, or "Products" could. You could call it "Solutions" instead of "Products". Does "About Us" also include "Contact Us" or are they two sections? Would it be better off if we called it "Company"? Isn't the entire site about our company? There are ways to avoid these problems. We could put multiple references to the same document in the hierarchy, but that breaks the illusion of matching our site's hierarchy. We could use simple, direct wording, but even within the same language, meaning is fluid. The problem remains: The more information you pack into an area, the harder it is to retrieve it. Inaccessible Most drop-down menu frustration comes from the dexterity required to navigate them. Like a video game, one small wrong move and you've got to go back to the beginning. The solution to this, making small delays when opening or closing, is sometimes worse than the disease, requiring users to hold their mouse in one spot to get a menu to display. Worse, for those using screen-readers or text-based browsers, the entire drop-down menu system is flattened and displayed. Fifty or more links are all displayed in a neat column, making the user skip them on every single page. Now, the groupings are almost worse than useless. They've compounded the problem of navigating the menu. If we want to reach one of the menu items, we have to read through every link. Drop-down menus seem to help the user who can use them: It reduces the amount of clicking to get to where the user wants to go. It does so by making it less efficient to navigate the menu, which is contrary to our reason for using drop-down menus. What Should I Do Instead? Intelligently-designed category menus are the best alternative to drop-down menus. Keep your top-level categories in your header, but don't make them drop-down menus. Instead, link them to category indexes that contain navigations to the sub-categories. If necessary, make sub-category indexes that link to sub-sub-categories. As with so many other things, WebGUI makes it easy. One Navigation asset can be used to create all your category index navigations, sub-category index navigations, and so forth. To make the category navigation, in the Navigation configuration, choose the "Pedigree" option under the "Relatives to Include" property. This causes the navigation to include the ancestors back to the Start Point and the children of the current asset. If we set the Start Point Type to be Relative to Root and the Start Point to be /a/b/ (+2), this will get our sub-categories, sub-sub-categories, and so on. If we include our "Self", we'll also get the Category in our navigation when we're on the Category page. This completes our index navigations. All we need is a main category navigation and we can navigate through our site. Another useful and usable navigation that WebGUI makes easy is the bread-crumb trail. By simply selecting "Ancestors" and "Self" in the Relatives to Include and choosing the "crumbTrail" template for our Navigation Template, we have a breadcrumb trail that follows the user around. Using these three in combination, the main site navigation for the categories, the flexible intra-category navigation, and the bread-crumb trail, we can make an easy-to-navigate website free from the perils of drop-down menus. Inspired by Drop-down menus; no thanks!
Re: The Tarnished Golden Hammer -- Drop-Down Menus·
Hi, May I say that a good example of this is this website, http://www.plainblack.com. If I understood wrong, please share a link to a site that is using the above mentioned menu. P.V.Anthony
Re: The Tarnished Golden Hammer -- Drop-Down Menus·
I agree with your, and the original post's, logic. I have used a similar argument against using drop-down and fly-out menus. It's too much information, inaccessible and usually results in poor interation in one of the many browsers. I've also found that when a client has the desire for a one of these navigation objects, it's difficult to change their minds. That being said, it still doesn't hurt to try since it betters the design. We have had instances where we were converting an existing design into WebGUI (WG). We recently contributed a drop-down/flyout package to the contributions section of webgui.org, created during such a project. It took a bit of work so we contributed the package hoping it would help other WG devs when this is required from a client. That being said, it's not a recommended design solution. When better interface design and IA can dissuade a client from going that route, it will certainly improve the usability of any website or application. Using pages dedicated to a section makes a larger site much easier to use. If a client is even considering drop-down menus, the project is a promising candidate for sectional pages (pages that offer a summary and navigation of the section contents). Maintenance costs may be another way to dissuade the use of drop-down/flyouts. They are fragile navigation implementations and you can't be sure how every browser behaves, in every version. I've visited sites over the years that I couldn't use due to these types of menu systems. Breadcrumbs are very valuable, and probably under-rated, navigation tools. They let the user know where they are in the IA structure and how to get back to where they were. Kind regards, Diona Kidd ----
Re: The Tarnished Golden Hammer -- Drop-Down Menus·
You're correct. Plainblack.com uses exactly this type of navigation. The main category pillboxes at the top, and intra-category navigation to the left (using the configuration I described). No crumbtrail on plainblack.com, but the left navigation fills approximately the same purpose (it just doesn't go all the way to the Home page). |
