Post

Websites that stink - building effective drop-down menus

I was lucky enough to be able to attend an amazing web-based seminar (“webinar” – if you will) dedicated to improving website home pages. The seminar – Initial Scent: The Latest Thinking on Home Page Design – had an interesting focus: a website’s ‘scent’. The presenter suggested that users navigate a website based on the scent it emits, that is, users are attracted to keywords related to their task and follow these (the scent) to their final destination.

A particularly interesting aspect of the presentation was its implications on drop-downs and other forms of hidden navigation. The presenter stated that a user already has the intention to click on something when they begin moving their mouse, they will not hover over their target link before clicking. This means that if a drop-down were set to expand or appear on hover, the user would not see it or would catch only a glimpse before being thrown to another page.

As a result, we need a major revamping of the way we approach drop-downs. I recently came across an article describing ways to delay the appearance of drop-downs. This is exactly the opposite of what we should be doing (sorry PJ).

However, the concept of drop-downs is invaluable to presenting the greatest amount of scent possible, even if making it visible requires some apparently unnatural user activity. Drop-downs let designers pack in links while still keeping the navigation visually light and usable.

The Options

So, what can we do to maintain the unique content presentation abilities of drop-downs while keeping ‘scent’ in mind? There are a few options.

First, we can activate drop-downs on click instead of the more popular hover. This would agree with the presenter’s recommendation by allowing for the user’s initial scent attraction and then letting them narrow down their options. Also, this method ensures that the user is not blasted by drop-down activity if they happen to mouse over the navigation panel before realizing their presence.

Another option is to somehow alert the user to the presence of the drop-downs and their function. You could do this by animating the drop-downs on load so that users would (hopefully) get an idea of how the drop-downs work and wouldn’t be as shocked if they happened to land on one.

The last option is to get rid of drop-downs completely and create intermediate pages. These would essentially expand a drop-down into its own page and would create more ‘scent’ by allowing for more content describing each subsection.

These are just a few options to remedy the drop-down dilemma. While I took the presentation’s suggestions and statistics with at least a dozen good-sized grains of salt, the recommendations on a user’s mouse activity and the idea of ‘scent’ are too interesting to pass up. This is a problem that will definitely change the way I design websites and if you have any recommendations on how to effectively implement drop-down menus or alternatives, feel free to leave them in the comments below.

-->

Post Meta

At
06:22:00 PM
On
July 15
In
By
Tom Fadial

Comments

  1. I like the first and the third choices =)

    Carlos Eduardo

    Jul 15, 07:08 PM #

  2. Drop down menus are not necessary these days!!!

    Father Dom

    Jul 15, 09:52 PM #

  3. @Father Dom

    How would you know? Saying that drop down menus are not necessary “these days” is like saying ul and ol tags are not needed anymore. Drop down menus serve a purpose. Can you imagine using content management systems without menus? Some handle it, but the more complex CMSs would be horrid without drop down menus.

    Just because you think something isn’t necessary doesn’t mean it isn’t. To assume so is incredibly presumptuous.

    Tyson

    Jul 15, 11:50 PM #

  4. I Like the second and third option.
    and drop – down menus are necessary! Think about it,
    If microsoft still using it in windows, we still need it :)

    Shani elharrar

    Jul 16, 07:48 AM #

  5. I’ve never liked the ideas of dropdowns because it’s like giving a person a buffet of choices to feast on all at once instead of just giving them a few easier choices then directing their choice from another page full of choices. lol.

    But, sometimes a client explicitly wants it or sometimes I’m forced to build it into a design and when I do I like the idea of the last choice but feel that may be too overwhelming for a pop-up type window to open right where the link is. I guess if the popup link was very minimal it could work well.

    Thanks for the article.

    David

    Jul 16, 08:33 AM #

  6. Although I like the first option, it may present accessibility problems if not implemented well. Generally for accessibility the main link would take us to a page like option three in case the user can’t get the drop-down for some reason.

    If instead when they click the main link, the drop down appears, what will the user of assistive technology experience? I’m not saying that it couldn’t be done, just that the experience of all users should be taken into account.

    CW Cage

    Jul 16, 09:14 AM #

  7. It’s definitely a tricky subject because there is such a wide range of drop-down styles and formats…some better than others.

    CW Cage:
    The menu would still function normally for someone with assistive technologies (I’m guessing you mean a screen reader?). They should still be able to tab through the menu items and activate the drop-down when they select one.

    Thame

    Jul 16, 07:05 PM #

  8. Nice article Tom, but I think you may have misinterpreted the problem you’re trying to solve, You say it’s unnatural for a first time visitor to make use of a drop-down and then provide solutions that will force them to do so. Isn’t it better to cater for the user’s natural habit?

    I’ve written a bit more about this on my own blog: http://blog.steventew.co.uk/?p=55. Thanks.

    Steven Tew

    Jul 17, 12:10 AM #

  9. That’s a good point Steven, and I liked your article.

    However, the point is to present as much scent as possible while still accomodating the user’s tendancy to have made up their mind about where to click before they move their mouse. Applying the options above means that the user will not be slammed with drop-down activity should they happen to hover over the navigation while browsing or while approaching their target. Making the user aware of the presence and function of a drop-down (such as in option 2) alleviates this problem.

    We do want people to use drop-downs, that’s what they’re there for. Also, on many websites, clicking the main link (that would produce the drop-down) does not take visitors to an index or catalog page; instead, they go to the first page of that subsection which is almost always not what they’re looking for.

    Thame

    Jul 17, 07:43 AM #

  10. Ironically enough, too many of our users were confused by the hover action, so we changed it to an onclick action. Of course, the day after we did that people wanted their hover back :-)

    I think the point is that either way you go, you’ll never please them all. Perhaps the solution is to make both delay-hover and click work.

    PJ Hyett

    Jul 18, 09:15 PM #

Commenting is closed for this article.

Archive

Show Articles By:

You can show articles by time or category.