Make everything is simple as possible, but not simpler - Albert Einstein.
About Me
Writing
Information Science
Web Development
Nielsen in 20 mins.
113 Guidelines
Don't Make Me Think
20 Heuristics for Site Evaluation
Accessibility
Indonesia
Demography
20 Heuristics For Web Site Evaluation
Neil Pollock 12 May 2001
Definition: A heuristic is a rule of thumb. Heuristic evaluation is the act of estimating the usability of a web site by applying well-known rules of thumb to the site and deriving a score for the site based on how closely it fulfills the requirements of these rules.
The following list is largely based on the ideas of:
- Jakob Nielsen: http://www.useit.com/papers/heuristic/
- Mark Pearrow: Web Site Usability Handbook. Charles River Media, 2000
- Michael D. Levi and Frederick G. Conrad: http://stats.bls.gov/ore/htm_papers/st960160.htm
In addition to 16 usability heuristics sourced elsewhere, I have added four heuristics dealing with coding standards, accessibility, content relevance and searchability.
1. The Navigation is Clear
At all times you can readily determine your current position in the document structure. It is clear where you are in the hierarchy and have a good understanding of the breadth and depth of the site.
Check that:- You can understand the relationship between a subsite or subdirectory you're in and the main site or top level of the site.
- When you user enter the site far below the homepage (say from a Search Engine "deep" link) you can quickly find your bearings and understand the geography of the site.
- You can accurately assess how extensive the site is and what all the navigational options are.
- You should never have to rely on the browser's back button.
- In completing a form - it is easy to return to an initial or previous state within a form to edit information without losing the data they you have filled in.
- If the site is processing a transaction (ie you're waiting for it to process) there is feedback that the site is doing something.
2. The Site Speaks the User's Language
Words, phrases, and concepts are familiar to the user and not jargon or technical. Information is presented in a natural and logical order. Acronyms are always explained. Where technical terms are necessary a glossary is provided.
3. The User is in Control
The user knows where they are and their full range of options. They have a sense of freedom. There are clearly marked exits. The user must not be in fear of making a mistake. If there are transactions, they can undo and redo the transactions.
Situations are prevented such as when you fill out a form and then are told you made an error because you failed to fill in a field which wasn't declared to be mandatory.
4. The Design is Consistent and Uses Established Web Conventions
Similar concepts are indicated through identical terminology and graphics. Uniform conventions for layout, formatting, typefaces, labelling, etc. are adhered to. Users spend 99% of their time on other sites they'll have to have a very good reason to learn a new way of doing things on this site. They have already learnt the web conventions. The site complies with the conventions below:
- Page width. Horizontal scrolling is not required to view anty pages. Th site should use "liquid" layout so that the middle or right column has a width percentage and not a fixed pixel value. If not then the site should fit within an 800x600 pixel monitor. If you page width must be fixed then it should be no wider than 720 pixels - in order to accommodate reading without horizontal scrolling across all variations of browsers and operating systems.
- Frames. They are not used. Nielsen presents a good argument against use of frames by novices..
- Logo. It is placed in the upper left hand corner. On all but the home page the logo is mapped to link back to the home page. Logo dimensions should be between 50 and 100 pixels.
- Search. There is a search facility across the site and the input box is located in the upper right or the upper left (below any logo).
- Search Label. One of the terms "Search", "Go", "Find" or "Find It" is used.
- Search box. It is at least 110 pixels or 18 characters wide.
- Navigation. The key navigation conventions are used - either or combination of a Left-hand navigation column, and tabs or links across the top.
- Site Map. Big sites should include this online "table of contents", or a Site Index (which is akin to a back of book index).
- About Us - is used to discribe the link to information about the organisation.
- Contact Info.- is enabled by a direct and prominent contact information link from the home page.
- A Privacy Policy is in place. If you collect any information about visitors then this is good to have - even if you fall outside the legislative requirements. Such a policy gives the visitor confidence in you.
5. The Site is Free of Link Errors.
Ensure links are accurate and current. Check links - especially external links, on a regular basis. Using Javascript designers can provide good error messages which enable the user to recover from the error situation, fix the problem, and continue within the site. Users should also be able to report the error if they choose.
6. Reliance is on Recognition Rather than Recall
Familiar labels and icons which clear meanings are used. The need to rely on the users' memory load as they move from page to page is minimised. Users are not focred to remember key information across documents.
7. The Site Provides for Flexibility and Efficiency of Use.
High budget sites, and those that require frequent visits (eg home banking) should accommodate a range of user sophistication and diverse user goals. For example - guide novice users through a series of progressive steps leading to the desired goal, but allow expert users to directly reach their destination.
8. Aesthetic and Minimalist Design.
The site has visually pleasing displays. There is an absence of information which is irrelevant or distracting.
9. Help and Documentation
Where required relevant help and documentation is provided. It should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Frequently Asked Questions (FAQs) should be relevant and current.
10. Progressive Levels of Detail are Revealed.
Information is hierarchically organised, with more general information appearing before more specific detail. This allows the user to delve as deeply as needed, but to stop whenever sufficient information has been received.
11. Documents are Chunked
Sentences are short and contain only one topic. Ideally, a document should fit on a single display page. The user is not forced to access multiple documents to complete a single thought. Humans can store roughly seven bits of information in their working memory at once. If a complex page has more than seven items, then like pieces should be clustered. White space around the clusters can make them visually distinct.
12. Th Inverted Pyramid Style of Writing is Used
The conclusion is placed first. The most important information is located in the text-heavy top.
13. Important Information is always "Above the Fold"
The user is not forced to scroll to see important information. Where scrolling is required, it is made clear in the design that the page is scrollable.
14. Gratuitous Use of Features is Avoided
Where features such as frames, Flash, animation, PDF and java applets are used there is a discernible purpose for their use. The purpose can be seen to outweigh the more accessible alternative of HTML (including XML).
15. Pages are Scannable
Users are able to readily identify keywords, hyperlinks and other eye catching features to progress to the next important page. The site used san serif fonts (easier for screen reading); short concise self-describing hyperlinks that are set apart by white space; and brief, easily digestible paragraphs that follow the inverted pyramid style.
16. Download and Response Times are Low
Pages (including all graphics) are generally less than 50k. Where pages are large there is a warning. Image information can be seen prior to full loading - but use of the ALT value, and loading speed is maximised by use of width and height attributes on all images.
17. Code Complies with Standards
The site passes W3C HTML and CSS validation checks. Each pages starts with a DTD (eg ).
18. The Site is Accessible to All
The site is accessible to people with a variety if disabilities. It complies with W3C accessibility guidelines.
19. Content is Accurate and Current
The site content is up-to-date, relevant and aligned to the current objectives of the web site.
20. The Site can be Searched Effectively
Search is available from each page. The user is able to identify the most relevant information from a list of results. The user is clear on the search options, and is assisted to modify unsuccessful searches.
Evaluating sites
Evaluate the web site for the following, rating the severity of any usability issues against each heuristic as follows
- 0: I don't agree that this is a usability problem
- 1: Cosmetic problem only -- need not be fixed unless extra time is available on project
- 2: Minor usability problem -- fixing this should be given low priority
- 3: Major usability problem -- important to fix, so should be given high priority
- 4: Usability catastrophe -- imperative to fix this before product can be released