By: Dr. Mani Sivasubramanian

October 19th, 2000

Reader Rating: 8

"The foundation of almost all good information architectures is a well-designed hierarchy."

Anger. Confusion. Frustration.

These are the emotions of a Web surfer lost in cyberspace. In the murky, uncharted gloom of a poorly created Website. Not one of yours, I hope!

While it may be true that Content is King on the Web, your Website needs an orderly structure - and many signposts - to help visitors get around it. To find whatever they seek on it. To get to whichever section of it they wish to visit. Quickly. Effectively. Painlessly.

Your Website Needs a Good System of Navigation

The term "navigation" is used on the Web to describe the way a visitor to your site is guided as s/he moves about within its different sections. In this article I will discuss the elements of a good system of navigation for your Website.

What is the purpose of your Website?

In most cases, it will be to fulfil the needs of a particular group of people. An information resource will expect to let users find relevant content. An entertainment site aims to give the visitor a pleasant experience. A retail site hopes to sell products that a shopper needs or desires.

One of the most important facets of your Website - apart from the content, of course - is how you direct the visitor towards what s/he is looking for. And the best way to do that is by....

Putting yourself into your customer's shoes

The only way you can plan and design the optimal navigation system for your Website is to think in the same way a typical visitor to your site does.

Try and get into the visitor's mind.

How will s/he find your Website? How will s/he enter it? What steps will s/he then take to find useful content? What will happen after s/he finds it?

Trying to determine the answers to these questions will help you plan a blueprint for your Website's navigation system.

The Value of a Pleasant User Experience

At the pace the Web is exploding with new content, it is no longer easy to attract and impress a Web surfer. Your Website would have to offer a visitor an exceptionally good experience if s/he is to remember it, bookmark it, return to it later, tell a friend (or many friends) about it.

And one sure-fire way of alienating a first-time visitor is to make your site difficult to get around.

If you force people to click on multiple links and wander around your Website in futile circles trying to find helpful content, you can be sure they won't return again. There are simply too many better alternatives available on the Web.

By constructing a Website with an intuitive, elegant and simple navigation system that shows visitors just where they are and explains how to get to other sections of the site, you can enhance their experience at your site. Then, and only then, will they come back. And bring their friends with them!

Ensuring a smooth flow

Most searches for information or fun follow a logical sequence. This order may be different for each site. And if you understand the pattern your visitors might follow and implement it into your navigation system, they sail smoothly through your site. Almost effortlessly they are directed to the content they seek.

How can you design an excellent navigation scheme for your Website?

It isn't difficult if you put yourself in your customer's position and think about the things you would like best on a site like this. Here are some essential questions to answer:

• Where am I? - an aid to one's present location on the site
• Where do I go next? - a roadmap or directory of the entire site
• How do I get there? - an intuitive or descriptive system of navigation
• Am I still on this site? - a consistent look-and-feel across different sections of the site

Where Am I?

Remember your last holiday trip to a National Park or the shopping spree you went on at the neighbourhood's new shopping mall? What was the first thing you did there?

I'll bet you searched the location map for the familiar YOU ARE HERE sign.

And once you found it and got yourself oriented in space, the entire experience became joyful and exciting. You were no longer afraid of getting lost.

Similarly in a large or complex Website with multiple pages and plenty of content, it is easy for the surfer to feel lost. This is particularly so if s/he enters through a route other than the homepage of the site. Bewildered, s/he asks the question: "Where am I?"

An excellent navigation system will answer this question - on every page.

By mentioning the title of a page, or by highlighting the topic, or by the use of buttons of a different color or design, you can let your visitor figure out the page on which s/he is.

Tips and Tricks

In your HTML TITLE tag, use descriptive text to explain the page's content.

