Navigation is The Backbone of Your Web Site

So it Needs to be Simple and Strong Yet Flexible

Navigation is a great part of what helps create a good Sales Flow on your site. Navigation is the formal expression of your Information Flow. Looking for information or a new song for your iPod uses the same techniques we have used for millions of years to hunt rabbits. If you keep these hardwired human traits in mind then things will go much easier for you.

This is a long article I know but Rome wasn't built in a day so to speak.

The Bad

I'll start with the major clangers because we love to laugh at the failings of others. Yes you too, I bet you laugh at ball to the groin gags like the rest of us. More importantly we can learn faster from seeing why something fails than by only looking at the good things that don't. You can always skip to Getting Web Menus Right.

There was a time when web site navigation was maximal i.e. we had 300 top level items with 600 sub-sections and 403 sub-levels under each! They looked a lot like this:

Navigation with complex dropdowns and poor readability

Poor Usability: too many colors, poor information arrangement and dead links

People thought that having every page accessible from the menu bar was the way to go. The IT guys and business owners both loved the feeling of largess and power that came from all those pop outs. Sadly all too quickly these menus actually became worse than useless alphabet soup. People can't wade through all the clutter. Look at the image above. Sure I have been a bit tongue in cheek but these are all things I have seen in web sites. Let's break this into the individual problems:

Too Much - the human brain can't take in this much text at once and make a fast decision: Time = Frustration
Too Small - The text is too small to really draw the eye and instill confidence that this is the master way to find all the answers
Poor Contrast - The top bar is Ok for contrast but after that it gets hard to read everything in a glance against a busy background
Too many Colors - each extra set of colors causes users to have to decipher and make decisions and people hate making decisions
Obscurity - Many of the Nav items are not really clear in the meaning department and several overlap to create destination confusion. Do I want to be in "Canary Feet Posts", "More Canary Feet Posts", "Posts" or perhaps "Posts for Green Canaries" - after all aren't all canaries sort of green? And while we are at it what do truck tyres have to do with it????
Relevance - Many Nav items don't belong or aren't relevant to that section (or to customers at all); one is clearly out of date, the other potentially pornographic!
Inconsistency - You will see 2 mouse pointers. The first is over the Top Nav item "About Us". As you will see this pointer says that this button is not a link. The links don't become active till the dropdown items. What this does is create an inconsistency: some buttons are buttons and some aren't. This is rats-in-a-maze stuff: it's frustrating for users to have to learn and remember which buttons are live and which aren't. This is really, really silly. Do not ever do this.

This style of overkill navigation makes it almost impossible for people to find the solution they seek easily (i.e. without too much thinking). The fail is because, while making it neat and logical is possible, humans think in meta-levels in a 3D kind of way. A menu tree can represent this but displaying the tree flat in one go it can make it impossible for the average user to take it all in. Better to have general sections and then unveil detailed data as users get closer. A site map can be offered for those who like information overkill.

Navigation as Images: poor readability and harder for search engines to follow

Image Nav: poor readability and hard for search engines to follow

There are a few other no nos that are still common in sites and they often center around how the navigation is constructed. Here is an image of a common navigation style. The menu items use images instead of plain text. Here are the problems:

Text Style - In theory the text style looks pretty but in reality is it harder to read than a simple font. This slows people down.
Centering - People find centered text harder to read than left aligned (or right if you are reading Arabic).
Poor Contrast - I admit the theory of Gold on Marble seems rich and inviting but in reality it leads to poor contrast.
Compression - JPEG compression is useful but it tends to make images look blurry or smeared which makes letters really hard to understand easily.
Image over Text - Images cannot be read by Search Engines when indexing your site. This means that they see a link but don't know what is on the other end, reducing the value of those links. The same occurs with screen readers for visually impaired users. Flash for menus is a total usability killer and should be avoided at all costs.

I know you may think your Brand requires a certain look but in reality users just want to get their solution as fast and as easily as possible. Anything that gets in the way of that flow cannot be helping you.

Getting Web Menus Right - the Theory

There are a few things to consider to build good web navigation but once you understand these concepts you will be well on your way to making your information easy to navigate.

Nesting

Nesting or "branches and leaves" is a concept that is very close to how we perceive the world around us. We see things in patterns starting at the general and working into the specific. Something with 4 legs and fur is a Mammal. If it has pointy ears and meows then it is a cat. If he is black with white socks and answers to Puce then he is mine and I want him back.

Generally we can work through all these revisions very fast with few errors. But think of times when you have been waiting for someone who is running late. You jump at anyone who looks vaguely like the person you want to see. Stress causes errors in the identification process.

Good navigation needs to start at the general and then work its way into the specific. If you offer everything at once then people are likely to explode. Exploding people rarely give us their money.

