Creating Usable & High Converting Web Forms

With shopping cart abandonment standing at over 50% it’s clear that creating user friendly forms is a very important part of ecommerce and online sales.

Forms are even more important on social networks where you have perhaps 10 seconds to convince somebody to sign up. The user registration processes on Twitter and Facebook have been refined and perfected to maximise conversion rates – notice how the “Signup” button on both sites are green which is the colour for “Go” and a good one for conversion rates.

Facebook signup form

Twitter signup form

Of course 15% of the top converting websites use red buttons so although you can start off by copying Facebook it’s more about testing & branding in the long term.

If you have a complicated form whereby the user doesn’t necessarily have to fill in all the fields then splitting it over several pages and dynamically generating certain parts is normally a good idea. Jakob Nielsen talks about longer forms as applications and believes that unless forms are linear with a small number of elements then an application is the way forward.

Once an online form goes beyond two screenfulls, it’s often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience.

Forms work when there’s not much to do beyond plain data entry. Just stack up the text boxes and have the user type away mindlessly. A few decision points might be acceptable, such as the traditional question as to whether shipping and billing addresses are the same or different.

It’s interesting that most forms have the labels to the left of the fields despite a number of usability tests confirming that the best place for field names is just above the field as shown in the Tumblr signup form below.

Tumblr signup form

A very important element of web form design is showing users which fields are required and which aren’t. This study showed that despite Hotmail explaining that some fields were required the text wasn’t being seen because of the way it was displayed.

Required form fields

In the event that a user is struggling to complete a form then form validation is very important and can be hugely frustrating if it’s not done well. I must have abandoned hundreds of forms because of poor validation in the last few years.

Facebook uses a nice big error message below the submit button which is a very visible and easy solution for a short form.
Facebook form

On longer forms especially where the users can get the answers wrong (passwords, usernames, URLs) rather than just leaving certain fields blank we normally find that inline validation is the best answer.

Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation. Eye-tracking also showed that they “fixated” on the forms with inline validation less frequently and for less time, which shows that they found these forms easier to process visually than the forms without inline validation. This was likely because they didn’t have to reread the entire form after submitting it to resolve any errors—instead, they resolved errors as they went along.

Interestingly most users don’t actually look at the inline validation unless they are worried their answers might be wrong. As soon as the user hesitates they look at the form and can see straight away whether their answer is right or not.

Form validation

The results of this particular study showed large gains when using inline validation with the main performance gains coming from the harder questions and fields rather than the straightforward ones.

When compared to our control version, the inline validation form with the best performance showed compelling improvements across all the data we measured. Specifically, we saw:

  • a 22% increase in success rates,
  • a 22% decrease in errors made,
  • a 31% increase in satisfaction rating,
  • a 42% decrease in completion times, and
  • a 47% decrease in the number of eye fixations.

Participant comments highlighted their strong preference for getting real-time feedback from our form:

“You’d rather know about your mistakes as you go along.”

“It’s much better than getting all the way down and hitting ‘submit,’ only to find out that it doesn’t like your username. It’s much better when it tells you as you go along.”

What are your favourite online forms and form creation tips?

By Patrick Altoft. at 10:44AM on Wednesday, 30 Sep 2009

Patrick is the Director of Strategy at Branded3 and has spent the last 11 years working on the SEO strategies of some of the UK's largest brands. Patrick’s SEO knowledge and experience is highly regarded by many, and he’s regularly invited to speak at the world’s biggest search conferences and events. Follow Patrick Altoft on Twitter.

comments

  • http://www.tag44.com tag44

    Thanks for sharing the very effective web forms with the highly recommended illustrative.

  • http://www.timothyparsons.com.au Tim Parsons

    Very interesting articles, thanks. I’m off to make some green sign-up buttons. :)

  • http://www.solo-film.dk Solfilm

    Interesting and very useful article indeed. I teach people how to use the Internet and filling out forms is definitely a problem for a lot of people.