Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Will this be for digital products (i.e. downloads, etc.)? Or you will you be shipping tangible goods? If the latter, there will need to be shipping details as well. –  jnmnrd Jan 17 at 14:54
    
@JNMNRD It's for tangible goods, however the shipping details have already been entered on a previous page. Obviously there will be a control on this page to "use shipping details as delivery address." My question is about whether or not the {billing address section} goes before or after {card details section} by convention, in the section of your checkout devoted to just "payment" related data. –  Racheet Jan 17 at 15:21

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
    
I understand your reasoning, but I could write an equally compelling post arguing the opposite. Do you know if one way or the other is actually a convention? –  Racheet Jan 17 at 17:02
1  
Referring to the Baymard Institutes, "Usability benchmark of 100 e-commerce sites ranked by checkout usability performance" (baymard.com/checkout-usability/benchmark/top-100) The top three ranked sites go the way I suggested. Refer to the links below for an in-depth study with screenshots (1)Crate & Barrel: baymard.com/checkout-usability/benchmark/top-100/… (2)Symantec: baymard.com/checkout-usability/benchmark/top-100/34-symantec (3)Autozone: baymard.com/checkout-usability/benchmark/top-100/99-autozone –  jnmnrd Jan 17 at 17:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.