How to improve the usability of the checkout page in an online store by adding field display dependencies. Reasonable number of fields in the form. Error messages on the form are visible and clear

Colleagues, in this article we want to tell you how to place an order, pay for it and deliver it.

Shop

Let's start with the fact that you can place an order in our convenient online store, which is located in the Main Menu of the site in the tab -
Product selection

And so, you went to the Store section and select the product category you are interested in: “Film”, “Equipment”, “ Optional equipment", "Consumables"or "Chrome". The entire range presented is in stock! By clicking on the picture of any product, you will see detailed characteristics and a big photo of him. You need to order the product you like; to do this, just click on the “Buy” button and you will see how it will be added to your “Basket”. You can add an unlimited number of such products to your cart.
Placing an order

When you have chosen what you wanted, click the “Checkout” button in the “Basket” and automatically go to the page for filling out the data and choosing a payment method. Here you fill in your delivery information: Full name, Delivery address, contact number, Email – this data is needed to place and subsequently send your order. You will also see the “Comments on the order” field - in this field you can leave your wishes and comments on the order, or ask the manager to contact you and answer the remaining questions.

So, you have filled out your details, all that remains is to choose a convenient payment method for your order. You can do this on the same page - there are 11 payment methods to choose from. Let's talk about some of them in a little more detail:
- Transfer to a Sberbank card – Our card details for payment will be sent to your email address. You can make payment at any branch or terminal of Sberbank, or, for example, by transfer through your online bank.
- Issue an invoice for payment – An invoice for payment for the goods you ordered will be sent to your email. You can pay this bill at any bank branch or by bank transfer.
- “Online” payment methods are highlighted separately - the most quick ways payment. Money for your order is received instantly and you don’t need to go anywhere! For example, when paying for an order in this way, you can use any bank account. VISA card or MASTERCARD or system money transfers QIWI, electronic money WebMoney, Yandex.Money, or choose another online payment method convenient for you in the Yandex.Checkout service.
If none of these payment methods suits you or you still have any questions, you can ask our online consultant or contact us by phone hotline 8-800-200-51-21 – for Russia (free call), for other countries +7-927-010-37-58, Viber or WhatsApp +7-927-711-33-66.

After you have filled out all the fields and chosen a payment method, click the “Place an order” button at the bottom of the page. Next, you will see that your order has been assigned a number and a notification that payment details and confirmation of our receipt of your order have been sent to your email.

And so, you placed your order. They paid for it. What happens next with your order?
Assembly and dispatch of the order

After admission Money The order is immediately transferred to the warehouse for preparation! At the same time, our logistics department is working on best option order delivery ( minimum terms– price / quality), agrees, if necessary, on the shipping method and on the same day your order is delivered to our courier. All orders are shipped within 24 hours of payment! We monitor this and ship even on Saturdays. And immediately after sending the order, we will send you an SMS notification to specified number with complete information about the shipment, which will indicate the name of the carrier (which transport company sent your order or by mail) and the shipment tracking number.

The cost of standard delivery of materials is about 400-600 rubles, delivery time is 3-4 days, a little more to remote regions, but we monitor the deadlines and choose the best carrier option.

The flexibility and mobility of our company allows us to send orders to everyone accessible ways! We carry out shipments by any transport companies, Russian Post, express courier delivery, intercity buses, long-distance trains.

Upon arrival of the order in your city, representatives of the transport company will contact you by phone number that you indicated in the order and inform you where you can receive it. You can get acquainted with the Order Pickup Points using the example of the transport company "PEC".

You can select a product and start placing an order right now - Go to the store

Most often, not too much attention is paid to the design of the “Delivery” page. Usually, this is a short text about the terms and conditions of delivery. In fact, the buyer's decision when placing an order largely depends on the information provided on this page.

When designing a page, you first need to add the following information:

Regions and delivery methods

First of all, the visitor should see to which regions delivery is carried out. Provide information about the main region in more detail, and for additional ones create separate page with an overview of all possible ways (transport companies, pick-up points, Russian Post, etc.). If the online store operates throughout Russia, then you can add auto-detection of the region to the site and display information depending on this, as well as a calculator for calculating the cost.

