Structuring the web site
Designing good navigation
Navigation is not just a part of your web site – it is your web site. Without effective navigation, your users will not find what they are looking for, and they will give up and go elsewhere.
In navigation, there are three essentials that the user needs to know:
- Where they are
- Where they have been
- Where they can go
With these essentials in place, then your site should be easy to navigate.
How to structure your navigation
Once you have decided on the sections and pages to include, you will need to categorise them.
- Utility pages – pages that need to be placed prominently in the navigation to enable people to use the site (for example, home page, shopping cart, help or search).
- Sections – the main sections of your site that usually act as a route to the sub-sections (in a small site you may only have one level).
- Sub-sections – the actual pages that you want your users to go to.
You can then structure your navigation accordingly:
- Utility pages – links to these pages need to be easy for people to find whenever they need them, without distracting them from the main navigation.
- Sections – the main sections are likely to form the core of the site navigation.
- Sub-sections – whenever the user enters a section, they should be able to navigate the sub-sections.
Link to the home page
Your home page should act as a central starting point which helps users
to find each section of the site easily. If you use your logo as a link
back to
the home page, it should be obvious that it has this function, unless you
also have a clear ‘home page’ link.
Let users know where they are – and where they can go
You should test your navigation to make sure that it works effectively.
- A page should never link to itself.
- Each section needs to clearly indicate the pages available within it.
- When a page is open in the browser, it should be clearly marked as the current page.
- The user should be able to see at once where they are within the site’s overall structure and have access to other relevant pages.
It is also useful to use a ‘breadcrumb trail’ to let users know
the path that they have taken. This is usually a small list of links at the
top of the page (for example, Figure 5 below).
Figure 5. Breadcrumb trail indicating the path to the current page
Page names and titles
On arrival on a page, the user should be able easily to tell what that page is about. The most important part is the page heading, which should be placed clearly at the top of the page text, usually in a larger font size.
Page headings should correspond to the link that the user clicks in order to arrive there.
The page title should be reflected in the title tag for the page.
Site search
Entering a site, some users will immediately look for a search facility. If your site offers a search, it should be located prominently on the page, usually near the top.
A site search should be labelled as a search field, as in any of these options:
Figure 6. Best practice search fields.
It is not necessary to have any ‘placeholder’ text in the search field (for example, ‘Enter search phrase here’). You should avoid labels like ‘quick search’ or ‘keyword search’.
It is vital for the site search facility to return relevant results. If the
site is small, you may not need to include any search facility. Instead, you
can use a clear site map.
Testing your navigation
When a user enters your web site from a search engine, they will often land on an inside page. Web usability expert Steve Krug has developed an easy system to test your site for user-friendliness. Whichever page the user lands on, they should easily know:
- What site is this?
- What page am I on?
- What are the major sections of this site?
- What are the options at this level?
- Where am I in the scheme of things?
- How can I search?
He suggests that you print out a page, hold it at arm’s length and then circle all these elements.
Figure 7. bean-bags-direct.co.uk
In the Bean Bags Direct example, we can answer the questions:
- What site is this? – identification is clear in the left hand corner: bean-bags-direct.co.uk.
- What page am I on? – the page title tells us that we are on the children’s bean bags page.
- What are the major sections of this site? – the purple sections show bean bags and bean chairs. The utility pages are along the top of each page.
- What are the options at this level? – there is a link to ‘view prices, colours and fabrics’.
- Where am I in the scheme of things? – in the navigation on the right hand side, the children’s bean bag link is highlighted, telling us that we are on this page within the ‘bean bags’ section.
- How can I search? (if appropriate) – there is no search feature on this page.
