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
- Catalogue
- 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
What are the key elements to consider in a web design checklist?
A comprehensive web design checklist should include elements such as usability, functionality, aesthetics, and content. Usability refers to how user-friendly your website is, including aspects like navigation and load speed. Functionality involves ensuring all links, forms, and scripts work correctly. Aesthetics cover the visual appeal of your website, including layout, color scheme, and typography. Lastly, content should be relevant, engaging, and optimized for search engines.
How important is mobile responsiveness in web design?
Mobile responsiveness is crucial in today’s digital age. With the majority of users accessing websites via mobile devices, it’s essential to ensure your website is mobile-friendly. This means your website should automatically adjust to fit the screen size of the device it’s being viewed on, ensuring a seamless user experience.
How can I ensure my website is user-friendly?
To ensure your website is user-friendly, focus on aspects like easy navigation, fast load times, and clear, concise content. Your website should be intuitive, meaning users can easily find what they’re looking for. Additionally, ensure your website is accessible to all users, including those with disabilities.
What role does SEO play in web design?
SEO plays a significant role in web design. It involves optimizing your website to rank higher in search engine results, thereby increasing visibility and traffic. This includes using relevant keywords, optimizing images, and ensuring your website is mobile-friendly.
How often should I update my website?
Regular updates are crucial to keep your website relevant and engaging. This could involve updating content, refreshing the design, or adding new features. However, the frequency of updates will depend on your specific needs and resources.
What is the importance of a call-to-action in web design?
A call-to-action (CTA) is a prompt that encourages users to take a specific action, such as signing up for a newsletter or making a purchase. A well-placed and compelling CTA can significantly increase conversions and engagement on your website.
How can I improve the load speed of my website?
Improving load speed can involve optimizing images, minimizing HTTP requests, and using a content delivery network (CDN). Additionally, consider using a website caching solution to store a version of your website on the user’s device, reducing load times on subsequent visits.
How can I make my website more visually appealing?
To make your website more visually appealing, consider aspects like color scheme, typography, and layout. Use colors that align with your brand and are pleasing to the eye. Choose fonts that are easy to read and complement your design. Lastly, ensure your layout is clean and uncluttered, making it easy for users to navigate.
What is the role of content in web design?
Content plays a crucial role in web design. It’s what informs, engages, and converts your visitors. Ensure your content is relevant, engaging, and optimized for search engines. Use headings and subheadings to make your content easy to scan, and include visuals to break up text and enhance understanding.
How can I ensure my website is accessible to all users?
To ensure your website is accessible, consider aspects like color contrast, font size, and keyboard navigation. Use alt text for images and transcripts for videos to cater to visually impaired users. Additionally, ensure your website is compatible with assistive technologies like screen readers.
Marta has played the User Experience Architect role on Internet and intranet sites for over seven years. She is the Information Scientist for a multi-national and also consults. Visit www.meleniak.com for more info.