Payment options page design

This article is the country by the former Zhejiang University student Kenji translation, the original author: Jamie Appleseed, view original

If the user can not pay, he will not be able to buy anything from you, and therefore supports a wide variety of payment methods to ensure that users can pay you.

However, in our study of payment availability, finding that providing multiple payment methods for users introduces complexity into the payment process and must be carefully designed to avoid confusion and choice difficulties.

For international websites, supporting a wide variety of payment methods is more than a matter of user preference (although user preferences also benefit from it). In online markets such as Germany, China and Russia, online payment of bank cards such as Visa and MasterCard Market share is less than 40%, while ELV, Union Pay, QIWI and Alipay are popular payment methods. A similar trend is also found in B2B and B2G, where it is important that these sites support invoicing and bank transfer. (The attachment at the end of this article provides more detail on the importance of multiple payment methods and the types of payment methods.)

So how to design a multi-payment method to support without introducing unnecessary friction and complexity, but also will not allow users to choose a difficult payment process.

In this article we will revisit the common pitfalls of payment method design, examine some "best practices" and then outline a set of interface principles for designing payment options.

Misunderstanding of payment method design

The following example shows that without careful consideration of the form in which payments are presented, it is frightening to simply throw different options out to users simply to provide multiple payment options. You'll notice that design misunderstandings are mainly about proximity and selection - and they're all the more obvious in the Mobile Payment Optimization process, as we've seen in our one-year mobile usability study The smaller screen causes the related content to decrease.

Office Max offers credit card payments and "bill me later" services, but radio buttons are being used for far-away campaign options, leaving the option to appear to most users Associated. The credit card area pushes the "Billing me later" option to the very bottom of the page, keeping this radio button away from the corresponding "credit / debit card" radio button. Two-column form designs, as Costco uses, usually have similar proximity problems.

In usability studies we've repeatedly found out how annoyingly arranged radio buttons in a test project can cause problems, at which point they should not be overlooked at all. The test project lacks the upper and lower context that allows the user to understand the meaning of radio buttons, which in turn leads to the inability to enable radio buttons, even though they are now beginning to fill out the form for the corresponding radio button.

The principle of proximity is the key to humanizing a radio button - the options must be designed together so that the user thinks they are mutually exclusive, and the user can view and compare all the options without scrolling the page.

Avon is trying to solve the proximity problem with Office Max by designing the payment options together and placing it at the top of the credit card form area. Unfortunately, however, the separation of credit card options from credit card forms introduces a new proximity problem.

In order to address the issue of proximity, some websites make payment lists and place the currently active form area under these options. However, due to the separation of the currently active form area from the option (with the exception of the last option selected), a proximity problem has been introduced.

It's actually similar to label design, but there's no need to emphasize the relationship between the radio button and the currently active form with visual cues. Label design is an excellent design pattern and is an appropriate solution to the design problem of the payment method chosen, but the label must be carefully designed to achieve situational support.

There are six green "Apply" buttons on the site diapers.com, one for each payment method and two red "Next Order View" buttons. Which button should the user press? When the user presses the red "next" will be what kind of payment?

It is crucial to have a clear and concise presentation of the current "activated" or selected payment methods. In diapers.com, the form for each payment option is laid out on the page, resulting in a poorly defined payment method. In fact, users never choose a payment method, they should fill in some forms, and then submit a payment method.

This understanding caused confusion for the user, resulting in a variety of titles, form areas, and application buttons on the user's screen page. A better way is to incrementally expand the relevant (hidden irrelevant) form fields and buttons at the user's choice.

You can browse our payment availability benchmarking database and see 104 different payment processes from 100 top-selling e-commerce sites.

How to design payment options

How to design payment options? There is no standard answer because it depends on the type of payment, the quantity and other parts of the payment design. Although there is no standard solution, there are a few principles to be followed when designing the payment options for the payment process:

Layout payment options together to facilitate users to see all the available payment methods. So they can compare various options to make informed choices. Clearly show the current options - the user must be clear about the current payment method. Progressively display the form area so that the user sees only the form associated with the current selection. Explain different payment methods and emphasize the most important meaning of payment methods. (For example, "charge 1% with American Express" or "ship once the bank transfer is successful,") so that the user can decide which payment method is best for them. In order to speed up the form input, reduce the choice of hesitation, the default option to guide users to use a specific payment method (usually the most popular)

Let's look at some good examples of compliance with these principles.

In the payment process, Best Buy's payment options use the tabbed interface. You can see the options are laid out together so that users compare them as a collection. More importantly, the tabbed design makes the current options very clear and only shows the forms associated with the current payment options. Finally, Best Buy has chosen "credit cards" by default, so users do not have to hesitate to think, and payments can go faster if they do not use other secondary payment methods.

The label interface fits perfectly into this design because they combine multiple options in one collection, clearly distinguishing between current options and non-options, and ensuring that only the relevant content is presented. We found the vertical (top Best Buy) and horizontal (look at the apple) label design as good.

Blue Nile gives an alternative solution where the entire payment process is devoted to choosing a payment method. With this design, Blue Nile has plenty of room to elaborate on each type of payment, highlighting the most important implications (such as choosing a "Bank Wire" payment with a 1.5% discount)

