Quickies : Web forms that work

Probably the most frequent question we are asked is “how can I make my call-to-action web form convert better?”. Here’s a quickie, 10 minute read to get you started.

There’s not much we don’t know about web forms.

We’ve been designing forms on web sites since 1996 and were one of the first companies in the UK to utilise the form as the engine of the site in 1999. Since that time our approach has been widely adopted, copied and used as examples of best practice by some of the leading minds in this field.

Form best practices

Start by clearly defining the purpose of the form, many of these aims are pretty diverse to make sure you set a clear and SMART objective for each and every form. You are allowed to have a secondary objective but you must take care the ensure that the secondary objective a) doesn’t confuse or distract the visitor from the first objective and b) has it’s value clearly understood compared to the first to avoid selective reporting. Ensure your testing method would stand clinical scrutiny.

Secondly, you should set a performance target for the form, a fill or completion rate. This sets a bar by which you can measure it’s current and future performance

Thirdly, the form must be designed with the visitor/user in mind. You need to protect yourself from HiPPOs, at all costs.

Once you have agreed the objectives, targets and approach you can set about designing the form.

Keep in mind the following golden rules:

1. Short forms rock! It is well documented that visitors dislike long or complicated forms. Keep it short and simple and be wary asking for information that visitors might feel is either sensitive or intrusive.

2. Label the form clearly. Each input field requires the visitor to click the box and fill in details so make sure it is 100% clear what you are asking and use helper buttons, mouseovers and text to guide them through the input procedure. You must clearly mark a field as mandatory if required and it’s worth explaining why it is mandatory.

3. The layout of the form should dictate the design and that should be a naturally readable as possible and, if the form is a significant call-to-action, should stand out against the background of the page through the use of colour, reverse, font or size.

4. A large percentage of forms are filled-in incorrectly so you should always adopt a soft-error approach to dealing with errors. Soft-error management can double the fill rate of the form and needs careful consideration. Not all errors are equal; the visitor may have missed a mandatory field or typed an invalid email address or illegal telephone number / postcode. Each type of error needs dealing with uniquely and sympathetically – a massive great red box saying “Error, please fill the form in properly” is not very useful!

5. Always be testing. No matter how brilliant your first attempt at the form is you can always improve so go back and continually test every form you have – ideally you should be continually trying to improve key calls-to-action. Without continual testing you won’t get continual improvement and it’s an easy win. Be careful with your testing mechanisms, if you are using a third-party hosted service such as Google Analytics then you might find the result increasingly unreliable as privacy opt-ins become mandatory. Consider using a server-side, in-house, solution if possible.

6. Watch out for privacy. It’s fast becoming a hot topic so you should take care to have a simple and clear privacy policy that doesn’t detract from the form fill. As part of this you need to consider what tools you are using to track visitors; there is a strong movement in the US and mainland Europe to make most third-party reporting systems (such as Google Analytics) an option for visitors with the default position of “opted out”.

Magic stuff

There are a few great tricks, some of which I am sure you are using but it’s worth listing the standard list of winners/losers and red-herrings.

1. Lightweight wins, every time. The heavier the logical page is the worse it will convert – try to get you form-based pages under 50k in size but certainly no heavier than 150k.

2. Red buttons do work. Use them.

3. Always make the button text the nature of the call to action, never “submit”. Never put a “reset” button on the form.

4. Need lots of information? Break the forms down into multiple stages.

5. Pre-fill the forms; always remember what a visitor types into a form, never make them re-enter information they have already given you.

6. Make sure the “Thanks page” has further Calls-to-action on it and where possible send the visitor an email thanking them for their time and explain what happens next at the same time giving them further things to do via additional links.

7. Never ask “where did you hear about us”, you should be able to work this o

8. If you are going to validate form fields make sure you get it right and are not over-fussy with spaces, commas, capitals and numbers etc.

9. Spend some time understanding Choice Architecture to permit gentle coaxing of visitors in the right direction.

10. Remember the mobile world. Smartphone/iPads/tablets are becoming commonplace and these typically have very different input methods that can make traditional forms difficult to complete. As part of this…never use flash.

Finally, small improvements compounded over a period of time make for big improvements in conversion rates with little risk and low cost. Alternatively – huge changes tested continually will, if monitored properly,  generate quicker improvements and a huge pile of discarded ideas; but might be more expensive. Why not mix and match, going after small changes continually and then every now and again chucking in an odd on…why not try single box multiple entry?

Enhanced by Zemanta