GarrettW.wiki

My personal knowledge base

User Tools

Site Tools


web_usability_checklist

Also see another 247 points on a different set of lists.

This is more about design, but still related to usability.

Accessibility

  1. There is adequate contrast between the text and background. Check with e.g. Check My Colours
  2. Don't prevent font resizing
  3. Flash/add-ons are used sparingly
  4. Alt attributes are provided for non-text elements, such as images and maps. Captions and transcriptions are used for audio and video.
  5. Color alone is not used to convey information.
  6. Content is readable without a style sheet. Check e.g: Web Accessibility Checker.
  7. Site can be navigated with a keyboard, without using a mouse. Browser's keyboard shortcuts aren't overridden.
  8. Links, buttons and checkboxes are easily clickable, for example a user can select a checkbox by clicking the text, not just the checkbox.
  9. Use progressive enhancement (and not graceful degradation).
  10. Data formats follow appropriate cultural conventions (e.g. miles for UK)

Content

  1. Important content is displayed first.
  2. Major headings are clear and descriptive
  3. Critical content is “above the fold”
  4. Main copy is concise and explanatory. Users can only retain about 5-9 things at a time.
  5. Images and videos are relevant and meaningful. No unrelated stock photos of models. There are high-quality screenshots, videos or photos of the products and services.
  6. Content is scannable and not cluttered. There are short paragraphs, descriptive headings, lists and images. Visual content is used when appropriate, instead of large amounts of text.
  7. Content is written with common language that users easily understand. Check with e.g.: The Readability Test Tool.
  8. Content is useful and up-to-date, providing answers to the most common questions asked by users. There are no long instructions or “welcome to our website” text.
  9. Use of uppercase letters in prose text is avoided. Uppercase is used only for formatting.
  10. Writing should look like an inverted pyramid. Offer the most important information early on.
  11. Content shouldn't look like an ad. Avoid large red text and such ad design elements.
  12. Supply datestamps with your content that may be time-sensitive or become outdated.
  13. Page title should be descriptive of the content offered
  14. No spelling/grammar errors!
  15. META tags (as well as TITLE) should be filled out
  16. Only one word or term is used to describe any item
  17. The most important and frequently used topics, features and functions are close to the centre of the page, not in the far left or right margins
  18. When a page presents a lot of information, the user can sort and filter the information

Errors

  1. User testing. Testing with target users is done at different stages of the project. People who weren't involved in developing the site conduct testing. Use e.g. the free Peek tool to get started with user testing.
  2. Site has custom, useful 404/410/500 pages
  3. Errors do not occur unnecessarily
  4. Error messages are in plain language
  5. Error messages describe what action is necessary
  6. Error messages provide a clear exit point
  7. Error messages provide contact details for assistance
  8. Common user errors have been considered and prevented where possible.
  9. Users are able to easily recover from errors.

Forms

  1. Only absolutely necessary questions are asked in forms. Give justification for the information asked for.
  2. Required vs optional form fields are clearly indicated using standard notation.
  3. Allow for some flexibility with user inputs.
  4. Long dropdown menus are avoided. Instead users can input text, which is validated on the backend. Also, long dropdown menus are error-prone to users scrolling with the mouse.
  5. Fields are labeled with common terms, e.g. Name, Address (supports autofill).
  6. Form submission is confirmed on e.g. a confirmation page.
  7. Error messages are shown next to the input field, not just on top of the page.
  8. Complex forms and processes are broken up into readily-understood steps and sections. Show a progress indicator with clear numbers or named stages if appropriate.
  9. Appropriate input field types are used (date picker, etc.) and required formats are indicated
  10. Help and instructions are provided where necessary, written in concise, understandable language
  11. Accessing help does not impede users (they can easily resume where they left off)

Home Page

