blog
Drop-downs and Fly-outs
January 31st, 2006 by OlgaAs of late, I’ve been thinking about drop-down and fly-out list design elements. I’ve pinged my network to get an idea of the industry’s thoughts on this matter. As for me, I find they fragment and remove the "big picture" User Experience.
In my research and conversations with IA and Usability professionals I’ve found that drop-downs are OK to use in forms or when the user knows what’s behind the dropdown - as in states. But for main navigation elements, drop-downs and fly-outs should not be used.
Jacob Nielsen states that "Drop-down menus are often more trouble than they are worth and can be
confusing because Web designers use them for several different
purposes. Also, scrolling menus reduce usability when they prevent
users from seeing all their options in a single glance."
An article in the User Interface Engineering site explains that "sites without these [drop-down and fly-out] design elements did a better job of getting users to the content they sought and to valuable content they didn’t previously know existed."
Here are some thoughts from IA and Usability experts:
- Donna Maurer: Familiarity with the domain - When users are
familiar with the domain it is OK to hide the options in a drop-down
list - users can determine what they need to supply from the label
(think of a list of States as an example). - Todd Warfel: We live by one major guideline - Predict before you click. So,
if the user can predict what’s going to be in the menu before clicking,
then you’re 90% on your way to success. This covers things like:
Months, Days, Years (short lists of years), States, etc. I know before
I hit that menu what states will be listed. The other 10% of the
challenge is the navigation of the list - longer lists are difficult to
navigate and most people we’ve observed don’t know you can type on the
keyboard to jump down the menu. - Elton Billings: They are perfect to conserve screen real estate in situations where the user is likely know know EXACTLY what the list contains before they even expand it. For example, selecting your area code to send you to a region-specific site.
