Essential Navigation Checklists for Web Design

These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format. If you are already familiar with those topics, the checklists serve as a handy reminder that is easy to refer to and apply when planning navigation. If unfamiliar it’s also a fast-track lesson – providing you with a head-start in getting it right and enables you to make better informed choices / compromises.

You are presented with the top level practical advice you would take away from reading about each area in depth. I don’t give detailed reasoning behind all the advice because that would be five books’ worth of material in itself, and a number of excellent books already exist that do this perfectly well – see the reading list at the end of this article.

The Ultimate Test of Your Navigation Design

You will find a compilation of best practices and insights derived from research and personal experience, but as with all check points you should apply them judiciously. Good websites come from good compromises. The ultimate test of any user interface design is always the user test. This means it is okay to dismiss guidelines if the end result is proven to be a comfortable user experience where the users can carry out tasks / find information with the minimum of effort.

Steve Krug in his excellent book ‘Don’t Make Me Think’ (review) includes some very useful chapters that will inspire and empower you to do your own user testing. Testing is neither costly, nor too time consuming but essential, as you’ll discover as soon as you do some. I stress this because for navigation to work, before even considering design or technology, your users must understand the words used and have their expectations from those words met by the content they click/link to. All you need for this test is the navigational words in the order they would appear on a piece of paper, and a few people representative of the target audience. Ask what they understand by each word/phrase and what they’d expect to get if they clicked on that link.

Checklists

The guidance for navigation planning is organised as follows:

• Planning the Information Architecture
  • Content Ideas
  • Choice of Words/Phrases
  • Structure
  • Helpful Tips
• Planning the In-Page Navigation
  • Choice of Words/Phrases
  • Structure

Planning the Information Architecture

Content Ideas (beyond home, section and product pages)

As you map out the content of your site, consider the following organizational elements, which are common to many sites today.

• About us
  • Awards/Professional affiliations
  • Company information (what we do and brief history)
  • Client lists
  • Customer quotes or testimonials
  • Job postings
• Contact us
  • Contact details
  • FAQs (frequently asked questions)
  • Feedback form
  • Maps of and directions to office locations
  • Resellers / distributors
• Content
  • Advice
  • Competition
  • Events
  • News
  • Weather
• Legally required / recommended
  • Copyright statement (e.g. © RAC plc 1999 – 2003. All rights reserved.)
  • Privacy policy
  • Terms and conditions
• Member / user login
  • Personalised member area
• Press centre
  • About us (link to)
  • Contact details for PR dep’t
  • Management/Key personnel
  • Press releases
• Product
  • Catalogue
    • Description of individual product
    • Large image of each product
    • Shopping basket / online sales
    • Software downloads
    • Video of product in use
  • Customer survey
  • FAQs (frequently asked questions)
  • Sample / brochure request form
• Search
• Site map (if a large site)
• Useful links (related links to external sites)

Only include content that is likely to be sought out/attractive, valued and read by the audience. Don’t include content for the sake of having a larger site or simply because you can – you will be creating a massive maintenance overhead. Remember users are mostly time poor and have a specific goal in mind. In most cases only job applicants & the competition will pore over your site. If you are working on a company website, don’t get carried away with what you can do or what would be cool, but constantly do a cost-benefit analysis in your head and focus on delivering value to your employer

Choice of Words/Phrases

Bear in mind that titles seen as content at the top of pages should correspond to: the title meta tag of that page; the URL for the specific page to an extent; and the wording of the link (or navigational button) that was clicked. This all goes towards assuring the user they are where they wanted to be and helps them get there again

Do not simply replicate a company’s internal structure in your site map – just because it is recognised and useful internally, does not guarantee your users will know how or where to start

Do not use company jargon and be careful of product names that are vague unless they are household names thanks to a massive advertising spend. I had to talk one company out of calling their ‘Personal Vehicle Leasing’ product ‘Just Drive’. Web usability should be a key consideration during product naming

Think about what you want the target audience to be able to do or what it wants to do, and what words they would be looking for to carry out that task

