E-Commerce Payments: How to Improve Usability

E-Commerce Payments: How to Improve Usability

July 12, 2016

Running an online business could be a challenge, especially when you’re just starting out. One of the first things to do is to find customers and getting them to buy. But what if the payment process is badly designed? In this article, we’ll show you how you can improve your ecommerce checkout page usability.

According to Baymard Institute, the average online shopping cart abandonment rate is 68,63%, so it’s crucial to give customers the best experience on beautifully designed website with simple navigation.

People abandon their carts mostly because they are just comparing prices online, but Statista’s research shows that 24% of online buyers don’t complete the purchase process, because they get distracted and for 21% checkout process takes too long. Now you can see clearly that usability and payments are even more related than you can imagine.

Good news is that you may improve your payments to make customers love you. Here’s how:

1. Reduce the number of steps

That’s one of the basics (yet very effective), but still a lot of merchants forget about it. Reducing the number of steps required in transaction may boost your conversion instantly. Of course, the perfect situation is when customers can pay with just one click, and you should know it’s possible. There are payment gateways with „remember me” option, so customer’s data are saved and it’s much easier for him/her next time they wish to make a purchase.

To process credit card payments you need only:

  • Credit or debit card number
  • Credit card expiration date: mm / yy
  • CVV

2. Design for users

Well-designed checkout is not only about the number of steps, but also it should fit into your website’s layout. Sometimes it needs a tiny change to add, but it can make a huge difference. When the checkout looks like it belongs to the site, it tells users that they can trust you.

3. Display familiar logos

When visitors see logos for accepted payment methods, they don’t have to consider whether their cards are accepted or not. They don’t either need to decide which card they need to choose – you can show automatically the relevant logo when a customer starts to type in his/her card number (e.g. Visa always starts with 4, MasterCard with 5, etc.). The card type is identified by first digits, so it saves user’s time and make payments more friendly.

Auto Logo
Auto Logo 2

Automatic credit card logo displaying in SecurionPay’s checkout

Speaking of logos, you can also add security badges to improve customer’s trust, which may come with higher conversion.

Zappos Security Bagdes

4. Auto-completed form fields

It’s surprising how many merchants ask for information that they can deduce. Keep in mind that every extra input means lower conversion. To make your payment process quick and easy, you can use autocomplete wherever possible (e.g. pre-fill the fields with a city name and state by using geo-targeting or try to detect your customer’s state from their ZIP code). So, make it simple for customers by auto-filling and, at the same time, make it easy to edit if needed.

5. Show clear error indicators

With error indicators you can show customers exactly which fields are incorrect and what should be entered in. Give users a clear solution to help them easily understand what’s wrong. Otherwise, they are more likely to abandon their cart at checkout.Also, provide descriptions next to each field to tell customers what should be typed in. Go even a step further and show in the input section what should be written into a field. When the input doesn’t match, show user a statement that tells him/her to enter in the right information. You can also display some hints to make payment process easier (see the example below: Security code hint in Urban Outfitter’s checkout).

Security Code

6. Don’t hide the price

Your customers should know how much they’ll pay for the product, including the shipping and all extra costs. Surprises are great, but not when they come with unexpected costs. You can, for example, show the overall price on the payment button.

Overall Price

Example of payment button in SecurionPay’s checkout

7. Use clear call to action

And speaking of button, use a clear message on them to be sure that people understand what exactly will happen when they click on it. Keep it simple, there’s no need to use some creative forms. Simple Pay as well as Give me access could work best.

In short: Meet your customer’s needs

There’s nothing better for online buyers than a smooth checkout flow, which lets them buy with ease. All you need to do is to make a payment process as simple as possible and online shoppers will be more willing to buy on your website and to return to your online store. Don’t forget about responsive design – mobile commerce is getting more and more popular, and smartphones are the part of our everyday reality.

Moreover, it’s better when you allow customers to pay directly on your site, with no redirections to external services. This is not only convenient way to pay, but also it lets you reduce the risk of losing customers. Also, give your customers the possibility to display the payment form in multiple languages, especially when you sell globally.

Payment form is the last step of your sales funnel, so it needs to be well designed. Give your customers the best payment experience and watch your sales grow.


    Leave a Reply

    Related Stories

    Customer Experience 01
    March 28, 2017

    E-commerce Customer Experience: The Shift from User Experience

    As an E-Commerce retailer, shifting your focus from the user experience to the customer experience will benefit you for the long run.