Smashing Magazine - we smash you with the information that will make your life easier. really.

Everything nice but…

unfortunatly I allmost allways use a vertical menu. I work in company where is no any process like “Careful Content Analysis” :/ in most cases there is no any content… it appears after designing process and all I get from client is a list of links (just like it was 10 years ago).

so I am forced to use vertical menu :/

oh. and sorry about complaining :)

I think a vertical left hand navigation does conform to real-world reading. You can think of the navigation as a “table of contents” of the site; and in the real-world, ToC’s are typically arranged in a vertical fashion because it’s easier to show the parent-child hierarchy of pages/sub-pages.

Also: to base a rule using a 4-year-old eye-tracking study that doesn’t cover navigation usability but rather, content reading, as supporting evidence is dangerous – even if it was done by the Jakob Neilsen. Why is that?

First, the study tasks the readers to read the page content; the study was not about site navigation – so the use of it in this article’s context is misrepresented. If the study asked readers to “Find the About page of this website”, the results for the first screen shot would be different because, as web users, you’re going to look for the area that most resembles the primary navigation (which typically looks like a list of links).

Second, usability studies are very subjective and dependent on the study design. They’re behavioral studies so it’s hard to set up a control versus test case scenario, like you’d do in a science lab or computer simulation. The results depend on the five people that just happened to volunteer for the study. Are those five people representative of the global 1.7 billion’ish internet users?

Third, it’s hard to come with conclusive evidence from usability studies; the best we can do is guess using our experiences; not unlike, in my opinion, what this article has done. The Myth of Usability Testing on ALA discusses this where several usability teams were tasked to work on the same issue and the results and suggestions were very different from each other: http://www.alistapart.com/articles/the-myth-of-usability-testing/

It’s a well-written and well-articulated article – but I feel it should’ve given more emphasis on the fact that this is an opinion-based article. I can make 20 arguments FOR vertical site navigation, and call that a “rule”. They’ll mostly be my opinion based on my experience. For example, I personally like the list of links on Smashing Magazine’s right sidebar to find content versus the top horizontal nav. That’s my preference, that’s my opinion. In the end, it depends on project requirements and what the most effective way of presenting content is (and I think that’s what Jeffrey Zeldman meant about that tweet).

seems to me that if you have a decent design it really does not matter if navigation is horizontal or vertical. we read plenty of things vertically, we get it. it is not like you are asking the user to read backwards. i think that if a site is designed well either way can work.

The problem is wide screen monitors are stupid. I flip mine sideways.

Zeldman said it best: “Content Precedes Design”?
No he didn’t.
Louis Sullivan put it better: “Form follows function”.
But I’m just being contrarian. Nice article.

Great insight. Made me wonder why I never used a main vertical navigation anymore.

Oh, I think I’ve found the secret recipe for those exceptional vertical navigation bar.

If you see among the examples, you’ll notice that most of them are placed on top menu area. Main content are placed under the vertical navigation menu.

It’s now become logical. As the vertical navigation menu no longer consume too much of our attention, it becomes acceptable!

Very interesting article.

I believe that vertical navigation does have it’s place within web design however it is up to the judgment of the designer as to if it fits in. Blogs and e-commerce stores almost always have vertical navigation. A question I have is, why do blogs most commonly have a vertical navigation on the right hand side of the screen and e-commerce stores most commonly have a vertical navigation on the left hand side of the screen? Maybe its a standard users have come to expect by now, but why?

Thanks for the good read Louis!

So, you show an ugly webstie saying the reason why its bad is because of the type of navigation. Then you show more peer-friendly sites that use left navigation and say that its an exception.

Your exception list seemed to indicate that your thesis shouldn’t be to NOT use left navigation, rather HOW to use it and expand more on those rules based on the more successful sites.

I give this article an A, for almost ;)

Those eye-tracking studies are worthless in this context, as you’re not testing two versions of the same site against each other. As someone pointed out, the aim of that study was for the user to read the content, not find information on the site.

Get back to me when you do a real world A/B test.

With so many widescreen monitors and netbooks available on the market, an extra wide letter box shaped browser window seems very common nowadays (according to stats for sites I have access to).

In this scenario, a vertical navigation works well as it regains more visible vertical space for browser content, using some of that extra width that is otherwise difficult to fill with content.

I don’t think there is a definitive way to go with horizontal or vertical navigation. Think about the content and audience first. Then you can make an informed decision about wether a horizontal or vertical navigation is more suitable for a specific web site.

One small example, feedback as a user and not some expert: when i am tired, using the mouse and keyboard continuously for the whole day, i really wish every horizontal navigation bar i come across could be stacked vertically – i don’t care it its on the left or the right hand side of the page. It’s way too easier to navigate down on a wide column that to navigate sideways on a narrow strip!

