AJAX-based One-Page Checkout: Video
We’ve touted the benefits of a one-page checkout before, but for all you visual learners we have recorded a screencast of the one page checkout process. This New York Times article from last year (Registration required) found that for TJMaxx.com and HomeGoods.com, “Fifty percent more customers completed the one-page checkout process than finished the multipage process.”
The above video shows the process for a user with an account. They add the product to the shopping cart, take a second to check shipping costs to their ZIP code, and then proceed to the one-page checkout. Once signed in the billing and shipping addresses are filled and the shipping options are loaded. Thanks to AJAX this all occurs without refreshing the page. The customer enters their credit card information, reviews the information and then submits the order. From product page to order completion the process takes a little over a minute. (The video cuts off because 4111-1111-1111-1111 is a fake credit card.) You can see the video here.
This second video shows the one page process for a first-time customer. The process is the same except for the customer entering the addresses manually. You can see how the name for the credit card is automatically filled while the customer enters their name in the billing address. Once the shipping address is filled the shipping options are loaded, once again using AJAX to keep the page from refreshing. (This video stops short for the same reason as the first, fake credit cards do not get authorized.)
We’re proud of the one-page checkout we created and hope you enjoy the videos. Shopping cart abandonment is the arch-enemy of every eCommerce store owner and one-page-checkout is a solid way to combat the problem (50 Percent increase in conversion rates). This particular page is for bentgear.com, a supplier of hardcore outdoor gear. Head over there next time you need a backpack, sleeping bag or just a new fleece coat.
Posted by Chris | September 8, 2006
Jonathan Young’s World of Wonders » More Ajax articles flowing in here right now… September 12th, 2006
[…] - a short article about one-paged based check-out systems and why they work >>Â […]
BentGear: AJAX based One-page Checkout -Video » Dee’s-Planet! Blog September 12th, 2006
[…] Varien | ajaxian […]
Gamermk September 13th, 2006
It looks that you’ve created a very effective product, yet you seem to not be able to grasp the simple concept of drop down menus being horrible usablility.
I bet if you look hard you can find a stat on how much your sales drop by simply having drop down menus on your site.
Just food for thought.
SitePoint Blogs » Sep 13, 2006 News Wire September 13th, 2006
[…] AJAX-based One-Page Checkout: Video For design firm Varien, distilling the checkout process down to a single page with carefully crafted JavaScript and AJAX features to assist the customer in filling it in resulted in a 50% increase in the conversion rate of an ecommerce site. (tags: business design ajax javascript) […]
Siyaxoxa.com » Blog Archive » Various Things September 17th, 2006
[…] So most manager types/clients either think AJAX is a swish ‘coolo’ thing or a waste fo a time - personally i think they’re both wrong AJAX is a damn good way to improove user experience and thus increase revenue, withness: One-Page CheckOut, this aparently increased thier conversion rate (browsers vs purchasers) by 50% […]
Sapientone » Archivio » come incrementare le vendite con ajax September 18th, 2006
[…] Bene, sul blog di Varien vengono ora publicati due video esplicativi riguardanti questo nuovo modo di concepire l’interfaccia utente per e-commerce. […]
Admin September 22nd, 2006
Sometimes comments get lost among the spam. So it happened with Gamermk’s comment (#3). My question is, what do you suggest to replace the dropdown menu? How would a customer select the type of credit card they use? Should we use radio buttons for everything?
EVERY ecommerce site uses dropdown menus, and because of this customers are quite used to them. I am sure I could look hard and never find that stat. Food for thought.
simon r jones September 23rd, 2006
Just like to first say, an excellent article. Always a good idea to simplify the checkout process.
However, I think Gamermk’s comments are valid - Joe Clark brought up this issue of awful usabilty for disabled users of long pull-down select lists a long time ago (in his accessibilty book). It’s not much fun scrolling through a list of 100s of countries for able users either!
In their e-commerce usabilty report Neilsen Norman Group also pointed out “one of the more suprising results was how much selection lists annoyed users.” I agree users are used to the select lists, but it doesn’t mean its the best method of doing things.
See Bruce Lawson’s excellent article - http://www.brucelawson.co.uk/index.php/2006/forms-inputting-country-names/
Admin September 25th, 2006
Simon, after some more thought I do see Gamermk and your’s point about scrolling through lists. However, just like the first comment on Bruce Lawson’s article, I suggest simply hitting the letter of the country you are looking for.
There are 50 states as well, and when I send things to my family in Washington I do not sit there and scroll through all 50. I select the list, hit ‘w’ and move on. While dropdowns are not the best solution, I still believe they are the best we have now. The method suggested by Bruce Lawson is interesting, but I believe this would only serve to confuse customers at first. Maybe one day we will find a solution.
e-commerce-blog.de September 26th, 2006
und wieder OneScreen Checkout
Q-BEE hat einen netten Artikel zu One Page Check Out / One Screen Check Out gefunden. So wie ich das lese, scheint das Thema Ihn doch zu beschäftigen. Ich habe mich sehr intensiv mit dem Thema mal beschäftigt, zu der Zeit gab es noch kein Web…
zylstra March 17th, 2007
“I suggest simply hitting the letter of the country you are looking for.” How can you suggest that when the experts, Rich Pedley and Bruce Lawson, don’t even know of it?
ben schynger April 21st, 2007
what about the security aspect.. how secure is the page given that it is using AJAX with browser submitting the forms… how would u plan to implement ‘https’ for this page….
Ajax is insecure in ecommerce August 8th, 2007
Ajax is terribly insecure in ecommerce. Whenever you allow the client to query the database you run into security issues.
For example, in the address book portion of the script, a savy person can use manipulate the drop down to find the address books of just about any customer.
Programming Tutorials September 21st, 2007
Programming Tutorials
I couldn’t understand some parts of this article, but it sounds interesting
rick cunningham October 23rd, 2007
How do I purchase the product and what is the price of the one-page checkout program ?
thanks
rick
Chris October 24th, 2007
Rick,
We do not sell the one-page checkout as a product itself, but if you would like to discuss a project please send us a note from the contact form and we will get back to you.
Sincerely,
Chris Marshall
links for 2008-01-30 at James A. Arconati January 29th, 2008
[…] AJAX-based One-Page Checkout: Video :: Varien :: Open Source eCommerce Development and Consulting Fi… We’ve touted the benefits of a one-page checkout before, but for all you visual learners we have recorded a screencast of the one page checkout process. This New York Times article from last year (Registration required) found that for TJMaxx.com and Hom (tags: blogs video web-developer web-developer/ecommerce reference) […]
shehz October 7th, 2008
I would really like to know more about this one page checkout . How can i get it . A client of wants this kind of checkout. I am trying to develop it but there is very little help available in this area. You can please guide me or tell me the cost of acquiring it
Thanks
shehz October 7th, 2008
just an update I have being able to display all the fields on one pages. but none of the submit buttons are working like demonstrated in the video. Any help or guidance would be much appreciated
James November 18th, 2008
Videos are a great tool! You may want to take a look at Treepodia and see how they combine smart video and ecommerce. It is simply a different experience for the users.
HP December 3rd, 2008
Excellent article. I am looking for a one-page checkout solution for my web site.
Phil April 14th, 2009
It would be awesome to see a nice one-page checkout like is shown on the bentgear.com site in the Magento software. They use osCommerce it looks like.
eCommerce June 11th, 2009
Videos are good and Thank you information…