A successful checkout form is not only one that gets filled out by many users, but also one that returns correct and reliable user information to you. This can only happen if you design your checkout forms for quality input to prevent garbage output. There are three form field input techniques you should use, so that you’ll never get wrong user information again.
Automate Your Form Fields
Automating the user’s form input allows them to fill out less fields and prevents mistakes. You can’t automate every field on your checkout form, but there are some you can automate so that you get the right output every time with minimal effort from the user.
Get City & State from Zipcode
On typical checkout forms, users have to type in their city name and select their state from a select menu. Making them fill out these fields instead of automating them increases their chance of making mistakes and giving you garbage output. It’s easy to mistype city names and there is a long list of states in a select menu that users have to choose from. You can automate the city and state field by asking users to enter their ZIP code first, then allow the Ziptastic API to input the right city and state into the fields. Here’s a tutorial on how to apply the API to your form: Autofill City & State from Zip Code with Ziptastic.
User types in zipcode to automate city and state fields
Get Card Type from Credit Card Number
It’s easy for a user with multiple credit cards to confuse one credit card with another when making a purchase. That’s why you should avoid asking users the type of credit card they’re using on your form and automate it for them. A jQuery credit card validator can detect the credit card type by reading the numerical pattern of the user’s credit card number. This works because each credit card company has a unique credit card number pattern. When users enter their credit card number, the type of credit card will highlight so that they don’t have to worry about it.
User types in credit card number, type of credit card is detected
Get Billing Address from Shipping Address
Users have to enter their shipping and billing address on checkout forms. But it’s inconvenient to make them enter it twice if they’re both the same. Allow users to automate their billing address by offering a checkbox that copies the shipping address into the billing section. Users can make a lot of mistakes if they have to fill out both the shipping and billing address fields. By allowing them to automate their information, they’re less likely to make mistakes, and you’re less like to get garbage output. Here’s a tutorial on how to do it: How to Use Javascript to Copy Text From One Field to Another
Checkbox copies & pastes shipping input to billing fields
Constrain Form Field Input
Another user interface technique you can use to prevent garbage output are form field constraints. Users can mistype their information. Having constraints minimizes the number of mistakes users can make.
Numbers Only from Phone & ZIP Code Fields
There are certain fields on a checkout form that should only contain a specific amount of numbers. Phone and ZIP code fields are two of them. Constraining these fields to only allow a limited amount of numbers and not letters prevents users from accidentally typing letters and excess numbers in the field.
Error is displayed when letters are in phone number field
Break Name, Phone Number & Address Fields Apart
Sometimes users could leave out important information if your fields aren’t specific enough. This often happens with the name, phone number and address fields. If you want the user’s full name, it’s important that you break the “name” field up into first and last name. A field labeled “name” can lead to users only putting their first name. Also, make sure to allow more characters for the last name field because last names tend to get long.
Name field is broken into first and last name
It’s important to make your phone number field specific too. Users need to know what type of phone number (ie. primary, mobile, home, work) you’re looking for. You should also separate the area code field from the phone number so that users won’t make the mistake of leaving out the area code.
Phone number field is broken into area code and primary phone
Users could also leave out important information in address fields if they are not specific. Instead of only having a field that says “address”, break the address field up into street address and apt./bldg./suite number. This prevents users from accidentally leaving out their apartment, building or suite number when they give you their address.
Address field is broken into street address and apt/suite/bldg
Use Select Menus for Known Input
Breaking fields out to more specific fields is a good way to constrain the user’s information. But another constraint is to use select menus for fields with known information. Credit card expiration dates have a set number of months and years users can choose from. By using select menus, you prevent users from typing in the numbers and making a mistake.
Select menus are used when range of possible input is known
Give a Preview and Confirmation
The last technique to prevent garbage output is to give users a preview and confirmation of their information before they submit it. This is important for checkout forms because if the user’s credit card information is incorrect you won’t get the sale, and if their shipping address is incorrect they won’t get their order. You want users to preview and confirm their information before they complete any transaction.
Preview and confirmation allows users to edit before placing order
Prevent Garbage Input to Prevent Garbage Output
The best way to prevent garbage output is to prevent garbage input. By applying form field automation, constraints and preview and confirmation, you greatly decrease the chance of users submitting incorrect and unreliable information to you. User experience is more than making your interface visually appealing. It’s the design decisions you make and the interface techniques you use to prevent user errors and mistakes from happening that make your user interface a great user experience.