Believe me, I am a Web designer. The reason why this page looks so odd is because you're viewing it in a browser that doesn't support Cascading Style Sheet positioning. It doesn't work in particularly old browsers. However, if you scroll down, you'll find all my content. Don't let this site fool you, I've designed plenty of sites that work in older browsers, this was just my first step towards what is the future of Web design.

heisel.org

heisel.org > Blog > 2003 > 12 > 09 > Entry

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

Comments

Richard Evans Lee December 11th, 2003 | Link to this comment |

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.

Chris Heisel December 11th, 2003 | Link to this comment |

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.

Keith December 11th, 2003 | Link to this comment |

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.

Disclaimer: I work at The Atlanta Journal-Constitution. The opinions expressed here are my own, and do not reflect those of the AJC, Cox Newspapers, Cox Enterprises nor any other party.

Mail carrier N. Sorenson delivering Christmas mail through the snow. (Chicago Daily News/Chicago Historical Society)