List of page layout and visual design usability guidelines
- The screen density is appropriate for the target users and their tasks.
- The layout helps focus attention on what to do next.
- On all pages, the most important information (such as frequently used topics, features and functions) is presented on the first screenful of information ("above the fold").
- The site can be used without scrolling horizontally.
- Things that are clickable (like buttons) are obviously pressable.
- Items that aren't clickable do not have characteristics that suggest that they are.
- The functionality of buttons and controls is obvious from their labels or from their design.
- Clickable images include redundant text labels (i.e. there is no 'mystery meat' navigation).
- Hypertext links are easy to identify (e.g. underlined) without needing to 'minesweep'.
- Fonts are used consistently.
- The relationship between controls and their actions is obvious.
- Icons and graphics are standard and/or intuitive (concrete and familiar).
- There is a clear visual "starting point" to every page.
- Each page on the site shares a consistent layout.
- Pages on the site are formatted for printing, or there is a printer-friendly version.
- Buttons and links show that they have been clicked.
- GUI components (like radio buttons and check boxes) are used appropriately .
- Fonts are readable.
- The site avoids italicised text and uses underlining only for hypertext links.
- There is a good balance between information density and use of white space.
- The site is pleasant to look at.
- Pages are free of "scroll stoppers" (headings or page elements that create the illusion that users have reached the top or bottom of a page when they have not).
- The site avoids extensive use of upper case text.
- The site has a consistent, clearly recognisable look and feel that will engage users.
- Saturated blue is avoided for fine detail (e.g. text, thin lines and symbols).
- Colour is used to structure and group items on the page.
- Graphics will not be confused with banner ads.
- Emboldening is used to emphasise important topic categories .
- On content pages, line lengths are neither too short (<50 characters per line) nor too long (>100 characters per line) when viewed in a standard browser width window.
- Pages have been designed to an underlying grid, with items and widgets aligned both horizontally and vertically.
- Meaningful labels, effective background colours and appropriate use of borders and white space help users identify a set of items as a discrete functional block.
- The colours work well together and complicated backgrounds are avoided.
- Individual pages are free of clutter and irrelevant information.
- The organisation's logo is placed in the same location on every page, and clicking the logo returns the user to the most logical page (e.g. the home page).
- Attention-attracting features (such as animation, bold colours and size differentials) are used sparingly and only where relevant.
- Icons are visually and conceptually distinct yet still harmonious (clearly part of the same family).
- Related information and functions are clustered together, and each group can be scanned in a single fixation (5-deg, about 4.4cm diameter circle on screen).
You can also download translated versions of this checklist.
How to use these guidelines
Work through each of the items in the list and mark your site as either conforming or not conforming to the guideline.
Remember that all guidelines are context specific. If you feel that a guideline does not apply to your site, it's OK to ignore it.
These guidelines are purposefully expressed as positive statements, so that when you feed the results back to the design team you can identify some strengths of the design before you launch into the problems.
About the author
Dr. David Travis (@userfocus on Twitter) holds a BSc and a PhD in Psychology and he is a Chartered Psychologist. He has worked in the fields of human factors, usability and user experience since 1989 and has published two books on usability. David helps both large firms and start ups connect with their customers and bring business ideas to market. If you like his articles, you'll love his online user experience training course.