    |
Web Usability Guidelines
The following guidelines include most of the factors that we consider during a usability evaluation of a prototype, or a partial or full user interface. They are a work in progress. Check back periodically for a new version.
Table of Contents
Planning & Management
Design for the users - make the whole site user-centric, user-driven.
Identify the main purpose of the site and who the intended primary audience is; their wants, their needs and their capabilities. Ask real people at each stage of development. Ensure that the site delivers what it is meant to, effectively and efficiently.
Regularly maintain and update the site - avoid linkrot, and out of date information.
- Check that all links work - update or delete as necessary.
- Keep a check on time sensitive information and make sure the site is as 'current' as possible.
Acquire a good Domain Name.
This may be easier said than done but if possible a domain name should be easy to remember and easy to spell. If the site or service is local to a particular country then the domain ending should be appropriate, e.g. ".co.uk", ".fr", ".be". If the site is going to be international then at the moment it is also probably prudent to acquire the ".com" version as well as currently this is the default that many browsers automatically add on, and is the ending most users would try if they were trying to guess a site's address.
Use both 'www.name.end' and 'name.end' as aliases for the home page.
Attaching the subdomain "www" has become the ubiquitous way to signify a web site address, so it should definitely be used. However, many users forget, or are lazy, and leave it out when typing addresses in. Using both makes the site quick and easy to find.
Use a good ISP and good server software.
With the multitude of internet service providers competing for custom there really is no excuse for providing poor service. Also much of the software used for powering the net is open source and essentially free e.g. Apache, PHP, mysql.
Test, Test, Test...
- Test how real users interact with the site.
- Test each page for validity of HTML.
- Test that each page works in a range of different browsers.
- Test that each page works for a range of screen resolutions, window sizes, color depths.
- Test that each page works on different hardware platforms: MAC, PC etc.
Design Concepts
Separate meaning from presentation.
Divorcing content from style uses the web the way it was meant to be used. The content and information structure of each page should be a priority. It is not necessary or even optimal for pages to appear identical for each user - indeed because of the range of devices used to surf the net this is impossible.
Design for accessibility - enable all users on all devices.
On the web there is no standard user, no standard browsing device, and no standard browsing software. Pages should be designed for maximum accessibility in order to support all users, all hardware and all browsers. This maximises the sites' potential audience. In addition, there may also be a moral and/or legal obligation to avoid discriminating against users with certain disabilities.
Accessibility is about enabling all users to browse the information provided in the way that they choose - a good usability practice
Avoid tenuous metaphor - only use if absolutely appropriate.
Metaphors can aid memory and learning if they are appropriate, e.g. a calculator like interface for performing calculations. However if used for effect rather than function they can confuse and be detrimental to usability.
Use established web standards. E.g. shopping cart, link colour, icons.
The use of common terminology and features aids learning, and is therefore good for usability. The actual feature may not always be ideal or the most appropriate but its popularity means that it is widely accepted and recognised. e.g.
- Shopping cart - not an ideal metaphor for many sites or in many countries, but its function is widely recognised and accepted.
- Blue as the link colour - not the most salient or perceivable colour, especially for colour blind users, but the standard across the web and what users know and expect.
Even when using standard features users need to be tested to ensure that they do indeed understand the intended meaning.
Aim for rapid speed of delivery.
Speed of delivery is the number one design criterion. Users demand fast page downloads above all else and will not wait for a slow page to download no matter what its content. Human factors research has shown that when interacting with computers response times of less than 0.1 sec are required in order for the user to feel that the system is responding instantaneously. While an upper limit of 1.0 sec is required in order for the user to maintain an uninterrupted flow of thought. Anything above 10 sec and users typically lose focus and will turn their attention to other tasks.
All pages should be designed to download as rapidly as possible and ideally within 10 seconds. This means focussing on the content of the page above all else and including graphics and other bandwidth intensive features only if absolutely necessary.
Design Do's and Don'ts
Provide alternative descriptions for all images and multimedia.
Probably the most important guideline to improve accessibility. Use <ALT> and <LONGDESC> to
provide equivalent content to users who cannot perceive the original,
whether by choice, because of the limitations of their hardware or
software, or because of disability.
Use Style sheets. Avoid the deprecated <FONT> tag.
When used correctly style sheets aid usability by providing consistency throughout a site. They also aid accessibility by enabling the user to employ their own style sheets and therefore their own preferences. It is also possible to provide alternatives for different devices.
Using style sheets rather than inline <FONT> tags
also aids maintenance and updating of the site - changes can be made
to a single style sheet that have a global effect rather than having
to delve into each individual page.
As style sheets are only implemented in the latest browsers care should be taken to ensure that the pages still make sense even when style sheets are turned off.
Avoid popping up windows on users screens.
People like to be in control of their own machine and many find it highly annoying to have a site spawn all over their screen. Also a new window more often than not obscures what might be useful information in the window below, and more importantly breaks the functionality of the back button (see next guideline).
Do not break the back button.
The back button is the most commonly used navigation method. Users expect to be able to return to previously viewed pages by using it. Popping up new windows or programing automatic redirects etc. break this functionality and greatly annoys and confuses users. Maintain the functionality at all times.
Do NOT use frames.
Frames can cause a whole host of problems even when used and programmed properly, the problems include:
- Breaking the URL - the address shown at the top is no longer a description of the page being viewed, this can lead to problems with bookmarking and sharing the addresses of interesting pages with others.
- Problems with printing - many browsers have problems printing pages that contain frames. Even for 'frame aware' browsers the output can often be highly confusing, particularly if the frames contain content that requires scrolling.
- Many search engines have problems with pages that contain frames.
But if you must use frames then include non-frame dependent alternatives
using the <NOFRAMES> tag.
Animation - use when appropriate but avoid over use.
Animation can often be used to specifically enhance a message or draw attention to an important feature. In many cases, however, animation is used less judiciously and merely annoys users and creates a size overhead. Avoid misusing or overuse of animation.
Use plug-ins only where absolutely appropriate.
Plug-ins technology such as flash (a great product!) can greatly enhance the functionality and appeal of a site, however there is a risk of alienating those users that do not have the plug-in by making the site meaningless or unusable, or by requiring them to spend time downloading the plug-in. Use content requiring plug-ins only if the page absolutely requires it, if used then provide an alternative with equivalent content.
Navigation
Provide a consistent and intuitive Navigation method.
There are many different methods of navigation to choose from. The choice often depends on the purpose and content of the site. Choose a method that is simple and requires the minimum of learning. Make sure it is consistent across the whole of the site.
Facilitate the rapid retrieval of information by providing a search function, index or map.
Particularly if a site is large there should be some method provided so that users can quickly find the information or page that they are looking for without having to follow a whole set of predefined steps. Providing shortcuts also facilitates 'expert users'.
Let users know where they are and where they have been.
Provide a context for each page:
- a meaningful heading,
- some indication of where the page lies in the site structure,
- a visual cue on a navigation bar or menu.
Where possible use text links in standard colours so that they change to red/purple to provide feedback about where the user has been.
URL's should be: meaningful, lower case, persistent.
Choose short descriptive names and use all lower case letters. These aid memory, communication of the URL and reduce mistakes when typing in. Avoid special characters, however if necessary for punctuation use all hyphens or all underlines and use consistently.
To avoid link-rot from incoming links avoid moving pages around to ensure that each URL points to the same resource. For time sensitive articles include a date element in the URL and archive the page so that it still represents a useful resource.
Use the <TITLE> tag for links to provide more
information.
If the browser supports it it is an excellent way to provide more information. If the browser does not - no harm done!
Always use an identical url to refer to the same page.
If different URL's are used in different links to the same page the browser will not know that they refer to the same page. The alternative links will not show up as visited even after a first link has been followed, leading to confusion for the user. The speed advantage of page caching will also be decreased.
Make links meaningful and predictive of the destination - DON'T use 'click here'.
Links should be meaningful and if possible meaningful to the extent that even if taken in isolation the user would have a good change of predicting the content of the destination page. Avoid 'click here' and similar variants - give the user more to go on.
Use image links and image maps conservatively.
Linking using images can be used to great effect, however they suffer from several problems:
- It may not be immediately obvious what or where the link is.
- Image links do not change to show when the link has been visited - breaking a good usability feature.
- Text used in images can suffer at different resolutions and become unintelligible - making the link difficult to comprehend.
- Unless text alternatives are provided - either with the
<ALT>tag or redundant text - the links will be unusable by surfers with images turned off, speech browsers and text only browsers.
Use image links and image maps conservatively.
Linking using images can be used to great effect, however they suffer from several problems:
- It may not be immediately obvious what or where the link is.
- Image links do not change to show when the link has been visited - breaking a good usability feature.
- Text used in images can suffer at different resolutions and become unintelligible - making the link difficult to comprehend.
- Unless text alternatives are provided - either with the
<ALT>tag or redundant text - the links will be unusable by surfers with images turned off, speech browsers and text only browsers.
Avoid links that refer to the current page.
A link should always take the user to another page and not simply reload the exact same information. If the link is part of a menu then change its appearance to provide feedback about the current location.
Use standard colours for links and visited links.
An unvisited link should be blue and a visited link should be red or purple. Although not ideal these are the standards used across the web and should be adhered to as they are what users expect and understand.
Page Design
Avoid misusing HTML markup to produce style.
Use style sheets to produce text effects and formatting (see above) rather than misusing HTML tags. e.g:
<H1>to<H6>should be reserved for headings and not used to simply change the size of fonts.<BLOCKQUOTE>should be used only for quotations and not simply to produce page margins.
Use high contrast, avoid complicated backgrounds.
For maximum clarity use high luminance contrast between foreground and background elements. Do not rely on combinations providing colour contrast alone as these are generally more difficult to perceive and may cause problems for some users with certain monitors or the colour blind.
If using backgrounds then make sure they are very subtle and do not interfere with the foreground text or pictures. Also make sure background images are of small size and can be easily and seamlessly tiled to minimise overhead in page download speed.
Left align the majority of text.
Users can read left aligned text much faster and more comfortably than centred or right aligned text. Use effects other than left alignment conservatively to add emphasis.
Use only a limited number of carefully chosen fonts.
Two or three different fonts is probably the limit, any more and the page can appear messy and unstructured. Use fonts consistently to reinforce the relative importance of headings etc.
Avoid defining very specific fonts as some users may not have them loaded on their machines. For each font definition provide alternatives and a default. e.g. font-family: Arial, Helvetica, sans-serif.
For smaller text sans-serif fonts may be preferable to aid legibility since serif fonts can become unresolvable due to the relatively low resolution of most monitors. However, many users find serif fonts more pleasant to read. An informed choice must be made.
Do not use all CAPITALS
On average it takes approximately 10% longer to read a block of text composed entirely of uppercase letters. Also it is regarded by some as rude because it is SHOUTING!
Use page space sensibly to maximise visual information.
Grouping, proximity, continuity and uniformity can all aid recognition and meaning. Use the space available on the page to add visual structure by grouping like elements etc.
Aim for scannability. Use bulleted and numbered lists instead of large chunks of text
Provide a way for a user to get an impression of the page or section quickly and easily:
- Use headings appropriately
- Use
<STRONG>and<EM>to highlight important points - Use lists
Always provide the pixel size for graphics and the width of columns
This allows the browser to reserve space for all of the content quickly. Whole page rendering times will improve and the user will have access to the important text information provided at the top of the page without waiting for all page elements to finish downloading. By the time they are ready for the graphic etc. there is a chance it will have loaded completely.
Use relative parameters to set the size of fonts and page elements
Users should be able to specify the default size of the text that they prefer - their choice may be influenced by their monitor size or resolution, their visual preferences or their needs due to visual impairment. The use of defined sizes as points or pixels etc. can reduce this flexibility. Relative sizes can be specified using percentages or terms such as smaller, bigger etc.
Page elements such as table widths and column widths should be specified in percentages if possible to facilitate resolution independent design.
Content
Produce content specifically for the web.
Don't simply provide reproductions of documents more suitable for other media, instead adapt old content and produce new content in order to utilise the flexibility and power of the web (see other guidelines in this section).
Structure each page/document using correct markup.
Use <H1> to <H6> to segment
a page hierarchically. Use <BLOCKQUOTE>, <ADDRESS> and <CODE> appropriately
in the correct context rather than to produce style effects.
Correct structuring of a page enhances the information by providing the correct context and aids scannability. Correct use of markup enhances the accessibility of the page.
Prioritise important information - put it near the top.
The first thing that loads and the first thing a user sees without scrolling should provide as much information relevant to the context or function of the page. Users can rapidly make an informed decision about whether the page contains what they are looking for.
Prioritise the main points - provide an overview with links to more detail or specialised information.
Avoid bombarding users with too much superfluous detail, instead provide links so that those interested in the finer points can view them whilst other users can gain an overview of the topic. This way all the main points can be communicated rapidly. With long detailed pages many users will cease reading before the end of the page and may miss out on important information.
Make each page informative in own right.
Pages might be linked externally or users come to them from search engines or recommendations. Each page should, if possible, be informative and useful when viewed in isolation and not rely heavily on the user having reached it by a predefined route. Also by providing some indication about the pages context within the site users will be more likely to browse other pages for similar information.
Use plain language - avoid marketese, boasting and jargon.
Users want the facts explained to them quickly and easily. Overt self promotion or boasting, jargon and bull obscure the facts and damage the reputation of the site.
When appropriate provide alternative copies of pages to facilitate printing.
Because of the limited resolution of the majority of monitors (all in fact but the very high end and very expensive ones) text is more uncomfortable and slower to read online than when printed out in hardcopy. Many users will print out important pages to read rather than read them online. Also printouts can be more portable and more easily distributed and archived.
Many pages degrade to look terrible when printed out and unnecessary element such as menus, frame content etc. waste valuable space. If appropriate alternative versions of pages should be provided specifically for printing, they can utilise all the typical typographical conventions that make for good looking readable hardcopy which may not (usually are not!) appropriate for online content.
Title each page with informative short text.
Page titles are very important because they provide the titles for bookmarks, and are often used in the indexing and output of search engines.
In the header of each HTML page the title should be specific to the page and informative but also concise. Words with high meaning should be used first, and linking words or propositions such as 'a' 'an', 'the' can be reduced or eliminated.
Keep content concise and to the point.
Keep the user interested and informed. Enough said really
Enhance meaning of images with appropriate cropping and scaling.
Images should be cropped and scaled to only include relevant portions that support the message. Avoid text especially if small as different monitor resolutions can make this unreadable.
Adopt an appropriate tone.
Pitch the writing style and the tone of the content appropriately for its intended users. Humour can be a great asset but overuse is a bore and it can obscure meaning.
Ensure any error messages are informative and help resolve the error.
All error messages should be in natural language and provide a useful description of the problem and either a means of solving the problem or a method of recovering from the error.
Adapted from Bunnyfoot Usability & Accessibility Experts
