guidelines for the Web
Unless a web site meets the needs of the intended users it will
not meet the needs of the organisation providing the web site. Web
site development should be user-centred, evaluating the evolving
design against user requirements. The first step is to define the
business objectives, the intended context of use and key scenarios
of use. This helps prioritise design and provides a focus for evaluation.
The design should take account of established guidelines for web
writing style, navigation and page design. The site structure and
page design should be evaluated by representative end users. Management
and maintenance is important to maintain usability.
Site Structure and content
Management and Maintenance
Why is it so difficult to find the content you want on many web
sites? The reasons include:
- Organisations often produce web sites with a content and structure
which mirrors the internal concerns of the organisation rather
than the needs of the users of the site.
- Web sites frequently contain material which would be appropriate
in a printed form, but needs to be adapted for presentation on
- Producing web pages is apparently so easy that it may not be
subject to the same quality criteria that are used for more traditional
forms of publishing.
In short, web sites provide a unique opportunity for inexperienced
information providers to create a new generation of difficult to
use systems! Successful web development requires the combined skills
of domain expertise, HTML, graphic design and web usability.
A web site will not meet the needs of the organisation providing
the site unless it meets the needs of the intended users, and provides
"quality in use" [ref].
Incomplete sites are seen as a sign of corporate incompetence [ref].
To implement a web site which users find effective, efficient and
satisfying requires a user centred design process. This document
describes a process which integrates existing empirical evidence
and guidelines for web site design into a user-centred process which
is consistent with ISO 13407. Due to
limitations of space, the reader is referred to the references for
more details of the individual design guidelines.
It is essential first to define the business
objectives and usability
goals, and to specify the intended contexts
of use. These should drive an iterative process of design and
evaluation, starting with partial mock-ups and moving to functional
prototypes. Continued usability requires subsequent management and
Define the business objectives of the site (provider requirements)
- What are the main purposes of the site? These could include
disseminating information, advertising services, selling products,
positioning in the market or demonstrating competency.
- Who do you want to visit the site, is it internet or intranet
- what are the important user categories and what are their motivations
- What type of pages and information will attract users and meet
their needs? e.g. hierarchically structured information, a database,
download of software/files, incentives to explore the site.
- What are the quality and usability goals which can be evaluated?
e.g. to demonstrate superiority of the organisation to the competition,
appropriateness of the web site to user's needs, professionalism
of the web site, percentage of users who can find the information
they need, ease with which users can locate information, number
of accesses to key pages, percentage of users visiting the site
who access key pages.
- What is the budget for achieving these goals for different parts
of the site?
Identify responsibilities for achieving quality and usability objectives,
and estimate the resources and budget for these activities.
Specify in detail the intended contexts of use (user requirements)
- Who are the important users?
- What is their purpose for accessing the site?
- How frequently will they visit the site?
- What experience and expertise do they have?
- What nationality are they? What languages can they read?
- What type of information are they looking for?
- How will they want to use the information: read it on the screen,
print it or download it?
- What type of browsers will they use? How fast will their communication
- How large a screen/window will they use, with how many colours?
Even if there is no definitive answer to these questions, it is
important to obtain agreement on the assumptions which are made.
Define key scenarios of use
- Describe specific examples of how and why people will access
the site, and what they want to achieve. These will help prioritise
design, and should be the focus for evaluation.
- Also identify any niche markets and interests which can be supported
by the site without major additional investment (e.g. specialised
information, access by users with special needs).
SITE STRUCTURE AND CONTENT
- Structure information so that it is meaningful to the user.
A structure that makes sense to the user will often differ from
the structure used internally by the data provider. Different
user groups may need different interfaces.
- What information content does the user need at what level of
detail? Use terminology familiar to the user.
- Interview users to establish the users' terminology and how
they categorise information.
- Produce a card (or sticky note) for each anticipated page for
the site, and use card sorting techniques to design an appropriate
People rarely read web pages word by word - they scan pages to
find the information they want [ref].
- Make the text scannable with bulleted lists, highlighted keywords,
meaningful headings and short sections of text.
- Start with the conclusion, then provide the details [ref].
- Make text concise and objective: avoid marketing exaggeration,
subjective claims or boasting [ref].
- Do not include unnecessary "white space" as this impedes scanning
- Do not expect users to read large amounts of text on-line: provide
one large page for printing or a file to download.
Help users find their way
- Meet user expectations by following conventions established
by other major sites.
- When appropriate use a familiar metaphor, like a newspaper front
page for the home page of a news site.
- Show users where they are and where they can go.
- Use a consistent page layout.
- The easiest to navigate information pages have a high density
of self-explanatory text links [ref].
- Minimise the number of clicks needed to reach the point where
users are confident they are on the right track: the more clicks
the more users you lose.
- Users do not mind scrolling pages if necessary, but beware of
pages which appear complete on a small screen while hiding important
buttons or links just off the bottom.
- Provide links on each page to a list of the local contents and
- On larger sites consider providing a search facility - many
users habitually use search rather than exploring a site [ref].
- Provide a simple interface to the search engine
and check that it gives easily understood results. Most current
search engines are so poor that their use reduces the likelihood
of finding relevant information! 
- Include navigational buttons at both the top and bottom of the
page - this minimises the need for scrolling.
- Use URLs which are meaningful and exclusively lower case - this
helps people who have to type them in.
- URLs quoted in printed material should be short and simple to
type: if necessary use aliases rather than the full URLs.
- Use page titles which make meaningful bookmarks (do not start
titles with "Welcome to ..." or use generic titles such as "Contents").
- Avoid dead ends - plan that any page could be the first page
for users reaching the site from a search engine.
Tell users what to expect
- Avoid concise menus: explain what each link contains - so that
users can find the right link first time.
- Provide link titles (tool tips) [ref]
- they simplify navigation for users with recent browsers which
support this feature.
- List the contents of each part of the site as a list of links
to the final information, divided into meaningfully titled groups
- Provide a site map or overview - this helps users understand
the scope of the site.
- Distinguish between a contents list for a page (e.g. use a heading
"Page contents"), links to other pages, and links to other sites
(e.g. using icons for off-site links).
- Any changes to the default link colours and style make it more
difficult for users to find the links.
- Give sizes of files that can be downloaded.
Highlight important links
- The wording of links embedded in text should help users scan
the contents of a page, and give prominence to links to key pages.
(Highlight the topic - do not use "click here"!)
- To keep users on your site, differentiate between on-site and
Design an effective home page
- This should establish the site identity and give a clear overview
of the content.
- The important information should fit on one screen, as some
users will not bother to scroll the home page [ref].
Design for efficiency [ref]
- It is important to minimise the download time as most web users
have slow connections [ref].
- Graphics add interest but are slow to load and can impede navigation.
- Reduce the size of graphics by selecting the file type which
will give the smallest image after compression. In the case of
GIF images try to reduce the number of colours used.
- Give the dimensions of the images in the 'IMG SRC' tags of the
HTML as the browser can then format the page before loading the
graphics, rather than having to reformat each time an image is
- Use the ALT tag to describe graphics, as many users do not wait
for graphics to load.
- Use small images, use interlaced images, repeat images where
Make text easy to read and use
- Avoid the use of flashing or animation, as users find this very
- Avoid patterned backgrounds, as these make text difficult to
- Where possible use tables instead of frames [ref]
- frames can interfere with printing and bookmarking.
Support different browser environments
- Test that your pages format correctly using the required browsers
- Do not resize the text (except with headings) as all other methods
produce unacceptable results on some browsers [ref].
- Check that pages containing reference information or large amounts
of text print correctly on the required browsers, platforms and
paper sizes (note that European A4 paper is narrower and longer
than US letter size paper [ref]).
Provide support for text-only browsers
Some users turn off graphics to increase speed, and the visually
impaired use text only browsers:
- To support text only browsers, use a logical hierarchy of headings,
avoid frames and use ALT tags which describe he function of images
- Use a checklist to inspect pages for conformance with house
style (consistency of layout) and with recommendations such as
those in this document.
Early mock-ups [ref]
- Early in design evaluate a partial mock up of the site with
representative users performing representative tasks.
- Use first drafts of screens, either on-line or as colour prints.
Functional prototypes [ref]
- Produce a working version of a representative part of the site,
taking account of the design principles and evaluation feedback.
- Evaluate the working version with representative users performing
MANAGEMENT AND MAINTENANCE
Ensure that new pages meet the quality and usability requirements
- What skills will be required of page developers? Do they have
the necessary expertise in the subject domain, HTML, graphic design
and usability? Do they need training?
- What will be the criteria for approval of new pages? Is some
automated checking possible?
Help people to find your site by indexing the important topics
and names of key people. To facilitate indexing by search engines:
- Provide search topics using the META tag [ref]
in the page heading.
- Include the main search topics in the first few lines of text
on the home page.
- Fill in the submission forms for search engines.
- Consider using an automated submission tool (e.g.[ref]).
Plan and review the site structure as it grows, review the user
needs, and make sure the site continues to meet the needs.
- Monitor feedback from users.
- Monitor the words used when searching the site.
- Monitor where people first arrive on the site, and support these
pages as entry points.
- Check for broken links.
- Compare your site to other comparable sites as web browsers
and web design evolve.
As it is unlikely to be economic to test the usability of every
page, it is important to establish a sound structure and style guide
within which new pages can be developed, and for page developers
to be aware of the business objectives and intended contexts of
This document is a revised version of a paper presented by Nigel
Bevan at several conferences, and was developed with the support
of the EC TRUMP project.
- 1 Spool JM et al (1997) Web site usability: A designers
guide. User Interface Engineering, North Andover, USA.
- 2 for example http://www.metacrawler.com
has three simple options when searching for multiple words: 'any',
'all' or 'phrase'.
- 3 UIEtips 3/20/98. Jared Spool, User Interface Engineering