UX-30 Tips: How to improve the checkout page

There are many options for how a person gets to the website of an online store: someone enters a link recorded somewhere in the address bar, someone clicks on a product advertisement that suddenly appears, someone goes to a card with a product from the search results. There are many entry points, and so that it does not automatically become an exit point, it is necessary to constantly upgrade the site: improve its usability (user-friendliness), update the content. Today, we will not talk about the start page of an online store, but about the final point of acquaintance, which should bring the long-awaited conversion - the checkout page.

1. Analytics

To answer the question "What's wrong on the checkout page?", It is worth, first of all, to pay attention to analytics. We put this point first, because without it, all the rest will be insignificant, because if you do not analyze the behavior of a potential customer on the order page, you will not be able to see the problems. The analysis will allow you to understand what actions led to an improvement or worsening of the situation.

What you should pay attention to.

• Standard behavioral factors (watch time and bounce rate).
• Form analytics (how many users interacted with the form and how many subsequently submitted their data). This information can be obtained from YandexMetrica.
• Webvisor data (in Metric). Using Webvisor, you can determine at what stage people who worked with the form had problems and did not submit it.

All the data obtained must be recorded and systematized, after which we process hypotheses, make the appropriate edits and again collect data. This is followed by the stage of reconciling the results in order to determine what worked and what did not.

2. The presence of an editable list of products on the page

The list of products is extremely necessary so that each customer does not forget what purpose he pursued, straining when filling out the order form.

For example, during the ordering process, a client may change his mind, deciding that just one women's T-shirt will not be enough for him. The functionality of the site should in no way interfere with such a desire, forcing you to return to the basket again, changing the number of products.

Based on this, it is advisable to combine the Shopping Cart and the checkout page.

3. Discount information in the product list

The more times you remind that a product is purchased for a promotion or at a discount, the more the client will remember it, and in the future he will automatically check the availability of those on your site, becoming his regular visitor.

4. Small description + pictures

As a rule, only the name of the product is displayed in the list on the page with the order. On the one hand, the user should have seen enough of the photo and description in the product card, but on the other hand, he has not yet made an order, which means that he may still have some doubts. To encourage him to make the right choice, you can briefly remind him what a good product he has already added to the cart.

5. Availability on the order page for a coupon or promotional code

If your online store provides promotional codes or works with coupons, then do not forget to add the appropriate field to the order form so that the person can exercise their right. The biggest disappointment is to get a discount coupon, go to order with a smile on your face, but in the end you can't find where to write these magical symbols.

Alternatively, in order not to distract too much from the order of those customers who were not lucky enough to become the owner of a promotional code, the field can be made such that it unfolds on click.

6. One step registration

Seeing in front of him all the fields that need to be filled in to place an order, a potential client will visually estimate the time spent on taking the necessary actions. If he is offered filling out step by step, then it will be impossible to make such an assessment, and therefore it is entirely logical that he will have a suspicion that the same amount of time may be spent on each new step as on the first.

To visually simplify the form, hide all sorts of unnecessary elements at this stage of filling out, for example, delivery fields may appear only when a certain method is selected.

7. Optimal number of fields

You should always value the client's time, so don't ask him for unnecessary information. More often than not, an order requires just the address to which the delivery is to be made and a mobile phone number.

The following fields can be left optional:

• Name. It is necessary that the manager in a telephone conversation be able to address the client.
• Comment. For additional wishes of the client regarding delivery, payment, etc.
• Yes, on the one hand, this field is important for building up the client base, but on the other hand, a potential buyer can register but still not buy the product, because he changed his mind while going through a long registration procedure.

Moreover, even if the client made an order, but did not indicate the delivery address, it can be accepted, because the phone number is already there, which means that managers can call back and get all the necessary information.

8. One click order

There are many people who do not like to type text and even more so to understand all the intricacies of filling out forms, but they love to talk on the phone. It is for such clients that it is worthwhile to provide the "Buy in One Click" function, which boils down to the fact that he should only indicate his phone number, and then the manager will contact him and fill out all the order forms for him.

9. Icons representing different payment methods

The modern person is already accustomed to navigate by logos not only in brands, but also in payment methods. If you have more than three of them on your site, then it would be wise to place icons, a quick glance at which will make it clear to the client that you can pay here using Privat24, Webmoney, WalletOne , etc.

