Jun 10
2008

Dropdown/flyout menus: A Rant

Posted by: Jen Kramer

Crossposted from my Joomla class discussion:

Some of you have been very interested to discuss dropdown menus (also called flyout menus) on your websites.

By "dropdown menus", we're talking about the list of links that show up as subnavigation for a given piece of your website. Roll over the link for "about", for example, and you see a list of links for Mission, Vision, Board, Senior Management, History, etc.

In general, these menus are technologically driven by some combination of CSS and JavaScript. The functionality is built in, at a low level, into Dreamweaver. If you want higher level functionality, you can go to ProjectSeven and download a more fully functional extension for Dreamweaver to get this to work. I strongly suggest the P7 menu system ($90) if you're going to go this route. (There are also some Joomla extensions for this). You will be re-inventing the wheel if you try to code it all yourself, and you will go bald trying to figure out all of the cross-browser bugs you'll encounter.

Some implementations spell out a full list of links in the HTML so the search engines can follow the links. This is vastly preferred, otherwise the search engines may not even be able to access parts of your site as the navigation is javascript driven. (The project seven extension does this right.)

As with all types of technology, the first question you need to ask is:
WHAT PROBLEM ARE YOU TRYING TO SOLVE?

Frequently, dropdown menus are used because:

  • "People" want quick access to other areas of the site without a million clicks to get there. Dropdowns get them there immediately.
  • I need to show subnavigation somehow.
  • The button name isn't completely obvious about what lives behind it.
  • The site needs "interactivity" and dropdowns are a good way to provide it.
  • My boss wants them, and there's nothing I can do to talk him/her out of it.
  • Our competitor's site uses them.
  • I'd love to hear other reasons.

I have yet to hear a convincing, compelling argument for the use of dropdown menus on ANY website. I have yet to hear a non-geek wax poetic about their love of dropdown menus.

I steer my clients away from these menus as often as I can. My reasons why include:

  • "People" do not mind navigating through "a zillion clicks" to get to the content they want, provided each click is a clear choice, and it feels like they get closer with each step. (The web developer, though, is another story -- they often love dropdowns since they take them right to the content they already know is there!) Steve Krug talks about this extensively in his book "Don't Make Me Think". Remember,Krug's Second Law of Usability states, "It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice." If your site makes it HARD to find the content a user needs, then you should address that problem, not stick a band-aid on it with dropdown menus.
  • You need to design with subnavigation in mind, however many levels it takes. That's why you design your site map BEFORE the graphic design. That way you know EXACTLY how many levels of navigation you should design for, where they appear on the page, and how they will work. Dropdown menus give you an easy way out, as you can nest them indefinitely, but your users will hate using the site to get where they need to go, as the menus cover content.
  • If your button names are bad, FIX IT. Use the conventions that exist on the web! There's no need to call something "Jen's Crib" when "About" does just fine for the content I'm trying to describe. You're not being edgy -- you're being stupid, because you're hiding content from your audience in the name of some vague "branding" nonsense. Branding is good as far as it goes, and it definitely has a place. But you don't see books being redesigned to put covers inside, read them right to left, page numbers every other page, blah blah blah -- there are standards to a book, and that's a Really Good Thing, because we can pick up any book and read it without instructions. There are standards on the web, too. They aren't restrictions!!! They're how the media works, like any other media out there. Follow the standards
  • Dropdown menus are "interactivity"? Really???? Hiding the navigation and being unaware that it's there before you move your mouse makes the site more "interactive"? UIE did a study way back in 2001 that says users decide what to click on first, move their mouse second. See http://www.uie.com/articles/users_decide_first/. When the menu pops up, it's jarring and disorienting. Now I have to mouse over each link to figure out what I *really* want, doubling or tripling my time between pages.
  • Politics is inevitable in any web job. Your job as a developer is to provide clear, compelling information about each choice that has to be made about a site. If your boss is the kind who's always right and doesn't want to know when he's not, then you'll get stuck with dropdowns. Otherwise, talk him out of it. Or at least try. I've succeeded in most every case I've come across -- you can too.
  • As for competitors, do we slavishly follow EVERYTHING they do? If so, why on earth are you in business? Do things your own way! Just because the competitor did it, doesn't necessarily mean they know something you don't. It just means they thought they were cool, or their web developer wanted them, or their boss insisted, or they needed "interactivity", or some other silly reason.

Can anyone make a compelling argument for dropdown menus? I would love to hear it.

Powered by Azrul's MyBlog for Joomla!