8/19/07

Navigation: Which kind is best?

Certainly, you should have the navigation that works best for you. But testing navigation is not as easy as testing, say, the titles you should have on pages, or what prices you should offer your products at. 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 wordpress blog much easier. Blogs tend to have a side horizontal nav bar already (although you could do them on opposite sides of the page, especially if you don't have to design for 800x600.)
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, 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. There are so many things I would like to add and can't.

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


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 this gets worse when companies add another level of flyouts, Haven't you done that, 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?) So keep this one simple. As part of that, make *sure* that the first level of navigation is mousable. For example, you hve a music website, and one category is jazz, and under that, you have all sorts of jazz bands -- you should still allow me to click on jazz, the highest level, so that I can see the category page.

What words should you use?
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. I try to keep screenshots out of email, but if you looked at it, you would 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....
And of course, you can be completely non-descript and use Services - Products - Partners - About Us -Contact Us, thereby ensuring that no one can look at your navigation and know what you do without clicking.

 

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 Outwear 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. When I blogged about this, readers had strong opinions (both ways, including Spool, who commented too.) If you do use them, be careful not to create a real trail in text (lest you really mess yourself up in the search engines.) You can either create a relative 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.

 

Robbin Steif
LunaMetrics

No comments: