Completing a web form online takes time and effort. This effort can be minimised by structuring the form well, and giving it a flow which will make it easier for customers.
Indeed, every action a user takes within checkout carries a cost. This is sometimes referred to as an ‘interaction cost’.
Every interaction your user has with your checkout carries a cost. This can be physical, in terms of a click or keypress, or mental, where a user has to remember a piece of information, or a cost to you, in terms of storing the information given. The goal in your checkout design should be to minimise the ‘Interaction Cost’ as much as possible.
ClickZ and fospha will be hosting a webinar on this topic, How to optimize your forms for maximum success, on 15th November. We also have a free white paper to download: A Marketer’s Guide to Form Optimisation.
Here’s a selection of tips to improve the structure and process of your checkout…
1. Design for the most common scenarios first
Most transactions will be straightforward, with the person placing the order being the same person it’s shipped to. They’re using their card, and the billing and shipping addresses are the same.
The focus should be to make this process as easy as possible as a first priority, designing overrides for edge cases later.
2. Use data to decide on structure
Analytics will help you to prioritise form elements. If you’re redesigning an existing checkout, then you should have data from this.
For example, you could prioritise the most popular payment options or, if customers tend to order infrequently or seasonally, then it can be a good option to push guest checkout and reduce the prominence of the login / sign up option.
3. Ask one question per page or section
When designing your checkout form, it’s better to start from a multi-page design first.
Each page should ask a single question of the user. This doesn’t mean one field per page, but the topic of the question. For example, Lowe’s has a section for address details, one for shipping options, one for payment:
Asking one question per page helps the user understand what they’re being asked, helps them focus, is easier to navigate on a mobile device, and assists with validation and error recovery.
4. Plan for edge cases
This is any scenario that happens infrequently. It could be a stock out event, or requirement for the user to change shipping method based on delivery address.
Edge cases often require the user to go back one or more pages in the checkout. You should be analysing the percentage and volume of these cases within your analytics platform, as changes in audience can often require changes in your checkout.
5. Show form progression clearly
Progress indication is vital within a checkout. It informs the user which tasks they have completed and what is left to do.
Within a single-page checkout, progression can be indicated by scroll-length, as well as descriptive and visible section headings.
In a multi-page checkout, this can be indicated by a progress bar, showing the number of pages, with brief headings indicating content.
6. Indicate field length
Correct field length provides a visual clue to the user regarding the amount of information required. For example, showing a shortened postcode field, or CV2 field, tells the user than only a handful or characters or numbers are needed.
7. Use appropriate field types
Field type indicators are hints to the browser of the type of information that is being required. For example, you can prompt mobile browsers to show a numeric keyboard for a card number, rather than the standard alphanumeric keyboard.
Doing so lowers the interaction cost for the user to switch from one keyboard type to another.
8. Provide field hints to help users
Sometimes, it is necessary to prompt the user as to what information a field is asking for, for example, a strong password or a CV2 number.
Field hints can take the form of an inline text placeholder, an annotation, or in some cases, a graphic.
9. Use auto-parsing and formatting
Some fields, such as phone number and credit card, can be auto formatted to help the user check if they have entered the correct information.
For example, you can enter a space or dash after each set of four numbers entered in the credit card number field of your payment form.
10. Make sure you’re tracking form errors
Ultimately, once your checkout is launched, you will wish to analyse its performance, and optimise it appropriately.
It’s important to note that before you can run form analysis tools on your checkout, it must be coded correctly.
You can sign up for the form optimization webinar here. It takes place on 15th November.