Left Hand Column - Page 2

All that's left to deal with is page-specific links that point to other material within the same section of the site. Most sites create a left hand column and put these links there — though the bottom of the page is also available and we'll come to that in a moment.

A left-hand navigation column has the advantage that it's the natural way to keep your main content from sprawling across the page. Text that does not spread across an entire page is easier to read than text that does (though it's worth noting that Jakob Nielsen opts for text all the way across the page on his own Useit.com Web site).

You may see sites that use a right-hand side navigation column rather than a left. The jury is still out on that one. Some usability experts recommend right-hand side navigation on the grounds that it's close to the vertical scroll bar, and that's where a visitor's mouse will usually be, so links placed there stand a better chance of being clicked. My personal experience of introducing right hand side navigation wasn't good — it gave fewer pages-viewed-per-visitor. I now stick to the left.

Try to keep your side navigation links down to ten or less, again to help your visitors with their decision-making. Packing too many links into side navigation is a common error found on some of the Web's biggest sites.

Main menu pages and submenu pages are special cases because they are pure navigation pages. They may contain a large number of internal links in side navigation — though rarely more than thirty.

Follow-Up links

There's one final place for navigation links, and that's the bottom of the page. It's the ideal spot to put follow-up links to very closely related pages. Usually these will be even more closely connected to the main content of the page than the links you put in the left hand column.

If you're not sure which links to put where, think of it this way. The links in the left column are for visitors who start the page but decide not to finish it, because it isn't exactly what they're looking for. It's your opportunity to give them close alternatives.

The links at the bottom are for those who finish the page because it is what they were looking for. Your opportunity here is to provide links that give more information on the same subject.

A few close but not identical subjects can be slipped into the bottom area too, if you don't have enough material on the same subject, as long the number of links remains low for easy decision-making — ideally five or less.

You may also wish to repeat your main section links at the bottom of very long pages, to save your visitors having to scroll a long way back to the top.

Links as Graphics or Text

The general rule is that whenever a graphic is used there's a usability penalty, and it applies to navigation just as it does to the rest of page design. There are two main reasons why navigation graphics are a bad idea. One is that they take time to load (see Usability: the Basics - Graphics and Speed) and the other is that many people browse with graphics switched off to reduce download times.

If you use navigation graphics you should add text navigation elsewhere on the page. Usually it's added at the bottom. Some sites try to get away with putting the relevant text in the Alt tags of the graphics, but if you've ever tried to use this kind of navigation on a browser with graphics switched off, you'll know it's only suitable for the obsessively determined.

If you must use navigation graphics, make sure they look like navigation items. Rounded tabs that resemble card index separators are used by popular sites and there's no confusion about their purpose, even if they do add a few seconds to the time it takes a page to download.

Despite the usability penalty of graphics in navigation, they are unquestionably popular and used by many of the Web's most successful sites. Apart from a company logo, they may be the only graphic items on the page. The theory here is that a small usability loss is better than utter blandness.

Rollovers

These graphics that change as the mouse rolls over them are pure eye-candy and definitely incur a usability penalty. You could say they're roughly twice as bad as plain navigation graphics because they take twice as long to load — plus extra time for the JavaScript that operates them.

If you have very plain pages and you want a little eye-candy, you may decide this usability penalty is worthwhile.

On the other hand, if you have big pages that take a long time to load, are you happy to lose visitors while your pretty rollovers travel down the wire? It's rare to see them on the Web's most successful sites.

Separating Text Links

This is relatively easy with top navigation. Text links can easily be separated by a vertical bar ( | ) or in breadcrumb trails by a chevron (>).

With side navigation, separation can be a lot trickier. A full line space between each link is best, but doesn't work well on a menu page where you might have a long list. You may decide to go for a simple linebreak rather than a space, and if so you have to watch out for links that run over on to two lines. It's a common problem and there's no easy solution. Using a capital letter only at the beginning of each separate link still doesn't provide enough clarity. It may be better to force the linebreak in a long link and then indent the continuation with a non-breaking space (  in HTML) or two.

Usability and Navigation
Color and Size of Text Links - Page 3