11 basic guidelines of the payment process

Thanks to Nini for sharing, more exchanges please visit Nini Sina blog Http://blog.sina.com.cn/ninilanma

———————————————————————————————————————————–

is a good article, although this is said that the payment process guideline, but many can be applied to a variety of registration or request the user information process, very worthy of attention.
Original fundamental guidelines of commerce Checkout designhttp://www.smashingmagazine.com/2011/04/06/ fundamental-guidelines-of-e-commerce-checkout-design/

Introduction:
According to the survey, 59.8% of users in the payment process to waive payment operations, because "many online shopping payment process is" rape "the most basic usability guidelines, but they just did not notice so they lost a lot of potential payment behavior. (by Nielsen) "So in the process of making payment, please check the availability of each corner of the process first."

The author, Christian Holst, in 2010, tested the usability of 15 web sites and observed the problems the user had encountered from "putting the cart" to "payment closure", and the test participants asked to say "think aloud" about their problems. The test found more than 500 usability issues (including "unnecessary animations for distracting users", "illogical processes", and so on). Another interesting finding is that most of the discarded users are given up at the last step of the payment process.

One guidelines:
This article lists the most noteworthy 11 points that will cause the user to forgo payment of the pain point:
1. The payment process must be a "straight line" process

(Click to see the big picture)
When the payment process is not a "straight line", the user will be confused, he will not understand why the same page will see two times, thinking that their operation error. Therefore, "non-linear" process becomes the most easy to let users give up payment of pain point, must try to avoid the "step steps" such a problem.

2. To fill in the box note with the necessary instructions
As compared to filling out other registration forms, users will be more serious to fill out payment form. Users may waive payment because they do not understand the contents of a fill box. So it's necessary to make sure that the user pays by following the fill box with a short explanatory text to guide the user.
Anti-Example 1) "What does the" one here mean? ”

Anti-case 2) on Apple's website, users fill in the ZIP code where they fill in the postcode (note: U.S. ZIP code and region codes are different)

Positive example: Add the necessary instructions after completing the entry, preferably with an example (pictured below) if possible.

3. Avoid using "situational" words as a copy of a button
Situational vocabulary such as "continue", such as "return", such a situational vocabulary will confuse the user, "continue what?" "Where's The return?" ”。 So the copy on the button is best to use a clearly understood vocabulary. such as "Continue shopping", "continue to pay", "return to Cart" and so on

4. Enhance visual "credibility"
For this reason, users have great concerns about online payment behavior. So to make users pay, you must first enhance the credibility of the site, increase his confidence in payment. So as much as possible to add a variety of users can feel "credible, safe" visual information, such as icon, copy, and so on.

(Click to see the big picture)
A/b comparison shows that, although for a user who does not understand "technology," it seems to be more believable. Although the content does not change at all, just because B in the card information place to add a gray background, security lock icons Such visual tips, you gain more trust.

5. Avoid multiple use of the Apply (apply/Confirm) key in the payment process
When there is a button in the page that really leads to "next", try to make sure there are no other "apply confirmation" buttons on the page.

Because it confuses the user, "What happens when I click apply?" Where are you going? "The same thing happens when a process is not a straight line," he said. So try not to use the Apply button on the page with the most important Next button.
If you need to confirm any information, try to use Ajax to make your judgments.

6. The writing method of the maturity date of the bank card strictly follows the writing method on the bank card

All 4 card expiration dates are not written correctly. The correct way of writing should be the month before, the year after the "Xx/xx" (xx for the number). When the month is less than 10, add "0" in front of the month, such as January 2011, writing 01/11. The same advantage as the card is that it is convenient for the user to check whether to write correctly.

7. Fill in the form written in a column

Users are puzzled when filling out a form with two columns. More than 50% of users produce "I am not both columns to fill in" such doubts.
Counter Example 1) perfume.com "Don't know where to fill"

When users fill out the above form, there are three ways to fill in

Anti-case 2) petsmart.com "missed the information that needs to be filled in."

Most users do not see the right side of 2. is an entry that needs to be filled in.
Therefore, it is recommended that all entries be filled in one column.

8. "Mailing billing Address", "delivery address", do not let users write two times
(Note: Some foreign countries do send "bills" and "receipts" separately by mail.) But this problem seems to be not in the country, domestic will not mail the bill
First of all, most of the user's delivery address and mailing billing address is the user's home address, so when you ask the user two times the address, not only increased the user burden, but increased the user "write wrong" probability.
The use of a Web site to the gray "billing" address is also not good, because this time users will question why the ash.

(Click to see the big picture)
Anti-Example 1 the Apple store uses the Copy button to have the user copy the receipt address to the address of the mailing bill, which is not a good method, because once an error occurs, the user needs to change two places, and some users will forget to change; Also do not know that only need to click the Copy button to the other place to correct the error. All users changed the address again.
The correct approach is to use a checkbox to inform the user (pictured below)

9. Use "visible", "can understand" error feedback
Error feedback must be made visible to the user in a timely manner and let the user understand why the error occurred.
Anti-Example 1 feedback information at the top of the page, can not be seen in time

Anti-Example 2) feedback information with a small arrow pointed out that the visibility is too low

Correct approach, feedback information "timely" "high visibility" (pictured below)

10. "Become a member/registered user" should be optional

Survey shows that 30% of users give up because he needs to be forced to register as a member, 40% of users do not want to fill in the registration information is because they do not want to be in the registration of spam attacks, in their concept, give an email address, is equal to subscribe to the company's newsletter.
If you want to allow users to register, can be purchased after the completion of inducing him.

11. Do not ask for unnecessary private information
When a user is asked for private information such as a phone number, many users have a suspicion of giving up and buying.
However, the user is very "tolerant", as long as the user to explain "why need your Information", users will fill out. If possible, show this "explanation" outside as much as possible and let the user see it directly.

Another interesting finding is that the more expensive a user buys, the easier it is for users to fill in his phone number because he thinks "the item is expensive and needs to be contacted in time to get in touch with Me". He thinks the telephone number is "necessary information".

Source: http://www.userfree.cn/?p=2159