abtestingv0-2

11 ways to use A/B testing to improve the UX of online forms

How many times have you filled out an online form, only to be frustrated by the experience? I’m assuming often, as I’ve frequently found basic UX errors in online forms that increase user friction and exit rates.

This blog looks at 11 things you should be testing on your online forms to improve completion rates and customer experience. Please note I’m writing this from experience of form optimisation on a wide range of B2B and B2C ecommerce websites, where the data has done the talking, it’s not just a heuristic evaluation.

Before testing, ensure your web analytics is configured correctly to track and measure form interactions. A few quick pointers:

  • Are you tracking form field errors?
  • Are you measuring form completion rates (based on each step of the form)?
  • Are you using segmentation to explore user type, device and browser variations?
  • Do you use a form analysis tool like Formissimo?

Let’s jump into your testing opportunities.

1. Form length and structure

How many fields are optimal to balance form completion rates with data capture? Ecommerce and CRM teams want data to help with customer analysis and marketing campaigns but the more data you try and capture via form, typically the greater the drop-off.  Short is sweet for online forms, but you should test the trade-off of adding more fields to find your sweet spot. I’ve experienced some brands with customers who are more willing to share data than others, so it’s dangerous to make hard and fast rules.

You can also explore different form structures, for example a simple one-column layout vs. using two-columns on desktop to separate different types of data capture. You can also test displaying all elements of the form on page load, or keeping elements hidden until they’re required.

What you can test:

  • Increasing the number of required fields e.g. capturing phone number as part of the registration form
  • Increasing the number of optional fields e.g. asking for date of birth and other profile information
  • Show the entire form vs. show only the first section, then sequentially reveal other sections as the user progresses.

AO.com, often heralded for its ecommerce UX prowess, previously used a one-page checkout where form sections are enabled based on the user’s progress. It now has a multi-step checkout with progress bar, so it has clearly been testing checkout form structure. It does use sequencing to reveal additional data capture fields based on user selections, for example if you select Home Delivery, the address look-up fields then appear:

abt1
abt2

 

2. Label alignment

I’ve read several studies on how label alignment impacts form completion. I think there’s a risk of over-complicating this, hence the value of A/B testing. Current good practice indicates that form labels should be placed above the field and left aligned, rather than to the side or within the field. In-field labeling has been popular on mobile because it reduces the spacing to ensure more fields are visible on page load, however the risk is that once the user has started typing in a field, the label disappears so the contextual prompt disappears.

What you can test:

  • Place the label above or to the side of the field
  • Place the label inside the field and remove it when the user selects the field
  • Different label formats g. change the font, font size, colour, style (bold vs. italic)

3. Error messaging

Error messaging provides contextual prompts to users to help them correct field errors. These messages need to be user-friendly and provide clear instructions of what the customer needs to do next.

Test different copy styles and message location, for example:

  • Friendly vs. instructional g. “We required a valid UK mobile number e.g. 07794 556 789” vs. “Please enter a valid UK mobile phone number only”
  • Error message showing above, below or to the right of the form field
  • Error message displayed in classic red vs. alternative colour
  • Different symbols to indicate an error g. cross vs. exclamation mark
abt3

It’s critical to get error messaging right for mobile user journeys because attention spans are shorter and confusing forms spike exit rates. Below is an example of a positive UX design where the error message is in-line and useful:

abt4

However, some sites make the user experience disjointed and unnecessarily complicated when an error occurs. The example below from Dorset Coastal Cottages shows what happens when the payment page form is submitted with an error:

abt5

 

4. Field validation

The concept of positive reinforcement has become popular in ecommerce UX design. This means using a visual prompt to confirm to the user that they have successfully completed each field, as they complete it. These are normally subtle touches such as a green tick, or changing the field border to green.

abt6

I’ve seen validation have a positive impact on form completion, and in usability studies people have mentioned that it reassures them as they fill out the form.

What you can test:

  • Style of validation g. border vs. tick vs. shading vs. multiple
  • Colour of validation
  • Using a symbol vs. copy g. tick vs. ‘Complete’
  • Only letting users select the next field if the previous one has been successfully completed.

 

5. 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 4 numbers entered in the Credit Card number field of your payment form.

