7 ms·

Jakob Nielsen: Mega Drop-Down Navigation Menus Work Well

115 points by henning 18y ago

mixmax 18y ago
"Also as always, the more faddish features such as tag clouds exhibit major usability problems. " This is worth taking note of. Particularly if your users aren't very web-savvy.
- unalone 18y ago
  Who decided a tag cloud was a good idea? Who used tag clouds enough to decide to put it on their web site? A tag cloud is one of those Internet Things where seeing it on a web site makes me lose some respect for the site maker.
  - noodle 18y ago
    i feel like they have a reasonable use, especially for internal development, search and such. but trying to push them as a primary method for navigating your page is pretty stupid.
    - unalone 18y ago
      Listing tags might be useful. Weighting them by size makes the web page look precious. If I'm looking to find something, I will not think that sorted-by-use cloud sizes are useful. It's also really, really ugly. Beauty in aesthetic comes from neatness and organization. Tag clouds are sloppy and formless.
  - ken 18y ago
    I think tag clouds are a fantastic idea. They just happen to be terrible for navigation. I don't know why anybody thinks that's their primary purpose. If I go to a page, one glance at the tag cloud shows me what the author writes about most. I can't think of a smaller/simpler/quicker way. The fact that they're clickable is basically irrelevant.
    - unalone 18y ago
      "I write about Macs and typography." "I love David Foster Wallace and interface design." You can say more in a sentence than you can in a cloud, and it's more personal that way, and it's not ugly.
      - jmatt 18y ago
        You can say more in a sentence than you can in a cloud Yes, I agree. But the tag cloud will be more accurate. I can think of a number of blogs that have pretty ambiguous or off-target taglines. and it's not ugly Yeah there are some hideous tag clouds out there. Ugh.
      - deleted 18y ago
        [deleted]
    - tjpick 18y ago
      > I can't think of a smaller/simpler/quicker way. ordered list.
      - thaumaturgy 18y ago
        You're right, but a tag cloud does offer a very obvious visual cue. There's nothing in an ordered list that suggests visually that the top item has the highest reference count.
        mhb 18y ago
        What three variables is the tag cloud conveying by its tag sizes, and the tags' x and y locations?
        thaumaturgy 18y ago
        The x-y of the tags is pretty much irrelevant -- I don't know if anybody's actually trying to use that to convey anything. The tag sizes are pretty unambiguous though, which is where the clouds do better than ordered lists. Ordered lists are inconsistent: sometimes they're ordered alphabetically, sometimes they're ordered by importance, sometimes by popularity, sometimes they're not ordered at all, which is visually identical to an ordered list. A tag cloud on the other hand always relates the tag size to the number of items with that particular tag. That's the visual distinction that makes them more useful than a simple list.
- henning 18y ago
  It's just one more pointless feature to ignore, like a row of "submit this page to some other random website" buttons, a column of video comments from some random video startup (Seesmic?), ads for Wordpress themes, and other typical Web 2.0 detritus.
  - unalone 18y ago
    I'd like to think the problem stems from the fact that a lot of Web 2.0 startup startupers are extremely young and think that a Digg button, a bunch of startup plugins, and a column of AJAX goodies will add to a page's design rather than compromise it. Unfortunately, these things are so widespread that I fear some people have bought into these things as actual effective tools, which saddens me somewhat.
run4yourlives 18y ago
Um, I realize that the audience here is mostly university students, but do we really need frat house language in our submission titles now? I'm not really offended, but would you say that you "had a chubby" for a new feature around the boardroom table, with women present? It would be nice if we could keep this site a little more esteemed than the sad excuse for language found on most of the internet. EDIT (Obviously, the editors have changed the title.)
- axod 18y ago
  Not to mention the fact 'chubby' doesn't mean anything like that in the UK, or I suspect other places, so the reader has to guess what it might mean.
- petercooper 18y ago
  What the heck has slang got to do with gender in this case? I'd use slang like that around women or men, but probably not in the board room, no. Women aren't all delicate flowers you have to tip-toe around, y'know.
  - run4yourlives 18y ago
    I think most men know that there are phrases that can be said in a locker room that wouldn't endear you to the average women, but that doesn't really reflect on women at all. There are certainly always exceptions, but unless you're a fairly tame guy or friends with fairly non-typical women, locker-room talk usually won't go over well. My comment wasn't in anyway meant to be demeaning to women.
    - petercooper 18y ago
      In the US, perhaps. Maybe the ladies are just courser here in Europe but get a few of them together and they're usually coming out with language that'd make me blush.
      - run4yourlives 18y ago
