The Basics Of Designing Useful Website Navigation

In his book Prioritizing Web Usability Jakob Nielsen wrote: "Most sites have miserable information architectures that mirror the way the company internally thinks about the content and not the way users think about the content. Predictably, users ignore such unhelpful structure."

In other words, if surfers can't figure out how to use the website, they leave.

Every website is different, but no matter what yours is about, it's not hard to figure out what people are trying to do when they get to it.

Whether or not the average person can figure out how to use any given website is sometimes a different story.

Numerous studies have shown that the average surfer is goal-driven and task oriented, and they search for information in fairly predictable ways. Even when they are just casually browsing, they tend to browse within a relatively narrow subject area.

A couple more relevant points about the average web surfer:
 * They rarely look at the "Fluff" - logos, catch phrases, 'Company Goals', etc.
 * They scan a page for three or four seconds, and if it does not seem to be relevant to their current search they hit the back button - or they leave.
 * They hate pop-ups, music, flashing images, and anything else that distracts them from finding what they want.
 * If they don't quickly and easily figure out how to use a website, or even just a part of it, they won't take the time to learn.

That last point is one that could take a closer look:
    they won't take the time to learn

There are three simple "rules" for user-friendly website navigation:
    1. Keep it Simple.
    2. Make it Intuitive.
    3. Be Consistent.

That's it. A simple, intuitive, consistent menu is all your visitors need to figure out how to use your website quickly and easily.

Remember, as the website designer you are intimately familiar with every section and page of your website. Your visitors don't have the benefit of your experience and your knowledge of what is where or how to get from here to there.

Keeping It Simple.

Your nav menu is not the place where you want to get creative. Save that for other parts of your website. This is the one place where the K.I.S.S. principle is in full force.

Use clear, concise labels for your nav menu titles. Your home page is "Home", not "Crib"... Your product catalog is "Products", not "Goodies"... Customer testimonials is "What our customers say" not "Accolades"... and so on.

Use text, not images for your main menu. Images take time to load, and sometimes they just don't load. Some people even have images turned off in their browsers. If you must use images, always use the ALT="description" attribute in the image tag.

Remember also that your menus must work correctly in different browsers. Fancy javascript mouseover effects don't always work the same in other browsers as they do in Internet Explorer.

Making It Intuitive.

Use the 'Standard' navigation conventions whenever you can. For instance, the vast majority of surfers think that underlined blue text means "link" and that a shopping cart icon means "Checkout" or "View Cart"... if you change this kind of thing you run the risk of confusing or irritating - and losing - a potential customer.

Show your basic nav structure in a way that puts similar pages in logical groups. Don't mix up the links in the menu just to get them in alphabetical order. Place similar items under a theme heading, and leave some space or put a separator between sections.

It's also a good idea to follow the top-left-bottom menu placement conventions. Text or tab links to your main sections and/or popular pages at the top, all pages or section page links on the left and plain-text links at the bottom for the 'Administrative' links (about us, site map, disclaimers, etc.).

In-line text links (links that are integrated into your content) are also a very user-friendly way to help people find what they want. Just make sure that the text in the link is descriptive enough that they understand exactly where the link will take them if they click it.

Large websites should not try to link every page to every other page. Try to anticipate the path your customer is likely to take and make it easy for her with a logical progression of hierarchical links.

The most useful navigation schemes will provide visual cues to tell your customer where she is, where she can go next, and how to get back to where she was. Text links that turn purple after they are clicked and menu items that go bold or red when you are on that page are just two examples.

One more thing: Don't make "Dead-End" pages. A page with no menu and no way to get back to the other pages is an invitation for your visitor to leave. (If you do have pages like that, make sure that they open in a new window.)

Making It Consistent.

Whatever nav menu scheme you use, visitors should only have to figure it out once. So make sure that it is the same on all pages. This makes it easier to use, which means that people will stay longer and buy more.

Make maintenance and updates easier for yourself by using an <include> function or a javascript file to place the menu on every page. That way, when you change something, you only have to edit the one file (and the site map).

Wrapping It Up.

Again, it’s all about designing your website navigation around the needs and desires of your visitors. If you want to get better results, (more sales, more subscribers, whatever) try to anticipate how your average visitor wants to interact with your website, then design your navigation around their goals, fill their needs and try to anticipate their probable search patterns.

To get some help with that, get some other people to sit down and go through your website. Don't tell them how to find things, just give them some set objectives that will require some searching around.... and watch what they do carefully. You may be surprised at what you learn!

To Your Success!
Tim

By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.

---

Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to