Cost and terms

For most buyers, the timing is very important indicator. It is necessary to indicate on the page when the goods are shipped from the warehouse and how long delivery takes. If it is possible the next day, then this is a rather positive factor. You should not mislead customers by indicating shorter terms than they really are - this will only negatively affect the reputation of the online store and increase the number of order refusals.

Delivery terms

Is it possible to check or try on the product before purchasing, is it allowed to open the order before payment, will the courier be able to advise on the functions of the product? All this information is often of interest to buyers and needs to be presented in as much detail as possible on the page.

You can also add information about liability for refusal of an order upon delivery. Often, buyers place orders expecting to look at the product and, if it doesn’t suit them, refuse it. In this case, the buyer pays the shipping cost.

Warehouse address

It is necessary so that buyers know where to turn in the event of an emergency. warranty case and to which address to return. If it is not possible to indicate it (the online store operates without a warehouse), then you can indicate the legal or mailing address companies.

Order tracking after dispatch

Here you can specify how the buyer can track the order, how he will receive the track number and where he can check it.
Despite the seemingly a large number of information, it must be presented as concisely and structured as possible so that the buyer does not have to study the delivery page for a long time.

Have you ever seen a recording in Webvisor of a customer adding an item to the cart, starting to fill out order details and... leaving the site? This scene can be compared in terms of drama to the final shots of Titanic. Today we’ll talk about what makes a user leave a site without making a purchase and how to fix it.

According to the Baymard Institute's "Cart Abandonment Rate Statistics" study, more than 68% percent of orders that end up in the cart do not end up being purchased and paid for.

Why does the user refuse the intended purchase?

Checklist: how to make it convenient to buy in an online store

1. Add to cart

1.1. After clicking on the “Buy” or “Add to cart” button, show the user that the product has been added

After clicking on the “Add to cart” button until the feedback with a message about adding a product, the button should be inactive to avoid re-adding Add to cart. In a pop-up window, invite you to make a purchase or continue shopping.

1.2. When you hover and click on the “Add to Cart” button, it should be highlighted or change color

If the button does not change its appearance, the user may mistakenly add several identical products to the cart.

When you hover over the “Buy” button in the “Osette”, the button becomes brighter:

Change appearance buttons in “Hello” after pressing:

1.3. Indicate the procedure for returning and exchanging goods

This is especially true for clothing and shoe stores, where the likelihood of making a mistake with the size is high. The user wants to be sure that he will be able to receive right size ultimately.

Delivery information on the Hello pages:

On the Photomag website detailed information opens by clicking on the “More details” link:

2. Inside the basket

2.1. In the basket let's detailed information about ordered goods

In order for the user to check the correctness of his order and refuse the goods that he placed in the cart just for the sake of comparison, we provide comprehensive information about the order:

product image (when you hover the photo it should enlarge),
when you click on the image, detailed information about the product should be displayed,
indicate the number of units available,
if the product is available in offline stores, show where you can pick it up yourself.

2.2. Button to go to next step design should stand out visually

The “Continue placing an order” button on the Leboutique website is duplicated and highlighted in color among other elements:

The “Place an order” button on the “Cheaper” website is also hard to miss:

2.3. The cart should “remember” the order

Perhaps, for technical or other reasons, the user cannot make a purchase in one session. When he comes to the site again, it will be inconvenient to search and add products again. There is a high probability that a potential buyer will give up on repeated manipulations, so the site must remember the contents of the cart.

2.4. Add a button to remove items from cart

For example, the ability to remove an item from the cart on the Mobillac store website is presented in the form of a small link:

2.5. Promo codes and discounts

Place input fields discount coupons and promotional codes on the cart page.

They should not be active or visible by default. This distracts the user, who is already ready to buy, from the checkout process and motivates him to leave the site in search of information on receiving a discount.

The promotional code field in “Hello” is hidden by default:

And it opens only when clicked:

