DHTML Rollover Menus
November 27, 2002

I've had to use dynamic rollover menu in two recent project. One out of choice, another because the client had previously used them. This prompted me to think it a good time to take a hard look at this method of navigation.

What are they?
Why use them?
Why not to use them
Guidelines
Resources

WHAT ARE THEY?

They are more or less the navigation flavor of the month. They are called many things: Rollover menus, DHTML menus, fly-out, pop-up, pop-down, hierarchical, cascading... you get the point, but they all have a list of items that expand when the title is moused over or clicked on.

It's easier to show examples (click image to see larger view):


Drop-down


T-Mobile (in top nav)


BrainJar.com (in top nav)


Fly-out


Crate & Barrel (in left nav)


MS Windows Family (in left nav)


Cascading


MSNBC (in left nav)


The Jane Goodall Institute (in top nav)

WHY USE THEM?

  • Compresses menu items into minimal screen real-estate, eliminating distractions and helping user focus on items in main content area
  • Allows for simple unclutered design
  • Helps minimize the number of clicks to destination - good for advanced users
  • Serves as a means to gain overview of sites' breadth and depth without having
  • to navigate thru the pages (kinda like the ill-fated sitemap pages)
  • User are already used to menus from non-web software applications

WHY NOT TO USE THEM

  • Hard to ensure consistent implement across all platforms and browsers
  • Accessibility issues. If menus are only visible after they are moused over, then a screen reader will not see them as links
  • User test have shown that many users have difficulty using them, since some require precise mousing skills to select the right item (especially menu selection requires an "L" mouse movement. Diagonal movement sometime deselects the menu)
  • The options remain hidden until they are "discovered"
  • Users are confused by the inconsistent behavior implementations
  • Usability studieshave shown users decide what they are going click before they move the mouse

GUIDELINES

Personally, I would prefer to stay away from them whenever I can but if I am asked to use them, here are some guidelines I would try to follow for implementation:

  • Use them when you are happy with presenting to the user the default page state with all the options hidden
  • Provide visual cues that there a hidden options (arrows in the direction of the menu are most common cues)
  • Make menu headings clickable and provide alternate means of navigation. This is so that users using screen readers will be able to navigate the site
  • Make sure menus respond quick. Don't use animations
  • Combine with breadcrumb trail
  • Make targets reasonably sized so that it does not require high levels of mousing skills
  • Avoid small fonts
  • Allow for graceful degredation over browser that won't support them

RESOURCES

Articles discussing usability issues:

http://www-106.ibm.com/developerworks/web/library/us-tricks/
?dwzone=web#h15777

http://world.std.com/~uieweb/Articles/whatTheyWantArticle.htm
http://www.shorewalker.com/pages/flying_menu-1.html
http://www.webreference.com/new/011011.html

Good Clean example (which behaves more like drop-down menus in desktop apps):

http://www.gazingus.org/dhtml/?id=109

Links to sites mentioned here:

http://www.t-mobile.com
http://www.brainjar.com
http://www.microsoft.com/windows/
http://www.crateandbarrel.com/store/
http://www.msnbc.com
http://www.janegoodall.org



Comments
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?