Preventing even a relatively small percentage of these abandoned carts would significantly improve revenues and profits.
While purchase price and shipping costs are the leading reported causes of shopping cart abandonment, ease of use is close behind.
One increasingly popular method used to slash cart abandonment rates is to introduce single-page, Ajax-driven checkout forms that combine the convenience of a single page format with asynchronous form validation.
As we start this discussion of the pros and cons of single-page, Ajax checkouts, I need to describe why these two methods—one pagers and Ajax—are employed and what frustrating problems they seek to solve.
Single-Page Checkout is Faster, Easier to Understand
Single-page checkout is faster and easier so that more customers convert.
When you're trying to decide if your checkout process should be a single page or several pages, consider the analogy of a supermarket. When grocery shopping, consumers always gravitate toward the shortest checkout lanes or fastest cashiers. By definition, a single-page checkout is faster than a multi-page checkout if for no reason other than there are no additional pages to load.
If you need more evidence, consider a simple A/B test conducted on the 2010 Vancouver Olympics online store earlier this year.
In the test, half of all potential customers were directed to a two-page checkout and half to a single-page checkout. Almost immediately, the single-page checkout proved to have a better conversion rate. In fact, the successful completion rate for the entire checkout process rose some 21.8% thanks to the single-page form.
Ajax Validates Forms Before Users Submit
If you have ever filled out a long online form, clicked submit, and then had the form erase everything they input and return a message like "address not valid," "passwords don't match," or "please answer question #2," you will understand the value of Ajax.
Ajax's best trick, if you will, is getting data from the web server without reloading a page or doing server-like actions on the client side. In a non-Ajax web form or checkout, the user fills out the entire form and submits it. The form data is sent to the web server, and a server-side scripting language validates the form to make sure that it is filled out properly and completely. If there are errors in the fields, like a missing "@" in an email address or a missing postal code, the web server sends an error message to the browser, which reloads the page for the user to fill out again.
In non-Ajax checkout forms, if the shopper is lucky, the web server may return the field data along with the error message for the browser to render, so that not everything will have to be filled out again. But the process still takes time and can be frustrating, especially if the user doesn't completely understand what went wrong.
The PROS of Using a Single Page, Ajax Checkout Process
Having explained what both single page checkouts and Ajax forms seek to accomplish, it is time to address the advantages these techniques provide.
- More conversions As mentioned above, single-page checkouts may significantly improve sales conversions, boosting a merchant's bottom line.
- Better page performance While dozens of factors contribute to page load times, using a single, Ajax-powered checkout form should improve user experience. This is important since studies from Akamai, Shopzilla, Google, and Bing all suggest that consumers won't tolerate slow loading pages.
- Better customer satisfaction With better performance and no agitating form validation issues, customers should enjoy a better overall shopping experience.
- Advanced Interactivity Once a merchant has decided to add Ajax, it's possible to make the page more interactive, which again, may improve customer experience.
The PROS to using an Ajax, one-page checkout process tend to focus on customers and profits. By contrast, the CONS tend to be development related.
The CONS of Using a Single-Page, Ajax Checkout Process
While there is generally no reason to use a multi-page checkout, there are things to consider when using Ajax.
- Some browser functions won't necessarily behave as expected—Because Ajax does not reload a page to update content the browser's back button will not bring the user back to an early step in the checkout as might be expected. There is a work around, but it requires more development time.
- Ajax requires more upfront investment Because Ajax will increase development time, merchants may have to pay a little more or use more development hours.
Ajax on the Scale
If you're trying to decide whether or not to employ Ajax in your company's checkout process, weigh the potential benefits in customer satisfaction and more sales with the additional development costs. Even after you make your choice, continue to test your checkout process, since even a minor improvement can mean more revenue for your business.
This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.