chaosmachine 18y ago
Best Buy has been using these for years: http://www.bestbuy.ca/home.asp http://www.bestbuy.ca/home.asp Mouse over the nav bar to see it in action. Oddly, only the Canadian version of the site seems to use them.
- Hexstream 18y ago
  It fails for me (Firefox on Ubuntu 8.04). The menu appears under the flash embed.
  - bobbyi 18y ago
    Linux Firefox in general has problems with always wanting to put flash on the top of the z ordering.
Mistone 18y ago
i appreciate the reserved nature of his endorsement for this nav feature, def lets me know its not the tip of the week style recommendation, but more like, "hey this really works"
- unalone 18y ago
  I used to really dislike Nielsen, but after a few years of reading him I've come to realize just how much of a consummate professional he is. I disagree with him on occasion in regards to aesthetic design, but when it comes to usability he is very rarely biased and most everything he writes is helpful.
davidmabe 18y ago
Anyone know a jquery plugin that implements these type of drop downs?
- unalone 18y ago
  You could probably implement this entirely in CSS. It's a one-layer menu, so using display:none combined with a hover element could hide and show the stuff. The problem is figuring out just what you're going to put into that menu. Nielsen's point is that these aren't single-list menus: they're complex and serve multiple purposes at once. So figure out what your menu's going to do before you do anything.
  - Nogwater 18y ago
    Could you add the 0.5 sec. delay and cover the diagonal issue with just CSS?
    - mgcross 18y ago
      I'd think you'd need javascript/flash for that.
    - bd 18y ago
      I went to Nielsen's first example (http://foodnetwork.com http://foodnetwork.com) with NoScript enabled (meaning it degraded to CSS-only solution) and it worked quite well. It was actually quite hard to get diagonal issue to be the problem, you must follow rather unnatural path to get out of the active zone. And 0.5s delay was detrimental, site felt snappier without it.
  - bprater 18y ago
    Would it need to be absolutely positioned on the page? If so, how do you front-end guys handle this cross-platform?
    - unalone 18y ago
      I've never done this before: consider this entirely speculation. However, I'd probably use relative positioning. This is speculation - I haven't opened Coda to try this - but perhaps make each top button a div that reveals its child content when it's being hovered over. That way, there's no confusion over where the drop-down menu's going to appear. It might be a little tricky fitting the things that appear under the drop-down menu, but since relative positioning allows for overlaps, I'd say that this would be a fairly simple issue. Drop-downs in CSS aren't particularly difficult: they just get more complex the more children you add.
AlfaWolph 18y ago
Sorry to stray from the topic of the article, but what exactly, is a "chubby" supposed to be? I guess I'm getting older and not as down with the kidspeak as I used to be..
- pchivers 18y ago
  "Chubby" is (American/Canadian) slang for an erection.
- ochiba 18y ago
  http://www.urbandictionary.com/define.php?term=chubby http://www.urbandictionary.com/define.php?term=chubby
bouncingsoul 18y ago
Really really bad choice of terms: it took me until the middle of the article to realize Nielson is comparing these new "mega dropdowns" to navigation with the <select> element – not one dimensional dropdowns!
ghostz00 18y ago
Why are they all activated on mouseover? That doesn't make any sense to me. IMO I think that mouseovers are only good for displaying tooltips or something along those lines. What's wrong with a click?
- chairface 18y ago
  If I click on something like that, I'm expecting a page reload, not a menu.
  - ghostz00 18y ago
    I agree, I would expect the same behavior, but I don't think that justifies to activate a menu on a mouseover. Nobody would like an operating system that triggered menus on mouseover. It's just to easy to trigger on accident. I know I'm in the minority on this subject, because most sites do use that technique. Only site I can think of that doesn't is google (the more link off the homepage).
  - Hexstream 18y ago
    However, is there harm in getting dynamic behavior when you're expecting a full page load? Moreover, it would be better for consistency between the javascript-enabled and disabled versions to use a click, which could be a minor win if one sometimes uses the site with javascript and without depending on what computer they're accessing from.
    - tdoggette 18y ago
      I'd be hesitant to click on a link expecting a reload if I thought that it would take me away from the main page of the site, while the hover-activated nav is no commitment.

