Flyout menus: I don’t like ’em. I don’t want ’em.
Recently, my employer, AJC.com, switched to using flyout menus, and many other Web sites and Web applications use them.
I understand the need. As a designer, you have to constantly make choices about how much information to present — what to hide, what to show. For a very deep site, it can be overwhelming to present all of the sections and sub-sections of site.
I personally tend to favor an approach that does some good top-level factoring so you can present the user with a decent number of choices that is not too over- or under-whelming.
Some designers turn to fly-out menus, which I can’t stand.
The fundamental user-interface on the Web is a click.
It’s a click on a link that takes a user to another page, a click on a submit button that activates a form, a click on the home button in the browser lets the user escape.
All fundamental change on the Web is started by a click.
Flyouts annoy me because they introduce a fundamental change — the layout changes, content and/or navigation may be covered up by the flyout — on hover.
Users may have to move their mouse across a page to access in-page navigation, browser navigation, scrollbars, other applications, etc. What I’m saying is, there’s a whole lot of moving going on, when it comes to the mouse.
Users may even move their mouse over link choices — expecting to see the URL in the status bar, or a title if its provided. They may move the mouse over the link as a virtual equivalent of running your hand over a shelf of books while looking for the right one.
Any way you slice it, it can be very disruptive to have a menu come flying out of nowhere.
If you have to obfuscate menu choices, then I think the better way to do it is with the Mac twister style.
What’s the Mac twist, well it goes like this:
So, though I think having more options visable to start with can avoid a user jumping back and forth, if you’ve got to do DHTML menus, please let’s do the twist.