{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Let's face it, forms are a real pain to fill in, so it's important to get them right, and minimise any friction when visitors are signing up for emails, or completing contact and checkout forms. 

Designing forms with the user in mind, and testing to find our where the pain points are for users can make a massive difference to the user experience. 

Here are 12 quick tips on web form optimisation...

Use in-line validation

If users have made an error when completing a form, don't make them wait until they click the submit button on the page. 

In the below example from Autoglass, the form shows a green tick or a red cross as customers are entering details, as well as explaining the nature of the error:

This enables customers to quickly rectify any problems and reassures them that they have completed the form correctly. 

Label fields clearly 

The format in which users are expected to enter information should be made clear. For example, the length of passwords and requirements for numbers. 

Here, ASOS explains the expected password format, which should minimise the number of errors. 

ASOS forms

Use side by side field captions

Some websites (inclduing GrahamandGreene below) put labels on top on fields, but this makes the form longer. Instead, consider placing the field caption horizontally next to the blank field.

Form labels

Additionally, to minimise any confusion on the visitors’ part, you can also include the name of the fields within the field box, as in the example below. However, there are possible drawbacks to this approach

Include product information

Adding a basket summary next to the form provides a quick reminder of items and cost shiould the customer need it, and avoids one reason for them to exit the checkout. 

Make error messages easy to understand

Don't just use generic error messages, address the user's problem directly. Here, VW's form doesn't really explain what mistake I've made with the postcode: 

A better example comes from Peugeot: 

Use cookies to remember customer passwords 

People have too many passwords to remember as it is, so make it easy for returning customers by remembering their details. 

This saves time filling in forms again, and avoids painful password reset processes. 

Anticipate and deal with common errors

Even if forms are clear and labels explain what is required, customers will still make errors

Some are common, and can be anticipated, such as using the letter 'o' instead of a zero, or 'i' instead of the nunber one. 

Here, entering the letter  'i' instead of the nunber one causes an error on Apple.com: 

The same error on Play.com doesn't produce a warning message. Instead, the site just carries on with the checkout:

Don't clear existing fields after user errors

There should be a special circle in Hell for sites that do this. Thankfully, it's becoming rarer, but I still encounter this now and then. 

You know I mean: you submit the form and are then notified that some compulsory fields are missing. Instead of just allowing you to correct the fields in question, it clears information you have entered or selections you have already made.

There are few things that are more frustrating. 

Keep forms short 

Long web forms are intimidating and will deter many potential customers and some will simply abandon rather than take the time to fill them in. 

For some websites, long forms are unavoidable, so the key is to break them up into manageable chunks and make them user friendly. 

Confused.com's car insurance quote process is a good example of this: 

Make forms fun

Though there is an argument for standardisation, making your form stand out from the norm can make it more fun for users.

Here's an example from svn2ftp:

Similarly, Jarad Johnson's contact form as postcard idea is genius:

contact forms

Use the right format for each field 

This is about making things as easy as possible for users, For example, ASOS has a drop-down for gender here: 

ASOS checkout call to action button

Since there are only two possible options, using radio buttons ot tick boxes would mean less work for shoppers. 

In the same checkout process, ASOS uses radio buttons for delivery options. Not only does this require less 'work' for users, but it also allows for quick comparison of the delivery options available. 

ASOS delivery options

Give users some feedback after submission

Reassure customers that their details haven't just vanished into the ether by acknowledging their form submission. 

Better still, and something that Jaguar doesn't do here, is to provide details of what happens next, and how soon customers can expect a follow up. 

Graham Charlton

Published 4 July, 2013 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (23)

Comment
No-profile-pic
Save or Cancel
Jacob Ajwani

Jacob Ajwani, VP of Strategy at Yieldify.com

Nice job Graham

over 3 years ago

Avatar-blank-50x50

Richard

Just wondering what you think of HTML5 form validation? I usually disable it with 'novalidate' as I find it intrusive, but interested in what others think.

over 3 years ago

Avatar-blank-50x50

Matthew Parker

Nice post. It's so simple yet so many sites get it wrong.

over 3 years ago

Avatar-blank-50x50

Erik

Hello Graham,

You State that you need to keep a form short by placing label and input field inline. Another group of form experts State that label and input field should be put underneath ranch other to follow natural moverend of the eye and the decrescendo number of movements with Your head. What's Your opinion about that?

Kind Regards
Erik

over 3 years ago

Paul Rouke

Paul Rouke, Founder & CEO at PRWDSmall Business Multi-user

Thanks for a great post Graham.

Checkout forms in particular are still in 2013 the cause of many an abandonment for retailers, and just in the last month have we been fascinated by fails occuring amongst many of the UK's biggest brands during desktop, tablet and mobile user testing we were conducting.

A few more tips from to add to your list:

Don't neglect your tablet and even more specifically your mobile visitors - make form elements and submit buttons finger friendly and provide context sensistive entry fields to speed up data entry

Bonus tip - disable auto suggest for tablet and mobile users - when your intelligent device is trying to auto correct your name or email address it just disrupts the user journey and creates friction

Don't leave users need to take a leap of faith when submitting a form - they should be 100% confident what they are commiting to ie. moving to an order review page or actually placing their order. The use of descriptive button wording is key to this

If your forms are part of a multi-step process, provide a prominent progress indicator at the top of the page which makes it 100% clear to the user which stage they are on, which step they have completed and what steps are remaining

For retailers, on both your 'proceed to checkout' button and your 'place order' button, test introducing either a padlock symbol on the button and/or updating the wording to emphasise this will be a secure transaction. "Checkout Securely Now" has performed well in some of our tests

On the subject of trust (and yes even the most reputable retailers need to emphasise this, believe me) ensure you have prominent trust logos and messaging in your enclosed checkout and particularly on your payment page

Hopefully these will be a useful addition to your list Graham.

over 3 years ago

Avatar-blank-50x50

Ajay Prasad

Great tips. Honestly I have yet to see a form that is perfect and a pleasure to fill. I especially like what you have said about ‘Don't clear existing fields after user errors’. It is absolutely irritating and drives most people away when this happens. We require our clients to fill forms and I absolutely relate to all that you say.

over 3 years ago

Albie Attias

Albie Attias, Ecommerce Director at King of Servers Ltd

Great checklist Graham

A couple more to add to the list:

1. Ensure autocomplete is enabled to aid with speedy form completion.
2. Where relevant, explain why you're asking for the information. For example, if you require data of birth to prevent selling to minors, say so rather than just having the DOB field.

over 3 years ago

Avatar-blank-50x50

Tony Edey, .

Any opinions or data on whether double entry of email address actually works?

over 3 years ago

Tom Howlett

Tom Howlett, Digital Marketing Executive at Koozai

Nice post.

One thing that I find is creating a custom form is difficult without using a developer. However there are form systems out there, they can be limited.

Know any good ones?

over 3 years ago

Natalie Green

Natalie Green, PR Officer at Postcode Anywhere

Great post Graham, form validation is obviously a very continuous issue. One way retailers are tackling address validation is by using search engine style validation (http://ow.ly/mGezf), so that customers can type in any part of their address whether they start at the beginning or the end, and the software finds the address in real-time. This saves obvious frustrations and reduces the address field to just one box. A really good example of this type of validation can be found on Riess or Hotel Chocolat who have got their forms down to a T.

over 3 years ago

Avatar-blank-50x50

Paul Nattress

In your example for using the right format for form fields, ASOS do actually use the correct format. Given two choices, radio buttons can't be used as one always has to be selected. Do you want to pre-select a customer's gender for them? Didn't think so. Tick boxes allow multiple boxes to be ticked which is quite possibly another no-no for gender. So a dropdown is indeed the correct UI element to use here. But I will agree that this puts a little more burden on the user but the other options can cause problems.

over 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@ Paul Rouke Great tips Paul, and I may need a part two to add the extra ideas from you and @Albie

@Paul Nattress That's a fair point - I could have used a better example there.

@Natalie thanks - I'll check out those sites.

over 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Erik I would instinctively prefer the labels in-line, bit perhaps that it because I've become accustomed to that.

I think, as with everything here, it's a matter of testing before you find the most effective solution.

over 3 years ago

Avatar-blank-50x50

Paul Nattress

@Graham I should have added, this is a really good article :)

over 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

Thanks Paul

over 3 years ago

Avatar-blank-50x50

Tanielle

Really good list of tips for form optimization.

I find programes like Wufoo form builder, which we use, accommodates alot of the functionality above in your tips to help provide a great experience for customers during the filling out of online forms.

over 3 years ago

Glynn Davies

Glynn Davies, Senior Technical SEO Account Manager at LBi

Using the email and url values of the type attribute for input fields is handy on mobile, too: brings up an keyboard with convenient things like ampersands and pre-set TLDs in a more accessible places.

over 3 years ago

Avatar-blank-50x50

Johnny Morris

Nice article.

As to the label alignment question, my starting point has always been to use labels above the input field aligned to the left hand side of the input box as this limits significantly reduces eye movements which has a correlation to congitive load. There is a good article here which re-enforces this point.

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

over 3 years ago

Avatar-blank-50x50

Kevin Bryant

Nice article.

I agree with Paul Nattress on the gender selection in the form. Another thing to point out is that if the user is tabbing through the form, when they enter a field that is of simple, known selections such as gender, hitting the F or M key will quickly, and efficiently (i.e. less work) get them to the proper selection.

It is also more optimized for mobile if the user is using the next option while filling out the form. Quick, easy and done with two actions.

over 3 years ago

Avatar-blank-50x50

Jeff

You've got to laugh. The COMMENTS form on this page breaks a number of these rules lol!

over 3 years ago

Avatar-blank-50x50

mazydavy

Great list, and some great comments too. A couple more humble suggestions:

Don't forget tab order. There is nothing more frustrating than tabbing through a form, only to find yourself in a completely different field to the one you were expecting.

Provide users with the help they need - sometimes forms are really complex (because sometimes products and services are complex) and even the best help text in the world can't always answer the questions some users might come up with, so give them a way to get more help - an FAQs or "Any Questions" link, like the one in the play.com form above, or even a phone number.

And if you are making web forms, get some proper form analytics software (like Clicktale) - this will really help you spot any areas of your forms where users are struggling.

over 3 years ago

Snehal Joshi

Snehal Joshi, Project Manager at Hi-Tech BPO Services

Very innovative idea – web form is great call to action for capturing customer requirement and question. Graham thanks for sharing.

about 3 years ago

Avatar-blank-50x50

Gareth Tuppenney, Web Marketing Manager at Thomson Reuters

Interesting post. Do you have any thoughts on whether all fields (and CTA) should be above the fold for desktop forms? Has any research surfaced on whether the completion rate differs?

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.