Usability Medium Priority 75% Adoption 5 Seconds Saved
The only place anyone has to select their type of credit card (MasterCard, Visa, etc.) is in a poorly optimized online checkout. You don’t have to tell the grocery store clerk you use Visa, and you don’t have to tell many websites the same. The first few numbers in a credit card number signal this.
Still, many websites ask the user to select their card type. It’s not a daunting task, but it’s an extra step that slows the checkout process and adds perceived effort.
Detecting the card type is a straightforward feature to implement. The most common method is to have various credit card logos next to the card number field, and when a card type is detected, the correct logo is highlighted and the others are faded out.
The best implementations detect is as soon as the first few numbers are entered – doing this also serves as a subtle sort of positive reinforcement. It says “Hey, you’re entering a valid card, keep it up!”
As you can imagine, this is much simpler than having a user scan through a dropdown menu to select the card type.
Automatically Detect Card Type has an 75% adoption rate among our benchmark group.
Next to the credit card field, highlight the logo of the detected card type.
Doing so live helps move the user along, reassuring them that they’re entering a valid card and getting closer to their purchase.