Skip to Navigation

Fly-out Menus are Evil

The Culprit Fly-out menu: a navigational solution. When a user puts their mouse over a navigation item, a menu automatically appears or "flies out". Items in that menu are clickable. Often used with intentions of de-cluttering the space and enhancing the user experience. Examples: Iowa Dept of Elder Affairs - Do they really expect the elderly to use this site?

 

Booz Allen Hamilton - Tabs meet fly-outs

Abt Associates - Two sets of fly-outs! Wait, three?

Lockheed Martin - Note the sub-sub-menu under Customers. Eek.

The Crime

  • Relies heavily on user's mouse control
  • Hard to select. See Fitts Law
  • Search engines may not be able to index your site (if fly-out is working with Javascript)
  • Not accessible to international users (who might need to look up words in a dictionary) or users with motor skills impairments (who have difficulty catching things that move).
  • Hides navigation in a menu. Users must go to fly-out navigation to get from one sub-section to another, even if they're in the same section.
  • Covers important content on the page

The Evidence UIE did some usability testing on sites with fly-out menus and found the following:

  • Users decide what they're going to click on, before the move their mouse.
  • "In our studies, we observed that once users realized there was more information available to them, they stopped and re-evaluated the screen. Users seemed disoriented by this disruption in activity and they lost confidence that they were clicking in the right places. The users now questioned a choice that seemed to be a good one earlier."
  • "...fly out implementations required our users to use awkward movements to make simple choices."
  • "Users became frustrated because they couldn't see the content in advance of choosing a category and some had problems with the menus going away when they used natural movements. Users expended so much effort to select a menu choice that they often missed stories that might otherwise have attracted their attention."

Questions to ask yourself before you act

  • How will my audience respond? Do they have the mouse control? Will they be annoyed?
  • Do I want a fly-out nav because 'it looks cool'? Is it a personal preference?
  • Are my sub-section titles long (over 15 characters) or will they grow in the future?
  • What happens when users increase or decrease text size?
  • How does this work with my CMS? Can I add sub-sections easily to the fly-out nav?
  • How will I handle sub-page navigation? Will the user have to go to fly-out menu to navigate between sub-sections?

Best Practices - if you're going to do it

  • Make the selection area wider that it appears so that it doesn't disappear if you are moving the mouse just a couple of pixels outside of the menu
  • Make it clear that it is a menu, for example by adding a down-pointing triangle next to the label. Crate and Barrel does a nice job of this. Note that all items in the fly-out menus are actions.
  • Work without Javascript
  • Use a delay before hiding the fly-out menu again, e.g. 250ms
  • Only use horizontal menus with vertical fly-out menus. The vertical area in which the mouse-pointer needs to be move is too small, i.e. typically 12-14px, and causes the menu to be hidden unwantedly.
  • Keep sub-section titles short

Examples:
Crate and Barrel
Target

Disagree? Have other thoughts? Send the bail money my way!

Sites I referenced and may have directly copied text from:
Nielsen Alertbox: Low-Literacy Users
Welie.com: Fly Out Menu
456 Berea St: Usability and Fly-out Menus
UIE: Users Decide First; Move Second