I don’t mind drop-down menus. They give designers and information architects options for using screen space wisely. But I think many sites do themselves a disfavour by using them in an inconsistent manner.
The popular travel site Carnival Cruise Lines is a perfect example of what I’m talking about. I love the design of their site. For a travel website, it’s very good; it’s clean, and professionally designed. But I have one small problem with their drop-down menus.
Here’s a screenshot of the home page:
From that screenshot, I’m sure you can immediately see where the drop-down menus are. The indicator for these menus is the little red downward-pointing arrow on each of the links to the right of the Carnival logo (“Port & Destinations”, “Ships & Staterooms”, etc). So here’s how one of the menus looks when it’s open:
Looks great. No problem so far right? But notice in the first image, below those “drop-down” navigation items, there’s another blue navigation bar, with three more links, plus a search box. This seems to be the primary navigation bar. What happens when you hover over these three links? The first two are fine, just regular buttons that change color on mouseover. But then, what’s this on the third button?
There’s another mega drop-down menu that appears on the “Special Offers” link.
So What’s the Problem?
It might seem harmless to have such a “surprise” menu appear. If it appears, the user just rolls off and continues what he’s doing.
But what if they actually use that menu during their visit, then they come back to the site to do something similar? Now they’ll be scanning the home page, looking for the link that triggered that drop-down menu. Eventually, they’ll find it. But it may take just as long as it did the first time. It shouldn’t. They should be able to see immediately the link, and the presence of the drop-down.
If you’ve read Steve Krug’s Don’t Make Me Think, then you know how important it is to avoid unnecessarily delaying the user experience. For example, on page 15, Steve says:
[W]hen we’re using the Web every question mark adds to our cognitive workload, distracting our attention from the task at hand. The distractions may be slight but they add up, and sometimes it doesn’t take much to throw us.
Wise words indeed, and certainly applicable to “surprise” drop-down menus.
Conclusion?
Again, this is not a major issue, but I feel it’s inconsistent to have drop-down menus that sneak up on users like this. This is especially bad when all the other drop-down menus on the page are indicated by little red arrows. The point here is: Be consistent.
In the case of the Carnival design, they may have their reasons for doing this. Maybe another red arrow didn’t fit well into the design. Maybe this drop-down was added later. Maybe there’s politics at work that I don’t know about.
But when preparing a new design, I think all drop-downs should have some sort of visible indicator that they are there, otherwise users will often be confused, irritated, and their experience will be unnecessarily slowed — even if only minimally.
Drop down menus like this (with a large area appearing) I believe should only load when there is no other option. If you need to store lots of information then perhaps adding another page is the solution. Alright this adds in another click that the user has to make, but it does mean that no other content is blocked.
Oh and in regards to Steve Krugs books, everyone should read it. Its an excellent place for web designers to start off. Its also a really easy read.
Hey Louis,
I aggree with you on most things, except one: I hate drop-down menus. For many reasons. One of them is one which you mentioned: the visitor must find the trigger before he can hover it, just as you put it.
There is also the visibility problem. When such a menu drops, it covers other content on the page, which might be much more important. Navigation should not cover anything.
And there is the mistake, which connects to the above: when the average user hovers the trigger by mistake, he is going to be surprised and will not find what he found before.
Maybe I am to radical, but I think these menus get born when people do not know how to serve their content (many times they think that everything should be reached with one click, which is not true) and that they should dissapear.
Cheers,
edi
| Navigation should not cover anything.
I agree that when given two, otherwise, equally successful options that the one that doesn’t cover content is better, but I don’t see any inherent problem with a drop down menus that are predictable and which respond quickly to user actions.
The way I see it, if the user is running their mouse over the navigation options then their focus is already on the site structure and not on the current page’s content. On a complex site, well executed drop down menus help users in that frame of mind build a faster and more complete understanding of how the site is structured and what it has to offer them. This is, in my opinion, more valuable to them than keeping the content that they already aren’t paying attention to unobstructed.
It’s probably the client’s fault. “Hey, can we have one of those menus when you hover over this [random] link?”…
I agree with you. It seems like a client random ‘suggestion’
I think every dropdown menu should have a little delay until it opens. It’s really annoying when I’m just hovering an element for a few miliseconds to move the cursor down to a link and a Dropdown directly appears.
The problem there is that any delay of more than a few tenths or hundredths of a second tends to give users the negative impression that the site is sluggish, slow, and unusable. This feeling then negatively impacts their view of the rest of the site and of the company behind it hurting their trust and increasing the chances that they will bounce back to google or bing.
Not really. Try it out for yourself. A 100 miliseconds delay won’t feel sluggish, actually most users won’t even notice.
You are correct, 1 tenth of a second (100 miliseconds) is generally perceived as instantaneous. I should have double checked the rules of thumb before posting.
I think though that proper positioning of elements so that a user doesn’t unintentionally pass over and trigger a drop down combined with good visual indicators that make clear what elements have drop downs deserve more attention than timing delays.
Hate hate hate ESPN, a site I visit multiple X daily and the cursor-moving-auto-dropdown menu’s annoy the heck out of me. NFL.com same way, can’t think of any news/sports sites i visit that operate this way, this annoyingly.
My cursor is at the top because my ‘favorites” tool bar is at the top; when i move down to make a selection…don’t think relocating my toolbar would help..maybe there is disable function ??
By the way, Facebook uses a delay when you hover over something that triggers a popover, as well!
Great Article. I am really not a fan of drop-downs in general. These mega dropdown nav items really make it difficult for first-time visitors to navigate a website. For a site as high-traffic as Carnival, I am really surprised (from a UX perspective) that they would go this route.
I am a designer but have been involved in heavy SEO on a number of ecommerce sites recently. Let me say that I dislike drop down menus and most implementations of them are rather sucky.
The biggest changes I have implemented are more front page links – this puts more relevant content closer to the top at the front of the site in the forms of keyword relevant links. The easiest (only?) way to achieve this is with drop down menus. I don’t want the entire top half of the page when visitors land to be links and I don’t want these links to languish in the footer. Solution? Menus, lots of them.
So using this we have a number of categories. Lets use a clothes store as an example and pretend that each thing I mention is a keyword search on google.
Most would have a category called “Jeans” and leave it at that. This page would then have sub categories that apply to different types of jeans. “Stone washed Jeans”, “Blue Jeans”, “Black Jeans” and so on which link to sub categories with products. The idea here is to move the subcategories directly onto the front page. Thus we end up with a link to the parent as well as the children. My implementation does not include all subcategories because there are simply too many on the sites I administer so it ends up looking something like:
Jeans
popular jeans categories
Stone washed jeans
blue jeans
black jeans
View all Jeans categories (links to the main jeans page)
A lot more exposure for different jeans keywords there.
Personally I do not really like how it looks with about 6 “categories” with 20+ links in each, however I cannot fault how well it works. Traffic is up, to the point that the feedback have received from other customers is not worth addressing.
I don’t think the drop down here is really that bad. There are a lot worse things that end up on a site than this! Could have simply included the little red drop-down indicator, or made the ‘special offers’ link a different colour to distinguish it from the other items in this line of nav. People will always find their way to a special offers area -they aren’t stupid and there is a lot worse out there!
Couldn’t agree more with you.
Hi Louis
I think you made such a strong point that, the above website mentioned is down for maintenance, maybe making some quick changes :)
Ah, interesting. Didn’t know that. But the strange thing is, now that the site is back, they’ve added a weird ugly little beveled red box on the second navigation link under the logo.
Which is quite ironic considering I had given them the benefit of the doubt by assuming that they thought a little red arrow on the third link would ruin the design! :)
The navigational architecture of any website should be designed in such a manner that it should provide high levels of UX to the user. Drop down menus really uplifts user navigation to sublime levels. But as far as a first user is considered surprise drop down menus are very difficult to track back unless it is located in the main view itself.
Great Article. I am really not a fan of drop-downs in general. These mega dropdown nav items really make it difficult for first-time visitors to navigate a website. For a site as high-traffic as Carnival, I am really surprised (from a UX perspective) that they would go this route.
I like the look of them, but you’re right if the designers aren’t consistent with how they are used they defeat the purpose of the intended usefulness!
I have added in my blog I like the drop down menu it reflects that we know HTML code and it shows that you are an great blogger… with drop down menu helps visitors to visit specific point easily
Although I don’t like drop down menu generally that much, this one is even one of the better ones. But I agree, stay consistent!
What annoys me most about drop down menus is that most menus disappear when accidentally leaving the menu while moving the cursor diagonally from the navigation bar to the drop down. The drop down must be visible for another second, even if the user leaves the menu.
I hate how designers use hover instead of click for dropdown menus.
In other software (photoshop, firefox, start button in windows) require you to click, not just hover. So I never have annoying menu popping up, because I accidentally hovered mouse over it.
Another issue that they are hiding too fast when you remove mouse from menu.
How menus should be done:
1. you should click on button, not just hover over it.
2. when you move cursor away, it should disappear only if you click mouse anywhere or after 3-4 seconds.
Well, I can understand your problem now a lot better. I would think the website developer/s would have made it easier to follow and get back to the link.
I guess it also depends of the content around the mega menu. Sometime I feel that the content around it seems to be part of the menu and one can not really tell. That can confuse anyone and one should always keep an eye open for that.
I have downloaded ‘Slide-Down Mega Drop-Down Menus with Ajax and jQuery’ and will give that a try and see how it works out for me.
WHAT? Drop-down menu is cool! It rocks the world. It makes me drop and down. What’s the problem?
If site-designers are going to force unwanted drop-downs on Users ….
…. then perhaps Browser-designers should add a drop-down blocker option.