Navigation - Make it Easy to Get Around

Where Do I Go Next?

If you have spent time thinking about the layout of your Website in detail, there will be a smooth flow across the site towards your content. To achieve this end, related or similar types of content on your site must be grouped together in an intuitive and rational manner. A visitor could then drill down from a broader category to more specific content.

For example, if your Website deals with electronic publishing, you might have a top-level category titled "eMail publishing" and several sub-categories for "eMail Newsletters", "eMail programs", "eBooks" and so on. Under "eBooks" you might have a further set of categories such as "eBook software", "eBook tutorials", "eBook retailers" and the like.

There are two general levels of site organization - Global and Local. Each merits a distinct navigation method. Global navigation is concerned with helping a visitor to your site to identify and move within the broad general categories. Local navigation, on the other hand, drills down within one of the major sections of the site and helps guide the visitor towards a more specific location within the broad category.

Tips and Tricks

• On each page of your site try and include a link to the next logical section of your site. This could be done by:
  1. Using text that says - 'NEXT' or 'READ MORE' or 'CLICK HERE TO CONTINUE' or even something more exciting and compelling that entices your reader to go on
  2. Using tiny pictures or symbols - e.g. ">>>" for forwards and "<<<" to go back.
  3. Hyperlinking a part of the content of the page itself near the end. For instance, in this sentence: "The Koh-i-Noor is thus a very intriguing diamond with a mysterious past." you could make the words "mysterious past" a clickable hyper-link to the next part of the article.
• To help the reader get a sense of your entire site's layout, try and provide a list of atleast the major areas or sections on every page. This way, if a reader wants to explore an entirely different part of your site, s/he doesn't have to click many times to retrace a path s/he had taken earlier.
• In a complex or large site with multiple interest areas, you may need to create multiple navigation tools for each section to optimize the end-user experience.

How do I get there?

So, now your Website visitor has found her/his bearings and decided which portions of your site s/he wants to explore next. The next question to answer is: "What must I do to get there?" The obvious answer is: "Click on the link."

But it is not always obvious where the link is, and what it will lead to!

A good navigation system will ensure that a link is easily identifiable as one. The default color coding of most Web browsers displays a text-link in blue, often underlined. If for some reason you need to change this link color, make sure that there are other ways to identify it as a link.

Your navigation system can also enhance the user experience by making it clear just where the link leads to. This can be done by making the text-link as descriptive as possible and avoiding ambiguity and jargon, or by using tools like the Javascript pop-up title that is displayed when a mouse-cursor is placed over the link.

If you need to use different navigational aids on your site or if it is likely that many users will have trouble understanding your navigation process, it is worthwhile to create a "HELP" page detailing the process of getting around your site.

Tips and Tricks

• It is preferable to leave the default color selections of your user's web browser alone. These colors - blue for unvisited links, purple for visited links - have been chosen after extensive research and usability testing by the major browser companies. Meddling with them shows a certain lack of concern for your site visitors. If you feel compelled to change them, make sure you change them across the entire site.
• Using images for hyper-links makes it difficult for users to identify one as a link. Try and make it easier by adding text pointers like: "Click on icon below"
• A survey of new Web-surfers determined that they sometimes didn't notice hyper-links unless they DID SOMETHING. By using simple Javascript or CSS techniques, you can *animate* links so they change when the user moves the mouse cursor over them. A change in color or font or size, or a line under the hyper-linked text, makes it easier for a visitor to know what to click on.
• Javascript is a neat way to have a link description pop-up when the mouse cursor it placed over it. But here's another simple trick that works with Microsoft Internet Explorer (MSIE) 5.0 and higher browsers (it doesn't affect the link in Netscape). In the HTML code for a link, use a "title" tag to add a block of text that describes the link. The format is: <a href="link.htm" title="This is the link descriptor"> LINK </a> When the page is viewed in MSIE 5.0 and higher browsers, the link description pops up when the mouse cursor is placed over the link text! Try it for yourself.
• If your website attracts many newbies who are still learning about getting around the Internet, or if you use a complex navigation system that is difficult to understand intuitively (ideally, you shouldn't be doing that!) it may be worth creating a HELP page to explain your navigation system. On this page, detail all the navigation elements that you use and explain to the user how they can take advantage of the system to get around the various sections of your site. Then - most important - link to this HELP page from ALL pages of your site!