Essential Navigation Checklists for Web Design

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 - http://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.