User-centered-form-design

Why Usability and User-Centred Design is Important for Online Forms

Have you ever started an online form and then given up? The data I’ve seen from retailers’ analytics tools shows that this behaviour is common, particularly with account registration.

But what does usable mean? A good definition is “fit for use” or “convenient to use”. Usable design matches form structure and content with visitor goals.

Adopting user-centred design for forms

It’s good practice to think of form completion as a sales conversation: how does the form need to speak to people to reassure them and address barriers to completion? You’ll see online forms using conversational and informal copy styles to try and achieve this.

Gurd1-screen

A good start point is to ask the question, “If I were the customer, what information would I expect to give on this page?” Think about the mindset of customers when they reach the form – where have they come from, what are they expecting?

This helps focus design on the right outputs, stripping back unnecessary fields to capture what’s relevant. For new visitors, with whom you have yet to establish trust, data overkill can be a big turn-off. It starts to raise questions about what you’re going to do with that data.

A good example is email sign-up. When do you capture all the rich customer data (e.g. DOB, interests etc) that helps personalisation and targeting? If you try to do this upfront via a long data capture form, you risk decreasing your sign-up rate. A proven technique is to capture the bare minimum (name, email address) and then use your eCRM program to enrich this data over time, encouraging customers to share more as you build a relationship.

Conversely, if you’re offering visitors something free, such as a download, you’ll often find people willing to provide more data, accepting the trade-off. This is a tactic employed well by B2B software providers for lead generation.

The technique is to match form design with customer intent. When signing up to a newsletter, most people wouldn’t expect to have to provide personal details like DOB – they are irrelevant to the ability to receive a newsletter. Of course, they help with personalised marketing but that’s a ‘nice to have’ not an essential.

Start by defining the essential data that you need to capture, that’s your control – you can test enhanced forms to see how additional data capture affects form completion. Design should be focused on enabling customers to complete the form as quickly and easily as possible. All other data capture should fit around that core process.

A good example is a two-stage process for email sign-up, where stage 1 captures the email address and when this has been confirmed, new sign-ups are encouraged to share more detailed information via incentives. This approach avoids additional data capture requests affecting the actual sign-up rate.

How mobile affects form completion

There are two key factors influencing mobile form completion:

Connectivity – having to make lots of server calls to request/validate data slows down form completion on mobile browsers.

Screen resolution – smaller screens make it harder to complete forms as it’s easy to tap on the wrong area (fat fingers scenario).

For example, on desktop you try to consolidate forms to have fields adjacent to labels. On mobile, this makes it harder to tap the right field, so forms often scroll deeper with fields below labels.

gurd2-mobile

Here are our top tips for form usability:

  1. Think what data customers would expect/be willing to provide.
  2. Minimise the number of data fields to focus only on what’s essential i.e. the data that you need to process the form.
  3. Use labels to make it clear what each field relates to.
  4. Make it clear which fields are mandatory.
  5. Ensure any optional fields don’t interfere with the mandatory fields e.g. consider adding these as a second level after initial validation.
  6. Make sure actions are clear and distinct from the main form content.
  7. Provide easy to access help for visitors inexperienced at completing online forms.
  8. Use in-line validation so errors are flagged to customers as they progress.
  9. Make error messages user-friendly.
  10. Think carefully about the copy tone & style – how you write copy makes a big difference on form completion (especially for errors).

Comments and questions

What do you think? Please drop by and share your comments, questions and experience. Please also share any relevant links you think readers would be interested in.

Follow-up reading

There’s an excellent post on UX Design by Justin Mifsud over at Smashingmagazine with some great examples.

A useful take on the guiding principles of user centred design by Adrian Jones on Design Festival.


  • Pingback: The Importance of User-Centred Design for Web Forms | Digital Juggler()

  • http://usabilitytools.com/ Anna Kitowska

    Very good text, James. It is important to sensitize people about the importance of user friendly online forms. Very often this is what stands between a conversion lead and a disappointed client.

  • http://digitaljuggler.com James Gurd

    Hi Anna,
    Thanks for the comment and apologies for the delay in reply!
    You’re right that forms can be a major barrier to conversion, so important that people learn to test, test and test again to improve performance.
    thanks, james