December 9, 2003

There’s nothing like a click

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.

Filed under: Web design

Next:
Previous:

Related

  • http://www.edifyingspectacle.org/gullibility/blog/ Richard Evans Lee

    Speak­ing only as a person who scans lots of news sites I’ve always found the LA Time’s the eas­i­est to get around in, spot sto­ries that inter­est me. I like their left hand nav­i­ga­tion bar and the way they present the sec­tions below the head­lines better than the sim­i­lar implementations.

    I was a copy boy at the morn­ing paper (can’t remem­ber whether it is the Jour­nal or Con­sti­tu­tion any­more) for a few months many years ago.

  • http://www.heisel.org Chris Heisel

    Richard, I agree the Times’ site does a pretty good of sim­u­lat­ing the idea I’m look­ing for… they just do it in the tra­di­tional way.

    Their sub-​section menu shows up once you’ve clicked on a main sec­tion title and been taken to that section’s home page.

    By using Javascript they could also easily pro­vide a way for the menus to drop down automag­i­cally when the user clicks on the top-​level link.

    How­ever, their nav­i­ga­tion is really bad.

    First its buried beneath adver­tis­ing. Once you get to the nav­i­ga­tion its con­fus­ing what are “Sections” I didn’t see Metro or Local or any­thing sim­i­lar listed there instead I have to click on Cal­i­for­nia / Local above.

    The way they have their menu options grouped is very dif­fi­cult to navigate.

  • http://www.7nights.com/asterisk/ Keith

    I hate flyout menus as well and the AJC.com exam­ple you pointed to are really bad. The thing is I’ve never seen a com­pelling reason to use them and I know of no usabil­ity data that sup­ports their need. It’s been proven (by UIE amongst others) that in gen­eral users don’t mind click­ing to get to what they are look­ing for as long as they feel they’re on the right track.

    This idea of need­ing drop­downs or fly­outs just to save users a click is mis­guided and frankly causes more prob­lems as it’s usu­ally not done very well.

    While I do think it’s better than fly­outs, I don’t really like expand­ing nav­i­ga­tion either. I mean usu­ally you have to click to get it to expand anyway so what is the point?

    I think the time spent on these nav­i­ga­tion ele­ments would be better spent on better infor­ma­tion archi­tec­ture and more clearly pre­sented tra­di­tional nav­i­ga­tion schemes.