Redesign+Checklists

Essential Navigation Checklists for Web Design **By** [|Marta Eleniak] | May 29, 2003 |


 * 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

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. 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
 * 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)

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

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: 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
 * ‘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’

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

=The Accessibility Checklist I Vowed I’d Never Write= http://northtemple.com/1608

I have said on numerous occasions that there is no simple checklist that, when followed, will give you an accessible site without fail. There are simply too many variables. But, what do you do when you want to create accessible pages and you have dozens or even hundreds of developers who (like most of their peers) have little to no experience with accessibility? What do you do when it just simply isn’t practical to have someone review all of your pages? In short, how do you insure that a very large organization creates pages that can be accessed by the largest audience possible without drastically increasing your budget? This is one of the questions we have been (and continue to) struggle with.

I believe that in order to solve this problem, we will need to take a multi-faceted approach. However, one element which seems inevitable is training for our designers and developers. I don’t think it’s reasonable (no matter how much I would like to try) to make our devs and designers into accessibility experts, so what can we do? If we can’t yet achieve excellent accessibility, what about simply doing better than we are doing now?

When I wrote the below checklist, I attempted to answer the question, “What concise pieces of advice can I give to designers that will have the greatest impact on accessibility in the majority of cases?”

Again, this list is not the perfect solution, nor is it the only solution, but I believe it is a good first step, and it gives our developers and designers a place to start from.

It is my hope that most of the below points should be easily understood, but on our internal WIKI, we will also be providing links from most checkpoints to supporting documentation that gives more details. For everyone else, I recommend [|WebAIM] or failing that, [|Google]. A [|printable version is available here].

Markup

 * Separate structure from presentation and use proper markup for that structure. For example, mark up lists as lists (, , ) rather than text with a tag after each list item.
 * HTML headings (e.g. ) are very helpful for blind users. Properly mark up the sections of a page and body copy with HTML headings rather than something such as a tag with CSS styling that makes it look like a heading.
 * Give pages meaningful and accurate titles using the tag.
 * Indicate the primary human language of the document using the lang attribute in the tag, and indicate any passages in a secondary language using the lang attribute on other tags wrapping the relevant text (e.g. "Hola means Hello”).
 * Provide “Skip to content” links at the top of the markup order in pages with large numbers of navigational links before the main content.
 * Always indicate headers in data tables using tags, and associate all data cells with their header.
 * Be sure tab order is logical using tabindex, if necessary. (If your HTML is in the proper order, then using tabindex isn’t necessary.)

Visual Appearance and Content

 * Be sure your page is still usable when images are turned off. (This may include making sure that contrast is still sufficient if you happen to be using a background image and that image is removed.)
 * Be sure pages remain usable when users enlarge text up to twice its original size.
 * Be sure each element on a page is reachable and can be manipulated via the keyboard.
 * Whenever possible, write descriptive headings and link texts which can be understood when read out of context (e.g. no “click here” links).
 * For color-blind and low-vision users, be sure your content and background have sufficient contrast.
 * Do not use content that flashes or blinks more than three times a second.
 * Do not hide the focus indicator. When a user uses the keyboard to tab from element to element, it should always be apparent where they are.
 * Do not require users to perceive font, color, or other styling changes in order to understand meaning. For instance, don’t say, “The highlighted word in the previous paragraph is the most important,” or “Items marked in red are errors and need to be corrected,” unless the word or items are indicated in some other way.

Dynamic Content

 * Do not use JavaScript events that radically alter the page or load a new page when fired.

Images and Multimedia

 * Be sure all images have an alt attribute, leaving the text for decorational images blank (e.g. alt="").
 * Always add alt text when images are also links.
 * In general, be brief with alt text (e.g. “the Christus statue”), but provide detail when it conveys meaning (e.g. “President Hinckley’s son standing at his graveside with family in arms”).
 * Provide a transcript, captions, and/or sign language translation for all audio and video with speech.
 * Provide a “described” version of a video when description is necessary for unsighted users to understand content. (The described audio track can either be distributed with the video content, or as an audio only file.)
 * Be sure that all videos, if they don’t autoplay, have, at the very least, an accessible Play control.
 * When text can be rendered just as well by the browser as it can in an image, avoid using images for text. (Image replacement techniques are often an acceptable alternate, but also consider translation requirements when using text in or as images.)
 * Avoid CAPTCHAs unless you have no other choice, and even then they should be avoided. However, if you must use them, provide an audio CAPTCHA alternative.

Forms

 * Always label all form fields with the tag. If a form field has no specific text label on the page, add one, and hide it with CSS or use the title attribute.
 * Use fieldsets with legends  to associate prompts with radio buttons and check boxes. For instance, a form asks “Gender:” and offers radio buttons that say “Male” or “Female”. Then “Gender:” should be enclosed in a tag, and all three elements ( and the two radio buttons with their labels) should be enclosed in a tag.
 * Identify all input errors in text (in addition to any images or icons), and place the error notification either next to the affected field or in a prominent location such as the top of the page with an anchor link to the affected field.
 * Provide help links or inline instructions for completing fields when necessary.
 * Do not permit users to complete important actions without a confirmation or a way to undo.
 * Avoid using HTML elements in nonstandard ways (e.g. form elements for navigation, links for form submission, etc.).

Testing

 * Test all pages for markup validation ([|http://validator.w3.org]). If your page does not pass validation, there should be a good reason for it.
 * Test all pages for color blindness using simulators or browser plug-ins. (Recommended: [|http://colororacle.cartography.ch] or [|http://www.vischeck.com])
 * Test all pages for accessibility ([|http://wave.webaim.org]), but only after you have done all you can to make sure it is accessible using the recommendations in this document.
 * Have your pages reviewed by an accessibility expert.

--

Web Design Best Practices Checklist
http://terrymorris.net/bestpractices/

Background Information

 * URL:
 * Audience:
 * Subject:
 * Developer:

Page Layout

 * 1) Appealing to target audience
 * 2) Consistent site header/logo
 * 3) Consistent navigation area
 * 4) Informative page title that includes the company/organization/site name
 * 5) Page footer area — copyright, last update, contact e-mail address
 * 6) Good use of basic design principles: repetition, contrast, proximity, and alignment
 * 7) Displays without horizontal scrolling at 1024x768 and higher resolutions
 * 8) Balance of text/graphics/white space on page
 * 9) Good contrast between text and background
 * 10) Repetitive information (header/logo and navigation) takes up no more than one-quarter to one-third of the top portion of the browser window at 1024x768 resolution
 * 11) Home page has compelling, interesting information above the fold (before scrolling down) at 1024x768
 * 12) Home page downloads within 10 seconds on dial-up connection

