Fly-out Menus are Evil

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