UI UX Blog

Website Useability Checklist

Following useability checklist lists some of common useability issues found on websites. In case you are designing a new UI or you own one which is already up and running, following list would help you avoid and resolve common useability issues.
This article contains warning level numbers (1, 2, 3, 4) at the end of each bulleted point. Warning Levels have following meanings:

1 - Advised: Can afford to ignoring it under reasonable circumstances
2 - Recommended: Low useability cost
3 - Essential: High useability cost
4 - Don't even think to ignore!

Accessibility:

• Site load time is adequate: Contains less then 100KB of HTML and 300KB of externally loading content. (2)
• Page has adequate font-size: above 14px. 16px is better. (3)
• Text contrast to its background is adequate for all ages. No #FFF vs #000 neither light-gray against mid gray (3)
• Videos do not load and start-running automatically (2)
• Multiple video formats are available (HTML5) (2)
• Flash or 3rd party add-ons are used sparingly (3)
• All images contain proper ALT Tags (2)
• No iframes are used unless inevitable (3)
• All links are identifiable and non-link elements don't use their colours. (4)
• Text links contain 4 or more words (3)
• Site doesn't contain 404 (page not found) errors (4)
• Browser's "Back button" is always available (4)
• Webpage articles and pages have Date of Creation and/or last Date of Updating. (2)
• Contains familiar language and content is understandable by the people with 8 years of education. (3)

Identity:

• Company logo is prominent and sufficiently noticeable (3)
• Tagline explains what the company does (3)
• There is brief company introduction for new visitors (2)
• Homepage is distinguishable in 5 seconds (3)
• Link to Corporate information is easily assessable (2)
• Link to Contacts is easily assessable (3)
• Company is able to establish its worth (2)

Navigation:

• Main navigation is easily distinguishable (3)
• Main navigation stays consistent throughout (3)
• Navigation labels are clear and precise (3)
• Number of links in navigation are reasonable (3)
• Menus with drop-down child-menus are distinguishable (2)
• Main Navigation is independent of any 3rd party add-ons and still workable when java-scripts are disabled. (4)
• Company logo is linked to homepage (3)
• All links use similar styles (3)
• Site search is assessable from all pages (3)
• Links which open external URLs are distinguishable. (2)
• Links which open popup are distinguishable. (2)
• Navigation indicates currently active links. (3)
• User on any page is able to understand its position in hierarchy. (2)
• Hotspots do not bleed and entire hover-state is linkable. (2)

Content:

• Headings are clear and identifiable (3)
• Headings and sub-headings have reasonable size difference (2)
• Headings have different colour than content (1)
• Critical Content lies above the fold (2)
• Bold and text is sparingly used (2)
• Text is left-aligned (3)
• Text Kerning is consistent (2)
• Content is distributed in paragraph, with no more than 5 lines in each paragraph (2)
• Different sections of article/content are visibly distinguishable (3)
• Ads and popup are unobtrusive (3)
• Headings are precise and meaningful (2)
• Page Titles are self-explanatory (2)
• Site contains custom designed 404 links (3)

Performance:

• Image display size is no smaller than actual image size (2)
• whenever possible, repeat and tile backgrounds (3)
• Specify image dimensions (2)
• Use CSS Sprites (3)
• Avoid CSS Expressions (2)
• Minify CSS, HTML and JavaScript (2)
• Don't call CSS from other CSS files (2)
• Define a Charset attribute (2)
• Put styles on the top, scripts at the bottom (2)