Jakob Nielsen on home page usability - 113 points

  1. The purpose of the site and critical actions are clear/digestible within 5 seconds
  2. Clear call for action. Users know what to do next and why it benefits them. They understand the value proposition and purpose of the site.
  3. First impression. The homepage creates a positive first impression and supports conversion.
  4. Logged in user's name is displayed on the site. e.g. “Hello, Charles”, not “Hello, Sir”.
  5. Major changes to the site are announced on the homepage. For example website downtimes or recent content, with a link to archives.
  6. Company location and contact information is easily accessible from the homepage and grouped in one area
  7. There is a site description in the window title, which is easily understandable as a bookmark. Also provides good visibility in search engines.
  8. All major parts of the site are accessible from the home page
  9. Home page is effective in orienting and directing users to their desired info/tasks (avoid featuritis)
  10. Home page contains a search box
  11. Product categories are provided here and clearly visible
  12. Useful content is here or within one click away
  13. Home page shows good examples of deeper site content
  14. Links on home page begin with most important keyword (“Sun holidays” as opposed to “holidays in the sun”)
  15. Navigation areas are not over-formatted so as to be mistaken for ads
  16. Value proposition is clearly stated with a tagline or welcome blurb, and understandable by users
  17. Graphics are meaningful, not clip art or pics of models
  18. Navigation choices are ordered in the most logical or task-oriented manner (with the less-important corporate info at the bottom)
  19. Design encourages exploration of the site
  20. Look and feel is not easily confused with other pages on the site

Identity

  1. Tagline makes company's (and website's) purpose clear

Layout

  1. Site is responsive. Works with different screen sizes. There is no horizontal scrolling.
  2. Page layouts are consistent across the whole website.
  3. Pages aren't cluttered. There is enough white space to support scanning.
  4. Layout should guide the eye through a specific desired flow.
  5. Layout should be flexible to accommodate font resizing by the user without breaking
  6. Layout should be fluid to accommodate large and small browsers as well as printing.
  7. Use tabs responsibly to change views while still in the same context, and make them incredibly readable and logically broken up.
  8. Site structure is clear, easily understood, and addresses common user goals.

Links

  1. Important commands are displayed as buttons, not links. For example “Buy” or “Pay” is a button, not a link.
  2. Links are easily recognizable. They look clickable. Items that aren't links don't look clickable, for example underlining text is avoided.
  3. Links are descriptive. There are no “click here” links, and link names start with important keywords.
  4. There are no broken links. Check with e.g. W3 Link Checker.
  5. Link text matches titles of the pages they refer to
  6. Standard colors are used for links and visited links
  7. Command and action items are presented as buttons (not, for example, as hypertext links)
  8. If there is an image on a button or icon, it is relevant to the task

Navigation

  1. Main nav is easily identifiable
  2. Clear path to home page
  3. Nav labels are clear and concise
  4. Site structure is simple, with no unnecessary levels
  5. Number of buttons/links is reasonable
  6. Links are consistent and easy to identify
  7. Important links aren't placed in moving features, for example auto-rotating carousels and accordions.
  8. Alphabetical A-Z sorting is avoided. It is used only when there are no better alternatives, such as grouping items into descriptive, related groups.
  9. Users know where they are on the site. For example with the use of breadcrumbs. Also, there is a site map on large sites.
  10. Navigation is consistent on every page.
  11. Site's URL is memorable.
  12. URLs are meaningful and user-friendly
  13. HTML page titles are explanatory
  14. Clear path to company/contact information
  15. Contact and company information is clearly displayed. Clicking the contact link doesn't automatically open a mail application. (Or at least it should be obvious when it will.)
  16. Avoid linking to another place on the same page, as it can confuse visitors and undermine their understanding of the browser.
  17. Nav is flexible enough that users can navigate by their desired means (search, browse by category/by name/most recent/etc)
  18. Browser buttons like back/forward are not broken
  19. On the basket page, there is a highly visible ‘Proceed to checkout’ button at the top and bottom of the page
  20. Important calls to action, like ‘Add to basket’, are highly visible
  21. Action buttons (such as “Submit”) are always invoked by the user, not automatically invoked by the system when the last field is completed

Search

  1. There is a search bar, in case of a large website.
  2. Site search is easy to access
  3. Search is available on every page, not just the homepage.
  4. Search box is wide enough for users to see what they've typed.
  5. Search is a form where users can type search words immediately, not a link.
  6. The search interface is appropriate to meet user goals (multi-param, prioritized results, filtering, etc.)
  7. Deals well with common searches (i.e. most popular results), misspellings, and abbreviations
  8. Search results are relevant, comprehensive, precise, and well-displayed

