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
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