Browser Compatibility

 * 1) Displays on popular versions of Internet Explorer (8+)
 * 2) Displays on popular versions of Firefox (5+)
 * 3) Displays on popular versions of Opera (10+)
 * 4) Display on popular versions of Safari (both Mac and Windows)

Navigation

 * 1) Main navigation links are clearly and consistently labeled
 * 2) Navigation is easy to use for target audience
 * 3) If images or Flash is the main navigation, clear text links are in the footer section of the page (accessibility)
 * 4) Navigation is structured in an unordered list (accessibility)
 * 5) Navigation aids, such as site map, skip navigation link, or breadcrumbs are used (accessibility)
 * 6) All navigation hyperlinks "work" — are not broken

Color and Graphics

 * 1) Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals
 * 2) Color is used consistently
 * 3) Color has good contrast with associated text
 * 4) Color is not used alone to convey meaning (accessibility)
 * 5) Use of color and graphics enhances rather than distracts from the site
 * 6) Graphics are optimized and do not significantly slow download
 * 7) Each graphic used serves a clear purpose
 * 8) Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility)
 * 9) Animated images do not distract from the site and either do not repeat or only repeat a few times

Multimedia

 * 1) Each audio/video/Flash file used serves a clear purpose
 * 2) The audio/video/Flash files used enhance rather than distract from the site
 * 3) Captions are provided for each audio or video file used (accessibility)
 * 4) Download times for audio or video files are indicated
 * 5) Links to downloads for media plug-ins are provided

Content Presentation

 * 1) Common fonts such as Arial or Times New Roman are used OR no more than one web font used
 * 2) Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
 * 3) Fonts, font sizes, and font colors are consistently used
 * 4) Content provides meaningful, useful information
 * 5) Content is organized in a consistent manner
 * 6) Information is easy to find (minimal clicks)
 * 7) Timeliness: The date of the last revision and/or copyright date is accurate
 * 8) Content does not include outdated material
 * 9) Content is free of typographical and grammatical errors
 * 10) Content provides links to other useful sites
 * 11) Avoids the use of "Click here" when writing text for hyperlinks
 * 12) If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/nonvisited status
 * 13) If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility)

Functionality

 * 1) All internal hyperlinks work
 * 2) All external hyperlinks work
 * 3) All forms function as expected
 * 4) No JavaScript errors are generated

Accessibility

 * 1) If images or Flash is the main navigation, clear text links are in the footer section of the page
 * 2) Navigation is structured in an unordered list
 * 3) Navigation aids, such as site map, skip navigation link, or breadcrumbs are used
 * 4) Color is not used alone to convey meaning
 * 5) Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images
 * 6) If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided
 * 7) Captions are provided for each audio or video file used
 * 8) Use attributes designed to improve accessibility such as title and summary when appropriate
 * 9) Use the id and headers attributes to improve the accessibility of table data
 * 10) If the site uses frames, use frame titles and place meaningful content in the noframes area
 * 11) To assist screen readers configure the html element's lang and xml:lang attribute to indicate the spoken language of the page.