web usability patterns

No frames on public sites

— you are building a dynamic site. In this context one needs to keep track of how changes in one part affects others. Frames are useful for viewing multiple things on one page. It is tempting to use a frame to display the navigation bar permanently. Some sites (e.g. letsbuyit.com) try to help users to stay linked to them using a frame. This is good for business but not always what the user wants.

I have to display multiple things on the same screen. You know that a two-year old browser may noy be able to cope with frames and the appearance of your site on them will be messy and unpredictable. There are also problems with sizing, such as when using new bars at various resolutions. Quite often, using the back button may cause multiple copies of a frame to be displayed: looking messy and reducing the space available for content. Using frames also makes printing a mess. One can get trapped in a frameset when linking to another site. Frames can interfere with the back button and with bookmarks.

This is a typical design trade-off. Expending a little more effort to use something other than a frame will slow the project down but, for a public site, will make the site more usable for more people. Contributors: Ian Graham, Andy Harbach, Jari Worsley

Don’t use frames unless you have to and the site is an internal one. Use layers and tables instead. When there is multiple content, cut-and-paste it to multiple pages. Where this content is dynamic automate the pastes. If frames are essential (?) then make sure that all links have a TARGET=”_top” attribute in their anchor tag . I.e. replace all frames with a new frameset so that bookmarks and other navigation work properly. If you must use frame, the make sure the server supports HTTP keep-alive.

You will also need to use Separate print pages.

Splash screen

AKA: Front page

— you are starting out on the site design and want to get the value proposition of your organization over to the user clearly. You may also want to use the home page to explicate the site structure via a site map. You consider using a splash screen or devoting the home page to a similar function. However, …

Splash screens may be helpful for first-time visitors, helping to orient them in relation to the site’s content and structure.


Regular and repeat visitors will be incensed at having to download this unneeded material before they can get on with the job in hand. How can you offer a splash screen only to people who need or want it?

This pattern was originally contributed by Gareth Sylvester-Bradley

Use an applet with a check box asking: Display this screen every visit? Use a cookie (or similar) or log-in to record Return visitors.

This pattern is terminal within this language.

No unpleasant surprises

One step forward, one step back, where am I now? Exasperated users will leave your site. We need to exhibit consistent behaviour to build trust. Progress through the site should appear logical and repeatable. Reliable behaviour is needed by users.

Users should be aware of where they are in a progression of actions. They should understand the impact of each action and be sure of its outcome (both on the site and in the world). Forms can mess up predictability (see example below)

  • session timeouts
  • poor server-side code
  • poor integration

No feedback on clicks — what is the outcome? See Track multiple identical requests

One bank labels sequential screens with ‘Stage n’ but fails to indicate which stages cause irrevocable commitment to be made. You commit at stage 3 but it doesn’t tell you this until Stage 7. The present author ordered some software from a Microsoft site. After filling in a form he was presented with a ‘parsing error’ screen. Assuming that it didn’t like the phone number beginning +44, he re-entered: with the same result. So he tried again. Two weeks later Microsoft’s fulfiller telephoned, asking: ‘do you really want three copies of this software?’!

Designed artifacts should be fit for their purpose. They should be natural in behaviour and conform to users’ expectations. There should be no unpleasant surprises except where these are introduced deliberately as alarms. Use of the artifact should give feedback on progress of the task being undertaken. They should fit the mental and manual abilities of users. A very common example of bad interface design outside the context of computers concerns door handles. Recently I was walking through an office building with a colleague and, meeting a closed door, I grasped its handle and pushed. Nothing happened because the door only opened toward me. My colleague laughed and remarked that his old headmaster would have shouted: ‘Stupid boy! Can’t you see that the handle is there to be pulled?’. I had to explain that I had worked for over two years in a building that had handles on both sides of all the doors and that I had often strained myself by pulling doors that should be pushed. In the end I had become totally disoriented in my relationships with all doors. I still find the stupidity of builders or architects that design in this way quite exasperating. Further, someone paid them for the work; more stupid yet! I know of at least two systems that include the helpful advice: Press Enter to Exit. And, as I have to explain patiently to Mac users, to close down Windows you click on Start: obviously! As long as users continue to buy them, designers will continue to deliver such daft interfaces. Use [Next] and [Previous] buttons where appropriate (see Button Gravity). Ensure consistency in linked pages: · pop-ups · open in a new window · frames – trapped Ensure consistency of logins: · to guarded pages · to home page Ensure consistency of navigational links, especially if they are built dynamically. Protect against double form submission.

