How to Design Web Forms That Don't Suck

As an online retailer, Web forms are your bread and butter. There’s no use putting effort into designing great product pages and getting your customers to the checkout with bulging shopping carts only to have them bail out because your checkout process sucks.

All businesses lose a percentage of customers during the checkout process; what percentage you lose depends on how badly your forms perform. Here are several ill-conceived practices that create bad checkout experiences — and how to avoid them.

At the top of the page, Two Peas tells you checkout is a four-step process and offers a continue-shopping option.
(Click for larger image).1. When the customers make a mistake, you discard all their work

You've no doubt encountered this type of form yourself on the Web. You’re asked to enter data into the form, and when you press the Submit button you’re told that something is wrong. In the meantime all the data — or at least a significant portion of it — has been removed from the form.

You have to go back and enter the details all over again. Not only is this frustrating, but some buyers will simply give up at this point and go somewhere else.

If you need to validate the data in your form, perform the validation as the shopper enters the data. That way if there’s a problem it shows up immediately, and it can be fixed.

If you must wait until the shopper clicks the Submit button to validate the data, make sure all the information he entered into the form is still there when you return the customer to the form to make corrections. Then all he has to do is to fix the incorrect data — not complete the entire form all over again.

2. Let your customers guess what format you want them to use

From a shopper’s point of view, there’s nothing more frustrating than to enter data and click the Submit button only to find that a special data format is required and now the customer has to go back to fix the problem.

This practice begs the question as to why the customer wasn't told how to complete the form as they were filling it in, and why they were left to guess what the form designer wanted them to do.

Customers aren't psychic — they'll do a much better job of completing your forms when they know exactly what is required of them. Setting rules and not sharing them with your customers doesn't enhance your relationship.

Quirky and functional, Photojojo nabs your zip code to calculate shipping before you get to this page and then completes the details for you.
(Click for larger image).3. Force customers to fill out multiple-page Web forms

You’ve no doubt filled in a form that runs for a few pages. You enter some data, click a Submit button and you’re taken to yet another screen of information — and then another and so on. At some point you look up and realize you have no idea how far through the process you are or, worse still, how much more there is to go.

While the form designer probably thought that it was better not to tell the hapless customer just how much data he was going to have to enter, in fact it’s much more reassuring to a customer to know exactly how long the form is. Giving details such as “Page 3 of 5 pages” helps customers to know where they are, and that there’s a light at the end of the tunnel.

However, before you start slapping page numbers on your forms, ask yourself if you can simplify the form and require less information.

4. Ask customers for information you don’t need (and they don't want to give you)

How often have you been asked for information that you simply should not have to provide when you are buying something? There’s no valid reason why a customer should have to register on your Web site with an ID and password just to buy something.

Certainly you need the name, address and credit card details, but you shouldn't force customers into a site-registration process. You might make this optional, but don’t make it compulsory — it’s just plain annoying. Ditto forcing them to answer questions like how they found your site, their birth date, age or anything not directly relevant to the transaction.

5. Treat your site like a scavenger hunt and make customers dig around to find what they want

Getting trapped in the shopping cart so you can’t continue shopping is one of the more frustrating shopping cart experiences. Lumped into that same 'frustrating' category? Not being able to find the shopping cart, or not being able to get back to it without adding something to it.

At a Touch of Europe you can place an order without signing up for an account, but you have to read the fine print.
(Click for larger image).

Always assume that somebody who is buying one thing from you may want to buy multiple items, and add a Continue Shopping link to your shopping cart. Your customer will know how to proceed, and he won't be nervous about losing everything in the cart if he presses the browser Back button.

Also, always provide a link back to the shopping cart so a customer can easily find it. A customer shouldn't have to put something extra in the shopping cart just to be able to find it so he can checkout.

Tips to Improve Your Web Forms

Web forms on an e-commerce site are critical to the buying process; your forms must be simple to understand and to complete. Structure your forms logically and position questions from top to bottom down the page. Add labels above the text boxes so customers know what information you want in them. Clearly identify required data formats. For example if you need dates in the mm/dd/yyyy format, say so — don't make customers guess.

Place your Submit button immediately under the form on the left-hand side so that it’s easily found. Include a Reset button, but don’t place it where it can be clicked accidentally.

Be consistent throughout your form — if a customer must check a checkbox to sign up for one thing, don't require them to check a box to opt-out of something else later on. Visitors should be able “learn” your form's logic so they can fill it out more easily.

If you’re not sure how your forms perform ask someone to fill one out in front of you and listen to what they’re saying. Don't make excuses and don't help them — if they can’t fill in your form chances are that your customers can’t either, and it's time to understand where the problems crop up.

Good forms are crucial to a successful online business. Make sure that yours are easy to complete so that the customers you’ve worked so hard to attract to your business actually progress successfully through the buying process.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com

Keyless car systems confuse drivers, raise safety questionsHow to Design Web Forms That Don’t Suck