The following content is translated and organized by the Mockplus team, and is only for learning and communication. Mockplus is a faster and simpler prototyping tool .
Without a doubt, the checkout experience is the most important part of any online store, and the design of a form is directly related to the conversion rate of an e-commerce site – a faster, more user-friendly form means a higher conversion rate.
As a UX designer, your job is to ensure that users have a seamless and efficient checkout experience. In this article, I will share ten very practical tips to help you design a great checkout form.
1. Don’t force users to create accounts
According to the Baymard Institute, mandatory user account creation is one of the top reasons people abandon the buying process. Don't make such a mistake! Allows users to purchase items without creating an account. It's important that you not only offer guests checkout options, but make them clearly visible. The Baymard Institute found that 88% of mobile payment forms fail to make the guest checkout option clearly visible, so users often ignore it.
eBay offers users a guest option
2. Reduce the information required for user registration
When it comes to information gathering, the most important principle is that "less is more". A study by Baymard found that nearly a third of U.S. online shoppers abandoned their purchases because of a "too long/too complicated checkout process." The same study found that it is possible to shorten the average payment time by 20-60%. Therefore, as a designer, you should minimize the amount of information your users have. For example, if you don't plan to call your customers, you don't need to ask for their phone number.
By filling in fewer fields, you not only improve the completion time, but also make the process run more smoothly. Fewer fields means less cognitive load on the user and therefore less potential errors.
Tip: Clearly mark all optional fields. If you have optional fields, they should be marked with the word "optional" or a "*" symbol. This will allow users who want to fill out the form as quickly as possible to quickly skip these fields.
3. Don’t use field labels as placeholders
The main purpose of labels is not to hide them while the user is entering data. Field labels should always remain visible; ideally, they should be at the top or left of the field. If you are designing for mobile and have limited screen space, you can use the floating tab technique. When the user activates a field, the placeholder text fades out and pops up to the top.
Labels should always be displayed to users Image source: MDS
4. Design a single-column form
In the multi-column form, the eye follows a curved view, which makes it harder for the user to focus on certain elements (the eye doesn't notice certain elements). Therefore, a multi-column table increases the completion time. When a table consists of a single column, it is easier for users to navigate – because the eye follows a vertical scan pattern.
5. Group lots of related information together
Displaying too much information at once can make users feel a little overwhelmed. Hierarchical techniques can help you provide the same amount of information without overloading. There are two types of chunks:
-
Grouping on the page. You can group related information together and arrange them in a logical order.
Left: There is no visual division between fields. Right: The same number of fields are visually divided into 3 parts. Image: NNGroup
-
Create a multi-step checkout process. You can break down the checkout process into separate steps. For example, a typical checkout process can be broken down into four steps - customer information, shipping method, payment, order summary. Breaking a large task into several smaller tasks allows users to focus on one specific type of input. But if you use this method, make sure your checkout process is easy to navigate and understand. Users need to understand how much time it takes them to complete a payment. It would be great if you could provide a form that is easy for users to fill out and operate.
Multi-step checkout process: The form clearly indicates which stage the user is currently in.
Tip: For multi-step checkout processes, it's important to ensure that the back button action aligns with user expectations. Users expect the back button to take them one step back (to where they thought they were the previous page), not back to the product page. The second behavior usually accompanies the loss of user data and therefore may cause the user to abandon the checkout process.
6. Help users fill in the address
Minimize the need for users to type. You can use autosuggest and autocomplete mechanisms when the user starts typing an address. Services such as Google Geolocation Search automatically match addresses in the first few words of a user's input. At the same time, you should make prepopulated fields editable so that users can change the information in them.
Automatic address matching function. Image credit: Eric Nguyen
Tip: The steps to fill in the address on your phone may be more straightforward. You can ask to access the user's current location and populate based on the current location.
7. Offer different payment options and create a perfect credit card form
Offer as many payment options as possible so users can choose their preferred method.
Walmart allows payments with credit cards, gift cards, and many other popular payment methods such as PayPal.
Among the many payment options, credit cards remain one of the most common payment methods. This is very important: make sure your checkout form is optimized for shopping with a credit card, here are a few things to keep in mind:
-
Inform the user of the acceptable card types. You can put this information together with an icon that supports the card issuer. If your payment system doesn't support a certain type of card, let them know when they enter the card number.
-
Displays the card type based on the first digit entered. The first six digits identify the exact issuer of the user's card. It would be better to display the logo of the card issuer so that the user can see that his/her card has been recognized by the system.
-
Use placeholder text for the card expiration date. Helps the user to make input in a valid format.
-
When asked for a "security code," prompt customers where to find it. This might be related to the '?' next to the field ' icon is similar, when the user clicks it will pop up a display message. Keep in mind that the "Security Code" is not uniform - different card issuers use different names, locations and lengths (for example, VISA's security code is on the back of the card and consists of three digits, while for AMEX, the security code is on the front and contains four digits).
Security codes for Visa/MasterCard, JCB and American Express
The bank card information format meets all the above requirements
8. Provide order summary
It is critical to provide order summaries prior to purchase. This feature allows users to view order details and selected delivery options, double-check that the cost and shipping information is correct, and make changes if necessary.
Asos provides order summaries: users can view and modify their orders
9. Design a “Quick Buy” feature
"Quick Buy" is an advantageous feature that makes customers buy back. If your database contains information about your customers, you don't have to ask them to go through all the payment steps all over again. This feature allows users to jump directly to the order summary interface, where billing and shipping information from previous purchases can be used.
Amazon's one-click buy feature enables immediate product purchases. This will get information about preferred shipping method, address and payment details from customer purchase data.
10. Offer the option to complete the purchase on another device
A typical situation is that users browse products on mobile devices, but when filling out a checkout form, they switch to desktop. When the user switches to the desktop, give them an option like "email to cart" so that the user can continue with the steps they were on the phone before.
in conclusion
When it comes to the checkout process, your ultimate goal is to increase your success rate (user conversion rate) and reduce completion time (finish faster). The easier the process for a customer to buy something, the easier it is for them to make a purchase.
Original address: https://www.mockplus.com/blog/post/design-checkout-form
Original author: Nick Babich