Splitting a Form into Different Pages
July 10, 2002
If you have a long form, the next task is to split
it up into sections. As with any web page, a sighted user will be able to
guess how long a form is by the length of the side bar
with which they scroll. If the user gets the impression that the form is very
long, then they may be less likely to complete it. If your form requires a
lot of information from the user, it's a good idea to split it up into separate
pages.
A few smaller forms are less off-putting than
one long form.
Keeping related information on one page makes it easier for the user
to digest.
A good guide for how much
of the form should go on each page is around a screenful (at 800 x 600 resolution)
– this enables the user to see how much information is required from them
at a glance.
When you split a form into separate pages, you should indicate
to the user how far through the form they are, as shown here:
In our Pizza This application developed for this book, we provide an indication of where the user
is in the form in the top right-hand corner of the form, where it says Step
2 of 6. You can repeat this information next to a button that the user
presses to navigate to the next page – which will usually be at the bottom
right of the page.
An alternative is to use graphics or
text to indicate how far the user is along the form process, as in ch02_eg6.htm. Here, there's a block of text that relates to each step of the form.
All of these are displayed at once, and the one that the user is on is highlighted:
If you choose this option, it's a good idea to use the labels
for information only, not as links – if you do use them as links, remember
that you must maintain the user's state (something we discuss in Chapters
4 and 5).
When
providing multiple pages of a form, making users visit them in order helps
ensure that they fill in all the required sections. Unordered links are only
really suitable in a form when you don't require the user to fill in all or
most of the form.
Splitting up a form into separate pages also helps with
validation and error handling, as the incorrect answers will be clearer to
the user. We look at validation in Chapter 6. When writing error-handling code,
you must make sure that your error messages are friendly, not too curt, and,
where possible, clearly state what the user might have done wrong and how
to fix it. If you have strict validation, you should also end up with lots
of error messages – not just a few. If you only have a few, go back and check
that they are detailed enough to provide the user with an idea of what they
have done wrong .
You should also make sure that the user has all the required
information on that page. You don't want users going back to a previous page
to check on an answer – if your logs/testing show this happening, put the
relevant information on that page. For example, if you ask whether the credit
card billing address for a product on an e-commerce site is different from
the delivery address, display the delivery address so that the user knows
which address they entered .
Numbering Questions
If you're creating a formal
form containing a lot of questions, such
as an application form or an online test, then you should number the questions
so that users know where questions start and end. This can also help to indicate
where the user should jump to if a section of the form is not relevant
to them:
Grouping Controls – Summary
You can use the <fieldset> and <legend> elements
to group together sections of a form.
Labels can increase the usability of a form.
A few smaller forms are less off-putting than
one long form, but be sure to tell the user where they are in the form by
using page and/or question numbers.
Keeping related information on one page makes forms more user-friendly
and helps with validation.
Using Labels
Usable Forms for the Web
Labeling Controls
|
