Loading Form...
Thank you
May 12, 2010 | 5 minute read
written by Armando
Shopping cart abandonment is an epidemic in online retailing, with some companies reporting that more than 60% of checkouts end without a conversion.
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.
Fighting Frustration
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.
Single-page checkout forms, particularly those that use JavaScript to march shoppers through the process, also provide better step-by-step visibility. Shoppers know what they must do and where they are in the process.
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 stands for asynchronous JavaScript and XML, and it is a web development technique that uses several client-side languages and server calls to make web pages more interactive or better performing.
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.
Ajax addresses this issue by validating the form while the shopper fills it out. Server calls—if needed—are made asynchronously without reloading the page or potentially erasing the form. Users get feedback as soon as a form field is complete (when the click into the next field), not once the form is submitted. In some cases, the JavaScript might be able to do the form validation without connecting to the server at all.
Having explained what both single page checkouts and Ajax forms seek to accomplish, it is time to address the advantages these techniques provide.
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.
While there is generally no reason to use a multi-page checkout, there are things to consider when using Ajax.
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.