However, this design introduces some resistance compared to label design (Best Buy's example). The payment method of the label design defaults to the user to choose a payment method, the form area is embedded in the payment method. Imagine a situation where there may be resistance to this payment method if the user wants to know more about the payment method in order to pick the most appropriate one. Blue Nile is well suited for this type of payment design because the orders on top of Blue Nile are of high value and users need to think more carefully about the payment method they choose. For Best Buy, however, the tabbed design interface is best because most orders on Best Buy are impulse-driven and typically less valuable.

In short: To make it easy for prospective customers, make sure your website supports multiple payment methods, and customers can choose between different payment methods (see attachment below for more details). Reduce payoffs by designing payment methods: Make sure the payment methods are adjacent, clearly show the payment methods currently being selected, show progressively, explain the differences between payment methods, and choose a wide range of payment methods by default.

Annex: Why support multiple payment methods is necessary

As mentioned in the introduction, it is important to support multiple forms of payment - mainly because users can not buy anything from the site if your site does not support the payment methods that users have. This is obvious but very important. This solution ensures that a wide enough range of payment methods are supported so as to avoid shutting down potential customers - although this is easier said than done, especially for international e-commerce sites.

The types of payment methods supported by the website will increase as the number of countries in which they serve increases because of the preference of some countries for their own local payment facilities and users and therefore there is a need to increase support for one or even more local payment methods for these countries. Take a look at Edgar, Dunn & Co. (p11), and we can see that online bank card payments (Visa and MasterCard) have less than 40% online market share in Germany, Russia and China (a very important international e-commerce market) because Union Pay ("local" credit cards), Alipay (equivalent to PayPal) and ELV (a form of bank direct service) have a greater share of these countries. Your website should support these payment methods so as not to shut down some important users.

Tip: If a service provider has partnered with third-party payment solution service platforms like PayPal and Alipay, they can provide service providers with the convenience of supporting multiple local payment solutions so that websites can indirectly support local major through PayPal For example, you can not pay directly with Union Pay cards on Baymard, but customers in China can still use Union Pay cards by choosing the PayPal option. Although this does not have a good local support experience, it is better than not supported.

There is no doubt that it can take a huge amount of resources to support a wide variety of payment methods, but supporting the majority of users paying is the top priority for an online store. Fortunately, there are three important additions to supporting multiple payment methods other than purely and simple transactions. :

Redundancy - The more payment methods you support, the more redundancy your payment system owns, the payment method can be short-lived (in fact, almost all systems can happen) or temporarily offline for maintenance. In this case, if you support a wide range of payment methods, you do not need to shut down the entire online store urgently when the failed payment method goes offline. Preference - Users may prefer a particular payment method for a variety of reasons, perhaps due to cost structure, personal privacy, or payment security. So they will choose their preferred payment method, although they can choose another payment method. Spare - Not only does your system crashes, your payment methods can also be a problem, regardless of temporary issues (eg, credit card because of legal but not normal card activity, unbalanced payments account, service provider technical issues, etc. ) Or permanent problems (card expired, account closed, etc.). In this case, support for a wide variety of payment methods will make it easier for users to use alternate payment methods (see how we recover 30% of rejected transactions)

There is no doubt there are a wide variety of payment methods, some of which have changed the way, place and time of the transaction. E-commerce sites may have preferred payment methods like users. In the case of limited resources, the needs and preferences of users and websites determine the preferred payment type. Let's look at the characteristics of the most commonly used payment types:

Payment Methods Advantages Challenge Website Credit Card Payment - Users enter credit card information directly into the website. For example: Gilt, the "Credit Card" form with full control of the transaction and user experience, most users are accustomed to this process Ÿ Support for local credit card types (eg Visa, Amex, MasterCard and Discover), legal and professional PCI interface Third party payment - Users pay on PayPal, Wallet, Alipay and other external websites. For example, Wal-Mart "PayPal" conveniently supports a variety of local payment methods; some users prefer these uncontrollable user experiences due to privacy, payment convenience and unavailable credit accounts; some services require users to log in to accounts; can not obtain user data and Payment platform does not share data. Invoice and Electronic Remittance - The user receives the invoice and pays it by wire transfer. For example: Buy.com "Payment by Wire Transfer Many B2B and B2G users have no other payment methods that result in poor payment of technology and logistics between instant payment and delayed payment orders, gift vouchers, coupons and other forms of credit - users pay in store credits. For example: Kohl's "Gift Card", "Kohl's Cash," "Coupons" provide conditions for loyalty programs, user segmentation, price differences, etc. "Coupons" lead to the expulsion of websites and lower profits; For example: Apple: "Funding" to provide access to users with insufficient funds; Abortion in the process of raising commission credit review; Postponing calls due to credit review - Users For example: Barnes & Noble easier and more secure for novice users Phone capacity uses a wide range of cards or payment methods - users pay bills in combination with multiple payment methods, for example : HP "Pay with more credit cards" by putting the total amount of the order Dubbed a variety of payment methods to allow users to overcome the line of credit limits or changes in account balance complex user interface; Xiaosheng's blog, and the link to this article, such as forwarding on the Weibo, @ Iqiyi must _ Xiao students