But on the Foxtrot website, the promotional code field is visible by default. In addition, the cart page suggests checking your bonus account balance by going to another site:

Let the name of the input field be intuitive. It’s better to replace the blurry “Voucher” with “Do you have a promotional code?”

3. Registration

3.1. Give the user the opportunity to buy without registration

Users don't like to register when making their first purchase. Firstly, they are not sure that they will regular customers. Secondly, no one wants to receive annoying spam in their email. And, thirdly, registration is associated with filling out dozens of fields, recovering a password and passing a captcha.

“Buy in one click” function in “Photomag”. The user leaves only a phone number, the rest of the information is specified by the manager. The button for making a “quick order” is visually highlighted among other elements, and the button for placing an order on its own is invisible and even seems inactive:

Leboutique offers an alternative to registration - logging in using a social network account:

Remove confirmation from the checkout process contact information(follow the link from the letter or enter the code from SMS). If confirmation takes too long, the user will simply leave without completing the purchase.

If you provide the ability to order without registration, make this function visible on the page.

When ordering without registration, functionality should not be reduced. If a payment method is not possible without registration, please notify us in advance. Describe the benefits of registration and the differences in functionality for users with different statuses.

3.2. Background registration

Often, the information required to place an order is sufficient for registration. Report about automatic registration to the user by letter. Of course, this method has its drawbacks, for example, an automatically generated password, but the user saves time, and the store receives a new subscriber.

Here's how it's implemented in Rozetka:

Or prompt the user to register after purchase based on the information they entered.

3.3. After registration, automatic authorization and continuation of the order should take place.

3.4. Suggest using an email or phone number as a login

If you imagine how many resources you are registered on regular user, and how many pairs of logins and passwords he needs to remember, then the reluctance to register again becomes understandable. Phone number and mail address are data that the client always remembers.

Provide a password recovery option on the login page.

"Rosette" recognizes the user by e-mail and helps you remember the password “without leaving the cash register”:

3.5. Save the completed information in the login field

When visiting again, the client, as a rule, goes through several “standard” logins in his head or does not remember at all that he has already registered on the site. Prompt the client by leaving data in the login field.

3.6. Do not automatically subscribe registrants to the newsletter.

Most customers of online stores are already tired of receiving mountains of unnecessary letters by mail. Describe the clear benefits of subscribing and ask if the user would like to receive emails from you.

3.7. Minimize the number of input fields

If the user's city and district can be determined automatically, let the system fill them in automatically. In this case, the user should be able to check and edit all fields.

On the Leboutik website, a drop-down list helps you select an operator code mobile communications from the list.

3.8. Checking the correctness of the entered data should be carried out while filling out the form, and not after submitting it

After submitting a form with incorrect data, the completed information must be kept complete.

Checking on the “Cheaper” website page occurs after submitting a form in which, after updating, the entered data is not saved:

3.9. Error messages should be clear and explain how the problem can be resolved.

The input error message on the Hello website describes in great detail how to correct the confusion:

Leboutik prompts the user how to enter the correct email address:

4. Delivery

4.1. Show self-pickup warehouses on a map and in a list

“Rozetka” provides the opportunity to select pick-up points by address in the list or find the nearest branch on the map:

4.2. Prompt the user to select an address from a list or enter it manually

Entering or selecting an address on the Photomag website:

4.3. Specify the shipping cost when choosing a delivery method

The buyer may be surprised by the increase total amount order upon receipt, which will lead to refusal. Inform that shipping is paid by the buyer and provide an approximate cost.

Convenient display of cost depending on the delivery method on the Cheaper website:

The delivery cost is visible when you select it from the list on the Allo website:

We don’t see on the Photomag website final amount, but we’ll find out when we can clarify the final cost:

5. Payment and details

5.1. Indicate payment methods in descending order of popularity

"Hello" offers to choose a payment method:

Display payment system icons next to the name.

5.2. Divide payment methods into groups according to their meaning:

prepayment by bank card,
payment in cash upon receipt,
electronic payments,
payment via terminal.

Selecting a payment method in Rozetka:

5.3. Specify the commission of each payment method