Task orientation

  1. Emphasize high-priority actions you'd like visitors to take
  2. The site supports the user's workflow
  3. The site meets common user goals and objectives
  4. Frequently-used tasks are readily available (accessible from the home page) and well-supported
  5. The number of screens required per task has been minimized
  6. The path for any given task is a reasonable length (2-5 clicks)
  7. When they return to the site, users will remember how to carry out the key tasks because things are kept in predictable places with predictable names (so get it right the first time!)

Trust/credibility

  1. Website is credible. Credible references, credentials, contact information, location, and images of real people are displayed on the website. Also, the website is professionally designed and up-to-date.
  2. Transparent pricing. Prices are clearly displayed. There are no hidden costs or surprises in the terms.
  3. There is a privacy policy, in case the site gathers information about users.
  4. Site has an SSL certificate. Check e.g. CloudFlare's free Universal SSL, or Let's Encrypt.
  5. The site is free from irrelevant, unnecessary and distracting information
  6. Excessive use of scripts, applets, movies, audio files, graphics and images has been avoided
  7. When graphs are shown, users have access to the actual data (e.g. numeric annotation on bar charts)
  8. Items can be compared easily when this is necessary for the task (e.g. product comparisons)
  9. The site makes it easy for users to explore the site and try out different options before committing themselves
  10. The use of metaphors is easily understandable by the typical user
  11. The functionality of novel device controls is obvious
  12. The site prompts the user before automatically logging off the user, and the time out is appropriate

UX

  1. Registering provides obvious value to users. For example a “Free Trial” button communicates a clear benefit, but a “Register” button doesn't. Unnecessary registration is avoided.
  2. Pages don't refresh automatically. Users can get confused if new content is uploaded suddenly, for example on news websites.
  3. Sample content. For example there is a sample newsletter next to a newsletter sign up form.
  4. Personalized features. Currency, language, country specific deals, taxes, or delivery options are changed based on user's location. IP-based geolocation is not enabled without user's permission.
  5. Uncluttered product and service information. Information is scannable and images can be enlarged or zoomed in on for more detailed viewing.
  6. Site URL works with or without www. For example “www.stayintech.com” and “stayintech.com”.
  7. Ads and pop-ups are unobtrusive
  8. There are a minimal amount of pop-up windows.
  9. No unnecessary animations to avoid overwhelming the user.
  10. Users should be able to find information quickly. They may stop using a site if they can't find it within 3 mouse clicks.
  11. All functionality is clearly labeled
  12. All necessary functionality is available without leaving the site
  13. The user can cancel/undo all operations, or at least confirm before committing to them
  14. There is a clear exit point on every page
  15. Page size is less than 50kb/page
  16. It is always clear what is happening on the site
  17. Users can receive email feedback if appropriate
  18. All feedback is prompt and appropriate (e.g. following a successful or unsuccessful action)
  19. Users are informed if a plugin or browser version is required
  20. Users can give feedback via email or a feedback form
  21. If necessary, online help is available
  22. Terminology is consistent with general web usage
  23. Users are adequately supported according to their level of expertise (shortcuts for expert users, help and instructions for novice users)
  24. CTAs are clear, well labelled and appear clickable
  25. The site requires minimal scrolling and clicking
  26. The site correctly anticipates and prompts for the user’s probable next activity
  27. Activities allocated to the user or the computer take full advantage of the strengths of each (look for actions that can be done automatically by the site, e.g. postcode lookup)
  28. The site makes the user’s work easier and quicker than without the system
  29. The user does not need to enter the same information more than once
  30. Typing (e.g. during purchase) is kept to an absolute minimum, with accelerators (“one-click”) for return users
  31. Users of the site do not need to remember information from place to place
  32. The site caters for users with little prior experience of the web
  33. Details of the software's internal workings are not exposed to the user
  34. If the user is half-way through a transaction and quits, the user can later return to the site and continue from where he left off
  35. Unwanted features (e.g. Flash animations) can be stopped or skipped
  36. The site is robust and all the key features work (i.e. there are no javascript exceptions, CGI errors or broken links)
  37. The site allows users to rename objects and actions in the interface (e.g. naming delivery addresses or accounts)
  38. The site allows the user to customise operational time parameters (e.g. time until automatic logout)
web_usability_checklist.txt · Last modified: 2016/09/17 01:24 by Garrett W.