115 points by henning 18y ago

"Also as always, the more faddish features such as tag clouds exhibit major usability problems. " This is worth taking note of. Particularly if your users aren't very web-savvy.

unalone 18y ago
Who decided a tag cloud was a good idea? Who used tag clouds enough to decide to put it on their web site? A tag cloud is one of those Internet Things where seeing it on a web site makes me lose some respect for the site maker.
- noodle 18y ago
  i feel like they have a reasonable use, especially for internal development, search and such. but trying to push them as a primary method for navigating your page is pretty stupid.
  - unalone 18y ago
    Listing tags might be useful. Weighting them by size makes the web page look precious. If I'm looking to find something, I will not think that sorted-by-use cloud sizes are useful. It's also really, really ugly. Beauty in aesthetic comes from neatness and organization. Tag clouds are sloppy and formless.
- ken 18y ago
  I think tag clouds are a fantastic idea. They just happen to be terrible for navigation. I don't know why anybody thinks that's their primary purpose. If I go to a page, one glance at the tag cloud shows me what the author writes about most. I can't think of a smaller/simpler/quicker way. The fact that they're clickable is basically irrelevant.
  - unalone 18y ago
    "I write about Macs and typography." "I love David Foster Wallace and interface design." You can say more in a sentence than you can in a cloud, and it's more personal that way, and it's not ugly.
    - jmatt 18y ago
      You can say more in a sentence than you can in a cloud Yes, I agree. But the tag cloud will be more accurate. I can think of a number of blogs that have pretty ambiguous or off-target taglines. and it's not ugly Yeah there are some hideous tag clouds out there. Ugh.
    - deleted 18y ago
      [deleted]
  - tjpick 18y ago
    > I can't think of a smaller/simpler/quicker way. ordered list.
    - thaumaturgy 18y ago
      You're right, but a tag cloud does offer a very obvious visual cue. There's nothing in an ordered list that suggests visually that the top item has the highest reference count.
      - mhb 18y ago
        What three variables is the tag cloud conveying by its tag sizes, and the tags' x and y locations?
        thaumaturgy 18y ago
        The x-y of the tags is pretty much irrelevant -- I don't know if anybody's actually trying to use that to convey anything. The tag sizes are pretty unambiguous though, which is where the clouds do better than ordered lists. Ordered lists are inconsistent: sometimes they're ordered alphabetically, sometimes they're ordered by importance, sometimes by popularity, sometimes they're not ordered at all, which is visually identical to an ordered list. A tag cloud on the other hand always relates the tag size to the number of items with that particular tag. That's the visual distinction that makes them more useful than a simple list.
henning 18y ago
It's just one more pointless feature to ignore, like a row of "submit this page to some other random website" buttons, a column of video comments from some random video startup (Seesmic?), ads for Wordpress themes, and other typical Web 2.0 detritus.
- unalone 18y ago
  I'd like to think the problem stems from the fact that a lot of Web 2.0 startup startupers are extremely young and think that a Digg button, a bunch of startup plugins, and a column of AJAX goodies will add to a page's design rather than compromise it. Unfortunately, these things are so widespread that I fear some people have bought into these things as actual effective tools, which saddens me somewhat.

run4yourlives 18y ago

Um, I realize that the audience here is mostly university students, but do we really need frat house language in our submission titles now? I'm not really offended, but would you say that you "had a chubby" for a new feature around the boardroom table, with women present? It would be nice if we could keep this site a little more esteemed than the sad excuse for language found on most of the internet. EDIT (Obviously, the editors have changed the title.)

axod 18y ago
Not to mention the fact 'chubby' doesn't mean anything like that in the UK, or I suspect other places, so the reader has to guess what it might mean.
petercooper 18y ago
What the heck has slang got to do with gender in this case? I'd use slang like that around women or men, but probably not in the board room, no. Women aren't all delicate flowers you have to tip-toe around, y'know.
- run4yourlives 18y ago
  I think most men know that there are phrases that can be said in a locker room that wouldn't endear you to the average women, but that doesn't really reflect on women at all. There are certainly always exceptions, but unless you're a fairly tame guy or friends with fairly non-typical women, locker-room talk usually won't go over well. My comment wasn't in anyway meant to be demeaning to women.
  - petercooper 18y ago
    In the US, perhaps. Maybe the ladies are just courser here in Europe but get a few of them together and they're usually coming out with language that'd make me blush.
    - run4yourlives 18y ago

