Tutorial - Navigation Structures

As mentioned in The Planning Phase, a hierarchical website has three page types; the home (or main) page, primary topic pages and subsidiary topic pages.

The navigational structure of a well structured site should have the following seven attributes:

Typically your site will receive two kinds of visitors. First and most common are the ones that enter through the home page and see your site the way you intended it to be seen. The other kind of visitor is the one that drop in at one of the lower level pages as the result of clicking on a search engine link. Don't be fooled, one may seem slightly easier to satisfy than the other, but they both have their challenges.

Visitors that Start at the Home Page

The visitor starting at your home page has greater expectations. Because he/she is starting at the beginning, they expect your navigational structure to lead them to their particular area of interest without confusion or misdirection. For that reason, your link names must accurately represent the contents of the target page. Anything less will frustrate and confuse your visitor and possibly give them enough reason to leave.

Choose the Right Names

When naming your links, review your target page and look for no more than three key words that summarize the contents of that page. These don't necessarily have to be words on that page, they just need to create an accurate expectation. Also, whatever name you choose for your link, be sure to choose something similar for that page's URL name. I.e., don't call your link "The Bookstore" and then name your page "Page14.htm".

Give Each Page a Title

What better way to reinforce that the contents of the destination page matches the link that took you there, than to use a descriptive title (on the destination page) that matches the link name. A page title in a type larger than the rest of the text on a page will be one of the first things a visitor sees when arriving at the page. If nothing else, it will give your visitors a warm fuzzy feeling to know that they arrived at the right place.

Be Consistent

One of the most frustrating experiences on the web is trying to navigate a site where the navigational structure changes on each page. Whatever you decide on, whether it's a horizontal menu at the top of your pages, or a vertical menu down the left side of your pages, MAKE SURE IT'S THE SAME ON EVERY PAGE. Of course, there are exceptions to this rule, especially when it comes to large sites like Yahoo or MSN, but most of us won't ever have to worry about managing a website that is that complex. Keep it simple, so that your visitors don't have to think, and you'll have happy visitors.

Another exception to the consistency rule is your home page. Your home page has a totally different purpose (as discussed in our previous newsletter) and therefore does not have to adhere to the site's navigational structure. However, the home page should contain links to all the primary topic pages. The last thing you want a visitor to do is to arrive at a primary topic page and see links to other primary topic pages that weren't on the home page. You don't want them saying to themselves "Where did that come from?" My philosophy behind a good navigational structure and link naming convention is No Surprises.

Leave Breadcrumbs

Something I see being used more and more on the web is breadcrumbs. Just like the ones used by Hansel and Gretel, breadcrumbs are visible markers that trace your visitor's steps through your site. They are typically displayed in the upper two inches of each page and list out the pages that the visitor stepped through to get to their current page. The standard designator between pages is the ">" (greater than) symbol. Because I believe that breadcrumbs are an extremely valuable aid to navigation, (even in a small site like mine), I recently added them to my site.

Don't Fool Your Visitors

There are basically four kinds of links:

The ones that take your visitor to another page on your site
The ones that take your visitor to another site
The ones that bring up an email window
The ones that start a download

It is absolutely critical to ensure that your visitors know which is which. Something I find extremely aggravating is to click on a link that I assume will take me to another page on the site, and then find out that I just started a download. The links in your navigation bar should only link to other pages on your site and possibly an email link. NEVER include links that start downloads or links to other sites in your navigation bar. These should be within the body of the page and should be clearly identified. No Surprises.

Visitors that arrive at lower level pages

Not every visitor will enter your site through the home page. Often, a search engine robot will index the primary topic and subsidiary pages of your site, thereby resulting in visitors entering your site at almost any page. To create location awareness for these visitors, I would once again strongly suggest using breadcrumbs. The really nice feature about breadcrumbs is that they tell you where you are, no matter where you came from. It's like going to a mall and looking at the directory. The first thing you always look for is the "You Are Here" indicator. Once you find that, you know exactly where you are in relation to the rest of the mall.

Take Me Home

For those visitors that enter your site in the middle, a really handy way of establishing orientation is the link to the home page. In fact, I would go so far as to say that every page on your site MUST have a link to the home page. It gives your visitors a way of starting from scratch. Lately, more and more sites are using their logo's to link back to the home page, and web surfers are quickly becoming accustomed to finding the home page link there.

The Site Map

Even for small sites, a site map can be a very useful tool. First, it gives newcomers, especially the ones that enter via a lower level page, a place to get their bearings. A site map is basically an outline of your site, with each level being indented slightly to show groupings. Because my site is relatively small, I decided to use a site map for my navigational links. The advantage to this is that it displays on every page and therefore creates an instant aid to location awareness. (Of course, if my site gets too big, then this concept goes down the tubes). If you do decide to add a site map to your site, be sure to add a link to it in your navigation links. It won't do anyone any good unless they know it's there and have easy access to it.

I Can't Find What I'm Looking For

If your site has lots of content, you should certainly consider adding a site search engine. Not only will it accelerate finding something specific on your site, but it will also verify that you site does contain the sought after information. Sometimes, looking for something specific on a large site can be like looking for a needle in a haystack. Wouldn't it be nice to be able to query the haystack and find out if this is the one with the needle?

Building An Effective Navigation Structure

Visitors that Start at the Home Page