Pin Me

Tips on Creating a Navigation Map for a Website

written by: S. R. Obbayi•edited by: Amber Neely•updated: 5/19/2011

One of the most important features for your website is a navigation map that will draw in visitors. Creating a one for your website is not as straight forward as it may seem. Some thought needs to go into it. Keep reading to find out how to create a navigation map for a website.

  • slide 1 of 4

    Introduction

    Navigation maps for websites, more popularly known as "site maps", are a very important resource that simply should not be ignored on any professional grade website. Navigation maps seem to be the single element that starts serving its purpose long before the website hits production release, to the day the website is up for a redesign. How can this be possible seeing most web developers today tend to consider and factor in navigation maps for their websites as an after thought? That should not be the case.

    Navigation maps can fall under these three main audiences; web developers, website visitors and the search engine robots. With these three target audiences in mind it is important to know how each of these get affected in the creation process of the Navigation map for a website.

    Here are the three general tips that will aid you in coming up with an effective navigation map for your website that will cater to all intended audiences.

  • slide 2 of 4

    Navigation Map as a Design Guide

    design navigation map Creating a Navigation map for your website at design time serves to provide the direction your website will be built. Doing it at this stage helps the web designer identify what web web pages are required, what purpose they serve and how the web pages relate to one another. Navigation maps created at design time also help the web designer have a general picture of the magnitude of the website and enable him to set constraints on what the particular group of users can access and what they cannot by maybe setting requirements such as user authentication. Without going into details of how each link in the navigation map works, the designer can simply come up with a ordered list to give a visual of what the website navigation map model should look like.

    With the kind of Navigation Map that handles special pages, be sure to expound on the flow of special pages such as login pages, email systems and administration of content management systems among others during the design process. Here is an example of what a flow that handles a simple shopping enabled website would look like. It makes the assumption that the visitor is already registered and goes through the process without any errors. Even though I have left these out, they are very important.

    • Shop page: Visitor opts to log in to the system. (Credentials)
    • Login page: Visitor logs into the system successfully. (Login)
    • Catalog: Visitor selects items to purchase and adds those items to cart. (Add Item)
    • Catalog: Visitor opts to checkout once he is done. (Checkout)
    • Checkout: Visitor reviews order and decides to proceed on with the purchase. (Submits)
    • Verify: Visitor completes order by confirming shipping info and credit card details. (Buy and Ship)
    • Thanks page: Thank the Visitor who in turn may continue shopping (Back to catalog) or visit the rest of the website (continue...)
  • slide 3 of 4

    Navigation Map as a Visitor Guide

    brighthub site map Whichever way you look at it, websites are designed with your visitors in mind and that is so important in a making sure that your navigation map follows that. As visitors come to your website to look for information, you do not want to them to leave your website due to difficulty in moving around. So once your website goes live, it is very important to have a navigation map, AKA the "site map", to help the visitors to understand the website structure and layout so as to quickly gain access to what your website has to offer. So in general, a Navigation map or site map should also be factored within itself, as in when using it in the design stages of the website, all that information must be made available in a public format to the visitor for use.

    To actually create the navigation map, you would simply arrange the pages as a parent child list of items starting from the parent page to the minor pages that are found under the parents section. The left shows such an example and here is the link to the brighthub site map.

  • slide 4 of 4

    Navigation Map as a Robot Guide

    Your website is primarily designed to cater to the human visitors, but you as the web designer must also come to terms that there are millions of websites out in the web and visibility of your website is extremely important. You will therefore need to appeal to the non-human visitors, better known as search engine robots. It is important that your website gets indexed by the search engine robots effectively and at the right frequency.

    For this case the navigation map for your website can be an invaluable tool. The navigation map page is the ideal page to submit to search engines as it has links to all public pages in your website. The easiest way to submit your site map to search engines like Google is to have your site map stored in your root folder as an xml file. This way you can submit you website with the necessary meta data stored in that file. Here is an example of a site map format called yourwebsite.com_sitemap.xml. In the standard format for xml site maps.

    <?xml version="1.0" encoding="UTF-8"?>

    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    <url>

    <loc>http://yourwebsite.com/</loc>

    <lastmod>2010-08-08</lastmod>

    <changefreq>monthly</changefreq>

    <priority>1.0</priority>

    </url>

    <url>

    <loc>http://yourwebsite.com/articles</loc>

    <lastmod>2010-08-08</lastmod>

    <changefreq>weekly</changefreq>

    <priority>0.3</priority>

    </url>

    </urlset>