Web Testing Checklist Part 3

General

• Pages fit within the resolution(800x600)
• Design works with liquid tables to fill the user's window size.
• Separate print versions provided for long documents (liquid tables may negate this necessity). Accommodates A4 size paper.
• Site doesn't use frames.
• Complex tables are minimized.
• Newer technologies are generally avoided for 1-2 years from release, or if used alternative traditional forms of content are easily available.

Home vs. Subsequent Pages & Sections

• Home page logo is larger and more centrally placed than on other pages.
• Home page includes navigation, summary of news/promotions, and a search feature.
• Home page answers: Where am I; What does this site do; How do I find what I want?
• Larger navigation space on home page, smaller on subsequent pages.
• Logo is present and consistently placed on all subsequent pages (towards upper left hand corner).
• "Home" link is present on all subsequent pages (but not home page).
• If subsites are present, each has a home page, and includes a link back to the global home page.

Navigation

• Navigation supports user scenarios gathered in the User Task Assessment phase (prior to design).
• Users can see all levels of navigation leading to any page.
• Breadcrumb navigation is present (for larger and some smaller sites).
• Site uses DHTML pop-up to show alternative destinations for that navigation level.
• Navigation can be easily learned.
• Navigation is consistently placed and changes in response to rollover or selection.
• Navigation is available when needed (especially when the user is finished doing something).
• Supplimental navigation is offered appropriately (links on each page, a site map/index, a search engine).
• Navigation uses visual hierarchies like movement, color, position, size, etc., to differentiate it from other page elements.
• Navigation uses precise, descriptive labels in the user's language. Icon navigation is accompanied by text descriptors.
• Navigation answers: Where am I (relative to site structure); Where have I been (obvious visited links); Where can I go (embedded, structural, and associative links)?
• Redundant navigation is avoided.
• Functional Items
• Terms like "previous/back" and "next" are replaced by more descriptive labels indicating the information to be found.
• Pull-down menus include a go button.
• Logins are brief.
• Forms are short and on one page (or demonstrate step X of Y, and why collecting a larger amount of data is important and how the user will benefit).
• Documentation pages are searchable and have an abundance of examples. Instructions are task-oriented and step-by-step. A short conceptual model of the system is available, including a diagram that explains how the different parts work together. Terms or difficult concepts are linked to a glossary.

Linking

• Links are underlined.
• Size of large pages and multi-media files is indicated next to the link, with estimated dowload times.
• Important links are above the fold.
• Links to releated information appear at bottom of content or above/near the top.
• Linked titles make sense out of context.
• If site requires registration or subscription, provides special URLs for free linking. Indicates the pages are freely linkable, and includes and easy method to discover the URL.
• If site is running an ad, it links to a page with the relevant content, not the corporate home page.
• Keeps linked phrases short to aid scanning (2-4 words).
• Links on meaningful words and phrases. Avoids phrases like, "click here."
• Includs a brief description of what the user should expect on the linked page. In code:
• Uses relative links when linking between pages in a site. Uses absolute links to pages on unrelated sites.
• Uses link titles in the code for IE users (preferably less than 60 characters, no more than 80).

Search Capabilities

• A search feature appears on every page (exceptions include pop-up forms and the like).
• Search box is wide to allow for visible search parameters.
• Advanced Search, if included, is named just that (to scare off novices).
• Search system performs a spelling check and offers synonym expansion.
• Site avoids scoped searching. If included it indicates scope at top of both query and results pages, and additionally offers an automatic extended site search immediately with the same parameters.
• Results do not include a visible scoring system.
• Eliminates duplicate occurances of the same results (e.g., foo.com/bar vs. foo.com/bar/ vs. foo.com/bar/index.html). Page Design
• Content accounts for 50% to 80% of a page's design (what's left over after logos, navigation, non-content imagery, ads, white space, footers, etc.).
• Page elements are consistent, and important information is above the fold.
• Pages load in 10 seconds or less on users bandwidth.
• Pages degrade adequately on older browsers.
• Text is over plain background, and there is high contrast between the two.
• Link styles are minimal (generally one each of link, visited, hover, and active states). Additional link styles are used only if necessary.
• Specified the layout of any liquid areas (usually content) in terms of percentages.

