7 common mistakes when designing a checkout process

After a long break, we at PayU decided to resume blogging on Habré. There will be no advertising service, but there will be stories about the development of new products, market reviews and research.

We decided to start with 7 typical mistakes in the design of the purchase process on the websites of online stores. I want to note that the list is far from complete and in the comments I will be happy to discuss other examples.

The analysis is based on the largest TOPnet stores in RuNet. For these guys, mistakes in designing the ordering process cost millions of rubles in the backlog. So let's get started.

1. “Apply” button

The user's attention is very easy to lose, especially if there are additional buttons on the page besides the “Pay” or “Go to the next step” button. Even if the button is noticeably different in style from the main one, the user doesn’t understand what the press will lead to, does the page reload completely? Or just an area? What happens to the data in the other fields?
')




Solution: use auto-update based on the data entered in the field instead of the “Apply” button.

2. Request redundant information

Often, online stores are trying to get as much information from the user as possible, and they do not at all explain why this information is required. Sometimes it is necessary to enter the same data several times.





Solutions:

1. Do not request information that is not needed for payment and delivery of the order. You can subscribe to the news or poll the user somewhere else after the completion of the order.
2. If requested, make the field optional.
3. Explain why you need information if the field is required. We often see users filling in required fields with abracadabra. This is precisely because the store does not explain why they need this information.

Good example:

3. Card data entry form

In Russia, for most stores, this problem is not acute - usually, the user goes to the payment page of the bank’s acquiring or processing center for payment. However, large stores often prefer not to send their users to a third-party site and request card data directly during the ordering process. In some cases, it plays against the store, because For the user, the form for entering card details does not look protected, it does not stand out among other elements and fields on the page.





Solutions:

1. Highlight a form to enter billing data.
2. Add security identifying elements next to the form, most of the users do not understand that the SSL icon at the top of the page applies to the entire page and all fields. They may not even know what it means.

Good example:

4. Entry fields for the validity of the card

The share of payments on the Internet is growing fast enough ( research on the topic ). The number is growing both due to the increase in services with online payment, and due to the influx of new users to the Internet, who have never paid for anything online before. And now they are offered to choose the month and year of expiry of the card in the drop-down list, which are not on the card, but there are 4 digits separated by two slashes. I checked, my mother did not know that it was a month and a year. However, even if the user came across an experienced user, it was certain that October was not exactly his plan in the year.



So bad:

1. January 2014
2. January - 01/2014
3. 1 - January / 2014
4. 1/2014

It is better:

1. 01 - January / 14

Good:

1. 01/14

Very good:

1. [] / []

Good examples:

5. Linearity of the checkout process

When designing the ordering steps, non-linearity should be avoided. At each point in time, the user must understand where he is, what remains to be completed and what steps have already been completed. One of the most common errors is the requirement to register somewhere in the middle of the process, when the user has already entered data about himself, chose a delivery method, etc. Some show particular cynicism and force them to re-select products and re-enter all data.



Very often, the back button in the browser simply does not work and the basket is cleared:


Sometimes non-linearity is avoided by querying for missing information in pop-up windows:


Solutions:

1. Do not force the buyer to go back, but allow it to be done with the preservation of all data entered before and after.
2. Do not force buyers to register for the order.
3. Explain what advantages the registered user will receive, for example, the accumulation of bonuses or the binding of the card.

A positive example, if not strange, may be the site of Russian Railways. To purchase a ticket, you must log in, but this does not terminate the process.

6. Multiple columns

The basic rule of layout of any form is very often violated when setting up payment forms. When the input fields are located in two or more columns, the algorithm for filling them becomes not obvious, which leads to ignoring the second column, or users go to the second one and stop filling the first one. Weight options:


Solution: avoid multiple columns
There are 2 exceptions:

• First Name and Last Name.
• Date consisting of the input fields of the day, month, and / or year: birth, delivery, card validity, etc.

They became exceptions because they are actually parts of a whole. The concept of name is one value that is often divided into 3 fields just for ease of entry, with the date of birth is the same.

7. Conclusion on testing

What exactly will these tips give you? I do not know, maybe the conversion will increase, and maybe not. The only way to find out is to conduct A / B tests! Recently , there was a small review of testing systems on the website , choose what you like.

We PayU do not deduce any change without carrying out several A / B tests for each element of the page, we are not allowed to take into account their own judgments in the design of interfaces. The PayU payment page now looks like this:



As you can see, even on it there are still a number of errors, but we continue the tests and introduce changes consistently. You can interact with the page live here , criticism is more than welcome.

A / B will be covered in one of the following posts.