FWIW, it only matters when i am dead tired. As far as accessibility is concerned, i think the same markup can be stacked up vertically or arranged horizontally using pure css – so that’s not even an issue!

[quote]
“sites built in that manner will often lack depth and fail to make their purpose clear”
[/quote]

This, with reference to vertical navigation, is going overboard with your claims – totally baseless.

The fuss made about “the fold” is a classic example of all the hype in the name of usability from stables that consider the user to be a complete mindless drone. Users adapt. Just give them what they want, available *where they expect it to be* – some sensible information.

So well illustrated discussion, thank you.

I’m up in the air on this one.

Having worked on an intranet for a major bank in the US with thousands upon thousands of business line managed pages, it’s damn near impossible to have well thought out navigation beyond the top level pages – regardless of of the orientation of that navigation.

If anything, to try and have *some* consistency, we had both a horizontal navigation featuring top level corporate wide links, and then left hand vertical navigation for business line specific content. The top nav was always smartly organized, while the left nav could potentially be a mess because it was user controlled, not by information architects, but by secretaries, tellers, etc.

What I’m trying to say is this: the larger the site / less control you have, the navigation ends up not mattering too much as users turn it in to a rat’s nest.

I wrote a short response to this article as I disagree with its content: In Defense of Vertical Navigation.

One of the first times I’ve been compelled to comment on a Smashing article.

There are several contradictions that have already been pointed out, but are worth restating: if content precedes design, then sometimes content will dictate vertical navigation, so you can’t really extrapolate that vertical navigation is, as a rule, verboten; if there are plenty of great examples that show effective vertical navigation, again, how can we rule it out?

I understand that the author is trying to distill design into a set of easily remembered heuristics, but in this case, the advice is simply poor.

This article should have been one about content & context, and how, as a rule, we shouldn’t marry ourselves to a single paradigm when designing navigation – that our content, site metrics, usability considerations, site architecture, and targeted user behavior should be the warrant for our designs – not pure aesthetics or convention.

Questions we should be asking: how does navigation design differ when designing an information-rich portal versus a Flash-heavy marketing campaign? What about a task-focused web application? That same site, but for an iPhone? Would we consider Wordpress a failure because the navigation almost all of use is a left-aligned list? What if the domain for which we are designing naturally falls into two-dozen discreet chunks of equal priority? What does scannability say about lists? What does Fitt’s law say about our ability to hit targets that are 1000 pixels apart? Does our information architecture warrant split navigation, progressive reveals, a browse hierarchy, a wizard, or a rich site map footer?

We owe it ourselves to think through and design for each and every problem individually. If we don’t, we’re just monkeys, not designers.

take this entire article with a grain of salt and expressly for your own information – period. what you all seem to neglect is this: its not what we want for the client, its just what the client wants. before you all start nerd raging me, remember, we cant write our own checks unless we have our own company. people can talk about studies all they want, and as valid as they may be, is the study paying your bills? are the people making the study paying your bills? unless you can answer both of those questions as “yes”, then this whole article means little to none to any designer. as good designers, we are called to be just that. it has been my experience that content comes first, and the client comes first when it comes to making containers that fully support the content i.e. a web page/design/site whatever. one could have an award winning design with a horizontal menu all shiny and good to go, but if the client doesn’t like it, what does it matter? this article is awesome in that, it makes us more aware of criteria that we may or may not be aware of and therefore should take solely for knowledge. i dont know about you guys, but i’m in it because i like it and i like the money it brings me.

I want to genuinely thank you for taking the time to write this article, but I gotta say, with usability stuff like this, I really miss the rigor of fields like psychology and sociology. While we should try to draw rules from evidence, the amount of evidence you’ve cited is not enough for the broad claims your making, and in fact sometimes you present no evidence at all. I really think some citations are in order for the following claims:
1. “Fly-Outs Aren’t as Usable as Drop-Downs”
2. “Readers Aren’t Used to a Left-Side Menu”
3. “the right-pointing arrow indicating fly-out menus is not be as easily understood.”
4. “It’s Not as Successful, According to Studies.” What you have shown is “that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.” Definitions of success are extremely important, and I’m not sure being looked at for the longest duration, as other have noted, should be considered a “success.”

Not only does the author make several claims without providing any evidence, but also disturbingly assumes that *one* study of eye tracking (which others have pointed out was somewhat misrepresented) should be enough evidence and information from which to draw a fairly general principle. Any serious social scientist will tell you that it takes multiple well-designed tests, replicated and performed by multiple groups/individuals, before a line of evidence should be considered high-quality.

