Usability and Fly-Out Menus

In Usability and Fly-Out Menus D. Keith Robinson writes about the (lack of) usability of most implementations of fly-out (a.k.a. dropdown or pulldown) menus on websites.

My opinion? In nearly all cases, fly-out menus add unneccesary complexity and code to a site. They can also make a site very inaccessible and hard to use. Many implementations are fragile. What happens when JavaScript is off? When you increase or decrease text size? When your client uses a CMS to enter more text than fits in the menu? What about people who don’t use a mouse or have reduced hand-eye coordination? How are search engine robots going to find their way around the site?

Think very carefully before you decide to use fly-outs, and consider the consequences. And make sure your only reason for using them isn’t “It looks cool.”.

Posted on March 28, 2004 in Accessibility, Usability

Comments

  1. April 1, 2004 by Richard Grevers

    I think that with just a little care, nearly all of the potentia problems you mention can be overcome. Firstly: Always ensure that all your menu labels (the elements which trigger the appearance of a menu when hovered) are themselves links to pages which introduce the section and link to everything that the menu does. (Navigable without scripting, navigable by search engine robots), Next, choose a system which degrades nicely when there is no css. At http://www.nzmint.com I employed Mike Foster’s CBE library in a design which emulates fixed positioning in IE. View the pages without CSS and you will see that page content is preceded only by the menu labels (= main section links), with the section contents following afterward and the full menus last of all, in a horizontal layout (I don’t believe in restyling lists, as they do not fall back gracefully.

    The one accessibility issue which I concede still exists is that keyboard link navigation “goes dark” for a while in author mode while you step through all the invisible links.

  2. April 1, 2004 by Roger (Author comment)

    I agree that the menu in your example is better than many others I have seen. It being just one level deep makes it easier to use, and the sublinks of the active section are repeated in the left column, which is nice. Keyboard navigation could still be a problem though. And it still clutters up the code somewhat, but yes, this menu is much better and less complicated than multi-level menus.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.