500 web usability guidelines
List of home page usability guidelines
- The items on the home page are clearly focused on users’ key tasks (“featuritis” has been avoided).
- If the site is large, the home page contains a search input box.
- Product categories are provided and clearly visible on the homepage.
- Useful content is presented on the home page or within one click of the home page.
- The home page shows good examples of real site content.
- Links on the home page begin with the most important keyword (e.g. “Sun holidays” not “Holidays in the sun”).
- There is a short list of items recently featured on the homepage, supplemented with a link to archival content.
- Navigation areas on the home page are not over-formatted and users will not mistake them for adverts.
- The value proposition is clearly stated on the home page (e.g. with a tagline or welcome blurb).
- The home page contains meaningful graphics, not clip art or pictures of models.
- Navigation choices are ordered in the most logical or task-oriented manner (with the less important corporate information at the bottom).
- The title of the home page will provide good visibility in search engines like Google.
- All corporate information is grouped in one distinct area (e.g. “About Us”).
- Users will understand the value proposition.
- By just looking at the home page, the first time user will understand where to start.
- The home page shows all the major options.
- The home page of the site has a memorable URL.
- The home page is professionally designed and will create a positive first impression.
- The design of the home page will encourage people to explore the site.
- The home page looks like a home page; pages lower in the site will not be confused with it.
List of usability guidelines to check task orientation
- The site is free from irrelevant, unnecessary and distracting information.
- Excessive use of scripts, applets, movies, audio files, graphics and images has been avoided.
- The site avoids unnecessary registration.
- The critical path (e.g. purchase, subscription) is clear, with no distractions on route.
- Information is presented in a simple, natural and logical order.
- The number of screens required per task has been minimised.
- The site requires minimal scrolling and clicking.
- The site correctly anticipates and prompts for the user’s probable next activity.
- When graphs are shown, users have access to the actual data (e.g. numeric annotation on bar charts).
- Activities allocated to the user or the computer take full advantage of the strengths of each (look for actions that can be done automatically by the site, e.g. postcode lookup).
- Users can complete common tasks quickly.
- Items can be compared easily when this is necessary for the task (e.g. product comparisons).
- The task sequence parallels the user’s work processes.
- The site makes the user’s work easier and quicker than without the system.
- The most important and frequently used topics, features and functions are close to the centre of the page, not in the far left or right margins.
- The user does not need to enter the same information more than once.
- Important, frequently needed topics and tasks are close to the ‘surface’ of the web site.
- Typing (e.g. during purchase) is kept to an absolute minimum, with accelerators (“one-click”) for return users.
- The path for any given task is a reasonable length (2-5 clicks).
- When there are multiple steps in a task, the site displays all the steps that need to be completed and provides feedback on the user’s current position in the workflow.
- Price is always clearly displayed next to any product.
- The site’s privacy policy is easy to find, especially on pages that ask for personal information, and the policy is simple and clear.
- Users of the site do not need to remember information from place to place.
- The use of metaphors is easily understandable by the typical user.
- Data formats follow appropriate cultural conventions (e.g. miles for UK).
- Details of the software’s internal workings are not exposed to the user.
- The site caters for users with little prior experience of the web.
- The site makes it easy for users to explore the site and try out different options before committing themselves.
- A typical first-time visitor can do the most common tasks without assistance.
- When they return to the site, users will remember how to carry out the key tasks.
- The functionality of novel device controls is obvious.
- On the basket page, there is a highly visible ‘Proceed to checkout’ button at the top and bottom of the page .
- Important calls to action, like ‘Add to basket’, are highly visible.
- Action buttons (such as “Submit”) are always invoked by the user, not automatically invoked by the system when the last field is completed.
- Command and action items are presented as buttons (not, for example, as hypertext links).
- If the user is half-way through a transaction and quits, the user can later return to the site and continue from where he left off.
- When a page presents a lot of information, the user can sort and filter the information.
- If there is an image on a button or icon, it is relevant to the task.
- The site prompts the user before automatically logging off the user, and the time out is appropriate.
- Unwanted features (e.g. Flash animations) can be stopped or skipped.
- The site is robust and all the key features work (i.e. there are no javascript exceptions, CGI errors or broken links).
- The site supports novice and expert users by providing different levels of explanation (e.g. in help and error messages).
- The site allows users to rename objects and actions in the interface (e.g. naming delivery addresses or accounts).
- The site allows the user to customise operational time parameters (e.g. time until automatic logout).
List of navigation and IA usability guidelines
- There is a convenient and obvious way to move between related pages and sections and it is easy to return to the home page.
- The information that users are most likely to need is easy to navigate to from most pages.
- Navigation choices are ordered in the most logical or task-oriented manner.
- The navigation system is broad and shallow (many items on a menu) rather than deep (many menu levels).
- The site structure is simple, with a clear conceptual model and no unnecessary levels.
- The major sections of the site are available from every page (persistent navigation) and there are no dead ends.
- Navigation tabs are located at the top of the page, and look like clickable versions of real-world tabs.
- There is a site map that provides an overview of the site’s content.
- The site map is linked to from every page.
- The site map provides a concise overview of the site, not a rehash of the main navigation or a list of every single topic.
- Good navigational feedback is provided (e.g. showing where you are in the site).
- Category labels accurately describe the information in the category.
- Links and navigation labels contain the “trigger words” that users will look for to achieve their goal.
- Terminology and conventions (such as link colours) are (approximately) consistent with general web usage.
- Links look the same in the different sections of the site.
- Product pages contain links to similar and complementary products to support cross-selling.
- The terms used for navigation items and hypertext links are unambiguous and jargon-free.
- Users can sort and filter catalogue pages (e.g. by listing in price order, or showing ‘most popular’).
- There is a visible change when the mouse points at something clickable (excluding cursor changes).
- Important content can be accessed from more than one link (different users may require different link labels).
- Navigation-only pages (such as the home page) can be viewed without scrolling.
- Hypertext links that invoke actions (e.g downloads, new windows) are clearly distinguished from hypertext links that load another page.
- The site allows the user to control the pace and sequence of the interaction.
- There are clearly marked exits on every page allowing the user to bale out of the current task without having to go through an extended dialog.
- The site does not disable the browser’s “Back” button and the “Back” button appears on the browser toolbar on every page.
- Clicking the back button always takes the user back to the page the user came from.
- A link to both the basket and checkout is clearly visible on every page.
- If the site spawns new windows, these will not confuse the user (e.g. they are dialog-box sized and can be easily closed).
- Menu instructions, prompts and messages appear on the same place on each screen.
List of forms and data entry usability guidelines
- Fields in data entry screens contain default values when appropriate and show the structure of the data and the field length.
- When a task involves source documents (such as a paper form), the interface is compatible with the characteristics of the source document.
- The site automatically enters field formatting data (e.g. currency symbols, commas for 1000s, trailing or leading spaces). Users do not need to enter characters like £ or %. .
- Field labels on forms clearly explain what entries are desired.
- Text boxes on forms are the right length for the expected answer.
- There is a clear distinction between “required” and “optional” fields on forms.
- The same form is used for both logging in and registering (i.e. it’s like Amazon).
- Forms pre-warn the user if external information is needed for completion (e.g. a passport number).
- Questions on forms are grouped logically, and each group has a heading.
- Fields on forms contain hints, examples or model answers to demonstrate the expected input.
- When field labels on forms take the form of questions, the questions are stated in clear, simple language.
- Pull-down menus, radio buttons and check boxes are used in preference to text entry fields on forms (i.e. text entry fields are not overused).
- With data entry screens, the cursor is placed where the input is needed.
- Data formats are clearly indicated for input (e.g. dates) and output (e.g. units of values)..
- Users can complete simple tasks by entering just essential information (with the system supplying the non-essential information by default).
- Forms allow users to stay with a single interaction method for as long as possible (i.e. users do not need to make numerous shifts from keyboard to mouse to keyboard)..
- The user can change default values in form fields.
- Text entry fields indicate the amount and the format of data that needs to be entered.
- Forms are validated before the form is submitted .
- With data entry screens, the site carries out field-level checking and form-level checking at the appropriate time.
- The site makes it easy to correct errors (e.g. when a form is incomplete, positioning the cursor at the location where correction is required).
- There is consistency between data entry and data display.
- Labels are close to the data entry fields (e.g. labels are right justified).
List of trust and credibility guidelines
- The content is up-to-date, authoritative and trustworthy.
- The site contains third-party support (e.g. citations, testimonials) to verify the accuracy of information.
- It is clear that there is a real organisation behind the site (e.g. there is a physical address or a photo of the office).
- The company comprises acknowledged experts (look for credentials).
- The site avoids advertisements, especially pop-ups.
- Delivery costs are highlighted at the very beginning of checkout.
- The site avoids marketing waffle.
- Each page is clearly branded so that the user knows he is still in the same site.
- It is easy to contact someone for assistance and a reply is received quickly.
- The content is fresh: it is updated frequently and the site includes recent content.
- The site is free of typographic errors and spelling mistakes.
- The visual design complements the brand and any offline marketing messages.
- There are real people behind the organisation and they are honest and trustworthy (look for bios).
List of writing and content quality usability guidelines
- The site has compelling and unique content.
- Text is concise, with no needless instructions or welcome notes.
- Each content page begins with conclusions or implications and the text is written with an inverted pyramid style.
- Pages use bulleted and numbered lists in preference to narrative text.
- Lists are prefaced with a concise introduction (e.g. a word or phrase), helping users appreciate how the items are related to one another.
- The most important items in a list are placed at the top.
- Information is organised hierarchically, from the general to the specific, and the organisation is clear and logical.
- Content has been specifically created for the web (web pages do not comprise repurposed material from print publications such as brochures).
- Product pages contain the detail necessary to make a purchase, and users can zoom in on product images.
- Hypertext has been appropriately used to structure content.
- Sentences are written in the active voice.
- Pages are quick to scan, with ample headings and sub-headings and short paragraphs.
- The site uses maps, diagrams, graphs, flow charts and other visuals in preference to wordy blocks of text.
- Each page is clearly labeled with a descriptive and useful title that makes sense as a bookmark.
- Links and link titles are descriptive and predictive, and there are no “Click here!” links.
- The site avoids cute, clever, or cryptic headings.
- Link names match the title of destination pages, so users will know when they have reached the intended page.
- Button labels and link labels start with action words.
- Headings and sub-headings are short, straightforward and descriptive.
- The words, phrases and concepts used will be familiar to the typical user.
- Numbered lists start at “1″ not at “0″.
- Acronyms and abbreviations are defined when first used.
- Text links are long enough to be understood, but short enough to minimise wrapping (especially when used as a navigation list).
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.
- Standard elements (such as page titles, site navigation, page navigation, privacy policy etc.) are easy to locate.
- 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).
List of search usability guidelines
- The default search is intuitive to configure (no Boolean operators).
- The search results page shows the user what was searched for and it is easy to edit and resubmit the search.
- Search results are clear, useful and ranked by relevance.
- The search results page makes it clear how many results were retrieved, and the number of results per page can be configured by the user.
- If no results are returned, the system offers ideas or options for improving the query based on identifiable problems with the user’s input.
- The search engine handles empty queries gracefully.
- The most common queries (as reflected in the site log) produce useful results.
- The search engine includes templates, examples or hints on how to use it effectively.
- The site includes a more powerful search interface available to help users refine their searches (preferably named “revise search” or “refine search”, not “advanced search”).
- The search results page does not show duplicate results (either perceived duplicates or actual duplicates).
- The search box is long enough to handle common query lengths.
- Searches cover the entire web site, not a portion of it.
- If the site allows users to set up a complex search, these searches can be saved and executed on a regular basis (so users can keep up-to-date with dynamic content).
- The search interface is located where users will expect to find it (top right of page).
- The search box and its controls are clearly labeled (multiple search boxes can be confusing).
- The site supports people who want to browse and people who want to search.
- The scope of the search is made explicit on the search results page and users can restrict the scope (if relevant to the task).
- The search results page displays useful meta-information, such as the size of the document, the date that the document was created and the file type (Word, pdf etc.).
- The search engine provides automatic spell checking and looks for plurals and synonyms.
- The search engine provides an option for similarity search (“more like this”).
List of usability guidelines for help, feedback and error tolerance
- The FAQ or on-line help provides step-by-step instructions to help users carry out the most important tasks.
- It is easy to get help in the right form and at the right time.
- Prompts are brief and unambiguous.
- The user does not need to consult user manuals or other external information to use the site.
- The site uses a customised 404 page, which includes tips on how to find the missing page and links to “Home” and Search.
- The site provides good feedback (e.g. progress indicators or messages) when needed (e.g. during checkout).
- Users are given help in choosing products.
- User confirmation is required before carrying out potentially “dangerous” actions (e.g. deleting something).
- Confirmation pages are clear.
- Error messages contain clear instructions on what to do next.
- Immediately prior to committing to the purchase, the site shows the user a clear summary page and this will not be confused with a purchase confirmation page.
- When the user needs to choose between different options (such as in a dialog box), the options are obvious.
- The site keeps users informed about unavoidable delays in the site’s response time (e.g. when authorising a credit card transaction).
- Error messages are written in a non-derisory tone and do not blame the user for the error.
- Pages load quickly (5 seconds or less).
- The site provides immediate feedback on user input or actions.
- The user is warned about large, slow-loading pages (e.g. “Please wait…”), and the most important information appears first.
- Where tool tips are used, they provide useful additional help and do not simply duplicate text in the icon, link or field label.
- When giving instructions, pages tell users what to do rather than what to avoid doing.
- The site shows users how to do common tasks where appropriate (e.g. with demonstrations of the site’s functionality).
- The site provides feedback (e.g. “Did you know?”) that helps the user learn how to use the site.
- The site provides context sensitive help.
- Help is clear and direct and simply expressed in plain English, free from jargon and buzzwords.
- The site provides clear feedback when a task has been completed successfully.
- Important instructions remain on the screen while needed, and there are no hasty time outs requiring the user to write down information.
- Fitts’ Law is followed (the distance between controls and the size of the controls is appropriate, with size proportional to distance).
- There is sufficient space between targets to prevent the user from hitting multiple or incorrect targets.
- There is a line space of at least 2 pixels between clickable items.
- The site makes it obvious when and where an error has occurred (e.g. when a form is incomplete, highlighting the missing fields).
- The site uses appropriate selection methods (e.g. pull-down menus) as an alternative to typing.
- The site does a good job of preventing the user from making errors.
- The site prompts the user before correcting erroneous input (e.g. Google’s “Did you mean…?”).
- The site ensures that work is not lost (either by the user or site error).
- Error messages are written in plain language with sufficient explanation of the problem.
- When relevant, the user can defer fixing errors until later in the task.
- The site can provide more detail about error messages if required.
- It is easy to “undo” (or “cancel”) and “redo” actions.
Tags: guidelines, usability, Web Usability, web usability guidelines