Forms
Steps for designing usable forms
Caroline Jarrett (www.formsthatwork.com) has devised a simple four-step process to help create user-friendly web forms.
Purpose of the form
Forms are used mainly in two areas of the web site:
- Navigation – to aid users to navigate the site. It is best practice to try to avoid drop-down boxes for navigation, because they hide the menu options from the user. Lists of hyperlinks are easier to scan, so use them wherever possible.
- Information gathering – forms are the normal method for gathering information from your users.
Narrow down the choice of elements in the form
There are four elements normally available for a form:
- drop-down-box
- radio-buttons
- check-boxes
- type-in-box
To narrow down the choice of elements for your form, you should think about its use:
Is it more natural for the user to type the answer rather than to select it?
For information that is well known to the user, like name or address: use type-in-box.
Are the answers easily mis-typed?
If the user can easily mis-type the information, they should not be given a
typing option: use radio-buttons, check-boxes or drop-down box.
Does the user need to review the options to understand the question?
If the list of options is not obvious to the user, they should all be listed
along with the question: use radio-buttons or check-boxes.
How many options are there?
The element depends on the number of options available: use drop-down-box (for
more than four options) and check boxes or radio buttons (for fewer than
four options).
Is the user allowed to select more than one option?
If more than one response is acceptable: use check-boxes or radio-buttons with
an additional ‘any’ option.
Are the options visually distinctive?
If options look similar (for example, numbers 01 – 10), mistakes can
be made: use radio-buttons, check-boxes or drop-down-box if the options are
visually distinctive, or type-in-box if the options look alike.
You can see an example of this technique by downloading the PDF document from http://www.formsthatwork.com/ftp/dropdown.pdf.
Review the impact of the different elements on the form
After you have decided the most suitable elements for your form, look at
how they fit together on the form itself. Caroline Jarrett suggests that
you should:
- avoid too many different form elements
- keep the options short and easily readable
- choose a sensible order for the options
Check that your users can use the form
You should make sure that your users can actually use the form. Best practice
is to use straightforward HTML forms (the basic language of the Internet).
How to handle errors
Guidelines for user-friendly error messages:
- Tell the user that something has gone wrong.
- Use plain language.
- Be polite.
- Provide a precise description of what the user did wrong.
- Tell them how to fix the problem.
- Make sure the error message is visible and accessible.
- Do not delete the user’s work.
Reference: Jakob Nielsen’s Alertbox – Error message guidelines (http://www.useit.com/alertbox/20010624.html)
Custom 404 error pages
One of the worst examples of a poor error message is the default ‘404 – page
not found’ error. It is easy to replace this with a message that:
- apologises for and explains the error
- offers some useful information for fixing the error (for example, checking the spelling)
- provides a list of useful links to the popular pages of your web site
- if possible, provides a search facility
Reference: Jakob Nielsens’ Alertbox – Improving the dreaded 404 error message (http://www.useit.com/alertbox/404_improvement.html)
