A guide to payment UX best practices

There is one golden rule of payment UX: make it easy for your customer to do what you want them to do. Here is a quick guide to the main payment UX best practices. 

Make sure your site loads quickly

Page-load speed is so important that it’s used as a ranking factor on search engines. It’s particularly important on your payment pages, because if your pages are too slow to load, your customer may give up in frustration.

Be clear about prices

If possible, show the full price including delivery on the product page. If not, explain that further charges will be added. Ideally, offer the customer a way to calculate them. A reasonable estimate will give them an idea of what they can actually expect to pay.

Once they get to the checkout stage, add the extra charges before you take payment details. For example, have them specify their delivery option as the first step in the payment process. Then tell them immediately what the final cost is. Remember, transparency encourages trust, as does respecting people’s time.

Use a clear icon for the checkout page

In the real world, everyone knows the experience of wanting to pay for something but not finding the checkout. Unless your issue is resolved quickly, you probably just leave the item and go elsewhere. Avoid this in your online store.

Display accepted payment methods clearly

Ensure that you explain your accepted payment methods. Firstly, this tells the customer immediately whether you accept their payment method. Resist the temptation to assume that everybody has a certain payment method, no matter how popular it is. Instead, offer different payment methods to suit different preferences.

Secondly, the major payment methods give the customer massive levels of confidence. Showing that you are trusted with these methods sends a very reassuring signal to your customer.

Make your payment form as simple as possible

Even in the days before mobile went mainstream, complicated payment forms were a sure-fire way to lose customers. Now, your entire website must be designed with mobile users in mind. The good news is that making your payment form simple enough for mobile users to complete easily makes it even more straightforward for people on traditional computers.

In particular, do your best to minimise the number of stages in your payment form.  Once you have drafted it, see if there are any steps you can combine or even remove completely.

Guide your customer from one stage to the next

Allow your customer to complete the form by just scrolling down, entering details in clearly marked fields and clicking submit. If there is more than that, guide them through the different stages.

Add a progress indicator

A customer appreciates an indicator of how much further they have to go, which encourages them to stay on your form.

Clearly indicate which fields are required

Never leave a customer guessing which fields they need to fill in and which they may leave blank. It is frustrating if they guess wrongly.

Provide context where relevant

If there’s any possibility of confusion about how to fill in a field, give them the information they need next to the field, without cluttering up your form with unnecessary text. Just put a text link or have a text box pop up when a customer hovers over or taps an icon.

Arrange form fields from easiest to hardest

The easiest fields are typically personal details like the customer’s name and address. Put these first so the customer progresses quickly through the early stages.

Autofill as much information as possible

In particular, spare the customer the need to enter their address. Leverage the fact that the UK’s postal system makes it very easy to find the exact address if they enter their postcode and house number.

Stick to single-column forms

Multi-column forms are often unpleasant on computers and painful on mobile devices. The only exception to this is entering payment-card details. 

Avoid dropdown menus

These are OK on proper computers but inconvenient on mobile devices. Instead, use clickable images and radio buttons.

Make your error messages understandable

The whole point of an error message is to help the customer sort the issue. So allow them to understand the issue.

Avoid highlighting coupon fields

Have special landing pages for people who arrive because they clicked on special offers. If you must have a coupon-code field, make it a discreet text link so people only notice it if they’re actively looking for it.

Streamline your payment options

It used to be standard advice to offer as many different payment options as possible.  The thinking behind this was that the more options you offered, the more chance you had of supporting the customer’s preferred payment method.  Logically, this makes sense.  In reality, however, customers tend to value simplicity, especially when they are on mobile devices.

This means that the fewer payment options you offer, the less chance there is that the customer will become confused and potentially frustrated.  For some businesses, it may be enough just to support one or two payment methods.  These could be Instant Bank Payments and/or Direct Debits.  Both are widely supported and have low costs when processed through GoCardless.

With Instant Bank Payments, the customer is provided with details of the transaction.  They simply need to confirm that they wish to proceed and funds are confirmed instantly.  Merchants usually receive the funds paid out to them by the next working day at the latest.  The process for confirming Instant Bank Payments has been optimised for mobile.

With Direct Debits, the customer just has to provide their bank details and you can take care of everything else.  You can set up payments from the GoCardless dashboard or use your standard invoicing software (e.g. Xero).  Either way, you can expect to benefit from frictionless payment collection.  This includes a reduction in late payments and the corresponding administration.

We can help

GoCardless is a global payments solution that helps you automate payment collection, cutting down on the amount of financial admin your team needs to deal with. Find out how GoCardless can help you with one-off or recurring payments.