Related patterns:
Idempotency, Feedback, Forgiveness , Sense of progress, Breadcrumbs, Button Gravity, Track multiple identical requests

Ian Graham, Andy Harbach, Jari Worsley

Separate print pages

AKA: Perfect printing, Printable version, Downloadable content

— you want users to be able to make a record of all or part of the content of your site. Navigability and aesthetics conflict with printability and other kinds of dowload functionality. Users want no unpleasant surprises when the data are displayed locally or the page rolls out of the printer. You cannot rely on advanced facilities within the users’ browsers because they may have two-year old browsers. And you have already decided that there should be no frames on public sites so you cannot use these either.

Background images, layout, images and other content occurring over page boundaries, typeface sizing and colour, page orientation, and size all cause printed material to appear a complete mess. Data formatted for easy dowload are not always easy on the eye either.

Pages are usually hard to print or transfer to other applications. Printed pages often need to the ‘Sellotaped’ together. The result is nearly always messy and cluttered with unwanted material. Using applets for printing or downloading material to local drives is difficult because of the Java security model: access to printers is impeded as well as access to other devices (hard disks, etc.)

The TCD (Teaching Company Directorate) used a flash plug-in, with white text on a black background. Work was needed to reverse the colours. Hometrack.co.uk had a long form, consisting of several (10 or more) pages, available on-line as 10 web pages for completion off-line. It was also available as a single printer-friendly web page (also 10 pages long!). An insurance company client of TriReme International allowed brokers to access their policy data via the web. Table were extracted from a DB2/400 database and presented via an applet. Printing facilities could not be implemented. The Guardian (illustrated above) and The Times newspapers both offer both interactive and printable versions of their daily crossword puzzles. Interesting, from July 2001, the latter starting charging £10 per annum for access to the printed version in an attempt to generate some revenue that was not depending on the then contracting advertising market. This presented users with a very simple finanacial decision: either join the club or do the extra 2 minutes work needed to create their own printable version. Regular Times solvers of course would probably cough up the dough. However, those of us who prefer the, usually more difficult and amusing, Guardian puzzle might well proceed as follows.

  1. Hit the PrintScreen key
  2. Paste the result into MSPaint or similar
  3. Cut and paste the first set of clues and the grid to PowerPoint or similar
  4. Go back to the web page and scroll down to the next sets of Across and Down clues
  5. Repeat steps 1–4

If the clues don’t change print from PowerPoint. When you design your site try to calculate what percentage of users will tolerate this extra effort (relatively minor in this rather bizarre case).

Use separate pages for printing or dowloading a printable or downloadable version of content in a predetermined format. If the material is purely tabular, the alternative is to pass HTML tables directly (as objects) to another local application or spreadsheet program.

This pattern is terminal within this language.

Ian Graham, Andy Harbach, Jari Worsley

Sense of progress

— because of the need for feedback and No unpleasant surprises, we need to feed back to users the level of achievement of their goals and, indeed, ours.

In particular, web users are often unaware of:

  • the point reached during the retrieval of an item of content – page number, download time, etc.
  • the stage reached in a business process
  • the point of commitment or rollback of a goal

This may lead them to making errors with dire, or at least irritating, consequences. These will mean they will probably not become return visitors.

Web technology presents content one page at a time, unlike a book where we can flick through the pages to gauge progress. Steps need not be linear. Any order may be appropriate. Feedback on progress through a task is needed because effects can be thus related to causes. It allows the user to see if the results of each step are contributing to the task in hand. Slow tasks or network delays should be made visible in this way, so that the user can tell if the system has really crashed or is just plain slow. Changing the mouse pointer to an hour glass is a helpful and often used technique but one can still wonder whether the system has hung. Providing an estimate of the anticipated time in the form of a gauge or progress bar is useful in such contexts.

Putting labels on pages detailing both the current step and the total number of steps. Using a progress bar or gauge graphic and/or hour glass cursor to indicate progress of retrieval of a page or other item. One bank labels sequential screens with ‘Stage n’ but fails to indicate which stages cause irrevocable commitment to be made. You commit at stage 3 but it doesn’t tell you this until Stage 7. Woe! In linear, stateless solutions (such as credit card payment for the contents of shopping basket) one may:

  • provide card number and expiry date;
  • display the total due and the payment date(s);
  • provide confirmation of payment;
  • if confirmed, commit the payment transaction and confirm its completion (perhaps by email as well).

