Usability and Fly-Out Menus
March 25, 2004 | 
36 Comments
Christian asked me today if I was strongly opposed to fly-out menus.
My immediate reaction was, “Hell yes I’m strongly opposed to fly-out menus!”
I didn’t even really think about it. I know I’ve looked into them before and found them wanting, but I couldn’t really remember why. I also know that I hate using them.
Then I got to thinking that I might actually want to find out what he was thinking they were to be used for and go back and re-educate myself as to why I don’t like fly-out menus.
I guess it’s not very professional of me to make a snap decision like that without gathering all the facts first. So I did some research and it turns out that I was probably right in the first place.
I can see how they could be helpful to a designer to save space, and I imagine that they are often viewed as something to help the user get into the site more quickly.
The biggest problem with fly-out menus is that they aren’t usually implemented well and are used with full understanding of how they might effect the user. In general they cause problems and seem, to me anyway, to cause more harm that good.
Just take a look at this “helpful” page. This site had to go so far as to add a help page for they’re fly-outs. They say, among other things:
One other possible problem you may encounter with fly-out menus is “sticking”. For example, when you run your mouse down the left navigation bar to see the contents of all the menus, the fly-out for “Publications/Information” will remain open as you go down to “Contact Us”, “Home”, and “Site Search”. This will not affect your ability to go to those pages, but the sticking is the result of imperfections in the HTML code. The menu is stuck because there is no fly-out menu for those three categories- they are stand-alone pages. We have not yet identified a way to keep the menus from sticking, but will correct this when a fix is found.
Oooohkay! Hmm, maybe using a fly-out isn’t the best solution here. Consider the audience. By the way, if you have a help page like this, you really should take stock of your site. Chances are if you have to explain it like that, you’ve got some usability problems.
In any case I did quite a bit more research and I couldn’t find one good argument to back up the use of fly-outs. I did find quite a few examples of why not to use them. The most compelling of which came from an article at UIE:
We found users follow a pattern: they decide what they are going to click on before they move the mouse…Unfortunately the information in fly outs, rollovers, or dropdowns can’t help users decide where to click because the information isn’t available to users when they are making their decision. It isn’t until after they’ve decided where to click that they see what the element has to say.
What this says to me is that fly-outs are basically useless. I mean if this is the case, then what is the point of using a fly-out, even if it is well implemented? Which, as we all know, the vast majority are not.
Having said all that and, in essence, given fly-outs a very bad name, I’ve still not ruled them out completely. Surely there is some case where they’d be useful? Not having ever witnessed a user deal with them before I’m very curious as to how that would go.
I’m interested to hear others opinions and experiences with fly-outs. Do you like and/or use them? Do you hate them? Have you ever user tested with them?
I’m pretty sure I won’t be going down this road any time soon, but if I do, you can rest assured I’ll be user testing them and will be more than happy to share the results.
Filed under: IA and Usability
Comments
1. Simon Willison said:
I thoroughly believe that the rules for usability are different for applications that people use infrequently (e.g a public website) vs applications that people use every day (an intranet application or a blogging tool for example). Of course daily applications need to be easy to use, but the need for instant discoverability is reduced. In the case of flyout menus, I can see how they could be useful in an application with a large number of options that would otherwise require multiple “clicks” to get to the required tool - not to provide critical navigation, but to speed up navigation for users who knew the app and knew where they wanted to go (the quintessential power user).
On a public site they are certainly a bad idea, for the reasons you mentioned. I was greatly amused by the sentence “This site uses Fly-out menus to increase usability.” on a page explaining how to deal with the usability problems introduced by the unconventional navigation system!
Posted on March 25, 2004 05:55 PM | #
2. Brian said:
So lets see some well designed sites with a good amount of subnavigation that could have been slopped together with a flyout menu, but weren’t.
Posted on March 25, 2004 05:55 PM | #
3. Keith said:
Simon – you make a good point. That very issue is something I’ve been meaning to address. As well the huge difference between designing and developing for Web based applications vs. informational Web sites.
Brian – There are many. On that comes to mind is The University of Florida’s site. I actually was sitting next to Mark (the site’s designer) when it was getting critiqued for accessibility at SXSW. It seemed to do rather well. Accessibility and usability seem to go hand in hand.
The UFL site shows how you can display quite a large IA on the homepage.
Down at the hospital we use other navigation conventions, such as shortcuts, related items links and homepage promotions to get people into the site and finding what they want.
We did extensive user testing and found that people didn’t mind drilling down as long as they could get back to where they started, had access to the search, knew where they were and felt like they were on the right track.
We also did quite extensive work on our IA – so that helped. I would say that on a site like that IA is probably where the majority of the work should be spent. If everything is organized well you have a better chance people will be able to find what they want, no matter what navigation conventions you choose.
Posted on March 25, 2004 06:09 PM | #
4. Ste Grainer said:
I concur with Simon. There probably is a place for fly-out menus when the environment is an internal application with the same group of users who interact with it often. So long as you can control the browsing environment (to some extent) and provide necessary training, they can be incredibly useful tools for quick navigation. That said, I can’t think of a single good reason to place them on a public website.
Posted on March 25, 2004 06:33 PM | #
5. Nick Finck said:
Lets not forget about the accessibility problems they produce… yes, to people, but even more so to search engines. I have had to work on sites that use flyouts for primary navigation where the search engine couldn’t find a thing past the home page because of this. It’s ugly.. really ugly.
Posted on March 25, 2004 07:20 PM | #
6. scottbp said:
I too used to loathe the whole flyout menu schtick…
then I had a think for a moment, marked up like a list, and on modern browsers… what would be the difference between a flyout menu and a site map on every page?
Useful… well maybe/maybe not
but there has been various discussion lately about footers and the like, and over at whitespace paul was discussing his fairly link heavy footer… apply some differnet styles and suddenly it could become a flyout menu.
It can be useful to be able to access the whole site (or most or whatever) from any page. It is not always the right way to go but the idea of flyout menus as site maps has me reconsidering them. I’m still not in love with them but I think one of their biggest issues in the past was implementation.
Posted on March 25, 2004 07:22 PM | #
7. -b- said:
The problem I have with fly-out menus is that the information is only there when I onmouseover the menu. So, I’m deep in an intranet site (a giant vortext of an intranet) and I can’t find a damn thing, and the menu doesn’t help when I get into subpages because I have to onmouseover the menu each time. Onmouseover, flyout, click, look, repeat. I haven’t seen a specific study, but would expect that users try to just click on the main link of that rollover thinking, HR is where I want to be, I’ll figure it out from there. Worst of all, is when the menus doesn’t have a main link. Meaning, you can’t click on the heading that the flyout flies from.
Posted on March 25, 2004 07:34 PM | #
8. Mike D. said:
First let me say that I may be misinterpreting the comments here. I call these menus “dropdowns” because I generally use them with navigation which spans across the top. To me, the “flyout” is basically just the same thing but with the x and y axis reversed. So are people here just saying they don’t like flyouts but don’t mind dropdowns? From the comments, I feel like the negativity is directed towards the more generic concept of submenus (which cover both flyouts and dropdowns).
That said, I think it’s a bit ridiculous to say submenus are never useful. And it’s equally ridiculous to condemn them because most amateur designers/coders out there happen to have implemented them poorly with bloated DHTML and javascript. If you’re going to condemn based on those grounds, condemn the method, not the concept.
Someone said they don’t like submenus because you don’t know what’s in them until you roll over the top-level item. Well guess what? I don’t know exactly what’s in the “File” menu in Safari until I use it a few times. If I feel like I might want to open a new window in my browser, I can make an educated guess as to what menu that falls under and roll my mouse up there. If I’m right, great. If not, I’ll try another menu. After a few uses, I know exactly where to find it.
Web sites are no different, and in fact, they are better. If I’m at a news site and I want information on something that happened in Africa, my first instinct is to move my mouse to the “World” button. If Africa shows up in there, great… I’m home free. If not (and this is where the web is better), I can just click on the “World” button and get to an index page which is a step closer to what I’m looking for.
Most people spend the majority of their time on the web at an armful of sites. As they begin to use these sites more often, they become more aware of what submenus may live within each top level menu. So I guess what I’m saying is, when you evaluate the ease of knowing where a user is going to click, don’t assume the user is not already familiar with the site. On major sites, they generally already are.
To Nick’s comment about accessibility, you can successfully pull off pure CSS dropdowns (marked up as unordered lists) in all 5.0+ browsers with the help of just a pinch of javascript for PC/IE. I’ve had discussions with you in the past about which browsers are worth supporting, so I know we’re going to come up on different sides of the fence about this, but if it looks perfect in 5.0+ browsers, it’s accessible, and it’s marked up correctly, it’s 100% kosher by me. I just have no sympathy for people who are still using 2.0, 3.0, and 4.0 browsers anymore. There is simply no good reason to abandon good code and good design to support .001% of the world. Your point, however, is good, in that submenus *can* cause accessibility problems if done incorrectly.
* For a great example of pure CSS dropdowns, check out this ALA article.
As for the comment that submenus are “unfit for public sites”, again, I don’t really understand this sentiment. I would say they are perhaps unfit for smallish sites like blogs, but when you have a major media site which not only has a lot of top-level categories, but which goes a few levels deep as well, they can really help you get places quickly. Especially with how heavy pages are getting these days, it’s nice to be able to skip the “World” landing page and go straight to the Africa news page if I know what I’m doing.
Anyway, the bottom line to me is that submenus, like every other navigational concept on the web, have legitimate uses in legitimate places. They are not universally bad, nor universally good. But to be good, all they must do is add a bit of utility without sacrificing usability. And that, these days, is not too hard to do…
Posted on March 25, 2004 09:45 PM | #
9. David Robarts said:
I like the idea of submenus as a site map on every page. The University of Florida’s home page does offer quite a bit of site structure information; however, through a submenu system, all those links can still be availible to a user on a page that has content on it as well. By no means is a submenu system a replacement for a good sitemap that shows everything at once.
Posted on March 25, 2004 10:31 PM | #
10. starvingartist said:
In terms of accessibility matter, like what Mike said, unordered lists with Unobtrusive DHTML can work effectively compared to the old “bad DHTML” type of submenus. It’s visible in modern browsers with javascript and there’s a regular unordered list for those without (which can be followed by Google).
And it’s not as bad as mystery meat navigation or in some cases, dropdown form menus. I treat submenu navigation as a regular navigation, where the top level links should be good enough to navigate the site. But on mouseover, I’m given a sort of “bonus” detail of the hierarchy of the site without necessarily having to invest in going into an intermediary subpage.
Posted on March 25, 2004 10:32 PM | #
11. Keith said:
Mike D. – for clarification I would call both of those things you are talking about fly-outs. A dropdown menu to me is using a select box for navigation.
You make some good points. All of the comments so far seem to be based solely on opinion. I’m hoping someone has tested these kind of menus with users. With out that kind of user data all we can go on is best guesses as to how these effect users.
It seems obvious that there are some potential usability problems with these menus, even if done “correctly” – I put quite a weight with UIE’s studies. They are pretty good at what they do.
However, and this is a big one, there are exceptions to every guidelines and I’m quite sure there are some places where these would work just fine. It depends I suppose.
I know if I were to ever go there I’d want to do some serious user testing before putting them in place.
Posted on March 25, 2004 10:33 PM | #
12. Mike D. said:
Okay, good idea. Let’s settle on flyouts or submenus for this discussion, because dropdowns can involve clicking.
Our company makes a practice of professionally focusgrouping both our current site(s) and our competitors’ current site(s) to gain insight before a redesign. One thing that consistently comes up for us is the preference for navigation along an x-axis and submenus which appear underneath. In fact, it was really one of the only things which scored consistently among subjects. Now, we run huge media sites so such submenus may be of more utility for our users than to a blog’s users or a small retail site’s users, but nonetheless… in at least one genre/size of site, it seems to serve a positive role.
Also, take a close look at the examples in UIE’s studies, and note that they occurred in 2001.
Example #1: Crate & Barrel. Very poor implementation. There are no visible boundaries between the menu item and the submenu. The mousepath to get to the submenu is perilous at best.
Example #2: Ouch, actual HTML form-element dropdowns. This is just bad. Not really sure what else to say.
Example #3: Verizon. This actually can be done very well if implemented correctly. Macromedia’s current site is an shining example of such a layout. Verizon, unfortunately got it wrong.
Example #4: MSNBC. Ahhh, this was and still is something the folks at MSNBC always seem to hang their hat on. The fact that supposedly every page is reachable from every page. A few problems here. Number one, the word-count of their headlines causes the menus to be huge, and they have sub-sub-menus you are supposed to get to from there! Number two, the menu was built with turn-of-the-century IE-centric DHTML which can choke even moderately fast machines (and Safari!). Number three, there is simply too much stuff shoved into those things and the individual items are not so much navigation aids as they are dynamic pieces of content.
I think there is a lot of truth in the UIE article you refer to. I just think that a lot of it comes down to implementation and appropriate usage. One of the overriding principles in interactive design is to always lead the user where either you want them to go, or where they themselves want to go. If I have a page and I want to use 80% of it to feature a nice Crate And Barrel armoire that I happen to have on sale, I’d love to have the real estate to do that and still offer you a means to navigate to what *you* want, should you pass on the armoire. Submenus help with this sort of thing tremendously. Similarly, if I run a large media site, I’d like to give you as much of the screen as possible to read our stories, whilst allowing to you quickly jump to other ones when you’re done. This again, is a good candidate for submenus.
So again, it’s about right time, right place, and right implementation to me.
Posted on March 26, 2004 12:22 AM | #
13. Dave Meehan said:
Keith, I think part of your complaint is not that flyouts are not useful, but are not implemented in a usable way. In your example, the navigation sidebar looks to anyone like a ordinary list of links, but when you mouse over you get a flyout. Like you say, because we think before we click, you’ve already decided to mouse over the nearest link to what your looking for, and click it, before realising that they is something else available. That becomes infuriating.
What might be better here is for the sidebar to be styled differently, such that there is a triangle or some such device to the right of the link, which would imply that there is something else there. I’m not saying thats’ all of the answer, but certainly part of it.
Also, you have to look at how discoverable information is. For a site with a wide audience based, it becomes difficult to provide direct navigation to all of the content, and thats where sitemaps or flyouts can help in site navigation.
The difficulty is that when you need an unconventional navigation (at least in web terms) you ought to try and find a conventional way of doing it before expecting the user to learn something unconventional.
Posted on March 26, 2004 12:30 AM | #
14. Chris Vincent said:
I use a dropdown in Passive Digressive, but it really was just an afterthought. I added it because I could, and because it kept the sidebar information for above the fold. That said, I don’t necessarily think they’re always a good idea.
I think Dave Shea does his well, because it logically structures the site’s information in a small package. Someone might think, “Hmm, I want to look at information relating to the bloggage on this site,” and there’s the weblog dropdown.
Simon makes a great point, too. Frequency of use has a lot to do with everything.
Of course, I haven’t done user testing to confirm any of this. It’s all a hunch. A real test would indeed be interesting and probably revealing. Any volunteers? ;)
Posted on March 26, 2004 12:36 AM | #
15. Ian Stewart said:
My experience is that it’s not using the wretched things that’s the problem, it’s when they jump out at you when you’re on your way somewhere else.
By that, I mean, innocently aiming for a link, and just happen to mouse over one of them on the way. Kaboom … aim-point suddenly converted to submenu option … click … Doh!
Posted on March 26, 2004 01:06 AM | #
16. DarkBlue said:
Interesting article and comments.
Speaking for myself, I can’t think of a single more useable, logical, accessible navigation system than a horizontal, pull-down-menu. Note “pull-down-menu” NOT “drop-down-menu” - I agree with Ian Stewart, the sudden, unwanted intrusion of a menu is definitely not what I want to see.
However, I am opposed to current implementations (DHTML - argh!). Drop-down-menus need to be supported by the underlying system - not implemented by a cobbling together a few lists and little JavaScript.
We should be able to implement such menus with CSS3: http://www.w3.org/TR/css3-ui/#system. So, in about 10 years or so, we should be able to add these to our websites and know that a large percentage of our users will be able to use them.
For small sites they aren’t really useful, for for the larger site, or for web-based applications, they are invaluable.
Let’s face it: the user understands the concept and useage of the pull-down-menu. We use them every day in virtually every desktop application we run. They are compact, unobtrusive and elegant. They allow us to present a wealth of content in a very small area. If they are keyboard accessible too, then there is nothing to touch them.
Long live the pull-down-menu.
Posted on March 26, 2004 02:06 AM | #
17. Keith said:
DarkBlue – I hate to pick on you, but for the sake of pointing out something that I think will benefit lots of people I’m going to. You kind of hit on a pet peeve of mine, please don’t take it personally.
You said:
This is a huge assumption. Whenever you find yourself saying “the user understands” or “the user does” or what-have-you, you really need to think about that.
Until you see a user do that you’re just guessing you can’t be sure of that behavior. I bet you’d be surprised how often user behavior differs from what you’d assume.
For example – you mention keyboard accessible menus. I’ve yet to see a single user try something like that with a Web site. Not one! And I’ve see hundreds of users access Web sites.
Web sites are not desktop applications. Think about how you interact with the Web. I’d bet it’s quite a bit different than how you use Photoshop, for example.
I have had the opportunity to see how users interact with a pull-down or drop-down menu and let’s just say that you wouldn’t want to use that as any sort of primary navigation.
They do have their uses – don’t get me wrong – but as one of the main ways to negotiate a site? Not a good idea.
Posted on March 26, 2004 02:50 AM | #
18. Richard@Home said:
I hate ‘em. I blogged my reasons why (most are affirmed here).
Keith hit the nail on the head for me: User’s don’t use a website like they use a application/web-application.
An application is generally used to produce something (a text document for example), a website is used as a research tool. A user visits your site looking for something. If they don’t see the something immediately, chances are they’ll move on the next link in their search results.
Our in-house studies have shown that the usual pattern for our users is: Go to Google, enter the search term, click the link to the page, user hovers mouse over window close button/back button as they scan the page looking for their something.
You may be lucky and get a couple of experimental clicks out of them before they loose interest and move on. If your links are hidden away behind a fly-out a menu, they aren’t going to see them to click them and you’ve lost them. They may not even realise your fancy fly-out menu IS a fly-out menu!
Posted on March 26, 2004 04:01 AM | #
19. Rimantas said:
Keith & Richard, I think I will tell people to read your comments here more than once. Very well said.
Posted on March 26, 2004 06:50 AM | #
20. jake said:
I have to agree with the people who have said it can be implemented in a correct way to allow ease of use. Personally I’ve used one at work, however I have many ways of getting at the information. (The link above is not the corporate web site.)
I took the Macromedia approach. I have a simple flash header that has the navigation pulled from an XML file. It comes with a random vector image of one of our parts. Nice and simple. The drop down list shows up imediately when you go over the link, and clicking the link puts you on a page where all the sub pages are linked to along the side anyway.
Now if flash is not installed, or turned off, you get a CSS similar drop down list made with an unordered list. Again, a bunch of links all clickable to get to various pages. And this is on top of the links at the bottom of the pages to get to sub-pages.
And naturally, if you’ve got something like Lynx you get the literal list of links with no fancy styling whatsoever.
Again I basically allow many more ways to get at the content than just the pull down, but the pull down is the simplest way to get at something like the annual report with one click.
I see no problem with them unless they’re the only form of navigation and break on differing browsers etc.
Posted on March 26, 2004 06:55 AM | #
21. Andyed said:
My MS Thesis is looking at a cascading menu task with undergraduates. A core premise is that these menus are frequently used and do seem to offer efficiency advantages for selecting from a large set.
I log mouse position 50-100 times a second and plan to characterize the frequency and nature of errors that occur in these menus. It’ll be available in the next couple months, data collection starts next week.
Posted on March 26, 2004 07:07 AM | #
22. Steve said:
I’ve read the UIE article and I still don’t see what the problem is, if we exclude poor implementations, as MikeD suggests. Perhaps it’s semantic. The article says users have a pattern of deciding, then acting. What other possibility is there? Can one act first, then decide? Fly-out menus give you choices. After you decide you take an action, then you are given other choices. It seems to me this is the same as making your first choice, then being taken to another page where you are given additional choices. Fly-out menus simply avoid the additional intermediate page fetch before you arrive at your final choice. The only alternative is to be given all the choices openly on the first page, as is done in the Florida site. This, of course, uses up screen space.
Posted on March 26, 2004 07:41 AM | #
23. Wilson Miner said:
I did almost exactly the same thing in a design review with a client recently. Three times during the course of the meeting, flyouts were suggested, and I instinctually talked it down each time.
I think my main problem in this case was the reason it kept being suggested, which was as a quick fix for a more fundamental usability problem. Clients have heard the three click rule too many times, and think that flyouts (or drop-downs, or pop-up or other compound monstrosities) are an easy way to get everything on the front page. Problem solved! Right?
I really like the tactic on the University of Florida site, of highlighting major or representative subsections of the major content groups. This is close to the strategy I’ve been going with lately on larger sites - doing the user the service of actually organizing and filtering the content based on user research and careful content inventories.
But that takes work. Can’t we just put the site map in a 6-level flyout on the front page?
Posted on March 26, 2004 07:47 AM | #
24. Steve said:
I just discovered this BBC Broadcast site (mentioned at Clagnut) http://www.bbcbroadcast.com/. Granted, I haven’t done a usability study on this site, but I certainly don’t find it confusing. Can someone say what the problem is with this site?
Posted on March 26, 2004 08:02 AM | #
25. Keith said:
Steve – In response to your comment (#22). What UIE discovered is that, regardless of implementation, users would check out their options, then click.
What this means is that anything in a dropdown or fly-out would not be considered an option. How it’s done at that point is irrelevant – the user doesn’t see those options at all.
So, on to the BBC example you mentioned (#24). What would happen is that a user would look at the page, and see “Our Work” for example and click there. They would not even process the fly-out.
It’s not that there is “a problem with this site” really, just that, according to what they found in their study, the fly-out wasn’t used at all. So, if that’s true, there is no point in doing a fly-out. Might it not be better to “show” all of those links? They certainly have room on the homepage for that.
The thing is this – does that BBC site need a fly-out? They don’t seem to have a very complicated IA and frankly, even with that fly-out, their homepage isn’t making great use of their screen real estate. I’m not trying to knock the site, it’s just fine, just asking the question.
The implementation of fly-outs on that site, from my end anyway, seems much better than most. Except for the fact that the way it functions changes drastically once you enter the site.
I’d be very curious to see how users use a site like that.
Posted on March 26, 2004 09:38 AM | #
26. Richard Rutter said:
I’m still undecided on their usefulness - ‘horses for courses’ I guess. I recently blogged the BBC Broadcast site which has got a really nice implementation of flyouts. They are intuitive, look great and are built out of ULs and LIs.
Posted on March 26, 2004 10:20 AM | #
27. Mike said:
Hey Keith, check out Travelocity’s new site. The dropdown/flyout menus there are really well implemented.
Posted on March 26, 2004 10:47 AM | #
28. caiuschen said:
Something clicked when I went to the Travelocity site. I was there before. And while the fly-out was a surprise to me the first time, I remember it being a pleasant surprise that I liked. It was because I never expect large sites to display all their navigation information on one page; when they do, it usually looks very cluttered. So I expect to need to guess which category I need to click on and hope the right subcategory is there. With the fly-out, I didn’t need to guess.
Perhaps though, I’m just a slow clicker or I like seeing what sites do with their mouseovers.
Posted on March 26, 2004 05:06 PM | #
29. Jeff Minard said:
It has been mentioned several times here that one of the problem with flyouts is that users choose what to do then clicks the link.
My observations say that this isn’t the entire process. Most people I see who use a site will, yes, choose first, but they do not click as fast as the previous statement suggests. I have noticed that many people pause for a moment before clicking a link. It is as if they are thinking, “This was it, right?”
So why not take that split second to show them, “Hey, it might be the right choice - and here’s something that might be even more right for you.”
As long as it’s done nicely (xhtml/css/accessible/well-behaved-js) I have no issue with fly-outs - anywhere.
I enjoy them when they work, and dispise them when they are made poorly.
Posted on March 26, 2004 07:06 PM | #
30. Aleksandar Vacić said:
I scanned through all the comments and can’t help thinkin’ that the problems you see is because of old-fashion menus, build with tables and lots of DHTML.
Keith’s prime example is an example of bas usability since pop-up menu for lower items is going of the screen. This can be done much better, using plain UL list(s) with added ability to reposition menu to stay inside of viewport.
Posted on March 28, 2004 03:21 AM | #
31. i1277 said:
The BBC menu in question does look very nice- no doubt about it. But it exemplifies what usually annoys me with such menus.
Say I hover over the “Who we are” part. I find something of interest in this submenu- “Managment team”. So far so good. But as I move my mouse in the direction of that list item, sudenly the menu disappears and the “What we do” menu pops up instead. Because I accideentally hovered the mouse over the other menu as I tried to move the cursor.
I find that this happens a lot with those kind of menus- they demand too much attention from the user.
Posted on April 2, 2004 07:18 PM | #
32. Dunstan said:
Run your mouse down the “Products that nurture” menu here:
http://www.aveda.com/home.asp
… then maybe into the “Pure-Fume” sub-category…
Yuck.
Posted on April 5, 2004 01:23 PM | #
33. TSwan said:
My problem with dropdowns:
• They’re often used as a crutch for bad U.I., i.e. the BBC site which while nicely designed, makes horrible use of screen real estate.
• They often obscure other content when they fly-out as they’re moused over. Very annoying.
• They generally have pretty poor responsiveness and poorly defined bounding boxes resulting in poor usability (losing focus on links easily).
Posted on April 8, 2004 06:22 AM | #
34. DHTML Kitchen said:
Hey,
I liked reading this discussion. Mike D had some great points on doing it right (accessible/degradable)
Like drugs, flyouts/drop downs are not inherently bad. They need to be used carefully and responsibly.
Flyout menu dos
Flyout menu don’ts:
Don’t use too many subs. This is where MSN and aveda suck the most. The sub sub sub menus are just too hard to navigate with. As a user, if I’m not sure of the exact page in the deepest of menus, should I click on a header? Will the menu close, or will I go somewhere? Frustrating!
By using a lot of nested submenus, the user can get confused with out of context links. Most users will scan to what they want to read or click and read or click. Don’t overwhelm them with too many options or too much unrelated info. Keep the links relevant.
Another technique that can be useful is to pause for about 200ms before showing the submenu. This way if a user wants to click a header, he won’t be distracted by the submenu.
Posted on May 2, 2004 07:18 AM | #
35. asdf said:
I think point #29 nails it.
Posted on June 1, 2004 04:52 AM | #
36. shoobe01 said:
Interesting I just got this link from a friend. I was, over the weekend /required/ by the client to implement flyout navs on the home page of this site:
http://www.go-ires.org
Thanks for reminding me to challenge my preconceived notions. But after reading all this, I still hate them (okay, “disagree with their use most of the time”).
My issue on the link above, for example, is that I already had solved the problem of exposing the site to users with that right column mini-sitemap. The tabs were for wayfinding, habituated users and cross/back nav once inside the site. (Yes, this is probably a site used more by repeated visitors than new ones so learnability is a factor.)
I’m sorry but do not agree with the premise of #29. Observed users that pick the mouse back up and click on things seem to be confused if the interaction is not what they expected. If you offer a flyout, or the button is a flash thing that blinks at them, or the page doesn’t overtly refresh, they will be unhappy (deliberately vague term).
I still tend to feel that flyouts are an un-necessary solution. There are better solutions (I agree with the “bad UI” comment in #33 above).
Posted on June 1, 2005 01:28 PM | #
Comments are now closed