If one of the methods involves the removal of a commission, then do not forget to indicate this, because a person should know everything in advance and he should not expect an unpleasant "surprise" when paying.

10. The cost of different delivery methods

It doesn't matter if it will be a fixed price for delivery or displayed in the "from ..." format, but this information must be indicated so that the client can choose the best delivery option for himself. Moreover, the cost should be automatically calculated after choosing the delivery method and location.

11. Conditions for free delivery

If you provide free shipping when buying from a certain amount, then be sure to indicate this, because as practice shows, a buyer who is a little short of this amount can easily choose something else.

12. Convenient delivery time for the client

Perhaps one of the most important points for courier delivery is whether you have to sit at home from early morning until evening and wait for your order? If you specify a certain period of delivery time, then the client will be able to plan his day, leaving only pleasant impressions about your company.

Even if it happened that the client indicated the time at which deliveries were already planned, do not despair and expect a negative from the buyer, because you can call him back and politely ask him to shift the delivery time.

13. Pickup points on the map

In order for the user to find your pick-up points, be sure to indicate them on Google or Yandex maps. Also, don't forget to include information about their opening hours.

14. Leave the most popular payment and shipping methods by default

To prevent the client from seeing the message "No payment method selected", make the most popular default methods. Look in the statistics of orders, which options are most often chosen by customers. This can be self-pickup and cash payment.

15. Data in one field

It is not necessary to add a bunch of fields "Street", "House" and the like, because it is enough to make one "Delivery address", in which a person interested in buying can easily indicate the delivery address in an understandable form. An exception is the case when the automatic calculation of the delivery cost depends on the choice of a city or region. Then you can make a separate field for them, in other cases it is superfluous.

The same situation is with regards to the fields of the full name. Ditch the idea of breaking one simple First and Last Name field into three separate ones.

The biggest mistake you shouldn't make is asking for details such as postal code! Few know these data now, and it is not even polite to force a potential buyer to look for him on the Internet, because you can do it yourself, having the specified delivery address in front of your eyes.

16. The site has "helpers"

Assistants mean all the elements that simplify the process of filling out the order form, for example, a convenient mask for adding a phone number.

Datepicker is a handy dropdown calendar for date pickers.

A search field that has drop-down lists.

Thanks to such elements, filling out will take less time, which the client will definitely appreciate.

17. Field hints

If there are fields in the form, the filling of which may raise the question “Why do this?”, Then it is better to make brief explanations for them.

For example, please provide an explanation for the mandatory field "Phone number" that this is required for "Confirmation of order". This will prompt the user to enter the correct number, and remove questions about why the company needs to know such information about the customer.

You can also add an explanation to the Email field, for example, "A payment receipt will be sent." Tell the user that he will receive useful information about the order and about your company by email. This will help to significantly increase the percentage of filling in this field. In this case, the negative will disappear, which can cause coercion to fill in the field.

If the creation of a Personal Account is envisaged, then you can specify the explanations "To accumulate bonus points", etc.

This principle can be applied to all fields - the main thing is to explain to a person why it is needed.

18. Clear error messages

Give up the frequent practice of reporting all errors when filling out at the very beginning of the filled out form! So the client then has to search for them in all fields. In general, the form should, in real time, without reloading, check the correctness of filling in each field, and inform the user about it. Didn't fill in the field "Phone number", and already clicked on "Place an order"? In this case, the form should highlight the red field with the missing phone number by scrolling the page to this particular place. So the user will understand what his mistake was, and he will be able to correct it immediately.

19. Smart verification of input data

Quite often, the client needs to write down the phone number either "in his own way" or with additional notes, for example, "(044) 025-12-66 ext.23" or "0980251266 call after 19:00". Of course, a hard-coded form will not miss either the first or the second message, but these are two absolutely real clients. The first one can simply be dialed only with the specified code, and the second one can only appear in the network coverage area in the evening. That is why it is highly discouraged to put hard limits on margins that do not require it.

The opposite prime example is an email address. If the registration of a personal account is carried out by email, then the email address entered in an incorrect format will not make it possible to receive a password for it and, as a result, go to the site using your account.

20. All important fields at the beginning

