Seven tips for optimising your ecommerce checkout forms

In a fast-paced society where consumers want things yesterday, there are several factors within the online checkout experience that can cause frustration for users.

Below, we’ve listed a few bugbears surrounding forms, and some ways you can combat these problems to help shoppers sail through your online forms.

1. Explain why you want the information

People often hesitate when asked to provide their personal details, partly because they are afraid this will land them on lots of mailing lists.

By explaining why you need their details, you will increase trust levels and let them understand that they will benefit from giving you their info.

For example, if you’re asking for their phone number/email address so that you can send them updates about their delivery, let them know.

If you want their date of birth so you can send them a free gift on their special day, then tell them and you’re less likely to lose them and their order.

Here an example from ASOS:

asos dob

2. Launch the right keyboard

When optimising forms for mobile devices, ensure you are specifying the correct attributes in the HTML code to launch the best keyboard.

For example, if the field is tagged correctly, a numeric keyboard will appear for completing the phone number field, allowing users to input their number more quickly and easily.

It is also a good idea to stop the mobile browser from trying to autocorrect words, which is particularly useful for customer names and street names that are not recognised as correct words.

right keyboard

3. Use search engine-style auto-suggest to save typing addresses

Almost half of the top 100 grossing ecommerce sites use some form of address validation to check that customer addresses are accurate, but selecting the right verification service can also improve your user experience by reducing the time it takes to fill out address fields.

Smart address validation tools allow the user to search any part of an address, predicting the address users are searching for and suggesting accurate matches – even if errors are entered.

schuh address

4. Make it the right size

Smaller screen sizes and touchscreen keyboards on mobile devices can result in customers making mistakes when entering their details or accidentally clicking links that take them away from the checkout.

It is important to adapt to the customer’s device, making the checkout experience for mobile users just as good as it is for desktop users.

Automatically resizing form fields and buttons for mobile screen sizes will create a better experience for mobile customers.

5. Let customers see their progress

If your checkout is spread over more than one page, adding a progress bar to the top of your forms is a great way of letting customers know how far along the process they are so they can see how much is left to go.

It is also a good way of telling them what is coming up next so that they can be prepared with their payment details or gift voucher.

crate progress bar

6. Use top-aligned labels and fields

Positioning labels above form fields is more effective than placing them alongside the fields as they are easier to view on mobile devices, removing the need to scroll around or zoom in.

Make sure that fields are correctly labelled so that users are able to identify what type of information needs to be entered, you might need to give them an example if you need it in a specific format, eg: DD/MM/YY.

As a rule, we would also recommend against using labels inside inputs as this is lost as soon as the user begins typing.

forms and labels

7. Don’t ask for the same information twice

Asking customers to input an email or password twice in an attempt to minimise typing errors may actually result in more.

This is because customers are often not able to see what they have typed due to sensitive information being hidden. They then have to type twice as much and may end up copying and pasting mistakes.

Instead, as customers to enter their details just once, and include an option to unmask their password. Implementing email validation will also help users to understand when they have entered an invalid email address, bringing up a warning message and giving them the opportunity to correct it.

Email and mobile phone validation help the user to identify when they have entered their email address or mobile number incorrectly, giving them the possibility to correct it before it’s too late. Anticipating these errors means you’ll have cleaner data and fewer delivery issues too.

Keeping the consumer in mind when creating your forms is key as it will help you to deliver a better online experience, and prevent form abandonment – keeping them coming back time and time again.

PCA Predict contributed to our new Checkout Best Practice Guide. This, as well as guides on mobile commerce, customer experience, and social customer service, are all available under the ClickZ Intelligence banner. 

Related reading

Mobile Payment
site search hp
Space Shuttle Launch
kenneth_ning_emarsys_featured-image
<