The performance of an eCommerce website typically hinges on the success of the checkout experience. The principles behind effective form design can be used to optimize the checkout process – and deliver higher revenue.

Under-Optimized Carts Lose Customers

• 67.75% of shopping carts are abandoned before purchase
• 56% of shoppers jump ship after being presented with unexpected costs prior to purchase
• 10% abandon their cart because of an overlong checkout process

Designing Checkout Forms: The Good, the Bad & the Ugly

As a business, you’re performing a constant balancing act between collecting visitor information and driving high conversions. You need to capture customer data by offering forms these customers won’t mind filling out. Below, we’ve put together some do’s and don’ts to help you pull this off:

Do make your checkout forms light on fields, particularly for returning customers you already know something about. Zappos.com does a great job of streamlining the process for both new and repeat visitors:

For forms that exceed a single page, do use a progress bar. Amazon.com stops customers from getting fed up and logging out by clearly tracking and displaying where they’re at in the checkout process:

Do use color to highlight important actions. Many forms have a uniform button color, but Target.com does a terrific job of differentiating between primary and secondary action buttons with a bright red and a washed-out blue. In a glance, customers know which to click to finalize their order:

Do provide visual examples of related products – when appropriate. Bose.com does an excellent job of showcasing accessories that actually complement the product you’re purchasing, and it’s easy to update your cart accordingly if you choose to add them:

Don’t ask your users to fill in a promo code right off the bat. Putting them in at the beginning of your form, which Macy’s.com makes the mistake of doing, can hurt conversion rates. Minimizing steps at every point diminishes your chance of losing customers:

Don’t be afraid to create a checkout process that spans multiple pages if it saves your form from looking overly cluttered. Lenovo.com provides an excess of information – you don’t know where to look, and it isn’t made clear which step comes first. It’s a huge visual turn-off that makes the process to purchase look like more of a headache than it’s worth:

Putting It All Together

Create a good form experience by designing forms that are as simple as possible to fill out – the faster the customer checks out, the faster you close the sale. This means good form design basically translates to usability. Our tips for making form completion and cart checkout easy on the customer:

• Minimize fields where you can. Indicate when a field is optional and when it’s compulsory.
• If a field hasn’t been filled out correctly, quickly call attention to it with the color red rather than a written correction.
• Be completely straight with your customers about product availability. Also, make sure it’s easy for them to add to their cart throughout the process.
• Ensure your “back” button is functional at all times.
• Send a confirmation email to reassure them the purchase process was a success.
• Use color and images wisely and often.
• Provide a clear path to completion with numbers, check marks or a progress indicator. Break up longer forms by grouping them into field sets that make sense.
• Don’t forget to insert a little of your site’s personality into the content and design – provided it doesn’t slow the checkout process down.