It is clear that there should not be many fields to fill out. It is equally important to separate them according to their importance to the user. The first place should be given to the method of payment for purchases and delivery. Next, there should be contacts and various comments, and only then the rest of the fields. This is necessary so that the user, who is a little "tired" of filling in the fields, does not accidentally miss the required fields and can place an order.

We put proposals for registration, subscription to the newsletter at the very end of the form, because these are secondary actions, and our main task is to receive an order.

If you wanted to send a mailing list to a person, but he did not deign to leave an email, then do it differently: put a promotional code in the parcel with the order to receive an attractive discount on the next order. Of course, he will receive a discount by fulfilling one simple condition - to register a personal account. This is a completely honest way to get his email address. Moreover, the trust in the store, with which there has already been a positive experience of cooperation, is much higher than with the first order.

21. Reliable subscription information

We all love discounts and sales, and we really want to know about them in advance, and not when they are already over. This is especially true for products that we often use, for example, household chemicals, clothing, consumables, etc. True, and raking tons of letters on e-mail is not very good for me. This is why it is worthwhile to honestly indicate the frequency of sending letters. Do not forget to also indicate that a person can unsubscribe from the mailing list at any time, this is triggered on a subconscious level as a signal "you are not risking anything." If you have something to offer as a motivation (a discount on the purchase of goods), then let us know about it.

22. Checkout without registration

In the limitless space of the Internet, there are many online stores, many of which you have already visited, but you can't remember all the logins and passwords. Therefore, once on the page, the eyes automatically look for the magic button "Checkout without registration".

At the first order, few of the customers will show a desire to create their own personal account, because they simply do not know you, so the level of trust is zero. But after he received the goods and was satisfied, he can independently come to the conclusion that it is time to register, because the company is really worthwhile.

However, even if a person makes all his orders without registration, then there is nothing to worry about, because the main thing is he made them with you.

23. Authorization without going to a new page

This opportunity is provided for those users who already have a personal account.

Quite often, when making a purchase in an online store, you have to return to the login page in the middle of the registration process, specifying your password and login there. Perhaps this is a trifle, but getting rid of it can significantly increase the level of site usability. Make it so that you can enter your personal account directly from the order page, as an option - a pop-up menu.

24. Automatic filling of fields for an authorized user

You need to love your registered users, so:

• mark the payment and delivery methods that he previously used, because, most likely, they will be relevant this time;
• fill in the fields with the name, phone number and delivery address, based on his previous order, and if something has changed, he can simply replace the data;
• hide the block about your personal account or subscription, as the registered user does not need it.

Ideally, when the client authorized on the site does not even need to write anything - it is enough just to look around the familiar form and just click on "Place an order".

25. Brief comments on the order

This field should not be large, but its presence is necessary for the client to be able to express some of his wishes, for example, “Call after 13:00”.

26. Displaying the total order amount

On the checkout page, there must be a total amount so that the client does not have to bother adding up the cost of the goods and separately the cost of delivery.

27. Explanation of buttons

Providing a brief explanation of what happens after the button is pressed under the button will make it easier for the client to make a choice.

28. Informative message after placing an order

Let the person know that the order they made on the site has been accepted and don't forget to thank. Be sure to include your order number. It will not be superfluous to duplicate important information about the order, such as the total amount, delivery address, the selected payment method.

29. Order letter by email

If the order was made by an authorized user or he left his email, then you can send him an email with order confirmation. Such a letter should contain all important information about the order, including its composition. Do not forget to indicate in the letter the contacts of the store or the phone number of the manager who is engaged in the order so that the user can quickly contact and resolve any issues that arise.

30. Empty cart information

It happens that a user is on a cart page that has no products. For example, when following a link from the browser history. A blank page in this case can scare away the client. Your task is to lead the user to view the products, direct them to the catalog, offer promotional products or those previously viewed on the site.

Outcomes

So, if we summarize everything that was discussed above, then we can highlight the following rules for optimizing the order page:

• convenience and completeness of information;
• minimum fields required for filling;
• lack of strict restrictions on filling;
• maximum interaction with each user;
• detailed data analytics.

In short, the page should be intuitive and user-friendly. When in doubt, the best way to test your hypotheses is to test with real users. You can use the AskUsers service, which is designed for such purposes. As a result, you will receive a detailed report and recommendations on the case. All high conversions and loyal customers)