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.
- Relies heavily on user’s mouse control
- Hard to select. See Fitts Law
- 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.
- 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
Disagree? Have other thoughts? Send the bail money my way!