• Make sure your site's name and URL (and maybe even company name and other relevant details) are on every page of your site. This will be helpful even to people who print out your Webpage and read it offline.
• Somewhere in your site's content, try and fit in a TEXT based navigation aid that tells visitors where they are and possibly where they came from and where they can expect to go next. For instance, you could have a line that says: Home > Articles > Diamonds > THE KOH-I-NOOR The last one (KOH-I-NOOR) describes the page on which the reader presently is. It stands out because it is in ALL CAPS and not a hyper-link. The other words tell a visitor the path that leads to this page. By making them hyper-links, the visitor can easily click on them to get to other parts of your site. This sort of lateral and vertical navigation ease is a unique benefit of the Web, and an excellent system of navigation will exploit it to the maximum advantage.
• Alternately, you could use a more graphical expression of this by a set of tiny images. One that I like best is a set of white ARROWS in a RED circle to indicate that there are pages ahead and behind the present one, and a white SQUARE inside a BLACK circle to denote the page on which the reader currently is.
• Another way to let your visitor find his/her bearings is to use the button technique - a different color or shade for the background or text in the site's navigation bar to indicate the part of the site s/he is on.

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!

Am I Still Here?

Web surfers like consistency across a Website. If a visitor clicks on a link and is transported to a page that looks totally different from the previous one, s/he is confused and asks "Am I still on the same site? Or have I been transported to a different one?"

An excellent navigation system involves retaining a consistent look-and-feel across a Website. The constancy reinforces the fact that the linked page is a part of the same site.

Constructing your navigation aids

One of the challenges of website design is to integrate your navigational system into the overall schema of your site's image and brand. There are many ways to create your navigation aids.

Text only: Words are used to describe a link

Images only: A small graphic explains the link

Text with Images: Both words and a graphic are used as a link

Drop down menus: Clicking on it brings up a list of options to select from

Dynamically generated pages: Uses scripts to pull up pages from a database

By a judicious use of one or many of these elements, it is possible to design an effective and integrated navigation system for any Website.

Some general principles of constructing navigation aids

Text Links

• use unambiguous link titles
• try to have links of consistent length
• avoid using jargon or slang in link titles
• make sure the link text is clearly distinguishable as a link

Image Links

• ensure small image sizes to minimize page download times
• graphics must be intuitive or clearly descriptive of the link
• combining text with image links improves clarity
• always use ALT tags to benefit visitors who surf with images off

Drop Down Menus

• are useful to help conserve save space on a Webpage
• need some programming expertise to set up
• may not be accessible to surfers who use older browsers

Webpage Design Elements for Navigation Tools

As your Website grows and develops, newer sections will be added over time. Including them in the navigation bars would mean replacing data on multiple files.

Two methods to minimize this problem are:

1. using "Frames" on your Website, with one frame containing only the navigation bars


2. using "Server Side Includes" for the navigation elements

With either of these techniques you can make changes to just one file and have the changes reflected across all sections of your site.

Don't just deliver: Over-deliver

So your Website has all of these points covered. You have an excellent navigation system. Congratulations.

But it isn't time to relax yet. For any number of reasons, users may not be overjoyed with your navigation tools. So focus on delivering extra value to your users. Create an SNS - an acronym for the Supplementary Navigation System.

As the name might imply, the SNS includes other navigation tools like:

• Search Engines
• Table of Contents
• Site Map Indexes

Search Engines

Everyone has heard of the giant Search Engines like HotBot and AltaVista that list sites from all over the Web. It is also possible to have a Search Engine only for content on your site. A visitor can use that search engine to try and find material that s/he could not easily access using the navigation tools.

Table of Contents

By listing out all major segments of your site, a table of contents makes it much simpler for a visitor to drill down directly to a specific topic or category rapidly.

Site Map Indexes

A variation of the Table of Contents listing, a site map index is created by going down deep into the different forms of content on the site. The top 30 to 60 interest areas are then listed with links to the appropriate content.

Test Your Navigation System

Never assume that your navigation system is perfect. While it may appear intuitive and clear to you, it may still leave a site visitor totally fogged.

Put it to the test.

How extensively you test will depend upon your site's size and extent. If you run a small hobby-site, getting a few friends and family members to help test it might be enough. For the larger professional sites, pilot project testing is a serious undertaking.

It is best to actually watch your trial users as they navigate around your site. See how they react to your site's layout. Do they identify the navigation aids easily? Do they know what to do to get around the site? Give them a target - say, to get to a particular page or article. Then see how quickly and easily they can get there.

Take notes. Ask for feedback. Act on suggestions to improve your navigation aids. Tweak, test, re-tweak and re-test.

Until finally your site is a joy to get around!