I can vouch for this from personal experience. When entering a card number online, it’s easy to miss-type (clumsy fingers and all that jazz on a mobile device). With a 16-digit card number, it’s hard to spot a single character mistake as the digits tend to blur together. A site that formats the number into 4-digit hyphen separated blocks improves the speed of sense checking the digits.

What you can test:

  • Formatted vs. unformatted field
  • Different styles of formatting g. debit card number hyphen separated vs. separate boxes of 4 digits

 

6. Progress bar

This is most relevant to ecommerce checkouts but also applies to user journeys like signing up for an account, loyalty program or personal shopper.

A progress bar sets expectations for the length of the form and where the user is in the flow. A good progress indicator uses visual state changes as the user flows between stages, and remembers where the user is, even if they exit the site and then come back.

abt7

What you can test:

  • Location of the progress bar – at the top of the page vs. vertically stacked to the side
  • As a pinned header if the user scrolls down the page
  • As a numbered sequence vs. simple text labels
  • Completed steps with a different visual element than incomplete steps g. green tick

7. Address lookup and validation

Address lookup can significantly improve address accuracy and form completion for ecommerce checkouts. I’ve used postcode based lookup and predictive search tools on many ecommerce sites, and have found predictive (with a manual fall back) can often deliver the best form completion rate.

What you can test:

  • Using predictive address search vs. standard postcode lookup
  • Displaying the full address form fields vs. only showing the lookup field and then revealing the other fields when an address is matched
  • Asking users to select their country first, so that different address fields can be shown based on the selection
  • Showing the manual address entry options by default vs. revealing it only if the address look-up finds no match.

Hotel Chocolat uses PCA Predict to provide address lookup in the checkout, but reveals the entire address form and then as the user types in the Address Line 1, matching addresses are revealed. Initial results indicated a 19% improvement to sales conversion rates.

abt8

 

8. Field length counter

This is often missed. When you have a character limit for a field, such as gift message, you need to clearly communicate the limit. The extra mile is providing users with a count down so that as they type, you tell them how many characters they have left. When they reach a threshold (e.g. 10 left) the number changes colour to warn them. This won’t suddenly skyrocket your conversion rate but it can have marginal gains, and it’s a simple test to implement.

What you can test

  • Showing a character limit message only vs. message + counter
  • Changing the colour of the counter when a threshold is reached
  • Displaying a warning message when the user is running out of space.

 

9. Field type

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.

It’s interesting to test different field types to see which ones users respond to the best. Please note some field types shouldn’t ever be changed! For example, a phone number should always be a free text box that accepts only numbers.

What you can test:

  • Pick list vs. radio buttons for list selection
  • Test based vs. visual list g. for country selection, show A-Z labels vs. A-Z with country flag thumbnail
  • Free text field vs. pre-selected list.

 

10. Tool tips

You should use contextually relevant prompts to inform users what data is required. For example, tell users what the minimum requirements for a password are and use a strength indicator to inform them of security. Field hints can take the form of an inline text placeholder, an annotation, or in some cases a graphic (this is often the case when showing people where to find the security code for a payment card).

What you can test:

  • Showing the full tool tip vs. displaying a ‘more info’ icon that expands on mouse-over/press
  • Different depth of information in the tool tip g. concise essentials vs. expanded info

 

11. Section delineation

Checkout forms typically have multiple sections, and multiple data entry points within each section. For example, the shipping section requires you to select a shipping method and option, then specify your shipping address (either select from a pre-defined list or enter a new address).

Each data entry point adds cognitive effort, so forms must be designed to be visually clear and easy to follow. Section delineation help, separating data entry points into logical groups with clear contextually relevant headings. The example below from Lovehoney shows this in practice.

abt9

What you can test:

  • Different form layouts to group form fields g. one-column vs. two-column on desktop
  • Different font for headings
  • Different font colour for headings
  • Displaying headings as a different visual element g. boxed
  • Each group numbered to make it clear there is a sequence.

Comments and questions

So what tests have you run to improve online forms?

What tips can you share and which ecommerce sites do you think provide a positive UX for forms?

Please drop by and share your comments, questions and experience. If there’s anything in this blog that you’d like to discuss in more detail, just let me know.