Usability and HTML Forms
December 10, 2001
|
Visitors don't enjoy filling out HTML forms. That makes good
usability doubly important. Here's a detailed look at forms for
e-commerce — individual form elements such as dropdown
boxes and radio buttons, plus validation and error messages.
|
Nobody likes forms. Most people associate them with taxes,
immigration, bills, hospitals, and other unpleasant aspects of
life. If you can avoid forms altogether on your Web site, so much
the better. Unfortunately they're sometimes essential, for
example when you need to collect credit card details for an
e-commerce transaction.
Even though your visitors know this kind of form is essential,
they still won't enjoy filling it in. So at least minimize their
annoyance by making your form easy to use. Good usability will
also help to improve your form completion rates.
In this article we'll look at forms for e-commerce, individual
form elements such as dropdown boxes and radio buttons, plus
validation and error messages.
Relationships are Important
Form-filling is a chore we suffer for the sake of reward. In the
case of a tax form, the reward is not being fined or going to
jail. In the case of an e-commerce transaction, the reward is
receiving the product we want to buy. On sites that enforce
visitor registration at the front page, the reward is getting at
the wonderful information inside the site.
These three examples demonstrate three different relationships
between users and forms. The tax form is obligatory. It's a pain
but has to be filled in. An e-commerce form is filled in by
choice in a shopping environment where there are alternatives. In
most cases the user can abandon the form and try a different
company. A registration form at an early stage on a site creates
the most fragile relationship. There are lots of alternatives and
the reward is unclear - who knows what's inside?
When creating your form, it's worth recognizing the relationship
you have with your user. In the typical case of an e-commerce
site, the relationship isn't strong. If your form gets messy or
asks too many personal questions, it can easily be abandoned.
Short and Dedicated
The less you ask for, the greater the chance of completion. In e-
commerce, a big temptation is to ask for customer profiling
information at the same time as credit card and identity
verification (security) information. This is risky. Your customer
may already know of an alternative site that doesn't ask for
profile information as part of the transaction. They may give up
with you and go back there.
Advanced users sometimes create the same transaction in multiple
sites, mainly to check on shipping costs. They then carry one
transaction through and abandon the rest. In this case, your
forms will be compared head-to-head with your competitors. If
you're asking for lots of profile information, you're less likely
to win the contest.
If possible, try to separate profiling forms from transaction
forms. Shift the profiling stuff to the end, and again keep it
short. You may need to provide an incentive to get your profile
form filled in. This is more an issue of marketing than
usability.
There are sites that ask for profiling information after the
transaction has been completed but before an order confirmation
number is given. There's a risk here of the user feeling they've
parted with their money and now they're being blackmailed. The
risk is greatly reduced if it's clear that all the fields in the
profiling form are optional.
No Duplication
Don't ask for the same information twice. If you got the name and
address of the customer on page one, automatically fill it in on
the shipping details page and the credit card details page,
giving the customer the clear option of overwriting it if that's
what they want to do.
In usability terms, this is slightly superior to saying,
"The name and address you entered previously will be used,
please fill in the new details below if your shipping/card
address details are different".
The reason is that users are busy people often entering details
in a hurry. It's highly likely they won't read your instructions
properly, they'll just fill in all the fields they see. Companies
using the "alternative details" approach often find that the new
details are exactly the same as the original ones. This clearly
wastes everybody's time and isn't good usability.
There may be special circumstances when the "alternative details"
approach is the right one, for example if the product you are
offering is nearly always bought as a gift to be shipped to a
third party.
You can judge your own usability success by how many forms are
badly filled in. If you forever receive alternative address
details that are the same as the originals, you've clearly got a
usability problem and your form needs to be redesigned.
Optional and Required Fields - Page 2
|
