Web navigation
Imagine you're driving along and due to a road closure you have to follow those conspicuous yellow detour signs. You're now on an unfamiliar road, but because of the signs you confidently proceed, comfortable in trusting the arrows to tell you where you need to go.
Then there's a roundabout and no sign. Do you turn left? Right? You're lost and have two choices; turn back and find an alternate road you know well or blindly drive around and hope for the best.
Websites are very similar, no matter what their ultimate goal is, your site visitors need to intuitively find their way around. Too often, general website navigation and orientation disappears or changes on internal pages.
In fact, with websites this point is even more pertinent as users can just 'evaporate' and leave your site, instead of being forced to drive around aimlessly!
To help on the navigation of your website, we do follow these guidelines:
- Page headings
Every single page on your website should have a descriptive, unique and concise main heading. Naturally, the main page heading should match the navigation item or link it corresponds to.
- Breadcrumb trail
- Primary navigation
- Explicitly highlight the selected navigation item using a different (and ideally stronger) background colour. Only changing the text colour usually isn't enough.
- Ensure that the navigation labels exactly match the destination page headings.
- Secondary navigation
- Links
- Users are more likely to click on a link if they can predict its destination so the ubiquitous naming term 'Click here' should be avoided at all costs!
- Like all good navigation labelling, link text should match the destination page heading (if relevant)
- Page structure
- Avoid cluttered page designs - Users are generally familiar with a standard three column layout (navigation to the left, main content area and right hand column) so they'll try to anticipate where items will appear on their screen as the page loads
- Maintain key items in the same location - When screen items remain consistent across pages users can learn their page location and improve task performance.
- Page title
- Is short and succinct - Less is more, so the more succinct the page title the easier it is to glance at and gain an understanding of its meaning
- Places important information first - It's often only the first few words that users pick up from the page title when scanning through it
- Makes sense out of context - Users will view the page title in the navigation history (accessed through the back and forward buttons), taskbar and favourites, so it needs to make sense without the rest of the web page visible
- Site map
- Tagline
A tagline is a description of what you do and should be placed directly below the logo. It should be:
- Explanatory and not vague
- Clear and informative (avoid marketing-speak)
- 4-8 words in length
Web users tend to spend very little time on each site, they 'flick around' until they find something interesting and relevant to them. Employing a concise tagline will help users understand your site's purpose and what to expect when browsing further into the site.
Often regarded as an 'advanced' navigation technique breadcrumbs have recently proven in usability studies that they're an accepted (and appreciated) form of navigation. Breadcrumb trails are links (usually placed directly above the main page heading) that show where users are in relationship to the homepage.
This may be obvious but it's important to re-iterate: Correct employment of primary navigation can be one of the most powerful tools to orientate users on your website. These are the golden rules for navigation
Again, this may be obvious but it's important to re-iterate: Just as primary navigation leads users to site sections, secondary navigation defines the path to specific pages. The same rules as above apply to good practice orientation, in particular the highlighting of the selected item.
Links should clearly communicate where they'll take site visitors. Link text should be descriptive so that site visitors shouldn't have to guess where the link will take them.
Important rules for presenting links include:
Again, consistency is the key to an effective page structure that will contribute to users orientating themselves in the site at all times.
When planning a page structure be sure to do the following:
The page title is the text situated in the browser title bar. When writing the page title make it consistent with the main page heading and ensure it:
Site maps are essential for sites with a lot of pages and are extremely useful for any website. By providing an overview of the site, site maps display the overall hierarchy.
Users may go to the site map as a last resort if they haven't found information from browsing or running a search. Therefore the site map must be clear, concise and genuinely reflect the site structure.
