A new twist on an old element of website navigation.
How well a website is navigated by the end-user is ultimately the truest test of its success. In my day-to-day travels around the internet I find too often you get some pretty horrible uses of drop-down menus. Mistakenly, web designers often feel the only way to provide navigation to a website with ‘deep content’ is to have drop-down menus that often go 2-3 levels deep. This may have been a by-product of slow, page-load times due to low bandwidth. End-users didn’t have the patience to wait for a page to load only to find out what they want is still a few clicks away. Now that broadband use is so prevalent and search sites like Google and Bing are often the fastest way to get direct access to content, web designers are using the drop-down less and less.
If you study modern website navigation you’ll find that many sites still need this navigation element, they just use it differently. Amazon uses it sparingly to allow you to ‘browse’ if needed, but a seasoned Amazon shopper will go straight to the search box. Other forward thinking web designers have taken a new approach, using what many in the industry have dubbed the ‘Mega Drop-Down’. This new approach provides more navigation options for the users, and options are often organized in groups to emphasize connections among items. Like it’s predecessor, the aim of the mega drop-down is to provide a tool for digging into the sections of the website in a clever and tidy way.
A simple example can be found on the website developed for Aviary.com, an online software company. The menu here creates a graphical way for users to differentiate several online product offerings. For me, it promotes discovery as well.
Last years redesign of the White House website also gave us a good use of the mega drop-down. A very simple execution that gives the website a more modern feel and lets the public find information on what is ultimately a very content-rich website.
A more complex example can be found at the Porsche North America website. You can see in the example below that the web designer has created a useful navigation tool for the entire Porsche line of cars. It becomes a way to see the entire structure at a glance without ever having to click to a new page.
One of the the most advanced uses of the mega drop-down can be found at the Phillips USA website. Considering the diversity of their product line, a hybrid-style menu like this was a genius move and very forward thinking in its application. While it does use Flash to achieve this effect, it manages to keep the user engaged with simple, icon-driven menus to drive you through the product lines quickly. Below, you can see the home page before you click and then the menu that comes up after.
So the drop-down menu is not dead. Web designers have found situational uses for it that create functionality for delving into deep website content. Drop-down menus do in fact organize content into small, uncluttered elements, but if not done correctly, they can be just as bad as a messy layout. Use them wisely and your customers will thank you for it!
There are a few more examples listed below to further illustrate best practices in drop-down menu design. Feel free to provide your own example links in the comments.
Food Network - http://www.foodnetwork.com
Action Envelope - http://www.actionenvelope.com
Samsung USA - http://www.samsung.com/us/
Boxee TV - http://www.boxee.tv
