Ok, I’m pitching another website redesign project, and this is my favorite client so far – why? – They are paying us to pitch them a new design. This does not happen very often… believe me!

The client sent a list of sites in and around their field – ie. similar institutions, organizations, etc. with similar setups, mandates and/or subject matter. It’s interesting when you look at 10 sites in a row within a peer group. Most of the sites were heavy in content – lots and lots to of useful, practical, necessary information. They are partially marketing sites, partially to provide information and resources, and partially to inspire action.

Fundamentally all these sites looked different – style, look and feel, etc. But they all had one thing in common, they broke rule #1 of building site navigation… CONSISTENCY!

Rule #1: Be consistent

Your navigation should be consistent from page to page, section to section. If you are using a horizontal and left vertical menu system, for the love of all that is reasonable in this world, STICK WITH IT. Don’t change it half way to no left nav, or introduce a right one now and again, or change the buttons, order of the items, or what/how it appears there! Pick something, and EVERY PAGE MUST HAVE THE SAME STRUCTURE! You must build expectation for your users. Look left to see X, and look up to see Y. Don’t change it to A and B half way through the site. Stick to this rule and you are half way to great usability.

Rule #2: Maximum 3-click Policy

You should be able to get to any main detail on your website with a maximum 3-click policy. I try and do it in 2-clicks if the volume and diversity of data is low. What this means is that if i’m reading a news article on your site, i should be able to get to your Products and actually looking at a list of products within 2-clicks and a specific product in 1-click.

ex. 1st click I’m in the house, second click i’ve picked the room i want, third click i’m into the activity i was looking for. That activity may then have its own clicking structure (House –> Living Room –> TV (click away to channel surf!).

General guidelines for this:

Rule #2.1: 1st click
The 1st click gets you to a broad category, department, or target audience profile. On the 1st click i’m SKIMMING. That means I’m only looking for headers and links to find what i want.

Rule #2.2: 2nd click
On the 2nd click I’m starting to get specific. Here I am SCANNING content. Skimming is a glance, scanning is a systematic breakdown of the headers, subheaders and links. If i get into the bullets or 1st line of a paragraph of text you’re starting to lose me.

Rule #2.3: 3rd click
The third click I want details. I want to read, consume, absorb. I’m ready for the content! If i’m not reading by the 3rd click, you’re likely to lose me.

Rule #3: Navigation is overhead, keep it lean

I’m talking about bandwidth and screen space here. Navigation should account for 25-35% of screen space depending on the depth of content you have. In terms of bandwidth, keep it minimal, you want the menus to load FAST and FIRST. Avoid images if you can, use text, and keep banners and other decorative functions to a minimum –> unless these serve a purpose other than navigation.

Rule #4: Simple

There really aren’t that many navigation options. You don’t see cars developed with 10 different ways of arranging the dashboard. There are differences between each car and maker, but in general you can expect certain elements in certain locations to tell you specific things that you need to know to drive the car. You really don’t want to spend time trying to find your speedometer WHILE driving. Treat your website the same way. What are the archetypes of web nagivation?

• Horizontal top navigation, usually just below the banner. Elements may contain drop down lists, or pull up a second level horizontal nav. Do not go more than 2 horizontals navs. If you need a third layer, use drop downs instead. I don’t like drop downs, because you can’t see them. Once a user clicks on a menu item or a secondary menu item, you want to keep the options for that section displayed, which is why i prefer the secondary horizontal menu vs the pop-up list.
• Left navigation. This creates the uber popular, how websites started, L shape. Upside-down L shape that is. It’s been done and done and done, yes!.. for a good reason. It works. If you have a heavy content site, stick with simple.
• Right navigation. Blogs have made a right navigation system popular. Because today’s (and for last 3-4 years) the screen resolutions have been tending to wide formats, the side scroll is no longer a pressing issue. Depends on who your target audience is however. I recommend right navs only for a 3rd or 4th tier of information. Content page specific navigation where your content topic requires it to be broken down into multiple pages for easier consumption.
• Bottom navigation. I highly recommend a text-only bottom navigation which incorporates either ALL your navigation options, the most popular, or the top level navs. People tend to put Privacy Policies and other legal jargon there. But I recommend even having those sections appear in your main-navigation schema somewhere for completeness.

That’s it! Why re-invent the wheel? Horizontal on top + left vertical = main navigation. Right nav = in-content navigation. Bottom nav = repeat all as text only, most popular, and/or “extra info”.
Rule #5: You can play in your content area

If you want a place to play with high bandwidth, unique design, interesting layout, etc., then use your content area. This is what it’s there for. Don’t mess around with your navigation to make your page different – remember rule #1.

Ok, if you’ve read this far in this blog post, you are keen and want to develop a great navigation schema for your website. Good for you! Go out there, kick ass take names and let me know how it goes.

Bruce

ps. Here is a Bonus Tip: Use a Cookie Crumb Trail to let users know where they are when tunneling through your site.

pss. If you need help, drop me a line. Why DIY when you can get a pro to come in and get it done right!

This entry was posted on Thursday, January 17th, 2008 at 1:39 am and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.