Non-linear, stative solutions (such as filling in a household insurance proposal form) may use visual techniques such as check boxes, traffic lights (and othere ways to support colour with spatial metaphor) and so on.

Make sure that a sensible indicator of commitment/rollback is displayed prominently. Identify all the steps needed to achieve a goal and provide a visual indication of:

  • the current step;
  • the total number of steps;
  • the points at which transactions are committed.

Consider that a transaction may, at least in the mind of the user, span more than one visit to the site. In that case use Return visitor and Cache transactions. Remember to support colour with spatial metaphor. On workflow sites use pipeline interaction.

Ian Graham, Chris Simons

Acceptable wording

— you are providing context sensitive help or textual feedback. At the same time you want to follow standards, exploit closure, priming and interference, and have no modes. You know that aesthetics must be considered.

There are ways of phrasing that are unacceptable to some users. Different wordings suit different groups. We must determine how to make the wording of instructions suit both the context and the user.

Good dialogue design requires consistency, informative feedback and simple error handling. Frequent users should be able to take shortcuts. The system should exploit and indicate the phenomenon of closure. Undo/redo facilities are often useful but can be problematic in cases where some actions cannot be consistently undone or redone. Dialogues should be user driven and not modal, when possible. The designer should attempt to reduce the load placed on the working memory of the user — exploiting priming, transfer effects, closure and other devices. The use of words and language itself can be important. The table below illustrates this point.

Use of language in error messages Error messageEvaluation ABORT: error 451Bad I’m tremendously sorry but I have discovered that a file you want to use is already open (error number 451).Better but far too verbose Error number 451. File already open. This error normally occurs when you forgot to close the file at the end of a previous subroutine.Better but tedious Error number 451: File already open. Explain?:Good-ish Left as an exercise to the reader!PERFECT

Error messages should be consistent, friendly and constructive, informative, precise and use the users’ terminology. Multiple levels of message are often helpful. Hypertext help systems are a simple way to meet most of these requirements. Command languages should exhibit uniform abbreviation rules, be consistent and follow standards. Old counter-examples from DOS include multiple ways of abbreviating directory commands (CHDIR, CD, DIR, etc.). Also, in different operating systems from the same manufacturer it used to be common to find several words being used for the same purpose; e.g. CATALOG/DIRECTORY or HELP/ASSIST/AID.

Not allowing a user to live in Wales (a country) or Great Britain (an island), offering only UK (which is not a country but a – possibly short-lived – state!) Printing APPLICATION ABORTED on a gynaecological site. Insisting that Quakers describe themselves as Mr something.

Understand who the users are. Look for a universally inoffensive form of words. Then design user-specific pages if a general wording cannot be found. …. Always include an Other option in drop-down lists.

Make sure that you have also allowed for the halt and the lame and the stranger at the door.

N.B. This pattern is not to be confused with the antipattern: political correctness.

The halt and the lame and the stranger at the door

Users may have disabilities. They might not speak your language or understand your icons. Icons are often culturally specific.

No red on green screens, support colour with spatial metaphor (traffic lights), keyboard shortcuts, audio rendering…….. Related patterns: Words before icons and graphics, Use of colour

This pattern conceals a great deal of complexity. We envisage the possiblity of complete pattern languages for bulding inferfaces that are usable by disabled users. If your site is intended to be accessed widely then you should also consider its internationalization. Nielson (…) contains much useful material on these topics.


Companies may wish to extend into foreign markets or provide content for them. ASCII encoding militates against this. Cultures vary in more than just language.

How to make systems extensible in this context.

A tourist board in partnership with a motoring organization for a German speaking country wants to attract visitors from Jugoslavia, China, America and Great Britain. We need three new character sets. American gallons are smaller than British ones. Even though Britain is in Europe and nominally metricated, so that petrol (gasoline!) is sold in litres (liters!) car fascia computers compute fuel economy in mpg and speed limits are advertised in mph. Chinese people still think of distances in li (very approximately a mile). And so on.

Use Unicode instead of ASCII or EBCIDIC. Tag each page with the appriate encoding. Ensure that the the content databases and search engine can can foreign characters too. Make sure that error and pop-up reponses are not hard coded. Don’t forget to adjust to the local weights and measures systems, which are much more variable than one might think.

Related patterns:
The halt and the lame and the stranger at the door

This patterns is terminal within this language. However, there is scope for a complete pattern language covering this topic. Nielson ()…..

email us  or  telephone   UK: 01625 850 839    International: +44 1625 850 839