Practical Ecommerce

Designing Web Forms for Better Conversions; 5 Tips

Web forms are the final hurdle shoppers and site visitors must traverse before registering for a newsletter or making a purchase. Even small improvements in the form can make a big difference in a business’s bottom line.

No company wants to be hard to do business with. Businesses want to please shoppers and make it easy for them to buy or interact. Web forms, even well designed ones, often stand between a customer and what that customer wants. If a shopper wants to buy, say, a pair of jeans from the Levi’s store, the shopper will need to get past Levi’s checkout form first.

Forms, such as this one from Levi's, lie between a user and what that user wants.

Forms, such as this one from Levi’s, lie between a user and what that user wants.

With this in mind, here are five tips that you can use to boost conversion rates — whether you’re asking for a sale or a simple registration.

Ask Fewer Questions

A web form’s entire purpose is to gather information, such as a name, address, shipping data, billing information, and more, much more. But avoid the temptation to ask more than you actually need.

A classic example is “Where did you hear about us?” This is a simple enough question aimed at helping the marketing department determine how a shopper arrived at the checkout. But it is just one more question in the way of a conversion. And it is something that can be answered with analytics or attribution tracking, rather than as a question on a form.

The key is to get the information that you need as succinctly as possible.

Be Specific About What You Want

Each time a user encounters a form, that user need to decide what information the form is seeking, whether or not to provide the information, and how to provide the information. Although this takes less than a second, it is important to be as clear and specific as possible when labeling or arranging forms.

“Use field labels that your audience will understand. Your labels should be clear and descriptive – but also, short. If extra clarification is needed, use contextual help rather than a long, wordy label,” wrote Lora Edwards of Maxpoint Interactive — a marketing firm that focuses on local, in-store sales — on that company’s blog.

Also consider where you place labels. Luke Wroblewski, author of the book Web Form Design: Filling in the Blanks, suggests that “top align” labels are the easiest for users to parse.

Create a Clear Path

In his book, Wroblewski also points out that there should be a clear path from one form input to the next, so that a user knows exactly what to do. This path should be both visually recognizable when you look at the form and it should be clear when a user tabs from one field to the next. Notice the clear path in the Levi’s checkout form.

The Levi's checkout form has a clear path to completion.

The Levi’s checkout form has a clear path to completion.

Effectively, you want the user to see how to succeed.

Provide Help and Feedback

There is almost nothing worse than having a user complete a form and then rejecting that the submission because some bit of information is improperly formatted or overlooked. The experience is that the user must repeat processing and completing the form.

Instead of letting this happen, provide help and validation as the form is being filled out. This help might be a bit of text explaining how a form’s input should be formatted or it might just explain why you need the information.

An excellent example of form help can be seen on eBay, when a seller is listing a product. The form includes a help column on the right that does not interfere with the path, but provides feedback as needed.

eBay's "sell an item" form is a good example of using help text.

eBay’s “sell an item” form is a good example of using help text.

Test

A form’s complexity and aim can have a significant effect on its performance and usability. So more than anything else, test important forms. Monitor, as an example, conversion rates for a checkout form when it has top-aligned labels, then check the labels to be left-aligned and see if there is any change in conversions. Do the same for the path to completion or other form aspects, each time seeking to optimize your form for success.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 2 )

  1. cameron.reid97 January 20, 2012 Reply

    Thanks for the post. Here’s an article with quick tips to improve your web form conversionhttp://blog.caspio.com/webforms/how-to-create-a-web-form-that-converts/

  2. Ian H December 16, 2014 Reply

    Hi Armando, awesome, useful post! Great starting points to get your forms converting. Although we love contact forms, we find that it’s becoming a dying medium as people are becoming more and more impatient–often waiting hours or days for a response from their contact request is detrimental to conversion as they may take their business elsewhere. This is where real time engagement becomes a huge player in contact forms, such as live chat. Live chat is great, except you have to always have someone on the other end for it to be effective which can be either time consuming or pricey. With our software solution, Syncro (syncrowebchat.com), you can engage with your website’s visitors through your mobile phone via text message. No need to be stuck in front of your computer all day waiting for these valuable leads, and there’s no chance of missing a lead as they are prompted for their name and email prior to chatting with you. If you have a spare moment, we’d love for you to check it out!