What Kind Of Navigation Is Best?

Certainly, you should have the navigation that works best for you. But testing navigation is not as easy as testing, say, what titles you should have on pages, or what prices you should offer your products at (Well, that one can be hard, too). Most companies want to decide on their navigation before they design their sites, and then they just live with their misery until the next redesign. (I learned that lesson the hard way.) So let’s just discuss the opportunities and downfalls.

Top horizontal vs. left vertical navigation vs. both.

Top horizontal navigation has the advantage of all being above the fold, and gets presented in a nice neat package up there with your logo. Furthermore, it doesn’t hoard much of your precious real estate, the way that left navigation does. After all, even if your left navigation only has seven or eight options, your designer will probably keep you from wrapping text around it (and thereby prevent you from using the white space below it. Although, you could use the space for surveys or testimonials or news or snippets from your blog.) Top horizontal has another advantage — you can add a blog much easier to your site. Blogs tend to have a side horizontal nav bar already. You could still do them on opposite sides of the page, especially if you don’t have to design for 800×600.

On the other hand, it is much harder to extend horizontal navigation – it can only get as wide as your customers’ browsers .

So I will make sweeping generalizations, if everyone who reads recognizes that the only “good” navigation is the one that is good for you. If you are a small lead generation website that wants to have Services, Products, Partners, About Us and Contact Us in your navigation (I really hate those, but more later), then go ahead and do the horizontal thing. If you are a large website, especially an e-commerce website with lots of products, you probably have to do the vertical navigation. If you are Amazon, you probably have so many products that you need to do both. And if you are a content site, like CNN (don’t you hate their newest redesign?) your whole site is really one big piece of navigation, because everywhere you turn, you are linking to another story.

Having said that, we are a small b-to-b website, and I just hate our horizontal navigation. I just wish I could extend it.

Text vs. words in pictures.

Oh, this one is easy. If your navigation includes important keywords, then do your navigation in text. That way, you get credit for those keywords in the search engines. On the other hand, if you have one of those Services – Products – Partners – About Us -Contact Us kinds of navigation, go ahead and write it any way you want. And you can always put your important links as end-links on the bottom of the page in real text, which will help your SEO some.

Javascript pulldowns and flyouts.

The issue here, besides any search engine issues, is about usability – it’s so hard to get your mouse to navigate to exactly the right place (and to then yet another layer of javascript. Think about your own experience: you mouse over something, a menu comes up, you move your mouse over to where you want to be, and then you have a third set, and you can’t get your mouse to hold on the right spot? You hate it, right? So keep this one simple. As part of that, make sure that the first level of navigation is mousable. For example, if you had a music website, and one category was Jazz, and under that, you had all sorts of jazz bands — you should still allow the visitor to click on Jazz, the highest level, so that s/he can see the category page.

What words should you use in your navigation?

This is a great opportunity for some quick user testing. Write down the topics of your top hundred or two hundred pages, and ask users to sort them into piles that make sense. And

then ask the people who are sorting to give each pile a descriptive name.

My favorite example of bad naming is from the old Carnegie Mellon website. Here is a screenshot.

Notice that one of the categories is Faculty Visitors. I can’t tell you how many times I have been to that link. After all, when I go to the CMU website, I am usually pretending to be my spouse, dealing with benefits. Visiting their website. That made me a faculty visitor. Right? But always, I came away disappointed, because that’s where visitors from other universities were supposed to go….

You also have the opportunity to say just about nothing and use Services – Products – Partners – About Us -Contact Us, thereby ensuring that visitors cannot understand what your company does by reading your navigation.

Breadcrumbs, and where am I, anyway?

Not everything is on the navigation. After all, it just can’t be when you have a million-page website. But you still need to get visitors to their information, so you’ll have to rely on excellent on-site search, a great sitemap (but not everything will be there either, will it?), very strong scent, and linking from page to page.

Should you have breadcrumbs? You know, those little (sometimes clickable) links that showed you went from Outerwear to Sweatshirts to Hoodies? I think that the jury is out on that one.

Jared Spool claimed to me (this was in March ’06 when I was at their road show) that his studies show, no one uses breadcrumbs. I countered that I use them all the time in Google AdWords, but that is more of a web application than a website (and I use them to click on and get back where I want to be. Plus, AW has a strong hierarchy, keywords inside adgroups inside campaigns, so where you are really matters.) If you do use breadcrumbs, be careful not to create a real trail in text (lest you really mess yourself up in the search engines.) You can create either a relative, “hard coded” trail (so, for example, even if I land directly on Hoodies from the search engines, my trail already says Outerwear > Sweatshirts > Hoodies.) Or, you can create a real trail, but wrap it in javascript so that the search engines can’t read it.

Endnotes: Many thanks to Internetrix, for being the only GAAC to submit to the GA contest. (I should have winner announcements this week.) Congrats to Conversion Rate Experts for becoming a Website Optimizer Authorized Consultant. (You guys are probably the only four page website to achieve that accolade.)  Thanks to Kevin from the T-shirt company, who requested this post. And many thanks to Taylor Pratt from LunaMetrics, whose vacation I interrupted just to ask an SEO question (and thereby finish this post. Finally.)