heisel.org

There’s nothing like a click

Tuesday | December 9, 2003 | 11:13 am  

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 appli­ca­tions use them.

I under­stand the need. As a designer, you have to con­stantly make choices about how much infor­ma­tion to present — what to hide, what to show. For a very deep site, it can be over­whelm­ing to present all of the sec­tions and sub-​sections of site.

I per­son­ally tend to favor an approach that does some good top-​level fac­tor­ing so you can present the user with a decent number of choices that is not too over- or under-​whelming.

Some design­ers turn to fly-​out menus, which I can’t stand.

Why?

The fun­da­men­tal 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 acti­vates a form, a click on the home button in the browser lets the user escape.

All fun­da­men­tal change on the Web is started by a click.

Fly­outs annoy me because they intro­duce a fun­da­men­tal change — the layout changes, con­tent and/or nav­i­ga­tion may be cov­ered up by the flyout — on hover.

Users may have to move their mouse across a page to access in-​page nav­i­ga­tion, browser nav­i­ga­tion, scroll­bars, other appli­ca­tions, 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 — expect­ing to see the URL in the status bar, or a title if its pro­vided. They may move the mouse over the link as a vir­tual equiv­a­lent of run­ning your hand over a shelf of books while look­ing for the right one.

Any way you slice it, it can be very dis­rup­tive to have a menu come flying out of nowhere.

If you have to obfus­cate 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:

If you’ve used the Mac Finder in “list mode” you can drill down to sub-​folders within a window by click­ing on the arrow next to a folder. Screen­shots: Closed, Open.

One site that I use often, my Web host’s con­trol panel, uses Javascript to create a sim­i­lar expe­ri­ence. Screen­shots: Closed, Open.

For those with Javascript dis­abled, you’re taken to the first sub-​menu option when you click on a top-​level option, and on the page you’re taken to the menu has been expanded…

So, though I think having more options vis­able to start with can avoid a user jump­ing back and forth, if you’ve got to do DHTML menus, please let’s do the twist.

Permalink | Comments (3) | Categories: Web design