Every ecommerce store accepts credit cards in one way or another.
Yet, so often the payment page is done wrong.
Etailers of all types—including $2 billion+ market cap etailers such as Asos—often inflict confusing, redundant, and annoying payment forms on their customers.
Overall, asos.com is not a bad website. It's actually a fairly nice site. The merchandise selection is great; the browsing and filtering functionality is good; the "View Catwalk" feature is a well-executed and innovative feature.
However, their payment page—where the user enters her credit card information—has a significant number of usability problems.
Here is Asos's payment page:
Mistake #1: Failing to localize properly
I had already indicated that I live in the United States on a previous page. However, there was no localization of the payment page. I was offered this wide variety of payment methods to choose from—including, for example, iDEAL (which is only used in the Netherlands).
Mistake #2: No Auto-Formatting of the Credit Card Number
When the user enters her credit card number, it ends up as just one long string of 16 numbers. This makes it difficult to keep track of where you are when entering the number. It also makes it more difficult to check that you have entered the correct number. The usability best practice would be to provide some unobtrusive auto-formatting, such as adding a space every 4 digits.
Mistake #3: Redundant Fields
I already provided my first and last name on the "About you" page, yet I was asked to reenter my name on the payment page.
Mistake #4: Input Fields of Uniform Length
For input fields with shorter inputs such as zip code or expiration date, the usability best practice is to provide a shorter input field whose length corresponds to the length of the expected input. However, for the "End date" and "Start date" input fields, Asos kept them the same length as the fields above. This tends to confuse the user.
Mistake #5: Combining Expiration Date and Month
Requiring the customer to type in an expiration date such as "01/15" is abnormal and confusing. A better design would be to have two input fields (or two drop-down menus), one for the month and one for the year, with a "/" in between them.
Furthermore, it would be better to call it an "expiration date," per the industry standard, as opposed to the unusual term "end date."
Mistake #6: Requesting Unnecessary Fields
Asos also requested the "start date." I am not even sure what this is, and I work in ecommerce. Maybe it is a UK thing.
Mistake #6, Part 2: Requesting More Unnecessary Fields
Asos also requested an "issue number." I definitely don't know what this is.
Mistake #7: Error Messages at the Top
Mistake #8: Not Auto-Detecting the Credit Card Type
Given that I input my credit card number, Asos should be able to automatically detect that it is a Visa. Instead, Asos requires me to select a card type. This adds additional unnecessary friction to the checkout process.
Mistake #9: Security Code on the Next Page
After the user fills out all of her payment information on the payment page and proceeds to the final page, she is then prompted for the security code on her credit card. By this time, she may have already put her credit card back into her wallet. Asking for additional credit-card information on the "Confirm & Pay" page is abnormal and confusing.