Jakob Nielsen: Mega Drop-Down Navigation Menus Work Well | Hacker News Reader

Jakob Nielsen: Mega Drop-Down Navigation Menus Work Well

useit.com

115 pointshenning54 comments

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.)

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.

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.

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.

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.

Mind the generation gap as well... as both men and women get older, language tends to civilize.

In the upper middle classes and above, perhaps. In the working class, my personal experience is the old are just as foul mouthed as the young (although they tend to use it in the correct company, rather than everyplace). This might sound classist, but I'm working class and it's what I've experienced in any case.

was the submission title changed after you wrote that, or do I miss something?

Yes it was changed, and I thank the mods who changed it, we don't need to stoop to the level of snickering 12 year olds.

Fine, I'll take my submissions elsewhere. I've had about enough of the Revenge of the Nerds wannabe-entrepreneur android attitudes around here.

You'd be amazed at how far being polite can get you in life in general, let alone business.

To hell with being polite, how about being professional?

Well, most of the time they are part and parcel of each other. :-)

"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.

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.

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.

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.

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.

"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.

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.

> I can't think of a smaller/simpler/quicker way.

ordered list.

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.

What three variables is the tag cloud conveying by its tag sizes, and the tags' x and y locations?

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.

You could have a list in decreasing order of importance/fontsize... I think it's harmful to use a seemingly 2D representation when the spatial relations are meaningless. 1D (a list) would be enough.

But then you lose alphabetical order.

but a simpler way to add this information is to title the list. "Tags by popularity". You don't have to go to the trouble of inventing a whole other representation. I'd contend that adding a little bit of information to the title is much better than going to a tag cloud. The visual cue from the tag cloud (that the bigger things are more important) is inherent in the ordered list too (the things at the top are more important).

> sometimes they're not ordered at all, which is visually identical to an ordered list. An ordered list is always ordered, the only question is whether ascending or descending. And a tag cloud where the terms are randomly sized is visually identical to a tag cloud where the size means popularity...

I think the benefit of tag clouds is purely aesthetic. They just look prettier in certain places, and even that point is debatable.

Like any other text that word-wraps, x and y are not separate axes. The two axes it does display are "frequency" (size) and "lexical order" (position). An ordered list can only display one of these.

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.

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.

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!

Best Buy has been using these for years:

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.

It fails for me (Firefox on Ubuntu 8.04). The menu appears under the flash embed.

Linux Firefox in general has problems with always wanting to put flash on the top of the z ordering.

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

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.

Could you add the 0.5 sec. delay and cover the diagonal issue with just CSS?

I'd think you'd need javascript/flash for that.

I went to Nielsen's first example (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.

Would it need to be absolutely positioned on the page? If so, how do you front-end guys handle this cross-platform?

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.

You could use relative positioning, and if need be, serve an alternate stylesheet through conditional comments.

You'd have issues with our favourite browser trying to do it in CSS exclusively. I'd go for javascript for the next few years at least.

I couldn't find one when I implemented drop downs a few months ago, but the hover intent plugin was very useful for rolling my own.

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"

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.

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?

If I click on something like that, I'm expecting a page reload, not a menu.

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).

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.

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.

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..

"Chubby" is (American/Canadian) slang for an erection.

http://www.urbandictionary.com/define.php?term=chubby

Reply on news.ycombinator.com