chaosmachine 18y ago

Best Buy has been using these for years: http://www.bestbuy.ca/home.asp http://www.bestbuy.ca/home.asp Mouse over the nav bar to see it in action. Oddly, only the Canadian version of the site seems to use them.

Hexstream 18y ago
It fails for me (Firefox on Ubuntu 8.04). The menu appears under the flash embed.
- bobbyi 18y ago
  Linux Firefox in general has problems with always wanting to put flash on the top of the z ordering.

Mistone 18y ago

i appreciate the reserved nature of his endorsement for this nav feature, def lets me know its not the tip of the week style recommendation, but more like, "hey this really works"

unalone 18y ago
I used to really dislike Nielsen, but after a few years of reading him I've come to realize just how much of a consummate professional he is. I disagree with him on occasion in regards to aesthetic design, but when it comes to usability he is very rarely biased and most everything he writes is helpful.

davidmabe 18y ago

Anyone know a jquery plugin that implements these type of drop downs?

unalone 18y ago
You could probably implement this entirely in CSS. It's a one-layer menu, so using display:none combined with a hover element could hide and show the stuff. The problem is figuring out just what you're going to put into that menu. Nielsen's point is that these aren't single-list menus: they're complex and serve multiple purposes at once. So figure out what your menu's going to do before you do anything.
- Nogwater 18y ago
  Could you add the 0.5 sec. delay and cover the diagonal issue with just CSS?
  - mgcross 18y ago
    I'd think you'd need javascript/flash for that.
  - bd 18y ago
    I went to Nielsen's first example (http://foodnetwork.com http://foodnetwork.com) with NoScript enabled (meaning it degraded to CSS-only solution) and it worked quite well. It was actually quite hard to get diagonal issue to be the problem, you must follow rather unnatural path to get out of the active zone. And 0.5s delay was detrimental, site felt snappier without it.
- bprater 18y ago
  Would it need to be absolutely positioned on the page? If so, how do you front-end guys handle this cross-platform?
  - unalone 18y ago
    I've never done this before: consider this entirely speculation. However, I'd probably use relative positioning. This is speculation - I haven't opened Coda to try this - but perhaps make each top button a div that reveals its child content when it's being hovered over. That way, there's no confusion over where the drop-down menu's going to appear. It might be a little tricky fitting the things that appear under the drop-down menu, but since relative positioning allows for overlaps, I'd say that this would be a fairly simple issue. Drop-downs in CSS aren't particularly difficult: they just get more complex the more children you add.

AlfaWolph 18y ago

Sorry to stray from the topic of the article, but what exactly, is a "chubby" supposed to be? I guess I'm getting older and not as down with the kidspeak as I used to be..

pchivers 18y ago
"Chubby" is (American/Canadian) slang for an erection.
ochiba 18y ago
http://www.urbandictionary.com/define.php?term=chubby http://www.urbandictionary.com/define.php?term=chubby

bouncingsoul 18y ago

Really really bad choice of terms: it took me until the middle of the article to realize Nielson is comparing these new "mega dropdowns" to navigation with the <select> element – not one dimensional dropdowns!

ghostz00 18y ago

Why are they all activated on mouseover? That doesn't make any sense to me. IMO I think that mouseovers are only good for displaying tooltips or something along those lines. What's wrong with a click?

chairface 18y ago
If I click on something like that, I'm expecting a page reload, not a menu.
- ghostz00 18y ago
  I agree, I would expect the same behavior, but I don't think that justifies to activate a menu on a mouseover. Nobody would like an operating system that triggered menus on mouseover. It's just to easy to trigger on accident. I know I'm in the minority on this subject, because most sites do use that technique. Only site I can think of that doesn't is google (the more link off the homepage).
- Hexstream 18y ago
  However, is there harm in getting dynamic behavior when you're expecting a full page load? Moreover, it would be better for consistency between the javascript-enabled and disabled versions to use a click, which could be a minor win if one sometimes uses the site with javascript and without depending on what computer they're accessing from.
  - tdoggette 18y ago
    I'd be hesitant to click on a link expecting a reload if I thought that it would take me away from the main page of the site, while the hover-activated nav is no commitment.