7 common mistakes in designing a checkout process

    After a long break, we at PayU decided to resume blogging on Habré. There will be no advertising of the 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 checkout process on the sites of online stores. I want to note that the list is far from complete and in the comments I will gladly discuss other examples.

    The analysis is based on the largest online stores from TOP100. For these guys, mistakes in designing the process of placing an order cost millions of lost rubles. 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 in addition to the "Pay" or "Go to the next step" buttons. Even if the button is noticeably different in style from the main one, the user does not have an understanding of what the press will lead to, will the page reload completely? Or just an area? What will happen to the data in 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 try to get as much information as possible from the user, while they do not explain at all why this information is required. Sometimes it is mandatory to enter the same data several times.





    Solutions:
    1. Do not ask for information that is not needed to pay and deliver the order. You can sign up for news or interview the user somewhere else after completing 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 the required fields with gibberish. This is precisely because the store does not explain why they need this information.


    Good example:


    3. Card entry form


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





    Solutions:
    1. Highlight the billing input form.
    2. Add security identifiers next to the form; for the most part, users do not understand that the SSL icon at the top of the page applies to the entire page and to all fields. They may not know what it means at all.


    Good example:


    4. Card expiration date entry fields


    The share of payments on the Internet is growing quite quickly ( 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 had never paid anything online before. And now they are asked to select the month and year of the card’s expiration date 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 this is a month and a year. However, even if the user was experienced, it was definitely not in his plans to consider which October was the month of the year.



    So bad:
    1. January 2014
    2. January 01/2014
    3. 1 - January / 2014
    4. 2014/2018


    It's better:
    1. 01 - January / 14


    Good:
    1. 01/14


    Very good:
    1. [] / []


    Good examples:




    5. The linearity of the checkout process


    When designing checkout steps, nonlinearity should be avoided. At every moment in time, the user must understand where he is, what remains to be filled 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 information about himself, chose the delivery method, etc. Some show particular cynicism and force them to re-select products and re-enter all the data.



    Very often, the back button in the browser simply does not work and the trash is emptied:


    Sometimes non-linearities can be avoided by requesting the missing information in pop-ups:


    Solutions:
    1. Do not force the buyer to go back, but allow this to be done while preserving all the data entered before and after.
    2. Do not force buyers to register to place an order.
    3. Explain what advantages a registered user will receive, for example, accumulating bonuses or linking a card.


    A positive example, if not strange, is the Russian Railways website. To purchase a ticket, you must log in, but this does not interrupt the process.

    6. Multiple columns


    The basic rule of typesetting of any forms is very often violated during the layout of payment forms. When the input fields are arranged in two or more columns, the algorithm for filling them becomes unobvious, which leads to ignoring the second column, or users go to the second and stop filling the first. Lots of options:


    Solution: avoid multiple columns ,
    there are 2 exceptions:
    • Name and Surname.
    • Date, consisting of input fields for day, month and / or year: birth, delivery, card validity period, etc.

    They became exceptions because they are actually parts of a single whole. The concept of a full name is one value, which is often divided into 3 fields just for the convenience of input, with the same date of birth.

    7. Testing Conclusion


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

    We PayU do not display a single change without conducting several A / B tests for each element of the page; we are forbidden to take our own judgment into account when designing interfaces. The PayU payment page now looks like this:



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

    The topic of A / B will be discussed in one of the following posts.

    Also popular now: