I've been having a discussion with a colleague about the desirability of drop-down menus: They're really keen to add one to the frontpage of our website. However, everything I've heard word-of-mouth has said people generally dislike them. What do you think? Is there any research to back my dislike up? Or quotes from those-in-the-know? Examples, etc? Or am I just letting my own preferences get the better of me and my colleague is right to think this is what's needed?
why don't you just try it on the website, if it looks good it looks good. I don't think there can ever be one set rule for anything, as something that looks bad in one place might look great in another
It's always a matter of personal preference. What looks good to you may not look as good to others. I personally don't like drop-down menus.
I don't like drop-down menus, becuase they are a hassle to code in the first place, and i'd rather just structure the site that people would see the sub menu if they were inside that section. Theres no real need to be able to access every page or little subsection just from the homepage, although some designers decide to try and cram it in. For me, the main menu, should be the main menu, 5/6 links to major subsections. Then people can see the further menus when inside those sections. Obviously you can provide a sitemap just to show how everything links together in addition to this.
I personally like them. It just makes a website so much cleaner & organized without being all cluttered up. And if we want more options, we just put our mouse over it... and a drop down menu with even more options appear. it's awesome!
I myself don't like them either but if your using it for list building then I can understand it. It is very important to do list building. If your not then your just throwing money out the window. While you still will get some sales from just posting your links here and there, the majority of people now days do not buy unless they are on your list and they see that your giving them good content. So even though many people dislike it, it actually is very essential for building your business.
In terms of user experience, regular menus (where all the choices are visible on the page) are quicker to use than drop-down menus because they don't require the user to take an extra step to go where they want to go. However, if you have many, many links and choices, it's a good idea to combine regular menus and drop-down menus. In terms of coding, just be careful with implementation. Drop-down menus can be inaccessible and bad for SEO if they're implemented as standard dropdowns (select input). It's better if they are implemented via CSS using lists.
You might find the following article useful: Designing Drop-Down Menus: Examples and Best Practices http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/ Hope this helps!
Hi all - thanks for the responses! The Smashing Magazine link certainly make me think, although articles on Message and Kitsimmons (can't post links yet as I've only recently joined!) offer an interesting counter-argument, particularly that iconic sites like BBC and ebay - often voted as user-friendly - don't use them. Just to clarify, our website represents a charity and the proposal is to have drop-downs on the main index running across the top. While I can see the wisdom of using one when you have loads of sub-options - like Amazon and their many product categories - I'm not sure whether we, ourselves, have the amount to justify it. Maybe a mega drop-down might be a good compromise - they seem to be better received and it could represent the "next page" (ie. the sub-menu page you'd get to by clicking on whichever index link you choose) as a drop-down on the main page instead?
I too cant stand dropdowns. As mentioned above they are a pain to code, and usually require some form of JS to get them to play ball in IE Plus I think they are pretty user unfriendly, especially multi-tier ones. Its pretty much a steady hand game to get to where you want to go, make one slip and you got to move the mouse back again.
Mort: you might want to go through Jakob Nielsen's pages: http://www.useit.com/alertbox/20001112.html and then about the mega-dropdowns: http://www.useit.com/alertbox/mega-dropdown-menus.html both are interesting, though most importantly, who is your audience? And since I've sent you his way and this is a charity? site you might also want to read this one too: http://www.useit.com/alertbox/nonprofit-donations.html : ) Let's say you all decide to do a dropdown and it doesn't matter if it's a mega or not. Keep these things in mind: you will have someone, somewhere, who cannot get the dropdowns to drop down. Whether this is an IE6 user who has Javascript off (assuming you use JS to help IE6 :hover over non-anchors), or someone who can't use a mouse very well, or whatever... always always always have that top-level link actually go somewhere. Don't do href="#" as you see in both CSS and Javascripted menus. They go nowhere and do nothing. Instead, have them go to a page who somewhere lists the same links as the submenu. More likely than not, those people who CAN get the dropdowns to work won't click the first-level but will mouse down to the lower ones, meaning they don't get forced into any pit-stops, they can go directly to the sublink. Those who can't, still can get somewhere. Example: http://www.motorrijschoolemo.nl Here, each page always has the sublinks, due to the customer/client's preference. But you can also have a dedicated link page, or an HTML sitemap (a page with just all your site's links and some text giving people some direction, not to be confused with the for-the-googles xml sitemap) Things to keep in mind: try to stick to a CSS-only menu. They generally don't work with IE6 because most CSS menus rely on li:hover to show the dropdowns and IE6 can only :hover on anchors (who cannot contain blocks such as a submenu UL). However there are two absolutely pure CSS dropdowns that I know of: Stu Nicoll's invisible-table dropdown (commented-out tables are children of the anchor and contain the submenus): (cssplay.co.uk/dropdown I think) YuriKolovski's float-drop menu (where the anchor is correctly a sibling of the ul and uses margins on :hover of the a to bump a previously-hidden submenu): http://www.sitepoint.com/forums/showthread.php?p=4363748 Which Stu I think now also has on his site otherwise, IE6 needs some Javascript help, either from actual javascript (like at Sons of Suckerfish or Dean Edwards ie7.js, or you can use Peterned's whatever:hover which is a file who sits on your server, and you only touch your CSS with a special declaration on the body for IE6 (keep it separate from your other body declaration). Don't use the popular display: none, display: block method of hiding and showing the subs, unless you want everyone using a screen reader to be stuck going through your backup main-level link. Display: none is strangley honoured by many screen readers and it will be as if the submenu doesn't exist at all. If you use the method detailed on the Sons of Suckerfish page (link above) where the submenus are absolutely positioned and simply pulled offscreen and back onscreen, a screen reader user can see the whole list and navigate it normally like they do any other list. Obviously a blind user doesn't care about hiding submenus because they don't care how the page looks. A visually impaired person using a screen reader might like the cleaned-up look of a page that a dropdown (as opposed to a full menu) might give, though. It's also very nice to make the menu keyboard-accessible. This means using :focus with your :hovers in the CSS, and if you are using negative margins to pull the submenus offscreen, you'll find that you'll need to use px as units instead of em to get :focus to work. As a plus, you can also use Javascript to take a fully functioning CSS menu and enhance it: you can make the entire submenu appear with :focus (normally you can only see the single subitem one at a time with :focus), and you can give the submenu a delay for the :hover. A slightly delayed :hover is nice for people who can use a mouse but have shaky hands, bad coordination or a bad mouse (my husband has a jerky mouse), so slightly going off the submenu for an instant doesn't lose the :hover. This is very nice. Again I send you to the motorrijschoolemo page, where it's keyboard accessible with regular :focus and has the additional javascript, which was taken from (and slightly modified for a Firefox and IE6 bug) from Blake Haswell's Suckerfish Part Deux: http://blakehaswell.com/lab/dropdown/deux/ (you can see the modification on the motorrijschoolemo page, where there's a line with :hover:focus all together). You can see the bug in Firefox on Blake's page, where you hover on a submenu item and then click it. Even though it's a demo and the urls are just "#", you'll see the problem of the submenu sticking. I hope this didn't scare you away from dropdowns but you are right to think hard about whether you need them or not. I think, done correctly, they can be nice and keep a page clean.
For the first time ever I am upset with Google. I (sorry, it's gonna be strong) despise the drop down search suggestions. I loved Google for its cleanliness and non-interference. I search things differently than cyber bots and really don't need to be reminded about Lindsay Lohan while I'm looking up ancient mummying techniques or hunting for a better bookmark printing price. True, the preference button fixed the problem, though it did not 'stick' and I found I was taking time to undo what the site wanted me to do instead of getting my work done. Now the ability to change it is gone. Yes, I found the old page and tried to reset the preference but there is no response - drop-down remains. Come on guys... you were the best. Why fix something if it's not broken? Oh, I know: ONE person likes it. Am I right? Arrrg!
google_lover: I don't have to deal with such google tripe : ) because I don't let google's scripts work in my browser. If Google bothers you that much, you might be happier googling the way I do, with Javascript turned off (you might even be able to set that in your browser, no scripts just for google's main page). However, be aware that stopping scripts means you need to either tab over to the search bar (there's no skip link, damn them) or click with your mouse. One of google's scripts moves the focus onload to the search bar. Other than that, normal google searching is nice and fine without scripts. Google maps on the other hand, sucks (kinda works, but the map is limited in zoom scope).
If your navigation bar is long or you have many pages on your site, than obviously you need drop down menus.