Website Navigation: The Shopping Mall Analogy
By Mario Sanchez
Posted Thursday, September 30, 2004
Your website's navigation tools and techniques should basically give users the answer to 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 straight forward 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.
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. Each element of the path should be hyperlinked to its corresponding web 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.
For a clear and simple example of the correct application of the techniques discussed in this section, see this page: (http://www.hilton.co.uk/PlanAnEvent/506_BusinessEvents.jsp).
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 don't have that luxury. However, you have a very simple way to 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. In that case, it is common practice to use a more subdued tonality of that color for visited links (for example, if you use dark green for unvisited links, use light green for visited links).
Where Can I Go?
Again, to use the shopping mall analogy, you can look for the "You Are Here" legend in the shopping mall 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 Microsoft's home page.
-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.
Aside from your navigation menu, you can provide your visitors with a Site Map. Some users will rather use it than trying to find their way around your site using your navigation menu.
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 provide search capabilities, and include a visible search box in your homepage. The preferred location for the search box is the upper right corner of the page.
You don't need to provide a search box in all the pages of your site, however, we must place a link to a page where your visitors can access the Search function. That link must be clearly visible and must be titled "Search".
Remember, content may very well be king, but only if your visitors are able to find it. Follow these simple navigation guidelines and you will have a straight forward, user-friendly site guaranteed to make your visitors come back frequently.
About the Author
Mario Sanchez is a Miami based freelance writer who focuses on Internet marketing and web design topics. He publishes The Internet Digest (http://www.theinternetdigest.net/ ), a growing collection of web design and Internet marketing articles, tips and resources. You can freely reprint his weekly articles in your website, ezine, or ebook.
