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!
1. 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.
Headings provide a cue to orient users and inform them about what they can expect to find on the page. Guidelines for effective headings include:
- Make sure they’re at least two point sizes larger than regular text
- Use a different colour to make them stand out further (background or text colour)
- Ensure there’s plenty of white space both above and below the heading
2. Breadcrumb trail
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. For example:
Home > Subject > Category > This Page
The benefits of using breadcrumb trails are that they:
- Show users where they are in the great scheme of things (particularly important if site visitors enter the site on a page other than the homepage)
- Help users learn the structure and hierarchy of the website
- Show users how they arrived at their current location
- Allow users to jump several steps at once
A breadcrumb trail should reflect the true hierarchy of the site, not the path site visitors have chosen to arrive at their destination.
3. Primary navigation
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:
- 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.
4. Secondary 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.
5. Links
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:
- 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)
6. Page structure
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:
- 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.
7. Progress bars
Progress bars show users where they are in the buying or booking process within transactional sites. The progress bar should:
- Be very easy to spot (make it large, use iconography and surround it by white space)
- Use easy-to-understand language
- Highlight users’ current location and grey out previous and next steps
- Have the appearance of a process flow (e.g. by using numbers)
8. Page title
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:
- 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
Advantages of well written page titles include:
- Users can orientate themselves as they browse the site
- Users will have a concise, meaningful label to refer back to when added to their favourites
- Search engines place more importance on the page title than anything else and a descriptive page title will usually contain your keywords
9. Site map
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.
10. 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.
Consistency
One of the most important things to remember when helping to orientate users is consistency. That is, consistency between page titles, main headings, link text, breadcrumb items, navigation labels etc. For example, the main page heading should match the name of the relevant navigation item just as the breadcrumb trail items should match the main page headings.
Consistency aids site visitors in recognising the different areas of the site. It also provides them with effective feedback that they’ve arrived in the right place. This is the key to effective site orientation.
This article was written by Jonathan Webb. He’s crazy about usability and accessibility – so crazy that he’s a usability consultant at usability and accessibility consultancy, Webcredible. He’s extremely good at all aspects of user research and can often be found carrying out card sorting sessions.