A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
For E-commerce sites, the shopping cart and payment process is one of the most important part, to a large extent, the shopping payment process determines the user's purchase probability, so for any E-commerce site can not pay attention to this part of the design. But we don't need to design it all for our shopping cart, can study some large web site shopping payment process as a reference, thinking about why they want to design, the most important thing is to experience their every step, and constantly groping, and then the good part of the application to their own shopping site.
Below I analyze the next 12 kinds of good design shopping cart and payment flow:
1. do not allow users to register before the selection of goods.
Customers are here to buy things, not to fill out a form. So you need to make sure that the user completes the registration in the payment process, instead of registering before paying, or letting the user register before putting the item in the cart. The registration form needs the user to fill in the time, the registration process may also have the problem, therefore this will become the user to complete the shopping the obstacle smoothly.
Taget This website is when the user really wants to pay the time, only then lets him register.
In the shopping process, the registration of this trouble to move back, can make the final purchase of goods users greatly increased. Since the user spent a lot of time to buy the things they want, if the payment of the time because of the trouble to leave the registration, the previous purchase of goods spent a long time in vain. But if the user has not started to choose the wine to register, then they have not spent the time cost, it is easier to choose to leave.
2 If this product has goods, tell the user clearly
The quantity of inventory needed to be clearly told to the user. If the goods are out of stock, to let users know earlier, to avoid the user to purchase a few steps back to find the original goods are not goods. Not only on the product introduction page to display the inventory quantity, the user searches the product the result page also to display.
Overclockers in the list of items, the detailed inventory quantity information is listed.
In addition, if a product is now out of stock, but will be in stock recently, can provide users with a predetermined function, so not anxious to buy this product users, in a few days can be bought, he did not worry about a while to buy, the goods sold out.
3. make it easy for users to modify orders
Everyone can go wrong, the user may have misplaced the goods in the cart, or change their mind when they have to pay. At this point, to allow users in the process of payment can modify their purchases, if they can not modify they may leave, and can be modified to win many potential users.
Icondock allows users to easily modify the number of purchases through the number in the input box.
If users want to delete items from their shopping cart, don't let them lose the number "0" in the input box. Or to provide "delete" the link is better, through the point "delete", you can let them remove the goods from the shopping cart, so that the modification is quick and simple.
4. provide them with immediate help during the operation of the user
Because the payment process requires the user to enter information, and the user is likely to encounter problems in the process, these problems may not be able to rely on a limited number of interfaces to solve. In this case, providing a professional, one-on-one help to the user is much better than giving them a broad range of help (such as a "FAQ" page), and a page like "FAQ" does not necessarily solve a user's problem.
On the Dell shopping site, users can get help by consulting the phone and online customer service. If the user encountered a problem in the payment process, she can immediately consult customer service for help, the problem within a few minutes easily resolved.
It is a good idea to provide online customer service or telephone counseling during the payment process. But not all companies can afford so many customer service costs, large and medium-sized companies can consider this approach, especially those who have more complex online payment process.
5. make the "Back" button fully play a role
The Back button is one of the most commonly used buttons in a Web browser, so many users may also use it frequently in the payment process. Some sites do not provide the ability to return to the previous page, when the user point "back", the page will automatically point to a page or error, which will adversely affect the user experience.
Ticketmaster, the point "back" button appears such an error, it will let users have a sense of frustration.
When the user points to the "Back" button, not only can not always let them encounter error prompts, and if the previous page is a form, to save their previous fill in the data and show them again. This allows the user to make changes to the original content, without having to fill out the entire form again. Indeed, in some cases, it is too late for the user to "return", such as the "OK Payment" button he ordered. But other pages can support the "Back" button, saving users time and reducing their frustration.
The Amazon site, which describes the color and details of the product, such as hardcover/paperback books, also provides links to return to view the original product details. But he did not provide a thumbnail of the product.
OXFAM provides thumbnails of each item, allowing users to browse quickly. In addition, if the user wants to make sure that the product is really what they want to buy, you can also return to the original product introduction page through the link.
7. provide guidance on operation process
Payment is usually a process that includes multi-step operations. This means that the user will pass through several pages before completing the payment. So it's a good idea to add a process guide that tells the user where they are now, where they are going to the payment process, which page is on, and what steps are left to complete the process.
The Apple website has a concise process guide on all payment pages.
Letting users know where they are in the process gives them a sense of control, which is necessary from a usability standpoint. Of course, let the user know what steps to follow, they can be completed will also reduce their doubts. This allows them to adjust or cancel orders in accordance with their own circumstances and ideas before completing the payment.
8. Keep the payment interface simple
The payment process differs from the browsing Web pages on the site. In the payment process, the user is not shopping. This means that all browsing operations are redundant here, which only distracts the user and affects the task he is completing. Design, to remove those unwanted elements-for example, catalog links, hot products recommended, so that the interface remains concise.
The payment page for the Dell Web site, there is no catalog link to the product, but let the user put all the attention on the payment process.
Sometimes the user will return, buy some goods, then pay, so need to provide a "back to continue shopping" link. Also, make sure that all the buttons pointing to "next" are larger to prevent users from being unable to find them.
9. do not allow users to leave the payment process
It is important for the user not to be interrupted during the payment process, for example, to lead the user to a page that is not related to payment. Take the user out of the payment process will have the following two questions: 1 They will not know where they are, and even the possibility of paying the page can not find a 2 they may be interrupted without successfully completing the entire payment process.
On the payment page of the Laskys site, when the mouse hovers over some elements, there will be help information pop-up telling the user about the function description.
Cannot interrupt the user payment process, then we have to find a way to display the information that is not available. If you need to provide some help information that is not suitable for display on the current page, consider using a floating window or pop-up window.
Inform users of the delivery time of goods
Online shopping than physical store shopping, there is a big drawback: users need to wait a few days to receive the goods purchased. So when a user buys a successful purchase, they need to tell them the approximate time to wait.
The Apple website will display the corresponding delivery time according to the orders of different users.
Inform the user of the goods delivery time for the following reasons: first of all, the user to ensure that the delivery company door-to-door, some people in the home courier. Second, so that users will be on the goods when there is a psychological expectation, and do not worry about how to buy things have not been sent. The sooner the delivery time is displayed, the better it will appear on the page of the product introduction. In this way, users who want to buy the product will be able to decide whether or not to buy it, depending on whether the product is delivered to the time.
Tell the user what's going to happen .
What happens when a user completes a purchase and clicks on the Last action button? In conclusion, "Thank you for purchasing this product". This is a polite expression for the user, and the user must be happy to accept these thoughtful words.
Amazon site, when the user payment is completed, it will show: Thank you for buying this product, and tell the user what to do next.
Also, tell the user what happens next-for example, when goods are shipped, they receive an email notification. This eliminates the uncertainty about whether or not an order is truly successful, and they are reassured.
of send a confirmation email
The user may have finished ordering the product and paid for it, but it's not over yet. The website needs to send a confirmation email informing the user of the details of the purchase and the time of delivery. This information is helpful because it makes it easier for users to make sure they're not buying the wrong goods.
Amazon will send a message about the details of the purchased item after the user pays, and tell the user how to make the change before the goods are shipped if they are wrong.
If the user buys the wrong goods, before the goods are shipped, they need to be provided with the opportunity to re-enter and return to the Change Order. Simple mistakes, such as choosing the wrong size, color, often happen, so the site needs to make users feel online shopping is simple and reliable.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service