Reduce Cart Abandonment Using Form Design Principles

March 27, 2014
Avatar
Matt Quirie
Honeycomb and bee

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:

Zappos Login Form

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:

Amazon Checkout Process Progress Bar

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:

Submit Button

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:

Bose Shopping Cart

 

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 ratesMinimizing steps at every point diminishes your chance of losing customers:

Promo Code for Shopping Carts

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:

Lenovo Shopping Cart

 

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.

Hey There!

Thanks for reaching out.

Name
Phone
Email
What're you interested in?
Message

Thanks!
We'll be in touch shortly.

Until then, why not browse some of our work?

See our work