Skip to content

Instantly share code, notes, and snippets.

@joshsmith
Forked from vegasje/usability.md
Created April 25, 2013 03:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshsmith/5457241 to your computer and use it in GitHub Desktop.
Save joshsmith/5457241 to your computer and use it in GitHub Desktop.

Usability Checklist

User Experience

  • Personalized features. Currency, language, country specific deals, taxes, or delivery options are changed based on user's location.
  • Registering provides value to users. For example a "Free Trial" button communicates a clear benefit, but a "Register" button doesn't. Unnecessary registration is avoided.
  • Transparent pricing. Prices are clearly displayed. There are no hidden costs or surprises in the terms.
  • Pages don't refresh automatically. Users can get confused if new content is uploaded suddenly, for example on news websites.
  • Sample content. For example there is a sample newsletter next to a newsletter sign up form.
  • 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.
  • Uncluttered product and service information. Information is scannable and images can be enlarged or zoomed in on for more detailed viewing.

Homepage

  • 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.
  • First impression. The homepage creates a positive first impression and supports conversion.
  • Logged in user's name is displayed on the site. e.g. "Hello, Charles", not "Hello, Sir".
  • Major changes to the site are announced on the homepage. For example changes in delivery policy or website downtimes.
  • Company location and contact information is easily accessible from the homepage.
  • There is a privacy policy, in case the site gathers information about users.
  • Images are relevant and meaningful. No unrelated stock photos of models. There are high-quality screenshots or photos of the products and services.
  • Site URL works with or without www. For example "www.userium.com" and "userium.com".

Accessibility

  • Alt tags are provided for non-text elements, such as images, maps, sounds and video.
  • Color alone is not used to convey information.
  • Content is readable without a style sheet. Check e.g: http://achecker.ca/checker/index.php
  • Flash is avoided. There is an alternative for flash content.
  • Links, buttons and checkboxes are easily clickable, for example a user can select a checkbox by clicking the text, not just the checkbox.
  • There is a site description in the window title, which is easily understandable as a bookmark.

Navigation

  • Important links aren't placed in moving features, for example auto-rotating carousels and accordions.
  • Alphabetical A-Z sorting is avoided. It is used only when there are no better alternatives, such as grouping items into descriptive, related groups.
  • Users know where they are on the site. For example with the use of breadcrumbs. Also, there is a site map on large sites.
  • Navigation is consistent on every page.
  • Browser's 'back' button is not disabled.
  • Links are descriptive. Mouse hover 'glosses' are used on navigation links, by using the title attribute. There are no "click here" links.
  • Site's URL is memorable.

Search

  • There is a search bar, in case of a large website.
  • Search is available on every page, not just the homepage.
  • Search box is wide enough, so that users can see what they've typed.
  • Search is a form where users can type search words immediately, not a link.

Links

  • Important commands are displayed as buttons, not links. For example "buy" or "pay" is be a button, not a link.
  • Links don't open a new browser tab or window, unless it is e.g. a .pdf file.
  • Links are easily recognizable. They look clickable. Items that aren't links don't look clickable, for example underlining text is avoided.
  • Color. Visited links color is different than unvisited.
  • There are no broken links. Check with e.g. W3 Link Checker.

Layout

  • Important content is displayed first.
  • Site is responsive. Works with different screen sizes. There is no horizontal scrolling.
  • Related information is grouped together clearly.
  • There are a minimum amount of pop-up windows.
  • Consistency. Page layouts are consistent across the whole website.
  • Pages aren't cluttered. There is enough white space to support scanning.

Process

  • Issue tracking. Usability and user experience issues are tracked in an issue tracker.
  • 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.
  • Prioritizing. Changes are prioritized based on their importance. Goals, timetable, budget and other limitations of the project are also taken into consideration. Check e.g. Maya's usability guidelines
  • Impact analysis of changes. Changes might become expensive and time consuming if they propagate to impact other parts of the product, people or process. Therefore it is important to analyze the impact of changes before doing anything.
  • ROI of changes. Website is evaluated before and after making changes.

Forms

  • Simplicity. Only absolutely necessary questions are asked in forms.
  • 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.
  • Inputting data is flexible, e.g. with phone numbers and credit card numbers.
  • Fields are labeled with common terms, e.g. Name, Address (supports autofill).
  • Fields contain sample answers, which help users to input information.
  • Form submission is confirmed on a confirmation page.
  • Error messages are shown next to the input field, not just on top of the page.

Content

  • Contrast. There is adequate contrast between the text and background. Check with e.g. www.checkmycolours.com
  • Content is scannable. There are short paragraphs, descriptive headings, lists and images. Visual content is used when appropriate, instead of large amounts of text.
  • Content is written with common language that users easily understand. Check with e.g.: www.read-able.com/
  • Contact and company information is clearly displayed. Clicking the email address doesn't automatically open a mail application.
  • 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.
  • Use of uppercase letters in prose text is avoided. Uppercase is used only for formatting.

Sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment