How to improve the usability (and conversion rate) of your forms

11 minutes read

Nobody enjoys filling out forms (unless they have some sort of a form filling fetish, in which case they clearly need help) but at least you can minimise the pain for your users by ensuring that your forms are as easy to use and as well designed as possible. In this article I outline some hints, tips and best practice guidelines for improving the usability (and resulting conversion rate) of your forms.

Form design

Keep forms as short and simple as possible

A good rule of thumb when it comes to form design is to try to keep your forms as short and simple as possible, but no simpler. Try to remove any unnecessary questions and try to simplify complex questions as much as possible. A good way to do this is to run through the form and ask yourself, “Do we really need to capture this information?”. If the answer is ‘probably not’ then resolve to remove that item from the form.

Don’t make users think any more than they have to

Ask me the month and year I bought my last car and I could probably tell you. Ask me the exact date and I wouldn’t have a clue. Try not to make users think any more than they have to when filling out your form by ensuring that questions are clear, unambiguous and as easy to answer as possible (unless of course you’re designing a quiz). For each step of the form ask yourself “Is it clear what users need to do and will they be able to do it?”. If the answer is no then you’ll need to change that part of the form.

Make forms as standard as possible

Your users will have filled out countless forms prior to yours so it makes sense to try to make your form as standard as possible. This means using existing form design patterns, such as a recognised address format, postcode look up and error reporting (checkout my design patterns search for an easy way to find form design patterns). Designing a form that is unlike any other might make for a very interesting design but is likely to leave your users scratching their heads.

Let users know what to expect

For many forms it’s important to let users know what is in store for them, such as how long the form is likely to take and what sort of information they will need to hand. After all, you don’t want users getting half way through your form only to realise that they don’t have all the information that’s required.

Form layout

Break complex forms up into bite size chunks

For more complex forms it’s often a mistake to try to do too much on the one page, or the one form. Instead consider breaking up the form into bit size chunks, much in the same way that most online checkouts are broken down in to steps (delivery address, billing address, payment etc…). Make sure that sections are clearly labelled and that related information, such as delivery details are captured together.

Show the user’s progress

For longer forms it’s important to let users know where they are in the form and how much further they have to go. This might be as simple as outlining the step they are currently on (e.g. step 1 of 4), displaying the percentage complete or displaying a progress bar showing the steps completed and the steps still to go.

Make forms easier to scan

Make your form easy for users to quickly scan by using white space, headers and other graphical elements to clearly differentiate form sections. Headings should be descriptive, succinct and should stand out on the page so that users can quickly see what information they need to enter.

Utilise progressive disclosure

For complex forms it can be confusing and potentially overwhelming for users to show all the inputs straight away. Instead it’s a good idea to progressively disclose form elements so that they are revealed only if and when required and within context. For example, if a drop down has an ‘other’ option which requires entry into a text field, it’s a good idea to only show that text field when ‘other’ has been selected.

Labels

Use the user’s terms and names

It’s important when considering labels that names and terms are used that users will understand and recognise. Try to avoid using your own terms as something that might make sense to you might not make sense to your users.

Use succinct and descriptive labels

Form labels should be short, clear and descriptive. If extra information, clarification or context is required use help text to do this rather than long rambling labels.

Place labels next to inputs

Eye tracking studies have shown that placing labels next to inputs (e.g. above or to the left – i.e. right aligned) make it easiest for users to read and associate labels with fields (taking advantage of the Gestalt law of proximity).

Distinguish required and optional inputs

It’s important to distinguish the required inputs on a form so that users know what information that they must enter. The standard convention is to use a ‘*’ to distinguish required fields. For example, ‘Name *’. Don’t forget to also include text at the top of each form page stating that the asterisk signifies a required field.

If most of the fields on a form are required with just 1 or 2 optional then it often makes more sense to highlight optional fields, rather than required fields. A good way to do this is to append the labels for optional inputs with ‘(optional)’, such as ‘Mobile number (optional)’. Short forms, such as a password reset form might have all fields required, in which case it’s usually not necessary to highlight required fields.

Inputs

Use appropriate inputs

It’s important to choose the right sort of input for the information being captured. For example, radio buttons are a good idea where a small number (e.g. 2-6) of mutually exclusive options are available (i.e. only one can be selected), whereas a dropdown is more appropriate where a larger number of options are available (or where space is an issue). The Microsoft Windows UX guide has a really good run down of many of the different input controls available and their appropriate usage.

The length of text fields should also reflect the format and expected length of text input. Short inputs such as postcodes should have a short text box, where as longer inputs, such as email addresses should have a larger text box. A good way to test that appropriate sizes have been used is to go through your form entering some expected values. Text boxes should be large enough to show most if not all of the text entered.

Have a logical order of inputs

Your form should have a logical order of entry. It would be most unusual for example to ask users for their address and then their name, as it’s usually the other way around. It’s also a good idea to group related inputs so that users are entering related information in the one place. For example, you might group contact information together (name, email address, telephone number etc…) or preferences together. For larger forms inputs might be grouped into clear sections with headings.

Use smart defaults where appropriate

Smart defaults simply mean that inputs are set to a sensible initial value so that a significant proportion of your users don’t have to do anything. For example, if most of your users come from the UK and you have a country select dropdown, it might be a good idea to default the country to ‘UK’ (or at least have it at the top of the dropdown).

Smart defaults can be really useful but be mindful of users inadvertently submitting default values because they don’t realise that a value has already been selected.

Consider the order and grouping of options

Where multiple options are available for users it’s important to consider the best order in which to list them and whether grouping options would make sense. For shorter lists it’s usually best to order by estimated popularity, with the most likely to be chosen option first and so on. Longer lists (e.g. country select) are usually best ordered alphabetically or grouped, for example using the OPTGROUP element to group options within a dropdown.

Be flexible about formatting

Try not to be too picky about how users enter information into your form as there is nothing more annoying than a form that requires information to be entered in a very specific format. For example, if you’re asking for a date the form should ideally be able to accept both shorthand (e.g. 11/5/11 – in the UK, 5/11/11 in the US) and long hand versions (e.g. 11/5/2011 – in the UK, 5/11/2011 in the US).

Allow users to tab through inputs

Many users will utilise the Tab key to move between inputs on a form as it can be much quicker than moving the cursor to the next input with the mouse. It’s therefore a good idea to check that tabbing between inputs is possible for your form and that inputs are tabbed in a logical order. The TABINDEX element can be used to specify tabbing order within a web form if the default order is all over the place.

Help

Address common user queries and questions

Users are bound to have lots of queries and questions when it comes to filling out your form. What does this refer to? Why am I being asked for this information? Hopefully you’ve captured some of these during usability testing but even if you’ve not yet carried out any usability testing you can still probably have a good guess at some of the queries that might crop up.

A good way to address common user queries and question is to show some help text when an input has focus. You won’t need to include help text for every input, just those where users might need a little help or clarification. Help text should be short and clear. If a user might need extra help then it’s usually better to link to more information, or to include some additional FAQs, rather than overload the form with help text. MoneySupermarket.com’s car insurance quote form (as shown below) is a really good example of addressing common user queries using on focus help text and FAQs.

Keep help text succinct and easy to understand

Whenever writing help text for a form it’s important to keep it as succinct and as easy to understand as possible. After all, users won’t want to have to read an essay to work out how to fill out your form. Help text should be written in plain English, avoiding the use of jargon and gobbledygook (love that word). Terms used should obviously also be ones that users will understand.

Errors

Highlight all errors

If there are errors on the form following an attempted submission then these should all be reported, ideally with each input at fault also individually highlighted. A good way to do this is to show error messages at the top of the page listing all the errors and then show additional error messages above or below the inputs at fault. It’s important not to just report the first input with an error because there might be others that need fixing and you will want your users to hopefully fix all their errors before re-submitting the form.

