• home
I
• contact us
I

Search

Website Navigation

The Shopping Mall Analogy

Your website’s navigation elements should basically give your users answers to these three questions:

• Where am I?
• Where have I been? and
• Where can I go?

To better explain how to answer those questions we will draw a parallel between your website’s visitors and shopping mall customers.

Where am I?

Shopping mall visitors will usually have at their disposal one of those handy displays located next to the mall entrance, where they can view a map that shows the location of all the stores. In that map, they will also find a helpful little arrow next to the words "You Are Here". Though not as simple and straightforward as the "Your Are Here" symbol, there are several techniques you can use on your website to tell your visitors where they are. One of them is to have a clear navigation menu in a prominent location, usually the left margin or across the top of your page. The current page should be clearly singled out from the other navigation menu options.
This can be accomplished in several ways:

• If you use images for your menu options, you can use a different image for the button indicating the current page.
• If you use an HTML table, you can mark the cell corresponding to the current page by using a different cell background color.
• You can use a different font type or color.
• If you use simple, underlined text links, you can leave the menu option for the current page as non-hyperlinked text (not underlined).

Tip: Never hyperlink the current page to itself. Another very effective way of letting your visitors know where they are is to use a "breadcrumb trail". A breadcrumb trail explicitly shows the path from the homepage to the current page.

A breadcrumb trail looks like this, and is usually found near the top of the page: Home > Articles > Web Design > Current Article The words "Home", "Articles" and "Web Design" should be hyperlinked to their corresponding web page. "Current Article" will not be hyperlinked, since it corresponds to the page that is already on the screen.

Where Have I Been?

In a shopping mall you will most likely know where you have been just by looking back. Or, you can look for the "You Are Here" symbol in the mall map and identify the stores you already passed by. In a web page you can easily tell your visitors where they’ve been: just give your visited links a different color. The standard color for visited links is purple (just as the standard color for unvisited links is blue). Although the use of these standard colors is highly recommended, you can use a color other than blue for your unvisited links if it blends better with the look and feel of your site. In that case, it is common practice to use a more subdued tonality of the unvisited links color for visited links (for example, if you use dark green for unvisited links, use light green for visited links).

Where Can I Go?

In a shopping mall you can look for the "You Are Here" legend in the map, and pretty much find your way to any store in the mall. On your website, the best way to let your visitors know where they can go is to offer a clear navigation menu. Some guidelines you can follow are:

• Group related navigation options in clusters. A good example of this technique can be found in http://www.microsoft.com
• Give the most popular destinations the most prominent locations in your navigation menu, or find a way to emphasize them. For example, Yahoo! presents the links to its most popular sections in bold.
• Don’t link to all sections of the site from every section. In most cases, it is enough to link only to the most relevant sections, and to include a link to the homepage, where comprehensive navigation choices can be provided.

Finally, some mall shoppers tend to go straight to the information booth to ask for directions, rather than trying to find their way around for themselves. In a website, the equivalent of the mall information booth is the search box. If your site is more than just a simple company brochure, you must enable it with search capabilities, and include a visible search box in your homepage.