When choosing a payment method total amount on the “Cheaper” website page changes:

Mobillac encourages customers to pay by card:

5.4. If your product is purchased regularly, save payment information so that the user only has to add the item to the cart and click "Pay"

5.5. Don't ask the type payment system from the user, if the size of the commission does not depend on the choice

The first digits of the card number uniquely identify the payment system: Visa, MasterCard, etc. If the price does not change when paying with any card, automatically determine the system of the card that the user enters.

5.6. When entering a card number, the input field should visually repeat the digits of the number on the card itself

Six-digit numbers are divided into 4 blocks of 4 digits. After filling each block, the transition to the next one should be carried out automatically

Please note that there are cards with numbers other than sixteen. Maestro cards can have 13 or 16 or 19 digits. If your processing accepts cards with different amounts numbers in the number, make sure that the input field adapts to the entered data. By the first six digits you can determine the name of the payment system, and if this system has a different number of digits in the card numbers, the field should change.

5.7. Collect payment information on the store's website

If, after clicking the “Pay” button, the user lands on a payment resource page, then this is confusing. Even experienced Internet users feel uncomfortable leaving payment information outside the store.

If it is not possible to fill out data in the form on the site, make sure that the style of the site is maintained on the payment page.

Leave on the payment page the option to go back to the store’s website without paying. Here you can also enter information about your order (order amount and cart contents).

5.8. Provide payment security information on the payment page

secure https connection,
payment system logos and security certificates.
if SMS payment confirmation is not required, inform the user that the payment was made without 3DSecure technology.

5.9. If the payment could not be processed, an error message should appear

If, after the payment has failed, the user is simply redirected to the payment page or cart, then it is difficult to understand whether the payment was successful or not.

Message stating that the payment could not be made on the “Hello” page:

Suggest alternative options pay for the purchase.

5.10. Communicate with the client in a clear language

Replace technical and rarely used terms with more familiar ones.

“Authentication” - “Enter the code from SMS”,
“Dynamic password” - “Code from SMS”.

5.11. The confirmation code should be located at the beginning of the SMS so that it can be read without opening the message

6. Order confirmation

On the order confirmation page, display full information:

Name of product,
Quantity,
Price,
Cost of delivery,
Delivery method,
Payment system commission,
Recipient's contact details.

Allow the user to edit information on the confirmation page.

Order confirmation when placing an order on the Mobillac website:

7. “Thank you for your purchase”

Include order information on the “Thank you for your purchase” page.

The message on the final purchase page in the Cheaper store is very succinct:

“Photomag” also indicates the order number:

"Hello" gives detailed information:

Duplicate complete order information on email box client.

Include a print option on your order confirmation page.

If the product is electronic, tell us how you can download it.

Let's repeat what we've covered

Basket:

adding to cart should not contain unnecessary steps,
display information that the product has been added to the cart,
inside the cart display detailed information about the products,
the button to continue purchasing should be visible and named in accordance with user expectations,
The promotional code entry field should be hidden by default,
add a button to remove items from cart,
the cart must remember the order.

Authorization:

add the ability to buy without registration,
add background registration,
make your email address or phone number your login.

Payment:

use intuitive names of payment methods with icons,
display payment methods in descending order of popularity,
warn about commissions of payment systems,
data entry fields bank card must visually repeat the location of information on the physical map,
allow the user to return to the store page without paying,
provide details if payment is declined.

Delivery:

determine the address automatically with the ability to edit,
display self-pickup warehouses on a map and in a list,
Please indicate the estimated delivery cost.

"Thank you for your purchase" page:

display the order number,
duplicate order information by email,
Tell the client how events will develop next.

Post Scriptum

There are many options for implementing the same function, and the choice depends on your niche, target audience and website platforms.

The main message of the study and our article is that you can almost always make your purchase on the website more convenient.

By the way, Aveb specialists wrote a book about the usability of online stores. Just instructions for use - only specific recommendations and examples. Have you already read it? If not, be sure to download and read.

What shopping cart improvements have significantly increased conversions on your site? What do you recommend paying attention to?