Choose words that are meaningful to your audience – looking at what web users in general type into search engines is a good place to start (in the UK see http://www.uk.overture.com/d/UKm/adcenter/tools/index.jhtml). If you want your site to be found via search engines this is an essential piece of research to do

Structure

Try to make your main site navigation positioning, design and ordering consistent throughout. Your home page is often the lesson users take away with them on how your site is structured – if you change it after the home page I have observed users become blind to new or different navigation further in

Do not have a set of navigational links that is any larger than 8 items – users are put off when overwhelmed with choice. Divide your navigation into chunks – a typical way to do this is by using design to separate general utilities like contact us, site help, site map, etc. from key content areas

Group content/product pages into logical sections to avoid having a long list

Try not to place key navigation (content and utilities) that appears on all pages in different areas of the page e.g. left, top right and bottom – the more you do this the more invisible it can become to the user

Avoid placing important navigation at the top. While scanning pages, which is the way the huge majority of web users use the Internet, they blank out anything they don’t recognise, know they don’t want or that looks like advertising – which they have come to expect in the top part of the page

Place legals (copyright notice, privacy policy, terms and conditions) at the bottom of all web pages where they are typically found, but you should also draw them to users’ attention by including links within content where it is timely for them to be read

Home should be the first link. Any site/company logo and image in the top left corner should also be a link to home to follow web convention

Help users find what they want within a list of links. Items should be listed alphabetically unless there is a natural order that 90% of users would grasp with ease when looking for a specific item

If the subject matter lends itself to such manipulation, place what you want users to notice and remember for a long period at the top. Place links you want users to remember for a short time at the bottom of the navigational set and remember that unless middle items have some special significance to the user they won’t be remembered at all

Helpful Tips

Don’t make the mistake of deciding on the top level navigation before you have created a site map for the whole site

Do not focus on the number of clicks rather than usability. It is more important that users feel in control and understand what to click on, than to ensure all info is 3 clicks away. Don’t bury it too deep either but definitely don’t create a contrived unfathomable navigation to meet some dumb web rule

Treat text links repeating primary navigation at the end of each page as an optional extra. Text links to content and utilities are often found at the bottom of pages to help users navigate from the bottom of long pages. If the primary navigation device uses scripts that are incompatible with the browser or assistive technology (that disabled users may employ) there remains a way to navigate around the site, but affected users will probably give up before getting to the end of the page. Although a convention, in my user testing experience most users go back to the navigation at the top

Treat visited links as a nice feature to have for those who understand web design or are power users. I have never observed a typical user, i.e. one without web design knowledge, realise that links have changed their appearance because those pages have been visited

Include a search and site map if your site has many pages. Note that some users have learned searching gets them to the info they seek quicker than browsing and look for a search box, rather than at navigation, as soon as they come to a new website

Finally remember users must be able to navigate without using a mouse (keyboard only operation) for your site to be accessible. You should be aware you’ll need to plan for an accessible version of your site if navigation is not usable when scripts, applets, or other programmatic objects are turned off or not supported

Planning the In-Page Navigation

Choice of Words/Phrases

Do not make phrases such as ‘click here’, ‘buy now’ or ‘more info’ lone links because they are meaningless without the context. Users can not scan links visually or using screen readers when you do this. Here are examples of how you might rework things:

• ‘Click here for the latest company news’ becomes ‘Latest company news’
• ‘Buy now’ becomes ‘Buy 4 socket extension cable now’
• ‘More info’ becomes ‘More info on our product range’

All links to be worded so they are a clear indication of where they take the user, with title of link matching title of page being linked to where possible

Structure

Unless you have a very small, simple site, plan to include a ‘You are here’ navigation before the page title (i.e. show the user where they are in the site). Also show what step they’re on of how many, in stepped interactions such as making a purchase

Do not rely on rollover text to convey information

Do not rely on an image as the only way to link to something

If you have an image associated with a text link, make the image a link too – most users expect to be able to click on the image

Minimise the amount of links on the page – keep it under 20

Limit the user’s key choices of what to do next to a max of 4 options but preferably less if you can

Decide how you would like to lead users through the site and identify a key link – calls to action work well as buttons aligned to the right of the main content

When a user is engaging in a purchase or some other activity you do not want them distracted from, consider using a different main navigation bar which has less options but still allows them to get back to home

Further Reading

Accessibility

• RNIB Hints – http://www.rnib.org.uk/digital/hints.htm
• Rough Guide to Accessible Web Design – http://www.rnib.org.uk/techshare/roughguide.txt
• The W3C guidelines for accessible design, which are recognized worldwide – https://www.w3.org/TR/WCAG10/

Usability

• ‘Don’t Make Me Think’ by Steve Krug – first-rate easy-to-read usability eye-opener with guide to conducting your own user tests (if you only ever read one book about web design or usability it should be this one)
• ‘Homepage Usability’ by Jakob Nielsen and Marie Tahir – analyses good, bad and ugly of 50 website homepages and therein also navigation and web design overall
• ‘The Humane Interface’ by Jef Raskin – gives some great real world examples to help you really understand how and why humans and technology do or don’t work together
• Host of resources from Nielsen, the first self-proclaimed guru of usability – http://www.useit.com

I would also advise reading Human-Computer Interaction and Cognitive Psychology text books.

Information Architecture

• ‘Information Architecture for the World Wide Web’ by Louis Rosenfeld & Peter Morville – I confess I have not read this as on first glance I didn’t think it was anything new as it preached what I already practiced, but I am told by reliable sources it is excellent guide to what is an essential part of any navigation design work

Web Design

• ‘Son of Web Pages that Suck’ by Vincent Flanders – I see this as ‘Bill and Ted’s’ guide to what not to do in web design giving helpful light-hearted insights

With Dreamweaver and the like, even granny can be a web designer overnight. It is very easy to criticize designs and very hard to explain how to create well designed sites – especially as approval of aesthetics is so subjective. I’ll leave that to the lecturers at art school.

Frequently Asked Questions (FAQs) about Web Design Checklists