Skip to navigation

The failure of fly-outs

Jul 11, 2011

Posted by Joshua @ 11:17 pm

Example of a flyout menu asking users not to fuck up their user experience.I hate fly-out menus, in every form. They’re just horrible, period. But before you close the window and leave the site hold on just a minute. There is a legitimate reason for my personal, deep-seated loathing and it’s not conjecture. There’s method to the madness of what exactly is so horribly broken about fly-out menus and I’ll jump into that, but lets step back a moment.

What the hell are fly-outs exactly?

Basically when the navigation bar/section of a site or application has a subsection “drop-down” underneath or “fly-out” to the side when you mouse-over, it’s a fly-out. I’ve heard them referred to as drop-downs, but that’s not the best definition as a “drop down” menu should generally be reserved for a form control that’s a menu of choices.

Fly-out menus are found all over the internet and are busy destroying user experience.

So what’s so wrong about fly-outs? “They help people get to deep sections of a web site quickly,” you might argue. “The information is dense and this allows us to provide information scent,” I’ve also heard. I’ll do you one better. How about you simply streamline your site and cut some of the fat?

I view dozens of sites in a given day, but let’s just look at a handful of larger ones: Apple, Microsoft, IBM, Google, CNN, MSN, MSNBC, YouTube, Yahoo, Facebook, blah, blah, blah…hell, Sephora, Victoria’s Secret, the list goes on! Of the companies I’ve listed here, only IBM uses any kind of fly-out and it’s done in in an alternate style: as a drawer, which I’ll talk about later. I’d also wager most of these organizations are fairly complex and have a fair amount of information available online. So why aren’t they using fly-out menus if they’re so useful? When I started working on this post I didn’t want to go off on a huge rant without some justifiable alternatives; people bitching just to bitch without having useful recommendations aren’t really helping anything, they’re just complaining. So I put together a list of the few reasons why fly-outs fail, then some alternatives that can help when you’re asked to put in a crazy-go-nuts menu system…or God forbid, you think it’s a good idea yourself.

The Fail

Fly-outs are distracting

The biggest problem with fly-out menus is that they’re distracting. Navigation on a site, if it’s necessary at all, should be a helpful fallback to people who’ve already been served by the information or product you’re offering. Search reigns supreme today and most viewers aren’t casually browsing to your site. They’ve found you via Google or Bing or Yahoo or similar and they aren’t usually going to be cruising to your home page and browsing your main groups of information. They’ve honed in on what they believe to be the pertinent piece of their current puzzle and they hope you can help provide some answers. Once they’ve been assisted by your amazingness, then having your navigation around can provide some context or an easy way back “home”. The second that a new user hovers over your navigation, you’re UI has just derailed them from getting their task done quickly. They’re now either pissed that you’ve gotten in the way, or they’re trying to figure out how to shake their mouse loose of your stupid sub-menus. Which brings me to the second-most egregious problem with flyouts:

Fly-outs obscure content

The second you lay something, anything, over the top of your site content, you’ve immediately derailed a users attention with whatever is in the overlay. The only situation on the planet I can think of where overlaying site navigation is more important than useful, compelling, page content, is inside of an application where a user is essentialy done with their current view, and even then, there are probably better ways of moving someone around within your app. Even IF you are inside an application, why would you want to obscure information users could get at-a-glance with your sub-sub-sub-navigation elements? If you’re nesting things that deeply inside your app it begs the question: how useful are those extremely esoteric bits of your app? If they’re really that useful, give them more prominence and get the hell out of the way with your nested, fly-out menu of failness! Bringing me to my next point:

Fly-outs represent bad information architecture

If you have your information nested 3-, 4-, 5-levels deep within your site and it’s so dense, or sparse, that you’re forcing people to drill-down that far, you simply need to do a better job editing your content. I’ve said before that the best and simplest thing you can do to improve your site’s information architecture is remove half the content. Fly-out menus are most typically examples where the site owners simply couldn’t cut hard and deep enough with their information and the flyout swoops in to save the day. Just because it’s easy to stuff everything under the sun into your nav bar, doesn’t make it a good idea. Bringing us to:

Development IS hard for developers so that our users can have it easy.

Flyouts are hard to develop