As a sociologist / web designer, I really feel we need to bring much more careful examination to our discussions of usability practices, which is essentially a discussion of social science — a field which most designers have very little experience. The social sciences are essentially fields packed with logical-fallacy landmines, in that it’s easy to draw the wrong conclusions from what seem to be straight-forward results. I don’t necessarily disagree with many of the postulations the author puts forward, but I disagree with the way in which he has drawn his conclusions — which is to draw broad principles from a small pool of evidence.

What a lot of noise about not very much.

Sometimes horizontal navigation works well; other times vertical navigation works well; sometimes some combination works well.

As a designer, you need to look at what the site’s users and owners want to achieve, and design navigation appropriately.

Why make such a song and dance about it?

I could very easily write an equivalent article about the shortcomings of horizontal navigation.

These things are what any half-way competent web designer should know already.

Horizontal nav is fine…
I like to offer users the chance to see what their options are within a current section… to always move ‘forward’… when they click. This frequently means starting with a horizontal nav, but then, after one choice is made, displaying that section’s other pages in a vertical nav.

How do you show that to a user with a horizontal nav? The options are so often hidden behind a dropdown, especially if that’s the first page a user sees.

What are good examples of how to do that within a given section? even if you assume the section starts from a horizontal nav?

You seem to have conflicting references in your article.

First, you link to an article and say that, “… you also don’t want navigation to unnecessarily crowd the left side of the page, which studies have shown will draw a user’s eyes more often.”

Then, you quote another article that says, “Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”

Aside from the fact that the studies seem to contradict each other, the fact that horizontal menus were “looked at for the longest duration” should logically encourage all of us design vertical menus since as you pointed out, “…we don’t want our users to be fixated on pretty navigation bars – unless they’re navigating.”

My personal belief is that the prevalence of horizontal menus is due more to popular design trends rather than outdated technology. The web is a constantly changing, ever-evolving entity where people are always looking for the next way to stand out. Once everyone is hooked on horizontal, vertical menus will most likely take off again as it will set people apart from their competition.

Great opinions though.

Louis:

No offense meant, but this is just another article offering no real solution to a real problem. Instead it presents an opinion, based upon a temporal observance, as a rule.

The only “rule” I have found true is that the relationship between design and technology is in a constant state of flux and will remain that way for as long as we live. As such, we adapt and use our design skills and function solutions as they fall within the ebe and flow limits of technology.

For example, when real estate was tight, we crowded everything together as best we could. Now that real estate is more spacious, we are have more room to present our ideas about design and function. Who knows what technology will present tomorrow?

Using studies like the F-Shaped Pattern to confirm a subjective argument can be very wrong. For example, one could conclude that all menus should appear within the red areas of the text. Would that solve the menu placement problem? Of course it would not, for that solution would create it’s own set of problems. Therefore, such claims demonstrate that such studies should not be taken out of context and extrapolated beyond their scope.

As for me, I am open to all menu designs and see no “rule” as to their application. The only “rule” is to provide service for my clients.

I have clients who insist that everything they can think of must be presented on the front page of their web site with no regard for usability or design. Additionally, the numbers of menu items and lengths of text within their menus do not fall neatly within a simple top menu solution. The clients simply have services they want to show and they want to show everything they have. In their thinking, they are the client, they want it, they are paying for it, so what’s wrong with that? Actually there’s nothing with that if you look at it from their perspective. Besides, who are any of us to tell our clients what will work for their business?

I also have other clients who simply want customers and will listen to my reasoning. As such, their web sites follow function –however, it’s function as *I* believe proper. But my understanding is as limited as any other and my answers often fall short in the long term.

Seldom in life do you have “rules” that stand the test of time. So, your followers may move everything from left to center, but in a short while there will be another lead lemming shouting another direction for people to take. That’s life, however, in realizing that sometimes makes taking the road less traveled a better choice.

Food for thought.

tedd

I have a real objection to the implications of the eye-tracking study. Some will argue that the eye should track to the navigation of the website or that there’s a problem with the eyes not naturally going in the direction of the navigation. I believe that it’s highly site and context-dependant. In other words, if the landing page (or whatever page the user comes to) happens to have high-quality content, then I want the user to be reading that first and I think navigation slows down and distracts from the content I’m trying to present to the user. If THEY decide that the content isn’t exactly what they are looking for, then they can immediately go to the navigation and proceed to more specific details or other parts of the site as appropriate.

There’s no denying, most of the sites I’ve built do use horizontal navigation (mostly due to small link names, no hassles with extra float layouts and most of those sites are centered anyway)…But for the one that put a high value on content, I’ve actually felt more confident putting navigation to the side.

I apologize if I missed somebody else saying this, I didn’t get to skim all of the comments…