Paul Rouke and PRWD on User Centered Design

As part of our continual improvements to the UCDCommerce platform, I’ve recently been working on implementing some improvements to the checkout process.  One of the most interesting pieces of work involved with this was the implementation of additional credit/debit card validation checks.  Validation is the process of establishing whether or not a given piece of data is valid - that it meets the forms and standards expected.  In the case of e-commerce checkout processes, it is important to ensure that the details that the user submits are correct, and to give feedback to the user as they are submitting them.

Handling of credit card data is of paramount importance for trust and security, so it’s a good idea to check, as much as possible, that the user has entered the details correctly before submission.  If the user does accidentally submit invalid data, this can lead to payments failing to go through, which is potentially worrying for the user and may also be an overhead for the retailer if they need to respond to any user support requests on the subject.

Fortunately, there are a number of checks that can be done to ensure that credit card data is valid, before submitting the data to the card issuer for payment processing.  This can’t ensure that the user made no mistakes at all, but it can catch most errors before submission.  Amongst the possible checks are:

• Number of digits
  An obvious check is to ensure that the number of digits is correct, for the given type of card.
• Card prefix
  The first few digits (normally the first two or four digits) of a credit card number depend on the type of the card (e.g. MasterCard, Visa, AmEx).  It is possible to check that the prefix digits match the user’s selection of card type.
• Luhn algorithm check
  The Luhn Algorithm is a simple formula which can be used to check the validity of many different types of ID number, including credit card numbers.  If there’s a mis-typed digit in the number, this check is likely to catch it.

When combined, these checks all act to ensure that any errors in the input of a credit card number are detected before submission, giving the user an opportunity to double-check and correct their input before submission. What we have implemented is a simple system which gives visual feedback to the user, showing a green tick symbol when they have inputted a valid credit card number which conforms to all of the rules mentioned above.  Here’s how it looks on one of our clients’ sites:

When the user begins entering their payment card number, no feedback is given until a certain number of digits have been entered:

If the user enters an invalid number, they get this immediate feedback:

And if the number entered is valid, the user is encouraged by this feedback:

For more information, Wikipedia provides a good run-down of the various credit card numbers and their rules here.

Tags: UCDcommerce