Use clear, actionable error messages

Error messages should be clear and actionable. For example, don’t just report that there is some information missing, state what that information is. Similarly don’t just report that an input is not in the correct format, outline what the format should be. It’s important that users not only know why an error has been reported but also how they can fix it.

Utilise real-time validation

For some inputs it can be a good idea to utilise real-time validation, perhaps using JavaScript or AJAX to validate inputs prior to submission. For example you might check that an input is in the correct format, that a user name has not already been used or that two email addresses entered are exactly the same.

Actions

Make primary call to actions clear

Primary calls to action on the form, such ‘Next’ or ‘Submit’ should be clear and should ideally stand out on the page. A good way to do this is to make the primary action a button and other actions, such as ‘Back’ or ‘Cancel’ links. Alternatively you could use a different colour or visual styling for the primary call to action button.

Provide feedback to users

It’s important to provide users with feedback following an action. For example, you should provide feedback following submission of the form or during some sort of lookup. For operations that can take a little while the now ubiquitous swirling circle is a good way to show that something is happening, or alternatively showing a progress bar or percentage complete. Let users know whether their action was successful or not and what their next steps are. If their action was unsuccessful don’t forget to outline why this was and what the user can do about it.

Make reusable and very complex forms saveable

It’s a really good idea to make very complex or very long forms, such as job application forms saveable, so that users can save their progress (or have it automatically saved for them) and return to their form at a later date. The same also applies to reusable forms. These are forms where users are likely to need to retrieve, edit and resubmit their form at some point in the future. Insurance quote forms are a good example of reusable forms.

Avoid including a reset button (unless having one makes sense)

You still see an awful lot of reset / clear buttons on web forms these days, usually tantalisingly close to the ‘Submit’ button so that a user can easily inadvertently clear their form rather than submitting it. Unless users are likely to need to be able to reset their entire form, such as for search filter or advanced search forms resist the temptation to include a reset button – 9 times of out 10 it’s a potential hindrance rather than being helpful.

Other considerations

Make forms accessible

Making sure that your form is as accessible as possible is a no-brainer because it opens it up to the largest audience possible. Usability and accessibility also go hand in hand as usually the more accessible a form is, the more usable it is as well. I’ve listed some useful articles for making forms accessible in the related articles section as making forms accessible is a substantial topic in its own right.

Carry out usability testing

As they say the proof is in the pudding – how can you tell how usable a form is without testing it with real users? Ideally you should be carrying out moderated usability testing, either face-to-face or remotely using a screen sharing tool (checkout my list of 25 great free UX tools for a few free ones you could use). If getting time with users is likely to be very difficult then you could also carry out unmoderated remote usability testing using a tool using as Loop11 (take a look at my remote user testing 101 presentation for more about remote usability testing).

You don’t even need a working form to carry out usability testing. You could carry out some early paper prototyping to test out sketches or rudimentary mock-ups of your form, or put together a rapid prototype using one of the many rapid prototyping tools out there.

Set-up and track form analytics

Once a form is actually being used in the big bad world you’ll want to see how users are fairing and whether it’s performing as expected. Capturing live usage data using a tool such as Google analytics allows you to monitor key performance indicators (KPIs) such as conversion rates and drop out rates and to capture important information such as common form submissions errors (e.g. missing fields) and common user journeys in and out of the form.

More about forms

• Forms that work: Designing web forms for usability (Caroline Jarrett)
• Web Form Design: Filling in the Blanks (Luke Wroblewski)
• Sensible Forms: A Form Usability Checklist (Brian Crescimanno)
• Web Form Design Patterns: Sign-Up Forms (Smashing Magazine)
• Creating accessible forms (WebAIM)
• Accessible forms: Guidelines, examples and accessible JavaScript tricks (webSemantics)