Should the Payment details or Review your order screen be first in checkout?

Question

Some shops have a step called "Review and confirm" in the process that allows users to do a final check on their order before they place it. In some cases this step is placed before the actual page for payment details, in other shops it's placed as true final step.

Option 1: Cart -> Shipping details -> Review your order -> Payment details (with button Place order)

Option 2: Cart -> Shipping details -> Payment details -> Review and confirm your order (with button Place order)

Which would be better and more user friendly?

Answer 1

To be honest I think that will depend on the type of e-commerce you run.

The Option 1 seems to be the most common approach out there as you have the chance to review how much you need to pay and then decide if you want to have all the trouble to fill in your payment details.

The Option 2 is being used by Amazon which seems to make sense for them: first because they have more steps then most e-commerce (and more features like saving multiple cards and addresses), second because many users have accounts with cards and shipping address saved so they should be able to review if they really made the right choices.

And finally an Option 3: Cart -> Shipping details -> Payment (All three steps will have the list of items on the sidebar) - Topshop does that and possibly many others. I like the fact that I can see what I'm buying and how much has been added in each step.

Answer 2

I understand that I'll probably get some flak for this answer, but I'm going to have to disagree with every answer posted thus far. I like to take a logical approach to UX and even if you do opt for option two, hopefully I can at least convey another point of view.

When someone enters their payment information, 999 times out of 1000 they know exactly what they are buying. They know (at least roughly) what the total cost of all of the items added to their cart is. When they go to check out with option 1, they will have a clear reminder of everything they have added. When someone clicks 'next' and fills out their payment details, 999 times out of 1000 they are ready to make the exchange. If you use option 2, you are accounting for the one person out of a thousand who has buyer's remorse at the last second or somehow managed to add something to their cart that they didn't mean to, then skipped over the confirmation, and has now paid the wrong amount. If you use option 2 to account for this one person, you are providing an unnecessary obstacle for the 999 people who are simply ready to pay for the product(s).

You can still permit easy reversal of actions by utilizing a system similar to Amazon's. Make it possible for the user to cancel their order before it has been shipped. You could even place a link to cancel an order on the same page as the message that thanks the user for their business.

Answer 3

As per your description Option 2 makes more sense as it is giving the user one chance to take a step back from current step. In this case, the user can change the info if he/she wants to be.

According to one of the Human Computer Interface Principle : Permit easy reversal of actions, Option 2 is more correct to be implemented.

Answer 4

You do not want a gap between the final purchase step and user's understanding of what is being purchased. It should be absolutely clear.

Option1 requires user to rely on their memory to be sure of what they are purchasing. One can imaging scenarios where user is distracted on the payments screen.

Option 2 eliminates any such problem. User sees everything and places the order. So go with Option 2.