Form optimization is a must to every e-commerce business that doesn’t want to lose clients. Badly constructed forms can be a real pain to fill in, it is important that they are thought out carefully in order to minimize any leaks when visitors are signing up for e-mails, completing a job form, starting an account or simply completing a contact form. You need to do form optimization with users in mind and web form testing is needed for on-going analysis to note where forms are failing in order to make any tweaks for the benefit of the users. The three main areas to test during web form optimization are the number of fields that are being used, the strength of the call to action and the submit button text, color and size. Here are some main points to remember when constructing and optimizing your web forms:
Label the fields correctly
Many web forms follow a pattern of information that is required, for example:
• Name • E-Mail • Password • Date of Birth • Gender
The format should be made clear to users of what information is required; making sure labeling is close to each field. An example of labeling a field correctly is during the password entering stage whereby the website may require a password of a minimum 6 characters and maximum of 10. Here, ASOS.com sign up form explains the password entry field format, which should minimize the number of errors that can be input.
Form Optimization: Every entry field is clearly explained
Use of validation
One frustrating part of an outdated web form is the lack of in-line validation for any errors – users do not want to wait until they click submit to be presented with a list of errors in their submission. In-line validation can be used for duplicate usernames, error in a password or even the wrong format of a telephone number. Client side error validation is an integral part of Gmail’s sign up process, when choosing a username it runs any input through it’s live database and returns the message “Someone already has that username”.
Validation is helpful for users
Make error messages easy to understand
Sometimes when a user makes a mistake they need a short explanation of it. An example of this would be when entering an e-mail incorrectly or inadequately forgetting to put ‘.com’ at the end or missing the ‘m’ in ‘.com’. A poor web form would return “This field has an error” while a better thought out form would offer a message along the lines of “Please enter a valid e-mail address so that we can confirm your account. Please check you have entered it correctly.”
Use Cookies
Nowadays people use multiple passwords and usernames to increase their safety online, so knowing which password is for which of your online services can be tricky. Enter cookies, which can help customers and users to remember their details for a returning customer to a web form. It simply saves time filling forms in again. Amazon makes it easy for customers to sign in to their accounts easily by remembering their customers e-mail address and password.
Cookies remind users of their account details
Anticipate errors and common mistakes
A clearly explained form like the ASOS.com web form that offers clear labels can still return errors. The most common errors are spelling mistakes, the use of numbers instead of letters such as 1 for the letter I, or the use of capital letter. This is an add-on to inline validation whereby a popup or red prompt may appear if an erroneous character or input is placed within the field during input and not once a field is complete.
Keep forms short and concise
Some forms require much more details than others; long forms can appear intimidating and will force clients away. If a long form is required, breaking it up into stages makes it more manageable and user friendly. It is a general rule of thumb for forms to be kept as short as possible – looking back and testing forms will offer an insight into which fields are surplus and can subsequently be removed. Being the biggest E-Commerce website out there, Amazon is doing something right by paying attention to form optimization. Below is their sign up form that is kept simple; before any payment or delivery details are required they allow customers to start off with basic details.
Start with the basics
Use the correct format
Making sure each field is using the correct format is vital to any errors or mistakes being made as well as making the user experience smooth. For example, using a drop down selection box for gender or when selecting month during D.O.B will eradicate any errors during typing in these options and mean less work for the user.
Feedback message after submission
Offering a message or some feedback once a form is complete provides reassurance to the customer that the website has indeed received the information and the information has not vanished. After completing one form the norm is to send an e-mail with further details or a confirmation, but as the user remains on the website it is ideal to display a message describing what happens next text to the user. Jaguar offers a notice of feedback and a thank you for the interest in their products when enquiring about their cars.
Leave a message for your users
Test your web form
Testing forms is an on-going process where you test and optimize each individual field of an online form for its performance. You can learn how your visitors interact with each field within your web forms and find out which steps are not needed – this will minimize users’ efforts and increase your conversion rates.
Form Tester provides you with valuable information
Looking through each example of web forms included in this article as well as all the pointers, you can see how form testing and form optimization are important and offer an insight into what is required for a great form as a way of boosting its performance. Remember to use a form tester once you have constructed any form to see if your form is as good as you think it is.
Torsten is CEO and founder of Userpeek. He is an old stager in the online business with 20 years of experience as an online marketer, conversion rate optimizer and UX strategist.
