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