Forms are a fact of life in
ecommerce, whether you’re gathering the information you need to complete a
sale, providing for the creation of an account or surveying your customers to
find ways to improve your service.
In other words, regardless of
what you do, your users will encounter forms on your site of one type or
another. With this in mind, it behooves you to make them as user friendly as
possible.
These ecommerce forms best
practices will help you do just that.
Simplify, Simplify, Simplify
The most important thing you
can do in this regard is to minimize the number of keystrokes required of your
patrons. According to the results of a study conducted by the Baymard Institute,
a lengthy checkout process is one of the
leading causes of abandoned shopping carts.
And yes, we get it, the more
information you have the more you can do to personalize your site’s shopping
experience. Studies have shown this is a good thing too. However, rather than
asking for all of the information up front, let the shopper complete their
transaction, then ask if they’d like to tell you more about themselves.
Provide Optional Fields
Even as you minimize the amount
of information required to complete a form, you can still provide users the
option of providing more data as they go along. Just make sure they know which
fields are required and which are optional.
Again, if you’re deliberating
the nature of your forms as you’re considering something like how to sell ebooks on your own website,
less will always be more. But if you must go for even more, be certain your
optional fields are specifically labeled “optional” to avoid confusing your
respondents.
Use Size as an Indicator
When a user looks at a field its
size should give them an idea of what’s expected of them. For example, an
address field should be longer than a phone number field. You can also provide
a single field for data that requires formatting. In other words, rather than
providing three boxes for a phone number, use one and have the algorithm format
the number automatically. This can also be done with dates of birth and
addresses.
Offer Auto Completion
Where duplicate information
might be required, program the form to fill it in everywhere else it might be
needed after the initial input. If you’re asking for an address, request only the
street name, number and ZIP code. The form should then designate the city based
upon the ZIP code. This also saves keystrokes.
Use a Show Password Option
Typing errors will cause
failed log-ins. Giving the user the option to see the password as they type it (of afterwards) lets them
isolate an error more quickly and alleviates the potential for frustration.
Similarly, when users are creating accounts, rather have them type a password
twice, give them the option of viewing the password they created. To increase
security of this feature, you can provide an icon or a checkbox to unmask the
password for confirmation. This offers the user an opportunity to double-check
it before sending.
Employ Keyboard Matching for Mobile Devices
If a field requires numbers,
have your keyboard automatically switch to the phone pad rather than forcing
users to switch the keyboard to reveal numbers and associated symbols. If a
capital letter is required, have the form correct it automatically if tusers
enter a lowercase letter.
Explain Data Requests
If you need to have personally
identifiable information, explain why when the user hovers over the field. Keep
the explanation to a maximum of 100 characters to ensure they read it.
Give Them a Status Indication
People are more likely to be
patient with a form when they know how far along they are in the completion
process. Progressing a status bar across the screen as they move through the
form lets them know how close they are to completing the form. Give them a
success indication when they’ve satisfied the requirements and their data has
been transmitted,
But wait, there’s more. As in-depth
as this might seem, we’ve only scratched the surface of ecommerce forms best
practices. If you’re interested in learning more, SmashingMagazine has one of the most comprehensive primers on the
subject we’ve seen. Giving it some time will be worthwhile.
0 Comments