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.
Why?
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:
If you’ve used the Mac Finder in “list mode” you can drill down to sub-folders within a window by clicking on the arrow next to a folder. Screenshots: Closed, Open.
One site that I use often, my Web host‘s control panel, uses Javascript to create a similar experience. Screenshots: Closed, Open.
For those with Javascript disabled, 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 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.
Speaking only as a person who scans lots of news sites I’ve always found the LA Time’s the easiest to get around in, spot stories that interest me. I like their left hand navigation bar and the way they present the sections below the headlines better than the similar implementations.
I was a copy boy at the morning paper (can’t remember whether it is the Journal or Constitution anymore) for a few months many years ago.
Richard, I agree the Times’ site does a pretty good of simulating the idea I’m looking for… they just do it in the traditional way.
Their sub-section menu shows up once you’ve clicked on a main section title and been taken to that section’s home page.
By using Javascript they could also easily provide a way for the menus to drop down automagically when the user clicks on the top-level link.
However, their navigation is really bad.
First its buried beneath advertising. Once you get to the navigation its confusing what are “Sections” I didn’t see Metro or Local or anything similar listed there instead I have to click on California / Local above.
The way they have their menu options grouped is very difficult to navigate.
I hate flyout menus as well and the AJC.com example you pointed to are really bad. The thing is I’ve never seen a compelling reason to use them and I know of no usability data that supports their need. It’s been proven (by UIE amongst others) that in general users don’t mind clicking to get to what they are looking for as long as they feel they’re on the right track.
This idea of needing dropdowns or flyouts just to save users a click is misguided and frankly causes more problems as it’s usually not done very well.
While I do think it’s better than flyouts, I don’t really like expanding navigation either. I mean usually you have to click to get it to expand anyway so what is the point?
I think the time spent on these navigation elements would be better spent on better information architecture and more clearly presented traditional navigation schemes.