The Website Navigation Guide Tips and Examples

The Website Navigation Guide Tips and Examples

Website navigation refers to all of the elements on a webpage that help a user move around a website. The easier a website is to use, the longer people will stay and the more likely they are to return.

Good navigation is critical to a site’s success.

I tend to recommend that people complete the navigation before they do their website design. In my humble opinion, great navigation is more important than great design. The characteristics of both are the same. They must be simple, clear and intuitive for the user.




The most important navigation tools are the menus. The main menu should be either down the left-hand column, or across the top of the page. You may also want to have a small navigation bar at the bottom of the page.

Other navigation elements include images with links, text links within articles, floating menus and individual buttons such as ‘Back,’ ‘Previous page,’ ‘Details,’ ‘Top of the page,’ etc.

To build your navigation, we suggest you start with a big sheet of paper.

If your website will just have free content and no private membership area, draw a single box at the top and label it ‘Public Home Page.’ If you plan on having a private member area, draw two boxes at the top of the page and label them ‘Public Home Page’ and ‘Member Home Page,’ From these boxes, draw lines to the pages that they link to. At the end of each of these lines, draw another box to represent an additional webpage.

Here is an example of a ‘Website Navigation Map’ or ‘wireframe diagram’ as it’s known in the business:

navigation wireframe membership website

It may take a few goes, but you should be able to model your complete website on a sheet of A3 paper. Use different coloured pencils for different layers in the navigation. For example:

•    Level 1 – Public Home Page and Member Home Page – Red

•    Level 2 – Pages that link directly from the Home Page – Blue

•    Level 3 – Pages that link from the category pages  and other level 2 pages – Green

Once you have built your sitemap, get another piece of paper and draw a larger version of the Public Home Page and write in all the link names as you want them to appear on your site. Do the same for the Membership Home Page and all of the Category Pages. Here’s an example of what I mean:

building navigation from homepage diagram

The pages of content that tend to be common across most moneymaking content websites are:

•    About Us – an overview of the owners, writers, company, etc.

•    Contact Us – contact details including e-mail address, postal address, telephone number and fax number

•    Our Services – a description of the product or service that you’re offering

•    Our Guarantee – explanation of your members’ rights if they decide they do not want to subscribe

•    Privacy Policy – reassurance about how you will and won’t use personal information

•    Features – usually a list of benefits of joining the website

•    Online Ordering – a link to the order form

•    Sample Articles – examples of the type of content that members can expect to find

•    Testimonials – statements of endorsement from existing members

•    In the News – quotes from the press and copies of press releases

Take a look at the pages on your competitors’ websites for ideas on other standard content that you might want to include.


The result of this exercise should be a complete sitemap, with all the major menu links written in. This is a big and important step in the planning and building process of your website and will clarify a lot of things in your mind. One last important point: When you are choosing a service on which to run your site, make sure that you have complete control over changing the navigation. You won’t get it all right the first time and you will want to keep adding new stuff. You must be able to do this yourself.