If users have no way of paying you, they have no way of buying anything from you, and so it’s clear that accepting a wide range of payment methods is a good idea to ensure that all users actually have a way of sending money your way.
Yet, during our checkout usability studies, we observed how just presenting the user with a bunch of payment methods introduces complexity to the checkout process, and must be designed carefully to avoid confusion and choice paralysis.
For international sites accepting multiple payment methods is not just a matter of user preferences (although that is certainly a benefit of it too), given that in markets such as Germany, China and Russia, international cards such as VISA and MasterCard have less than 40% online payments market share, with solutions like ELV, Union Pay, QIWI and Alipay, being very popular payment methods. Similar tendencies can be found in B2B and B2G where accepting invoice and bank transfers can be mission critical. (For more on why it’s so important to accept numerous payment methods and which types of payment methods exist, see the addendum at the end of this article.)
So how do you design a checkout process that gives the user plenty of payment methods to choose between without introducing needless friction and complexity, or triggering choice paralysis?
In this article we’ll go over some common pitfalls when designing the payment method selection, look at a couple of “best practice” examples, as well as outline a set of principles for how to design a good payment method selection interface.
Pitfalls in Payment Method Designs
While preferable to offer a lot of payment methods, simply throwing options at the user can go horribly wrong if great care isn’t taken in how the options are presented, as evidenced by the following examples. You’ll notice that the design pitfalls largely revolve around proximity and selection state – both of which become even more expressed during mobile optimized checkout flows, as observed during our year long mobile usability study, due to the decrease in context caused by smaller screen sizes.
OfficeMax offer credit card payment and “Bill Me Later”, however, the radio buttons used to indicate the active selection are placed so far apart that many users won’t connect the two. The credit card fields push down the “Bill Me Later” option far down the page, making its radio button appear far away from its counterpart, namely the “Credit / Debit card” radio button. Two-column form designs, such as the one used at Costco, will often suffer from similar proximity issues.
During our usability studies we’ve time and again observed how radio buttons placed far apart cause great confusion among the test subjects – that is when they are not overlooked altogether. The test subjects simply lack the necessary context to understand the implications of the radio button and often did not activate the radio button, even as they began filling out any associated fields next to it.
Proximity is key in making radio buttons user-friendly – the options must be placed next to one another so the user perceives them as a collection mutually exclusive of choices, and can view and compare all the options without scrolling around the page.
Avon may have tried to solve the proximity issues OfficeMax suffer from by lumping all the payment options together in a single bundle atop the credit card fields. Unfortunately, this just introduces a new proximity issue as the credit card selections are now detached from the credit card form.
In an effort to solve this proximity issue, some sites place all the payment methods in a list and then push the active content below these options. However, this just introduces a new proximity issue, as the active content is now “detached” from the selected option (except when the last option is selected).
It essentially works like a “tab design” but without the necessary visual clues to cement the relationship between selected option and active content. Tabs are an excellent design pattern, and indeed a very appropriate solution to this payment method selection design issue, but tabs must be designed as actual tabs in order to effectuate these affordances.
At diapers.com there’s six green “Apply” buttons, one for each payment method, yet there’s also two big red “Next: Review Order” buttons. So which button should the user click? And which payment method will be used when clicking one of those red “Next” buttons?
It’s critical that the “active” or selected payment method is absolutely clear to the user. In the above diapers.com example this isn’t clear at all as all form fields for each option are laid out at the page. In fact, the user never selects a payment method, instead they are supposed to fill out some form fields and then submit a payment method.
This understandably cause great confusion for some users and makes the page appear intimidating with the wealth of headers, form fields and apply buttons appearing on the user’s screen. A much better approach would be to progressively disclose relevant (and hide irrelevant) form fields and buttons based on user selections.
You can browse our checkout usability benchmark database to see 104 different examples of payment steps from the 100 top grossing e-commerce sites.
How to Design Payment Method Selection
So how should the payment method selection be designed? There isn’t one “right” design as it depends on the number and types of payment methods accepted, as well as the rest of the checkout design. However, while there isn’t one “right” solution there are a number of principles to follow when designing the payment method selection in your checkout process:
Place the options in close proximity so the user can see all the available payment methods in a single view, allowing them to compare the options and make an informed decision about which one to choose.
Make it absolutely clear which option is currently selected – the user must never be in doubt about which payment method that’s currently active.
Use progressive disclosure to gradually reveal form fields so the user only sees form fields relevant to the current selection(s).
Explain the different payment methods and highlight their most important implications (e.g. “1% fee when paying with American Express” or “product only shipped once bank transfer clears”) so the user can make an informed decision about which option is the most appropriate to them.
Consider having a default selection to speed up form entry and reduce choice paralysis by nudging users towards a particular payment method (typically the most popular one).
Let’s look at a couple of “best practice” implementations that adhere to these principles.
Best Buy uses a tabbed interface for the payment method selection during checkout. Notice how all the options are placed in close proximity so the user will perceive them as a collection and compare them to one another. Furthermore, the tabbed design makes it abundantly clear which option is currently selected and ensures that only form fields relevant to the current selection are displayed. Finally, Best Buy have made “Credit Card” the default choice so the user doesn’t have to stop and think but can simply proceed unless they want to make use of one of the other secondary payment methods accepted.
Tabbed interfaces generally lend themselves very well to this particular design challenge as they bundle the options together in a single collection, make it clear what is and isn’t selected, and ensures that only relevant content is displayed. We’ve found both vertical (see Best Buy above) and horizontal (see Apple) tab designs to perform equally well.
An alternative solution can be found at Blue Nile, where an entire checkout step is dedicated to selecting a payment method. By dedicating an entire checkout step to the payment method selection, Blue Nile has plenty of space to explain each of five payment methods offered and highlight the most important implications of each one (such as the 1.5% discount when selecting “Bank Wire”).
While this design introduces a little more friction compared to the tab design (Best Buy example) – where a default choice has been made for the user and form fields are displayed inline as the payment method is selected – this friction may be warranted in certain circumstances if it helps the user make a more informed about the most appropriate payment method to them. This is appropriate for Blue Nile where orders are high in value and users will likely need to consider their payment options more closely, whereas the tabbed interface makes better sense for Best Buy where more orders will tend to be more impulse-driven and generally be smaller in value.
In short: Make sure you support a wide range of payment methods so potential customers are actually able to buy from you, and possibly even have a few options to choose between (see more on this in the addendum). And then reduce checkout friction with a payment method design that: ensure the payment methods are in close proximity, makes the selected method completely clear, utilize progressive disclosure, explain the differences between the payment methods, and have any vastly popular method selected as default.
Post a comment (4 so far)
Related articles
6 Mobile Checkout Usability Considerations
How to Recoup 30% of “Card Declined” Abandonments
Visually Reinforce Your Credit Card Fields (89% Get it Wrong)
Addendum: Why Accepting Numerous Payment Methods Is Important
As mentioned in the introduction, accepting a wide range of payment methods is important – first and foremost because users quite simply won’t be able to buy anything from you if you don’t accept the payment methods they have at their disposal. It’s obvious but absolutely critical. The solution of course is to make sure you accept a sufficiently wide range of payment methods to avoid shutting the door in the face of potential customers – although this is easier said than done, especially in the case of international e-commerce sites.
The number of payment methods that should be accepted will tend to increase along with the number of countries that are catered to, as some countries will require one or more local payment methods to be accepted due to unique local payment infrastructures and customer preferences. Looking at Edgar, Dunn & Company research (p11), we can see how international cards (Visa and MasterCard) have a less than 40% online payment market share in countries such as Germany, Russia and China (hardly insignificant markets for a global e-commerce site), where Union Pay (“local” credit card), Alipay (PayPal equivalent), and ELV (a form of direct banking) have larger market shares and should be supported to avoid excluding a significant number of users from your store.
Tip: Global third-party payment solutions such as PayPal and Alipay can provide a shortcut to accepting a wide range of local payment solution as these service providers have already integrated with them, and therefore by supporting PayPal a site can – indirectly, via that option – accept most of the major local payment methods too. For example, here at Baymard we don’t accept Union Pay cards directly, but our Chinese customers can still use this card by picking the PayPal option. It’s obviously not as good as “native” support, but it is certainly better than not giving the customer a chance at all.
While it can undoubtedly take significant resources to support a wide range of payment methods, being able to accept money from users is a prerequisite for running an online store. And luckily, there are additional benefits outside pure and simple “transactionability” to supporting multiple methods, the three most significant supplementary advantages being:
Redundancy – The more payment methods you accept, the more redundancy there will be in your payment system should one of them break down temporarily (as pretty much all systems eventually do at some point) or have to be taken down for maintanence. In these instances, if you have a wide range of payment methods, you can temporarily disable the malfunctioning one while it gets fixed, without having your entire store coming to a grinding halt.
Preference – Users may prefer certain payment methods over others for any number of reasons, ranging from fee structures to privacy concerns to how secure they believe the option to be. Users will therefore often appreciate having a choice so they can pick their preferred payment method, even if they would be able to buy with another one had it not been available to them.
Fallback – It’s not just your systems that can fail, the user’s payment instruments may stop working too, whether it temporary (such as credit card declines due to valid but unusual card activity, unbalanced accounts, technical issues with their provider, etc) or permanently (expired cards, closed accounts, etc). In these cases, being able to pay with a wider range of payment methods will allow the user to fall back on one of their other (working) payment options – see this article on how we recoup up to 30% of all declined transactions.
There’s of course a wide variety of payment methods, some of which change the nature of how, where and when the transaction takes place. Much the same way that customers have payment preferences, e-commerce sites may have them too. It should be a mix of these site and user needs and preferences that determine which types of payment methods to implement first in the face of resource constraints. Let’s look at the characteristics of the most common types of payment methods:
Payment Method
Benefits
Challenges
On-site credit card payment – the user enters their credit card details directly at the site.
Example: Gilt, “Credit card” fields
Full control over transaction and user experience
Most users are accustomed to this flow
Supporting local credit card types (e.g. going beyond Visa, Amex, MasterCard and Discover)
Legal and technical PCI compliance
3rd-party checkout – the user checks out at an external site such as PayPal, Wallet, or Alipay.
Example: Walmart “PayPal”
Easy way to support a wealth of local payment methods
Some users prefer these solutions due to privacy, checkout simplicity, or unused account credits
Little control over the user experience
Some services require users to sign up for an account
It’s often not possible to determine what customer data to capture, and some providers don’t share all data collected
Invoice and wire transfer – the user receives an invoice and pays by making a wire transfer.
Example: Buy.com “Pay by wire transfer”
Many B2B and B2G users have no other payment method
Making the technical and logistical distinction between orders with instant vs delayed payments
Gift cards, coupons and other credits – the user pays with a type of store credits.
Example: Kohl’s “Gift card(s)”, “Kohl’s cash”, “Promo code(s)”
Enables loyalty programs, customer segmentation, price differentiation, etc
Site abandonments and lower margins due to “coupon hunting”
Often subject to partial funds, requiring multiple payment methods to be combined
Financing – the order is financed by a 3rd-party intermediary.
Example: Apple “Financing”
Gives users without the sufficient funds a way to purchase
Financing commission
Abandonments during the credit approval process
Potential delay due to credit approval
By phone – the user calls in and provide their payment options over the phone.
Example: Barnes & Noble “Pay by phone”
Easier and more reassuring for novice users
Phone capacity
Using multiple cards or payment methods – the user combines multiple payment methods to pay for their order.
Example: HP “Pay with more credit cards”
Allows the user to overcome any credit limits or account balance variations by distributing the order total across multiple payment methods
Complex user interface
Legal and technical PCI compliance