The human attention span is extremely limited and vulnerable to distractions. There’s a lot that can happen between your customer adding goodies to the shopping cart to the moment they actually go through and complete the checkout process.

At every step, there’s a risk of you suddenly losing your customer. Ouch!

Today, we’re taking a look into an element in the payment form; credit card icons.

Having card icons placed in the center and in huge fonts on the payment form may seem like a great idea as it lets customers know of the cards that are accepted on your store right away instead of having them find out that their card is not supported after completing the payment form.

However when testing, we found that a lot of users paid more attention to these icons rather than filling out the payment form itself. Some even tried tapping on the icons.

The images above show 2 examples from Rakuten and Toysrus. At Rakuten, the icons are more prominent to users than the payment form itself, while at Toysrus the icons are hidden away among other details on the page; making it very easy for customers to miss.

An ideal position for credit card icons to be placed is near the card number section but bare in mind that it should not outshine the payment form.

Here are 2 more examples from Walmart and Office Depot.

Both websites have placed the card icons near the card number section. The size and positioning are just enough to inform customers of the cards accepted. This allows users to fill out the payment form without unnecessary distraction.

The last step in checkout, the payment form is extremely sensitive and is especially vulnerable to drop-offs. Minimizing the challenges to help customers speed through the checkout process is what your aiming for. Every second counts :)