The Importance Of UX Design For Online Payment Forms

Selling products and services online is a psychological journey. At any step, you could lose a potential customer. Nowhere in this journey is the risk greater than the final stage, the checkout.

Even today, years after web and mobile commerce have become a normal consumer activity, retailers still lose nearly 69% of customers in the checkout. Cart abandonment is a massive, loss-making area for online and multi-channel retailers.

Designing the perfect user-experience for checkouts isn’t easy; but compared to losing valuable revenue; this is an investment worth making.

Online Payment Form Considerations

Here are a few things to consider when designing an online payments form.

  1. Choice paralysis

When it comes to making payments, there is a tremendous selection for customers to choose from. A couple of decades ago there were only a few credit and debit card brands. Now, there are dozens of ways to pay. In some countries, such as Germany and Russia, Visa and MasterCard don’t dominate the market, with local solutions more relevant to customers needs and cultural habits.

At the same time, PayPal is popular enough to include in most online checkouts. But with Apple, Android, Samsung and Alipay, along with numerous others, where should retailers draw the line? How much choice is too much choice? The key is to avoid customers getting tripped up with choice paralysis and abandoning their shopping cart.

  1. Failing to signpost options

Too much choice can cause customers to abandon carts. The same is true when online form designers fail to indicate a choice or option is possible. For example, most customers have the same billing and delivery address. Not always, though. It should be as simple as clicking a button, which should be positioned clearly so that a customer doesn’t start filling out unnecessary information.

Ensure these choices are placed next to one another, to make it clear that these are mutually exclusive – one or the other, rather than one, followed by the other, thus not making it seem like a choice. Extra fields reduce purchase completions. Especially on mobiles. Signpost what is and isn’t a choice – to ensure those with the intention to purchase don’t give up due to the amount of data they need to input.

  1. Call-to-Action Overload

online payment form page example


Take a look at the above online form. There are six green CTA buttons, all of which can be used to reduce the balance and/or pay for this order. Plus, two “Next: review order” buttons. CTA’s are a vital aspect of online shopping, but again, how many represents too much choice?

This is perhaps an extreme example, but imagine this on a mobile; what would you do? Consider how to make CTA’s as clear as possible, since every second a customer spends thinking about how to complete a purchase is another second whereby they could easily click back and go elsewhere.

  1. Limit Visible Form Fields

One way to reduce options, without cutting down the number of form fields, would be to use a progressive disclosure approach. Couple that with clear signposts and a progress bar, making it far easier for a customer to see how close they are getting to the end of the journey. Psychologically, this is reassuring, since one of the main reasons people abandon carts is not knowing enough or not feeling sufficiently confident in the purchase they are making.

Designing the perfect online form isn’t easy, but it’s not impossible. Always think about it from a customer’s perspective. When designing input fields, ask, is this necessary? When positioning CTA’s and input buttons, get a fresh perspective. Do you make it clear what everything is for and how it helps a customer complete their purchase?

Merchants that design these forms with minimal friction, enough information and clarity – both for browsers and phones – will find that cart abandonment is not such an issue.

For more on online payment forms read this post The Anatomy Of An Online Payment Form