Minimise errors in a selectable list by placing similar choices together

When paying by card for an online purchase some sites recognise the type of card from the number. Others ask you what type of card you are using. Here’s a typical dropdown menu asking the customer to specify the type of card.

Dropdown list of credit/debit cards

There’s no apparent order to the list of items – it seems that someone doesn’t really think it matters. However, for those who have a Mastercard credit card there are two issues.

Firstly, since users typically have the attention span of a gnat some people are likely to just register the word ‘Mastercard’ on the first line and select it, resulting in an error on submission.

Secondly, whilst debit cards have the word ‘debit’, credit cards do not. This potentially leads to some ambiguity as to whether ‘Mastercard’ on its own refers to the credit card. It’s left to the customer to make that assumption. Note also that for the debit card it’s spelled ‘Mastercard’ and for the alternative it’s MasterCard. That’s just sloppy and will again cause some people to wonder if it’s significant.

In such a list the debit and credit version should be consecutive e.g.

  • Mastercard debit
  • Mastercard credit
  • Visa debit
  • Visa credit
  • Visa electron
  • Solo
  • etc….

Doing it this way makes it quite clear what each card is and also maximises the chance that the customer will see that there is more than one option for some card types.

This principle applies to any list that users need to choose from and is relevant to surveys. I once filled in a survey about how I had paid for my car. One of the early options was a complex description of a contract which looked like the right choice. I nearly selected it and many would have, but I scanned through the rest of the list and found another very similar description further down that was actually the correct one. Had the two options been consecutive in the list there would be more chance that users would spot that the first likely option they come across is not necessarily the right one. It would also have helped if the two options had been worded to highlight the difference.

The bottom line is that when presenting users with choices in a list

  • make the choices explicit
  • word each option to highlight differences
  • put options that could be confused with each other close together