Laura Diane Hamilton

Technical Product Manager at Groupon

Resumé

9 Ways Asos Gets Ecommerce Usability Wrong

Ecommerce has been around since at least 1995, and by now ecommerce makes up 10-12% of the entire internet.

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

The best practice is to provide JavaScript-based error messages that review the user's inputs in real-time and provide feedback in-line. However, Asos doesn't do this; they wait until the user attempts to submit the form, and they put all the error messages at the top of the form (where the user may not be inclined to look). In addition, the error messages are not as precise and user-friendly as they could be.


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.

Lauradhamilton.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.