CSU Ram's Head

Simplified Usability Checklist

Images

Images optimized, saved in correct format

  • Use Photoshop Export > Save for web to create web images
  • Images with many colors should be saved in JPG format, with appropriate quality level
  • Images with fewer than 256 colors should be saved as PNG-8
  • Images that require transparency should be saved as PNG-24
  • Images that require animation should be saved as GIF
  • Further optimize image sizes with online tools (e.g., TinyPNG, Cloudinary Image Analysis Tool)

References

webdesign.tutsplus.com/articles/image-types-and-usage-in-web-design--webdesign-1298

Images created to display size in Photoshop

  • Size images in Photoshop using Image > Image Size
  • For static layouts, create images at the exact size they will display in your page. Do not scale with HTML or CSS.
  • For responsive layouts, size images at maximum size they will ever display, and scale down from there.
  • Advanced - Serve different images based on viewport width or other criteria

Image alt text per formula on all important images

  • For photographs, alt text should be a description of the contents of the photo, in English words.
  • For images that largely reproduce text, alt text should duplicate the text
  • Use English words
  • Use sentence case
  • Images that are purely decorative should have no alt text.

Reference: www.lifewire.com/writing-great-alt-text-3466185

Examples - Good

(For photo) Halden Wofford & the Hi*Beams at Pagosa Springs 2011

(For logo) Midwinter Bluegrass Festival

Examples - Unacceptable

(For photo) guyplayingguitar

(For logo) MW logo

Typography

Use screen-optimized typefaces

  • e.g, avoid Times New Roman and other print-friendly typefaces
  • Common fonts like Arial, Helvetica, Georgia, etc., while overused, are acceptable
  • Or, use web fonts from Google Fonts, MyFonts, or other reputable sources

Specify fallback typeface(s) using font stack in your style sheet

Reference

www.lifewire.com/font-stack-definition-3467414

Example - Unacceptable

font-face: "Open Sans";

Example - Acceptable

font-face: "Open Sans", sans-serif;

Example - Good

font-face: "Open Sans", Arial, Helvetica, sans-serif;

Body Text minimum 1em (16px)

Reference: www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/

Text has good contrast with background

Tool: webaim.org/resources/contrastchecker/

Line spacing adjustment for body text if necessary for readability

Reference: www.invisionapp.com/blog/line-spacing/

Judicious use of emphasis (bold, italic, etc.)

Reference: www.uua.org/communications/websites/usability/bold

Left-aligned body text

Reference: uxmovement.com/content/why-you-should-never-center-align-paragraph-text/

No whole sentences in uppercase

Reference: practicaltypography.com/all-caps.html

Body text ideally 50-100 characters, including spaces, per line

Reference: webstandards.hhs.gov/guidelines/65

HTML text instead of images wherever possible

Navigation/Links

Logo links to home page on every page

Reference: www.nngroup.com/articles/homepage-links

Links all work

Tool: W3C Link Checker

Navigation present on all pages

Reference: webstandards.hhs.gov/guidelines/67

Layout/Design

Logo consistently placed on every page

Reference: webstandards.hhs.gov/guidelines/154

Consistent styling of like items in page and across site

Reference: uxdesign.cc/design-principle-consistency-6b0cf7e7339f

Site looks good in multiple browsers (e.g., Firefox, Chrome, Edge, Safari + mobile)

References

Appropriate use of white space

Appropriate (valid) use of CSS/HTML

Tools: W3C HTML Validator, W3C CSS Validator

Design should have strong alignment

Use responsive layout techniques

Reference: www.usability.gov/get-involved/blog/2013/08/responsive-design-one-site-fits-all.html

Avoid horizontal scrolling

Reference: webstandards.hhs.gov/guidelines/79

File Management/Site Organization

Conforming file and directory names

  • When naming files and directories (folders), use only alphanumeric characters (letters/numbers), dashes (-) and underscores (_). Do not use special characters.
  • Consider avoiding capital letters in file/directory names
  • Many organizations have elaborate naming conventions that you will be required to comply with
  • For optimum search engine optimization, use keywords separated by dashes for your file name

Reference

thenewcode.com/30/HTML-naming-conventions-and-file-management

Example - Unacceptable

Contact Us.html

Example - Acceptable

contactus.html

Example - Best

contact-us.html

Home page filename is index.html or equivalent

Reference: www.lifewire.com/index-html-page-3466505

Styles contained in a separate, linked style sheet

  • All pages should link to the same single master site style sheet
  • Pages should not have their own individual style sheet
  • Exception - Some responsive design techniques may use multiple style sheets that are loaded by media queries

Reference: www.lifewire.com/benefits-of-css-3466952

Clear structure of content in appropriate subdirectories

  • Group like content in a subdirectory
  • e.g., images in a /images folder
  • Root folder should contain home page

Document (Page) Titles

Page titles per formula

  • Each page should have a unique document title
  • Document titles should contain site name, a separator, and a description of page contents
  • Use English Words
  • Avoid articles and words with lesser meaning
  • Many home page document titles contain site name and a keyword-friendly blurb

Example - Unacceptable

MidwinterBluegrass ContactUs

Example - Best

Midwinter Bluegrass Festival | Contact Us

Example - Home page

Midwinter Bluegrass Festival | Denver, Colorado

Multimedia

Autoplay turned off on multimedia

Reference: www.punkchip.com/autoplay-is-still-bad-for-all-users/

Load Time

Reasonable Load Times

  • Class standard is 3 second load time (DSL Simulation) or <500k total page weight
  • Measure with WebPageTest

Reference: www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks