Google Conversion Room Blog Tips on tracking and improving conversions online

Improve your web-forms and increase conversions

Monday 8 February 2010 | 10:18

Labels: ,

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

If you read our last post this will look familiar, but we felt it was so important we had to show it again. This graphical representation helps visitors identify the information you need them to provide.


8. Choose the appropriate form control for the information you want Example of a slider that allows visitors to select a range of values with ease. The Jquery slider is just one example.


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.



Posted by Gavin Doolan, Google Analytics Team.

44 comments:

Samantha said...

Excellent post Gavin, thank you for all the information you have provided.

I have recently written a blog post on 'Increasing Online Form Conversions' and have been using Google Website Optimiser to run A/B to gain an accurate insight into how visitors interact with different types of form layouts.

http://www.impactmedialtd.co.uk/blog/search-marketing/landing-page-optimisation-search-marketing/increasing-online-form-conversion-rate-836/

mike said...

great article. My landing page has a pitiful conversion rate and I think my error is bad graphics. Opt-ins are huge for my IM biz so i need to kick it up a notch for sure

Michelle said...

Increasing conversion is always a good thing. Traffic is really no use if they do not subscribe or buy something. This is the end goal.

Website Design said...

Multivariate testing can improve landing page conversions by 300% in one test.

Michaleen Craig said...

Great article! I have always been anal about web form layout ... provide the user with as much information as you can about how long the form will take ... don't ask for too much information.

All of this is key to CRO:
http://bit.ly/cNhyOo

home based internet businesses said...

Great post, surely web designers will make this as a guide in designing future websites.

Damian Jakusz-Gostomski said...

Great article, too bad I didn't find it a week ago, as I've been working with forms all week!

MicroAngelo said...

8. Choose the appropriate form control for the information you want

Just remember that if you planning on following this advice that you use Progressive Enhancement to do so: always use standard form elements for the base version, and then "upgrade" using the same Javascript as the form is in.

And don't forget a submit button for those without Javascript! (Yes, you can hide it with Javascript if you want when upgrading the form.)

Abhay said...

Nice post Gavin. Speaking of conversions in web forms, here's an article I wrote for Evolt about increasing form conversions by plugging in the accidental back button activation issue in long web forms- http://www.conetrees.com/2009/10/articles/increase-conversions-in-long-web-forms-by-resolving-the-accidental-back-button-activation-issue/

nancy said...

What is everyone's insight into adding graphics to a form page to convince users to fill out the form...given this form is complicated and is asking the user to make a few decisions. Has anyone found that showing an image of products help the user trust the company or persuade them to finish filling out a form.

Samantha J Noble said...

Nancy, in response to your comment about using graphics to entice form submissions, it is always worth testing as no two websites are the same and if graphics work on one it may not work on yours.

We have been running various tests using Google Website Optimiser, very easy to set up and would highly recommend it.

sockyee said...

I think the part concerning “inline error” is the most important. Being a frequent web user myself, filling out forms is actually a norm and what actually annoys me is the waiting time period for the server feedback before knowing if there’s any error on the filling process or maybe the username has been taken. I think very few websites offer such feature and obviously those which took the criteria into account are the most user-friendly. Small things like this should not be overlooked.

Patrick Schwarz said...

thank you for the information some things was totaly new for me

Jason Conley said...

Great post Galvin.

Many of the form elements you mentioned can easily be done without programming using Caspio (http://www.caspio.com/?s=300). It uses simple point-and-click wizards but also has many advanced features such as cascading dropdowns and CAPTCHA verification. It's a great tool for any tech savvy business or IT professional. Saves me a lot of time.

Caspio also did a similar blog about top web form creation tips at http://blog.caspio.com/tips-and-tricks/checklist-for-creating-web-forms-with-caspio-part1/

Ivan_Burmistrov said...

A surprisingly non-professional article! :-) Let’s analyze the form redesign example as an “apotheosis” of the author’s presentation. I will simply show that design A (old) is more usable than B (new).

1. Aligned the fields and labels to a grid

Grid aligning is about visual design, not usability. In design B, all fields are of equal length while design A applies more clever approach: for a number of fields, length of fields is proportional to the data being entered into those fields (e. g. “Postal code” and two telephone fields are narrower than the fields for city name and email). This approach will definitely reduce the number of errors.

The score is 1:0 in favor of design A.

2. Changed the form to single column

This obviously increases the vertical size of the form. Design A places logically connected fields side by side (e. g. “First name” and “Last name”, “City” and “Postal code”) and this is absolutely normal practice.

2:0

3. Placed the progress indicator above the form

Ok. 2:1

4. (to step 4...) tells visitors what to expect next

IMHO not very informative…

Still 2:1

5. Changed country to a select / option field

It is not a good idea to select a country from a dropdown list of 200 items. User can type in his country name (e. g. UK or USA) much faster.

At the same time, design A does a wrong thing when not prepopulating “Country” field with “United Kingdom”. If prepopulated, design A beats B.

Still 2:1

6. Opt-in status for newsletter default to unchecked and reduced wording

The same in design A. :-)

Still 2:1

7. Removed how did you hear about us?

Ok. 2:2

8. Removed optional phone field

Why have they decided that “Mobile phone” field is optional for a holiday booking website?! Travel agency must have a channel for urgent communication with the traveller in case of any unpredictable situations (serious flight delay, change of boarding gates, terrible weather conditions at the destination airport, airport personnel on strike etc.).

3:2

Below are my own additional points.

9. In design B, three address lines and “City” fields are combined into a large single field.

Consequences of this solution:

(a) users will be confused when determining what to enter into that combined field and what not. For example, the user must enter city name there, but not the post code! :-)

4:2

(b) approx. 50% (my expert prediction) of users will simply forget to enter city name (the form does not ask them to do this)! :-)

5:2

10. Design B uses left-aligned labels instead of top-aligned labels in design A.

Well-known research (e. g., Wroblewski 2008) showed that top-aligned labels require much less eye movements and fixations than left-aligned. Top-aligned labels beat left-aligned ones in almost all situations except some special cases.

6:2!

Enough for these forms, now let’s take a look at other issues with this article.

{Continued in the next comment...}

Ivan_Burmistrov said...

{Continued from previous comment...}

(A) Based on experimental data, researchers developed a whole theory against inline validation, “Modal Theory of Form Completion”:

Bargas-Avila J. A., Oberholzer G., Schmutz P., de Vito M. & Opwis K. (2007) Usable error message presentation in the World Wide Web: Do not show errors right away, Interacting with Computers 19 (3), 330-341

Abstract

Online form validation can be performed in several ways. This article discusses two empirical studies with 77 and 90 participants, which have found evidence that the best way of presenting error messages is to provide the erroneous fields after users have completed the whole form. Immediate error feedback recommended by the International Organization for Standardization (ISO) showed the worst performance in these studies. Where presented with immediate feedback, users often simply ignored the messages on the screen and continued completing the form as if nothing happened. These results lead to the postulation of the “Modal Theory of Form Completion”: Users are in either “Completion” or “Revision Mode” when filling out online forms. These modes affect the users’ way of interaction with the system: During Completion Mode the users’ disposition to correct mistakes is reduced, therefore error messages are often ignored. {see full article at ScienceDirect.com}

So my (scientifically informed) recommendation is: Do not use inline validation.

(B) Author reprints his design for CVV code from his previous article despite the fact that readers already told him that this design is not a good solution (see comment posted at 10 November 2009 19:19). I agree this design is very problematic.

And finally, my own design for the form in question: http://interux.com/images/Form_Redesign_for_Conversion_University.gif

Masum said...

i think this is a great guide line for web designer.http://www.watch-lost.biz

MedicalEducator said...

Great post, i just came across it now and its a bible for form and interface designers!

Has anyone got any experience of using optimiser within web forms and where has it yeilded the best results?

patrick said...

excellent article !Thanks gavin well structured form i like to use your web forms for my new website watch movies online.

Internet Marketing South Africa said...

Great article Gavin, nicely laid out and easy to follow steps... thanks.

zakłady bukmacherskie said...

It was not always quite this way.

Anonymous said...

thank for sharing. good info
football sport fan club

piese auto online said...

This are very good tips to follow but very hard to follow it. It is hard to implement.

Funny sms said...

That was very informative post, there are many things i did not know, anyhow i appreciate your detail knowledge about editing design of website.

Armughan said...

valuable traffic is not wasted on page elements that have proven to be ineffective and it concentrates on web site conversion factors that show themselves to be statistically significant in improving sales online. This further accelerates the time to reach a conclusion about the best improvement factors for increasing online sales.

Alan said...

This is a very interesting blog and so i like to visit your blog again and again. Keep it up.

Alan

http://holidaydestinationinindia.blogspot.com

Anthony said...

Very complete post, as a webmaster I happen to forget some of the elements you mentioned...
Apart from the design, one of my biggest worries is usually the form's length: it is extremely important to keep it as short as possible, but at the same time you have to make sure you don't miss any data.
I'll try to apply the "bonus" trick you talked about, sounds like a good tip :)

Marcus_Dane said...

I agree that web forms are essential in creating quality web designs. In the field of website architecture and web application architecture, web developers should not overlook minor details necessary in creating effective web forms. In that way, return on investments can be assured.

Caroline Jarrett said...

Good to see a post that looks at relationship and conversation issues as well as at the appearance (the visual design of the form).

In our book, "Forms that work: Designing web forms for usability", we go into a lot more detail on the balance between trust, effort, and reward - the three elements of relationship.

We also give a lot more detail on how to word the questions, and how to think about whether the questions are really essential or not.

Kingofdl said...

Thanks Admin.
This is very helpfull for me. Resolve my problem.

Jacklin said...

The best website designers are working with i2k2. We provide web design jobs for website designers. Get selection through web design jobs for website designers

jamaica nights said...

This is a very interesting blog and so i like to visit your blog again and again.very helpful. Keep it up.

majohn c k said...

That was very informative post, there are many things i did not know, anyhow i appreciate your detail knowledge about editing design of website.

Michel Jones said...

Website design is far more than creating an impressive visual impact and top loading the website with bandwidth draining flash, banners, rollovers and poorly optimized graphics.
seo services uk

brett & jeannie said...

Nice post Gavin. Speaking of conversions in web forms, here's an article I wrote for Evolt about increasing form conversions by plugging in the accidental back button activation issue in long web forms-

mokhdooni said...

thanks

irmob.net said...

Thanks.
This is very helpfull for me. Resolve my problem.

javidstore.mihanblog.com said...

This is a very interesting blog and so i like to visit your blog again and again.

اکسین موب said...

well done thanks

behzad said...

hanks for giving away such great pos for free.

tubulin antibody said...

I agree and appreciate that web forms are essential in creating quality web designs. In the field of website architecture and web application architecture, web developers should not overlook minor details necessary in creating effective web forms. In that way, return on investments can be assured.

dhanooprulz said...

it has given me very interesting,and useful blog,and too free,would surely love to visit it again and again.

Anonymous said...

it is a very useful blog,will surely visit this blog again.

SEO company said...

Nice post Gavin - agree that pretty pictures no longer hack it. Conversion forms are essential. And just as essential is accurate tracking using analytics to see the effect of your forms - giving the ability to tweak if necessary