Google Data

As a follow up to our previous post "Is your website easy to buy from?", we're now going to take a deeper look at web-forms. Web-forms are often the only communication point your website visitors have with your business, yet unfortunately they are often a neglected after thought for many websites.

Imagine for a moment that your forms are a set of hurdles. Potential customers have to jump over multiple sets of hurdles to reach your conversion point. The easier the web-form, the lower the hurdles. The more difficult, ambiguous or complex the web-form, the higher the hurdles.

If you are considering making changes to your website design, take a moment to consider the potential revenue impact of your redesign. The graph below shows a theoretical overview of the ROI impact of various parts of your website.

The good news is, you can make almost any form a better experience by following a few simple guidelines.

But first...

Why do users fill in forms?

If you ask someone if they enjoy filling out forms, you are more than likely going to find that forms are not viewed as an enjoyable experience. Users are likely to complete a form if they feel it helps them accomplish a task and / or there is a personal benefit / incentive for them to complete it.


For example:



Users are often in a rush to complete their task and reach their goal. By removing obstacles and making the web-form easier to complete, we increase the likelihood of visitors reaching your conversion page.

So how can we increase the likelihood that visitors will reach your goal page and find your web-forms easier?

Form layout and design

Eye tracking and usability studies reveal that many visitors scan form fields with a left to right eye movement, often ignoring instructions. Items on the far right of the form may not be seen, or may not get the visitors attention.

When designing web-forms here are some things you might want to try:

1. Place form labels to the left hand side
2. Use a single column form
3. Align fields to a grid

Example of a grid layout using the blueprint css framework


The right hand side shows the grid lines on, all elements align to the vertical grid.

4. Use an easy to read screen font (sans-serif) such as Verdana
5. Use appropriate negative (white) space to separate form fields
6. Use high contrast text and backgrounds (colour wheels can help)
7. Make it pretty, visitors trust pretty websites more
8. Use semantic markup to assist users with accessibility issues


Provide clear form instructions

1. Remove large blocks of instructive text, visitors probably won't read them. Think of Jeremy Clarkson assembling a Caterham
   
2. Use clear headings eg: "Home Loan Application" not "Application Form"
   
3. Avoid acronyms (if you do use them, provide their full meaning next to it) eg: ABN = Australian Business Number & PPS = Personal Public Service Number (Ireland)
   
4. Use plain English
   
5. Always be polite when asking for information, never demand it and be extra nice with error messages
   
6. If visitors will require specific information to complete the form, mention this at the beginning of the web-form
   
7. Use a graphical representation to aid visitors

9. Group form field questions into groups based on theme or topic

Ask appropriate questions

When requesting information from visitors via a form it's important to consider the relationship your business has with the visitor being asked to complete the form. If you don't have an established relationship with the visitor yet, don't ask detailed personal questions. Chances are the visitor will abandon your form and conversion process.

Lets say for example our e-commerce website checkout form asks the following question:


I just want to order some books, why do I need to specify all this personal information?


If you must collect this information:


In the form above, there may be valid reasons for needing this information, but without an explanation as to why you need this information, it seems awfully personal and inappropriate.


Tips for form questions:

1. Start a form with less personal details
   
2. Remove fields that are not required to complete the task
   
3. Break long or complex forms into multiple step forms
4. Don't force visitors to respond to marketing questions - visitors will probably just 'fudge the answer' to get past any validation you put in place
   

Provide a reason to trust you

Show your website is credible and will treat information submitted with respect.

1. Use security badges / certificates for payment gateway
2. Link to privacy policy that details how you handle submitted user information
3. Tell me why you need information if it's personal
4. If I give you this information what will happen?
   • Requesting email? Will I get your marketing emails?
   • Requesting phone number, should I expect your call?

Use inline errors (with care)

When completing web-forms, traditionally, the process has been to complete a set of fields, then hit the submit button. The information is then validated by the web server, and if an error occurs the visitor is provided with feedback after the page has refreshed.


The problem with this process is that visitors have to correct their error(s), hope they have done what is instructed of them, click submit again and wait for feedback. Each additional time this happens the visitor becomes increasingly annoyed.


Inline errors provide an instant feedback mechanism that allow visitors to complete forms with less fuss and more accuracy.


Gmail gives users a button that helps them check if a username is available, and it provides feedback on the password field as you type into the box.

Inline error guidelines

1. Validate data after the visitor has completed entry (onblur event for javascript techies)
   
2. Only validate fields that visitors won't know are correct beforehand

• Minimum password length
• Password does not match
• Username is taken
• Credit card number is not long enough

3. Use a graphical icon such as a tick to indicate if the field is correct versus incorrect
4. Highlight the problem area with a red border or text
5. Try suggesting what the problem might be or how to correct the error

How long should my form be?

It depends on the task a visitor is being asked to complete. Most visitors would expect that booking a flight will be more time intensive and require more information than registering for your special offer newsletter.

In order for visitors to successfully complete your web-form, you will need to ensure:

1. You provide them with a reason to trust you with the information they supply
   
2. The reward for completing the form outweighs the effort to complete it
3. The time required to complete the form is appropriate for the task at hand
   

If you satisfy these conditions it shouldn't matter how long your form is.

Should I have a multistep form?

If your form is sufficiently long, such as an airline booking form, you might want to consider breaking your web-form into multiple parts.

1. Search
   
2. Select flights
3. Provide passenger details
4. Provide payment information
   
5. Confirm booking

Flight booking progress indicator has a nice little plane icon, I can easily see I'm at stage 3 of 5

The advantage of adding a multistep web-form to your website is that you can use Google Analytics Goal and Funnel reports to help determine which step is causing the most friction.

Tips for multistep forms:

1. Tell visitors what to expect next
   
2. Don't hide a step in between indicators - visitors won't like it
   
3. Make your progress indicator obvious (place it just above the form)
   
4. Use a combination of graphics and text, don't blend it into the background or make it too small to see

Provide a small reward

Depending on the task at hand, you may find you need to provide an additional incentive to complete the requested form.

1. If you're trying to sell copies of a PDF booklet, give visitors a free sample chapter
2. Providing an online training course? Give visitors 3 days free access to materials
3. Membership based website? Give visitors reward points for filling in additional details
   

It should be noted that not all forms will require a reward, sometimes completing the form will be reward enough as it allows visitors to complete a particular task.


Form redesign example:

Lets take a look at a real world example. The following form is the 3rd step in a 4 step process for booking a holiday. At least one contact number is required, along with the other details indicated below. The form also gives visitors the opportunity to specify if they would like to receive future newsletters and how they heard about the company.



The form could be vastly improved by making small changes to the layout, alignment, form options and wording.



For those of you wondering how to achieve this kind of form layout there is an excellent write up on A List Apart.

What changed?

1. Aligned the fields and labels to a grid
2. Changed the form to single column
   
3. Placed the progress indicator above the form
4. (to step 4...) tells visitors what to expect next
   
5. Changed country to a select / option field
6. Opt-in status for newsletter default to unchecked and reduced wording
   
7. Removed how did you hear about us? See the previous post about this
8. Removed optional phone field
   
   

The form still isn't very pretty, but this of course is just the beginning, we can further improve the form and measure the improvement of each iteration. We recommend using Google Website Optimiser to help test which form structure provides the best conversion rate.

Taking it a step further, you may also want to carry out in-house user based testing to see how people interact with your website forms. This could provide even more valuable insight into potential problems visitors have when trying to complete your forms.