10 Quick wins to increase your web form conversion rate: part 1

This post is the first of a two part series discussing the quick wins – and pitfalls – that could make a dramatic difference to your form completion rates and your customers’ experience.

Form usability can be a tricky area of web design. There are many examples of websites investing vast amounts of time and money – almost in an F1 fashion – just to make minor tweaks that fine-tune their forms for the best customer experience. On the other hand, there are still plenty of websites that could do with going back to basics and doing some good, old fashioned research. Insight methods such as usability testing, heat mapping, surveys and form analytics will highlight pain points in web forms. Getting started or knowing where to start can be a difficult task. In the next section, we’ll go through some basic but important areas of usability that can dramatically increase conversion rates. As ever, with any changes, be sure to test them!

Have you ever found yourself filling in an online form, only to be faced with a never-ending set of questions?  As a user, I’m always hoping that the end result will justify the hard work. As an optimizer, I’m always looking to gather the least information required to move the user through the form. Even a small reduction in questions can drive a dramatic increase in completion rates. Before you think about removing any questions you’ll need to go through a few simple, but important tasks:

• Step 1: Go through your question set and note each one down. I find using Google sheets or Excel the easiest place to start.
• Step 2: You’ll need to note what type of form is used to capture the answer e.g. dropdown / free text / radio button.
• Step 3: Add the possible answers for each question (or N/A if the question is open-ended).
• Step 4: Mark each question to show if it is mandatory.

An example of how you could layout your question set analysis. In a previous life I worked in the Insurance industry – the first time I carried out this task, I noted 67 questions (poor customers)!

Next up, time to review the questions! At this point if you’re not in complete control of the question set, you may need to discuss the impact of removing them with the relevant members of staff.

Start by challenging each question with the following:

• Is this question essential or just “nice to have”?
• Is this question still relevant, or is it legacy?
• For any question that you’ve not marked as “mandatory” – do you still need it?
• Could you use an API to look up that information rather than asking it?

Like the mobile first approach, every question on your site should serve an essential purpose. If it’s not useful, remove it!

Comparison sites often offer great examples for how to shorten a question set. They use APIs such as the DVLA vehicle lookup to find information such as make/model/seats/transmission etc. They have even experimented with an API which reports back an average vehicle price, to reduce the deliberation which causes customer friction.

Screenshots showing how MSM use a vehicle lookup API to reduce the amount of questions required.

Removing questions will reduce unnecessary user interactions. Why is the number of user interactions important? The more times you ask your users to interact with or think about something, the more cognitive and motor effort is required. As Steve Krug quite eloquently puts it… “Don’t make me think”!

In the same excel sheet it is worth noting how many interactions it takes to answer your question set. For example, a simple drop down box might need up to 3 interactions:

• Initial click on the drop down
• A scroll of the mouse wheel
• Click to choose an option

Whilst this sounds like a tedious task, it’s useful to know how many interactions are needed to complete your registration form, not just the number of questions you’ve asked.

Drop downs vs radio buttons

Are you using dropdown menus where you could be using radio buttons?

Replacing dropdowns which only have a few options (as a general rule, anything under 6 answers) with radio buttons provides a quick win. Not only do radio buttons offer fewer interactions, but they allow users see the answer before they interact with the initial section, speeding up the question and answer process. This is also a big benefit on mobile, where users find dropdowns much harder to interact with. Yes, this will create longer pages, but thanks to social media and mobile adoption, users have learnt how to scroll proficiently.

Example showing how a drop down could be turned into a radio button to reduce user interactions.

Mobile

Is there a way you can help the user move through the journey? By automatically scrolling the browser/app window to the next section, fewer interactions from the user are needed. This is something Virgin America do to help users navigate smoothly through the process:

Virgin America’s use of an auto-scrolling responsive site makes using a mobile significantly easier.

Get creative, don’t make users think.

Example

During usability testing, we tasked our users to get car insurance quotes from comparison sites and compared their experiences with moneysupermarket.com with competitors. Whilst comparethemarket asks a similar number of questions to competitors, users not only completed forms faster, but they found it easier to use simply because it takes fewer interactions to get a quote.

Comparethemarket.com uses big button style radio buttons to remove the need of drop down boxes.

There’s a time and a place for calendars i.e. when it’s important for the user to know what day in the week a particular date falls on, such as when booking a holiday. Anywhere else and it’s a needless calendar, and my personal pet hate!

Here are a number of common issues:

• Generally stock calendars offer a very poor affordance
• It’s not clear whether to choose the day or year first
• It’s not clear that you need to choose a year. I’ve watched helplessly as users select a day but then ignore the year section. Thinking they’ve done what’s required they click onto the main page to hide the calendar, to find out that the field is not completed. This just completely confuses users, as they don’t understand what went wrong. At this point, they’re stuck in an endless loop trying to figure out how to complete your form.
• After choosing a date, if you want to change the year (let’s say your user made a mistake), your user will need to not only change the year, but also then reselect the day again.

Two common poor examples of calendars used by websites to capture a user’s Date of Birth.

At this stage, there are two options:

1. Either completely remove the calendar and keep a text field/drop down box (this makes more sense for a DOB field, for example).
2. Spend time ensuring the calendar is both clear and user-friendly. I would highly recommend carrying out user testing to make this as friction-free as possible.

This is a nice simple one! How readable are the questions and answers on your site?

Are you using a big enough point size and line spacing for your target audience? What is your primary persona’s age – has this been taken into consideration? A great example is Saga (over 50s). Their customers may require a larger font size to that of users who visit www.onedirectionmusic.com! The recommended size will vary depending on your brands chosen font. Using Arial as a baseline, the question titles should be 16px with the question labels falling to 14px.

Standard font size for form question titles and their labels. Note how the titles are slightly bigger than the labels. This provides an easy way of identifying the hierarchy.

When users fill out forms their eyes will flicker between the question and the answer. This will be more pronounced on sites where it’s imperative that the user enters the correct information – such as a mortgage or job application. The further the question is from the answer, the more distance the eye needs to cover, which translates into more effort for the user. Conversely, the closer the question and answer, the less effort.

Placing the question title above the answer is the best way of reducing the distance the eye needs to travel, thus reducing effort.

A number of different examples of ways websites layout their forms. The question title above the question label has proven in countless eye tracking tests to reduce the time it takes for the eye to move between title and label.

I’m sure that we’ve all had this common experience. You encounter a long question set (with dread I might add); complete it, only to find that on the form submission you’ve made a number of errors… Gah, time to scroll through and find what you’ve done wrong!

Why wait for the form submission to notify users of an error? Rather than wait for the user to reach the end of the form, highlight the error as soon as possible. This will keep the user focused on what they were doing and keep de-motivation to a minimum.

Lastly, make sure the error-handling wording is helpful, rather than ambiguous. “Please select a correct value” or “Please tell us your name”  is more helpful than “answer is invalid” or “field cannot be empty”, because it addresses the user, not the database validation.

For part 2, click here.