Hierarchy of Ownership

Related to Nesting: one thing owns another. Positioning gives users cues as to what owns pieces of information. Mammal owns Cat so sits above. Cat and Dog sit side by side as they are equally Mammals. Where pieces of information or signs are placed relative to each other lets users know what is important and how they can best proceed.

Navigation Layout Options

There are several main methods for placing your navigation. Each has an impact on usability and comes with strengths and weaknesses:

	Top is the simplest and most common form of navigation. Pros: very easy to understand, allows for clear ownership, allows for easy content layout options Cons: limited number of entries
	Side is a good solution for where there really need to be a lot of main categories. Side Nav can be Left or Right. Many times Left is better because the "F" reading pattern focuses more on the left side. Pros: fairly easy to understand, lots of entries, reduces wide pages into columns Cons: reduced ownership, reduced content layout options
	Top + Side is a combination of the strengths of the first 2 options. Top and side Nav can be really effective if the top carries the main categories and the side the options. Pros: easy to understand, lots of entries, reduces wide pages into columns, good ownership, columns to make reading easier Cons: reduced content layout options for impact
	Layered is a solution that has grown in popularity recently. It can be very effective or plain confusing. Pros: fairly easy to understand, lots of entries, preserves content layout options Cons: confusing if poorly done

Of course if you need in-yer-face impact on the home page but more complex navigation on other pages you can always choose Top for the Home page and Top + Side on internal pages. Currently on this site (Aug 2009) I have 3 layouts:

Top for Home - broad categories
Top + Side Right for Internal - Latest Articles and Leaders that are less important than the main content
Top + Side Left for Articles - Latest Articles + Article Groupings followed by leaders.

If you do employ positionings that change from page to page it is imperative that the signposts stay easy to interpret without any new learning period.

Location Positioning Feedback

At all times users need to know where they are in the information flow. If they can't get their bearings, users will feel uncomfortable and may even leave. Would you feel comfortable dropped into the middle of the ocean with no land in sight? No. You would feel happier in a creek where you can touch both sides and the bottom.

Tabs that connect to the page area are a great visual way of showing ownership. Color is another important way of showing what is active. Generally lighter colors show active states better than going dark. Just as a light bulb is clearly on when it is bright.

Breadcrumbs (those trails of links just below the navigation on some sites) can be really useful in more complex situations. They don't look very pretty but they do allow a user to see which section they are in and backtrack.

Menus and ex-Navigation pages

Not all pages should be in the navigation. Because we think in patterns and hierarchies of ownership, Nav is far better pointing in the right direction than showing every possible piece of info. If you are up north in Cairns and want to drive to Melbourne way in the south, a sign that points to Townsville is as useful as a sign to Melbourne because Townsville is south of Cairns and on the way to Melbourne. Once you pass Townsville then signs to Bowen, Mackay, Rockhamption, Brisbane and Sydney are all reassuring. If every sign shows all these destinations along with every house along and off the way the sign is quickly unusable.

Put main categories in the navigation and then you can point to specific specialist pages from the words in the content area.

On-Page Navigation

Don't rely on users going back to the navigation menu for every move they make. Actually doing so is poor practice. Because we think in 3D patterns with hierarchies then we will take clues for where there are juicy rabbits in the bushes from everything around us. Links inside the text are very useful if the link is actually telling us what is on the other side. A link that goes here is nowhere near as useful as one that offers to Increase Your Profits.

What I call Leaders are also a very useful and important way of drawing attention to information in other places. Home pages and sidebars often have leaders to specific information like the main product or a passing special. A Call to Action is really a kind of Leader, one that asks for the business. Call to action should generally be at top and bottom of product pages.

Use on-page Nav and leaders as much as you can as it matches the way we hunt wabbits. Also not everyone will land on your home page. Just think that if someone lands on an internal page (Contact us is common for location based inquiries such as "web design brisbane") will they be able to understand at least broadly what you offer in seconds?

Nav Item Order

The order in which you offer your main menu items is important. think as if you were a customer and then offer sections and information in the way that your customers would most likely travel through it. Generally I stick to this flow:

Home - overview of what is inside. Just like a magazine cover this should carry your main headline and leaders.
Products - what you can do to make your user's life better. The reason they are there.
Portfolio or Gallery - the proof is always in the pudding. Show your work and place it in the context of your users.
About - if someone likes the look of your products and solutions they may wish to check the cut of your jib
Contact - if users like all they see above they will want to be more involved with you. Make this easy.

You may have noticed that I dropped the "Us" in About and Contact. The "Us" is implied and not necessary. After all who else do you want people to contact? The removed word actually makes the navigation faster to get. Same goes for words like "Our".

Happy Navigation building.