What is the convention for order of fields on a mobile payment page?

Question

I'm currently redesigning a mobile checkout, and I've run into a problem when building the "payment details page."

Every checkout in the world needs one of these, and they all basically need to have the same fields:

• Card Details
  • Card Number
  • Name on Card
  • Card Expiry Date
  • CVS Code
• Billing Address
  • Address Street
  • Address Country
  • Address Postcode

Is there a convention for the order which these fields are presented. Do we normally ask for the billing address details first, or the card details first?

It sounds like a trivial question, but having built a couple of mockup wireframes it feels like it makes a lot of difference to the user-feel of the form.

One of the two approaches should signal more clearly to an experienced user that they are on a "payment" page. I just don't know which one.

Aside: I know the correct answer is to user-test both versions, but assume for the minute that I don't have time to user-test at this stage in the design process, and would like to save the later user-testing budget for more critical issues. So ideally I'd like to resolve this issue by using whatever the current convention is.

Answer 1

Given that the user has already put in their shipping details, the best approach to this is to go with the Billing Address input next and the credit card details last.

The reason for this approach is you can by default, pre-populate the data the user has already put into the shipping detail fields over to the billing information to ease the process. This information usually has the same fields such as "Name", "Address", etc. As a fallback, also provide a way to edit the Billing address if needed at that stage.

The card input section should be last. The reason being is I look at it in terms of the overall context of where the user is and the situation they're likely in. After they fill out the shipping/billing information, they will likely scramble at this point to find their wallet and pull out their credit card which may require them to temporarily focus on doing that. I would rather have them do that at the end as opposed to between inputting their shipping and billing information.

As a best practice, also provide other means of payment such as Paypal, Google Wallet, etc., to avoid the "scramble to find wallet" situation.

UPDATED RESOURCES:

Referring to the Baymard Institutes, "Usability benchmark of 100 e-commerce sites ranked by checkout usability performance". Listing below the top three ranked sites, all three require the Shipping/Billing inputs be put in first before payments and review which is put in at the end of the process.

http://baymard.com/checkout-usability/benchmark/top-100

(1)Crate & Barrel: http://baymard.com/checkout-usability/benchmark/top-100/45-crate-barrel

(2)Symantec: http://baymard.com/checkout-usability/benchmark/top-100/34-symantec

(3)Autozone: http://baymard.com/checkout-usability/benchmark/top-100/99-autozone