I saved this reason for last and almost didn’t include it because I don’t like cop-outs. Many times development IS hard. It’s hard for us as developers so that our users can have it easy. The problem is, just because something behaves erratically and requires 18-different levels of javascript and CSS to get a marginally, functional solution across browsers, doesn’t stop people from implementing flyouts. The reason that I included this in my list is that because flyouts behave so poorly, many solutions are hacked together and half-assed and end up pissing users off because they don’t work the right way. Sure they should be more rock-solid, but there’s at least a hundred different ways to implement flyouts and practically none of them work well, and certainly not consistently. Yet they persist and designers and developers keep going back because they don’t end up having to ask the tough editorial questions about a client’s poor information architecture.

Flyouts don’t work well and testing shows that most users can’t stand them. So what’s the solution?

The Alternative

Better editing

Drill-down architecture is a relic of a paper-based world. In a modern, digitally-empowered society, there’s simply no reason to try and dictate 1-to-1 relationships when most items are 1-to-many. Flyout menus (and breadcrumbs for that matter, but that’s a different post!), have designers, developers and information architects thinking of deeper and deeper, sub-categories for information that’s begging to be placed in big buckets and cross-linked back and forth across their sites. Roll-over menus with deep-linked categories simply need to be edited better, and if you aren’t that great at editing or can’t make those tough decisions about what to pare down, combine, or God-forbid, remove completely, hire someone that can. Get an outside opinion by way of an information architect, copy editor, or even a summer intern that’s in an information science program can bring in some fresh perspective and help you cull the excess layers of your site.

Mini nav

The best solutions that I’ve seen online are simple and unobtusive: a second line. Adding another line of “sub-navigation” under your primary categories won’t overlay other page information and it can be designed to look like it belongs with the rest of the site aesthetic.

Bigfoot

I love big footers and they’re a fantastic way of keeping helpful and relevant information in front of users without burying it in a sub-navigation nightmare flyout. Clients tend to argue that users won’t see the information at the bottom of the page but there are several inherent flaws with this reasoning. I’ll try to be brief but here are the common arguments:

“It’s below the fold”
It’s a web page lab partner; there is no magical ‘fold’. It’s not a newspaper. There are a ton of sites now that show there simply is no fold.

“Users don’t like to scroll”
Almost every user on the planet has a scroll-wheel on their mouse or they can simply swipe on their mobile device or tablet. Users will tell you they don’t like to scroll but usability testing has shown that if there is still compelling information they’ll happily scroll to the very bottom of a page. Heat map and eye-tracking even back this up.

“They won’t see it”
That’s why you build your footer huge and don’t make it look like it’s an afterthought. The footer isn’t simply the place to put your copyright info. It’s not the bottom drawer or a box in your closet. Make sure your footer looks like it’s still part of your site and put compelling content there.

Here are a couple of examples of huge-ass but still fantastic-looking, footers.

Tag clouds

Tag clouds are a great way to cross-link pertinent information and allow users to end up on your site from a random search, to visit other, similar information that you may have on a subject. I personally don’t care for the traditional way tag clouds are visually represented, but there are emerging design patterns that can allow tag clouds to look great and provide excellent related linking. Simply adding meta tags to your content provides a very powerful canon of organization that can be an excellent resource when working on your next redesign or content realign project.

Mega menu

Putting sub-navigation into a javascript “drawer” can push content down in the page and doesn’t obscure interesting information. It can also be hooked up to use hover-intent functionality so that a user doesn’t randomly swipe their mouse across your navigation and get bombarded by an annoying flyout obscuring the rest of your precious, screen real estate.

For the record, I don’t approve of mega menus and I’ve listed it as number 9 on my 5-point list because I still don’t like ‘em. I know that some very well-respected and knowledgable usability gurus dig on them, but I just don’t buy it. I think they can look great and certainly add some much needed heirarchy and potential art direction to fly-out fail, but you basically end up with content in your navigation. Navigation should be simple and direct and mega menus are anything but. If you have important content on your site, there are other means of exposing that content via cross-linking of useful posts and information. I’m including it because if you HAVE to stuff far too much information into your fall-back, safety net of navigation failure, a mega menu offers the possibility to use the jquery and hover-intent that I mentioned above. It performs much more fluidly, reliably, and can look pretty good.

The Wrap

Hopefully this helps a bit and can provide some interesting conversation into improving navigation. Ultimately, good site navigation is about communicating simply and effectively what all your site has to offer. Why in the world would you want to communicate a message of “I can’t edit very well” and “We’re confusing” to your site visitors. Save it and simplify – ditch the flyouts and just do a better job of editing your site. Your users, and your devs, will thank you for it.

category: Design, Rants
tags: , , , ,

5 comments