How To Instantly Improve Your Payment Usability?
If you run an online business, you definitely know it’s not easy to sell something, especially when you’re just starting out. Finding customers, getting them buy your product and driving them through the payment process (with the risk of suddenly losing your customer) could be painful. Continue reading to see how to improve your checkout page usability to make your customers more willing to buy.
As you may have guessed, one of the main reasons why shoppers abandon their carts is because they are just comparing online prices. But, did you know that a non-user friendly checkout process (for example one that is too complicated to navigate) also matters? According to Baymard Institute, the average online shopping cart abandonment rate is 68.63% – now you see how important it is to give your customers a fast and easy payment solution.
Table of content
- Increase Your Conversion
- Design with a unique feeling
- One-click payment option
- Recognizable logos
- Ask for essentials only
- Auto-completed form fields
- Use input masks
- Display descriptions and error indicators
- Show the price
- Use clear call to action
- Design with a unique feeling
- Boost The Mobile Experience
- Choose The Payment Gateway Tailored To Your Needs
- Download Usability Checklist (pdf)
Your payment gateway can greatly change your customer’s experience and the way it is presented on your website has a real impact. For 21% of online buyers, the reason they abandon their carts is a checkout process that is too long and, according to Statista, 24% don’t complete their purchase because they get distracted. Usability and payments are even more related than you can imagine.
For a long time banks have been perceived as trustworthy, financial institutions with the highest level of security. Nowadays technology is moving so fast, and we need innovation and ease. New technologies, such as mobile wallets, encryption and tokenization, or payments using wearable devices, are the most innovative answer when we’re talking about purchasing things online.
Today, people live fast, eat fast and want to pay fast, and that’s why solutions like SecurionPay exist. All you need to improve the payment experience is to reduce the number of steps required in a transaction. The perfect situation is when you can pay with just one click, and you know it’s possible now, right? Making payments faster and easier is what retailers and their customers need. All of this comes with a usable and trustworthy experience.
Increase Your Conversion
Payment form design is crucial on the last step of your sales funnel, there’s nothing worse for an ecommerce business than cart abandonment at the final stage of checkout. It also matters for users, especially when it allows them to make purchases in a friendly way.
1. Design with a unique feeling
So it’s great when fast checkout comes with a beautiful design and fits in with your website’s layout. When you’re running a modern, elegant online store, make the checkout look modern and elegant as well.
inkd’s checkout is simple and fit in with website design
Zalora’s checkout page
It should look like it belongs to the site (see the examples above), to help you to build trust and credibility. A badly designed form could be an alarm bell for users. Sometimes just a tiny change in the payment process can make a huge difference. You can find more payment form inspirations here.
2. One-click payment option
Typing in a credit card number each time you want to buy something (especially when you make purchases often) can be an obstacle. Think about your customers: how convenient is it for them to pay with no need to input their credit card information? They can pay with a click and have more time to scroll and seek for other must-have items. And it’s not a fairy tale – now you can integrate payment gateway on your site with “remember me” or cross-sale features. Buying things can be simpler and faster and that’s what it is all about.
When you give customers the possibility to remember their credit card details, it is much easier for them the next time they wish to make a purchase. They will see a pre-filled form, so they just need to write in their CVC number and click the button.
Note:
People don’t like to type in too much information and also when they see some distractions on your website (such as some meaningless fields, needless buttons), they are most likely to abandon the cart and never come back again.
3. Recognizable logos
It’s good to display familiar logos for accepted payment methods, so your customers don’t need to consider whether their cards are accepted or not.
You can also show the relevant logo when the customer starts to type in their card number. It’s easy to identify credit card type with first digits, so save your users time and show the card type automatically. You can see how it works in the examples below.
You can also add security logos. All of this improves your customer’s trust and the likeliness that they will finish the purchasing process, so it comes with a higher conversion.
Security logos on Zappos checkout page
4. Ask for essentials only
The worst thing you can do is to ask customers too much when they fill in the form. Every time you do that, you risk a sudden loss of your client. Get the essentials only, just the information you need to process the payment. Those are:
To process credit card payments you need only:
Credit or debit card number
Credit card expiration date: mm / yy
CVV
There are few unnecessary fields in Asos checkout, such as:
- Card selection – it can be simply replaced by showing the card type automatically (see the point 3 above)
- Cardholder name – it’s not required
Note that users recognize what to type according to input size, e.g., “end date” and “start date” inputs on the Asos form could be shorter and placed in one line.
5. Auto-completed form fields
Give customers an easy and quick payment process and use auto-complete wherever you can. For instance, it’s possible to use geo-targeting and pre-fill the fields with a city name and state. You can also ask for ZIP-code first and then auto-complete fields with address details. If you’re a global seller, turn your Country Selector from standard drop-downs into auto-complete fields. It provides a much better experience for your customers. See the Baymard Institute’s example.
Also, consider whether you have to put the second line to the address input. There are countries where it’s needed, such as United Kingdom or Spain, but in most other European countries it’s unnecessary. Sometimes users don’t know what to type in the line 2 and it comes with validation errors. To avoid that, add label descriptions and make it easy for the customer to know what goes where. Another solution is to indicate the field as “optional”, but if you don’t sell globally and your customers don’t use the field, think of merging the two fields or removing/hiding the second line, because every extra input means lower conversion.
Don’t make a customer create an account to checkout, don’t ask for unneeded fields (birthday? fax #?), etc. But it’s surprising how many merchants ask for information that they can deduce.
For example, you should probably auto-fill the name field for the credit card with the name on the billing/shipping address. Most of the time it will be the same, so make it simply for customers by auto-filling it and making it easy to edit if needed. Also, there’s no need to ask for the credit card type – you can infer that from the card number. Visa always stars with a 4, AMEX with a 34 or 37, etc. So don’t make your customers pick their card type from a drop down.
Finally, if possible try to detect your customer’s state from their ZIP code. There’s really no reason they should re-enter the state when it’s possible to infer it from the ZIP code. The more you can deduce and auto-fill for your customers based on the previous details they provided, the faster they’ll checkout and the less likely they’ll be to abandon the process.
Andrew Youderian, eCommerceFuel.com
6. Use input masks
Input masks help to control what should be typed into a field and can automatically notify users of an error if the input doesn’t match your requirements. It also allows you to write in several types of information into a single input field, which can be helpful on mobile.
You can see how it works in Luke Wroblewski’s video:
7. Display descriptions and error indicators
Descriptions next to each field tells users what they should type in. Show them exactly what they need to write in and where they can find required information. In the example below these are Card Number, Cardholder Name or Security Code.
Symantec shows its hints after hovering the question mark
For instance, you can add a short prompt next to labels and extra descriptions, such as “Card number without dashes or spaces”. Find out more examples in Marcin Treder’s post.
Clear error indicators are also important. Show customers exactly which fields are incorrect and what should be entered in. Avoid the messages such as “Some fields are incorrect”, just give them a clear solution.
Your customers should be able to easily understand error messages, otherwise they are more likely to abandon their cart at checkout.
Symantec’s error displaying example
Moreover, reducing the number of form fields is important in that it does part of the job for the customers. Give them a checkout with input which shows them what should be written into a field. When the input doesn’t match, a user sees the statement that tells them to enter in the right information.
Need more? There are solutions like Skeuocard which allow you to show the users a card template in checkout process, so they know where to type all required information.
8. Show the price
Show your customers how much they will pay for the product (with all extra costs such as shipping). Hiding the price causes people to go back and find the overall cost of their purchase and you can’t be sure that they will return to finish the payment process, which, of course, is not what you want.
9. Use clear call to action
Label the buttons with a clear message to be sure that people understand what exactly will happen when they click on it. It can be a simple “Pay” as well as “Give me access” or “I’m ready to pay”. But, don’t try to create button text that is hard to understand like “Go” or “OK”.
Takeaway
Pre-fill as many fields as possible
Place error messages near the point of error
Use clear error indicators
Add a description next to fields
Use input masks
Reduce the number of payment form fields
Eliminate all distractions
Add security logos
Display familiar logos for accepted payment methods
Match the checkout with your website’s layout
Provide one-click payments
Boost The Mobile Experience
Nowadays we are buying stuff online not only on desktops, but also using tablets and smartphones – our payment behaviour is connected with the devices we use. Mobile payments are not a brand new thing, but they’re escalating quickly and the usability of payment still matters. According to Kount’s report, merchants actively supporting the mobile channel increased from 69% to 82% since last year.
Everybody wants to pay in a convenient way, especially on smart devices. And that is why we need a simpler payment solution. Having less form fields is extremely important for mobile users.
When we talk about mobile users, speed and usability come first.
- They love simple and modern design with possibility of making a one-click payment.
- Consider what fields in the payment form are necessary and don’t even try to add any more.
- Also, keep text input to the minimum and eliminate extra steps. It’s hard to write on a small screen, so remember: the bigger the form, the better.
Creating an intuitive design with minimal amount of steps in mobile payment process is a must if you care about your business growth.
Sometimes it’s good to change just a few little things to improve your payment usability. It’s important for mobile customers to pay quickly an easily. Don’t know where to start? Upgrade your mobile payments with Mobify’s mobile UX checklist.
Takeaway
Provide one-click payments
Reduce text input to the minimum
Give mobile users a big payment form
Eliminate extra steps
Choose The Payment Gateway Tailored To Your Needs
Your payment form looks cheesy and you’re wondering what to do now? You have two options: redesign the whole paying process (which could be costly and time-consuming) or choose the right payment gateway with fully customisable features, so you can have a stunning form in hours.
Before you choose a payment gateway, find out if you can easily integrate it with your website and simply customise the form to fit your layout and customers’ needs. Seek a payment gateway with responsive design to make it easier for your customers to pay on any device. It is important for the checkout process on your page.
Takeaway
Customise your payment gateway to fit your layout
Find the one you can easily integrate with your website
Choose the payment gateway with a responsive design
The easier a payment process is, the more likely customers are to buy from you and to return to your site. Choose the easiest and fastest checkout for your customers with a responsive design and the possibility to display the payment form in multiple languages to suit your customers’ needs.
Additionally, choose the one with no redirections and allow customers to pay directly on your site. This is the most convenient way, especially when purchasing goods on mobile devices. When you move your customers to other sites (completely different from yours), don’t be surprised that some of them won’t finish their transaction. You need to give them a smooth checkout flow and let them buy with ease.
Filling in the forms are an important part of online payment. Of course, you can’t skip that, but you can improve the payment process and make it easier for your customers. Simple checkout has an impact not just on user experience, but also on boosting your conversion. So, choose the right payment gateway and don’t lose customers on the last step of the selling process.
Digital & Social Articles on Business 2 Community
(114)