Fonts and Graphics

• Graphics are properly optimized.
• Text in graphics is generally avoided.
• Preferred fonts are used: Verdana, Arial, Geneva, sans-serif.
• Fonts, when enlarged, don't destroy layout.
• Images are reused rather than rotated.
• Page still works with graphics turned off.
• Graphics included are necessary to support the message.
• Fonts are large enough and scalable.
• Browser chrome is removed from screen shots.
• Animation and 3D graphics are generally avoided.

Content Design

• Uses bullets, lists, very short paragraphs, etc. to make content scannable.
• Articles are structured with scannable nested headings.
• Content is formatted in chunks targeted to user interest, not just broken into multiple pages.
• No moving text; most is left-justified; sans-serif for small text; no upper-case sentences/paragraphs; italics and bold are used sparingly.
• Dates follow the international format (year-month-day) or are written out (August 30, 2001).

Writing

• Writing is brief, concise, and well edited.
• Information has persistent value.
• Avoids vanity pages.
• Starts each page with the conclusion, and only gradually added the detail supporting that conclusion.
• One idea per paragraph.
• Uses simple sentence structures and words.
• Gives users just the facts. Uses humor with caution.
• Uses objective language. Folder Structure
• Folder names are all lower-case and follow the alpha-numeric rules found under "Naming Conventions" below.
• Segmented the site sections according to:
  Root directory (the "images" folder usually goes at the top level within the root folder)
  Sub-directories (usually one for each area of the site, plus an images folder at the top level within the root directory)
  Images are restricted to one folder ("images") at the top level within the root directory (for global images) and then if a great number of images are going to be used only section-specifically, those are stored in local "images" folders

Naming Conventions

• Uses clients preferred naming method. If possible, uses longer descriptive names (like "content_design.htm" vs. "contdesi.htm").
• Uses alphanumeric characters (a-z, 0-9) and - (dash) or _ (underscore)
• Doesn't use spaces in file names.
• Avoids characters which require a shift key to create, or any punctuation other than a period.
• Uses only lower-case letters.
• Ends filenames in .htm (not .html).

Multimedia

• Any files taking longer than 10 seconds to download include a size warning (> 50kb on a 56kbps modem, > 200kb on fast connections). Also includes the running time of video clips or animations, and indicate any non-standard formats.
• Includes a short summary (and a still clip) of the linked object.
• If appropriate to the content, includes links to helper applications, like Adobe Acrobat Reader if the file is a .pdf.

Page Titles

• Follows title strategy ... Page Content Descriptor : Site Name, Site section (E.g.: Content Implementation Guidelines : CDG Solutions, Usability Process )
• Tries to use only two to six words, and makes their meaning clear when taken out of context.
• The first word(s) are important information-carrying one(s).
• Avoids making several page titles start with the same word. Headlines
• Describes the article in terms that relate to the user.
• Uses plain language.
• Avoids enticing teasers that don't describe.

CSS

• Uses CSS to format content appearance (as supported by browsers), rather than older HTML methods.
• Uses a browser detect and serve the visitor a CSS file that is appropriate for their browser/platform combination.
• Uses linked style sheets.

Documentation and Help Pages

• When using screen shots, browser chrome was cropped out.
• Hired a professional to write help sections (a technical writer).
• Documentation pages are searchable.
• Documentation section has an abundance of examples.
• Instructions are task-oriented and step-by-step.
• A short conceptual model of the system is provided, including a diagram that explains how the different parts work together.
• Terms or difficult concepts are linked to a glossary.

Content Management
Site has procedures in place to remove outdated information immediately (such as calendar events which have passed).