An ideal order form for an online store. A clear main CTA element. Why all this?

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

1. 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 -

2. 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.

3. 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 data: Full name, Delivery address, Contact phone number, Email - these data are needed to process and further 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 Sberbank branch or terminal, 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?

4. 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, courier express 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 "PEK".

   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, deadlines are 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.

There has long been an opinion that the need to register on a website leads to a decrease in the number of sales. Taking this into account, it is logical to assume that a payment page for the goods should appear, where you just need to enter the address Email and delivery details. Thus, online shopping should resemble a self-service store, where the buyer is given complete freedom, without the need to inform Additional information, but you can easily calculate the total cost of the purchase.

But is this really the case? We invite you to familiarize yourself with some ordering forms on commercial websites.

Examples of checkout pages on commercial websites

Before creating a commercial website, the main thing to understand is that mandatory registration not only has a negative impact on sales, but is also absolutely meaningless. you can check out famous examples, confirming this fact.

In any case, to confirm the order, the user must be asked for an email, delivery address and name. These are the same points that must be entered during registration, except that there is no need to come up with a password.

This information can be requested from the user on the order confirmation page, automatically generated, and only then prompted the user to “create a password.” And why force the user to register before deciding to buy anything from you, when the whole process can be “cranked out” almost imperceptibly during checkout?
Here's an example of how ASOS has simplified its registration page With:

(Fig. Customers who have already used the services of the ASOS website must enter an email address and password, and new customers must create an account)

(Fig. To log in, regular customers must enter their email address and password, and newcomers, after selecting a product, are asked to go to the checkout page)

As soon as potential clients After selecting a product, they click on the “continue” icon, they will be taken to a page where they will be asked to enter the same information they were asked for before and eventually an account will be created. This means that the same process is presented in completely different ways. Surprisingly, statistics showed that such a minor change led to a halving of failures on the site.

Conclusion: on website pages, registered customers should be prompted to “log in” with their password so that they can quickly access the order page. And the calculation of the order amount and its further execution must be offered to everyone. Of course, you can offer to create an account, but this is of no use.

Macy's Company
Here's another great example - a nice, clear and uncluttered page that draws users' attention to key points:

(Fig. If you have previously purchased something on the site, then you can go to your orders page by entering your email address and password. For beginners, only after selecting a product they are offered to go to the ordering page by clicking on the “Make calculation as” button guest". This will automatically create a profile).

Macy's also does this well because the checkout page gives customers return and shipping information (by clicking the box and lock icons) and a number at the top of the page to call and clarify all necessary information. Agree that such an approach to business inspires trust and respect.

Walmart Company
On its checkout page, Walmart offers guests the option of creating an account or continuing to place an order without creating an account. Those. a new buyer has a choice - to save time “here and now” or in the future:

(Fig. Regular customers log in to the system by entering their email address and password, and newbies can find out the total cost and place an order without creating an account (i.e., saving time now), or create an account (and thus saving time in the future) future)).

Sears Company
An interesting approach to this issue was demonstrated by Sears, which decided that the login page for regular customers they don't need it. Therefore, the company sends all its users directly to the checkout page.
This is what their checkout page looked like before:

And this is what she looks like now:

Everything is very clear (you need to enter the delivery address, recipient's name and email), there are no barriers to completing the purchase.

WHSmith Company
Another role model. A very neat page that does not force the user to mandatory registration:

(Fig. The user is asked to enter his email and is unobtrusively asked if he has a password to log into the site)

Tesco company
Tesco demonstrates a completely different approach. On their website, mandatory registration of users is carried out before placing an order.
Perhaps this is due to the fact that the company is large enough, it has many regular users with a club card, so the registration process is not considered a barrier.

(Fig. Login by entering your email address and password. Register by entering your email address, postal code and club card number)

This approach, I think, can scare off a number of random buyers, so we can advise Tesco to try to introduce an order for random site guests and track the result.

John Lewis Company
Another great example of ordering page design. There is no requirement for all users to register, and the page itself provides all the necessary contact information for the company and offers a secure order confirmation function (you can continue placing an order only by following the link sent to email address):

(Fig. The user is asked to enter an email to which a link for further ordering will be sent)

Boots Company
Previously, we already looked at the website of the “Boots” company, where mandatory registration before placing an order can be one of the factors that negatively affects the level of sales:

(Fig. Log in to the checkout system via email and password or register on the site before you start shopping)

Amazon Company
Amazon also forces users to register before sending users to the page for placing and calculating the cost of an order. However, this requirement is presented very gently, so the registration process does not seem to be a barrier to implementation further actions Online.
The new visitor is asked to enter the address and click on the radio icon to continue placing the order:

(Fig. The visitor is asked to enter an email address and indicate whether he is a new buyer (then he must click on the yellow button below) or has already used Amazon services (then a password is entered)).

After this, you will be transferred to the registration page, which will not take much time, because... extremely simple:

(Fig. New buyer is asked to enter name, email address, number contact phone number(optional) and password).

House of Fraser Company

They have a very simple checkout page that does not pose any barrier to making a purchase:

(Fig. They ask you to log in or continue placing an order as a guest, indicating only your email to begin with).

American Apparel Company

The American Apparel company managed to place on one page not only information about orders (shopping list) and their cost, but also the function “log in using your login” and placing an order as a guest.
However, all this is done so “tasty” that the buyer will not be confused at all and nothing will distract him from the purchase:

(Fig. Placing an order: 1) list and cost of the order; 2) log in using your login or specify delivery details as a guest)

Let's sum it up
The article featured a random selection of checkout pages from various commercial websites to demonstrate how differently this issue can be approached.
In most cases, all visitors to different resources are required to enter the same information, but it is very important to know how to properly ask the user to enter the necessary information and in what order it is best to do this.

For example, if you do not take into account entering the number from the club card (which is optional in any case), forms for placing and calculating the cost of an order from companies such as House of Fraser and Tesco require entering the same information.

It’s just that Tesco, with its implementation style, turned this into a barrier, while House of Fraser does not create any obstacles and directs all users directly to the ordering page without mandatory registration. Which tactic is better? In my opinion, the second one...

And always remember, if you want customers to shop with you, don’t put any barriers for them.

The purpose of the lesson

Develop a part of the service form template responsible for the order checkout page.

Get acquainted with the forms for choosing a payment method, delivery and the buyer’s questionnaire.

primary goal

The main purpose of the checkout page- be filled in by the visitor. Questions that users encounter when filling out forms:

Questions

• Where to begin?
• Is it easy to fill out the form? And how long will it take?
• Which payment/delivery method is right for me?
• How many steps do you need to complete before the form is completely filled out?
• Why should I fill out these fields? Why do they need this data?
• Can you be trusted? Will my email/phone number not fall into the hands of spammers?
• What should I do after submitting the form?

Tasks

Let's see what tasks the checkout page solves.

Now let's solve these problems.

Sample

Provide a simple, neat layout

Let's start with the most difficult one. This is what the default checkout page looks like:

To simplify the appearance of the checkout page, we need:

• Leave only the logo and site name at the top of the site. No links
• Change sidebar content. We no longer need to show a list of categories. Place it in the sidebar a little information for those who place an order and a message that you can call if something doesn’t work out
• Simplify the bottom part of the site - leave only the copyright system and the site in it

If desired, you can completely abandon the sidebar.

Find in the template of the service forms page the global block responsible for top part site (usually $GLOBAL_AHEADER$) and place it in the following construct:

Name of the site

logo_simple.png is a simplified logo image. There are several ways to simplify the logo for the checkout page - reduce it in size, redesign it, leaving the corporate style, or make it black and white.

Let's do the same with the bottom part of the site ($GLOBAL_BFOOTER$) and the sidebar ($GLOBAL_CLEFTER$):

If you are experiencing difficulties with global blocks, remember.

Draw attention to form fields

In total, on the ordering page the user is asked to fill out four forms:

1. Form with order contents (table) $BODY$
2. Delivery method selection form $DELIVERY_SELECTOR$
3. Payment method selection form $PAYMENT_SELECTOR$
4. Personal data entry form $ORDER_FIELDS$

In order to highlight form fields, you need to configure .methods-list and #order-table:

Methods-list, #order-table ( margin: 20px; background-color: #e5e5e5; border: 1px solid #cccccc; )

Remove unnecessary fields

Here we are talking about the personal data entry form $ORDER_FIELDS$ . Surely, you have already completed lesson 31 about order fields. We will need to look at each added field under a microscope and ask ourselves: “Is the information in this field really so important to us that we are willing to lose some customers for it?”

Often, “Name”, “Phone Number” and “Delivery Address” are enough.

Of course, it is worth considering the marginality of goods. In stores where a large number of orders have to be processed, additional fields will increase profits by reducing labor costs for processing. In the case of a small flow of orders, it makes sense to request only the name and phone number, mainly relying on the qualifications of sales managers.

Once you have decided to remove unnecessary fields or add new fields, return to Lesson 31.

Overcome visitors' doubts

How we will overcome:

• After the form with the contents of the order $BODY$ we will place brief information about the guarantee and return conditions
• Next to the form for selecting payment methods $PAYMENT_SELECTOR$ we will place icons of attestations, certificates (if any) or icons of payment methods;
• Before the "Place an order" $ORDER_BUTTON$ button, we will inform you that the order can be canceled/changed at any time. This way the user won’t have long thoughts about “Did I format everything correctly?”
• Under the “Place an order” button $ORDER_BUTTON$ we will place a block “What will happen next?”. In it we will inform you that before delivery of the order, we will definitely call you back to clarify at the specified time.

Unfortunately, within the framework of this lesson we cannot consider how to add icons to payment or delivery forms. So just add the appropriate block after $PAYMENT_SELECTOR$ .

Use active voice

Let's look at a specific example. By default, the choice of payment method is described in this section of the template:

Payment method

If you use active voice, then the same fragment will look like this:

Select a Payment Method

The same applies to choosing a delivery method, checking the contents of the order and filling out the user data form.

Specify the number of steps and time to place an order

Before $BODY$ add a message about how many steps there are in the checkout process and how long it will take, for example:

Placing an order in 4 steps takes no more than 3 minutes

Where do uCoz have several steps to place an order? Here we are talking about steps within one page. I suggest this option:

1. Step 1: Check the contents of your order
2. Step 2. Select a shipping method
3. Step 3. Select a shipping method
4. Step 4. Provide information about yourself

Please note that the title of each step uses the active voice.

This concludes the lesson. There are a number of settings for the checkout page that will allow you to increase its conversion. We'll talk about this in the next lessons.

Exercises

1. Create a simplified checkout page layout
2. Remove unnecessary fields and select the remaining ones
3. Place blocks with text that will help overcome buyer doubts
4. Specify the number of steps and time required to place the order

In this article, I’ll tell you about such an important thing for the usability of an online store as the interdependence of fields on the checkout page in the cart.

I'll use an example to explain what it is. Let's assume your online store is geographically located in St. Petersburg, where you have a pick-up point or an offline store. In St. Petersburg, you deliver by courier and provide the option of self-pickup. But besides this, you deliver throughout Russia. In this case, how to implement the correct ordering on the website so that it is convenient for everyone, including those of your clients who are in the same city with you (they can use self-pickup or courier delivery) and others who can only receive their order through postal services.

It turns out that all clients can be divided into two groups - local(from St. Petersburg) and out-of-towners(from any other city in Russia).

Knowing this, let's determine what minimum set of fields in the checkout form will be needed in your store for each of these groups.

As you can see, the ordering fields are different for local online store buyers and for nonresident buyers.

This is exactly the same dependence of the fields in the basket that I spoke about at the beginning. After the buyer has indicated his city, taking into account this city, we give him to fill out only the fields that are needed in this case and give him a choice of only those methods of payment and delivery that we can accept and carry out.

Simply put, the store should not show the buyer fields that the buyer does not need to fill out or select. For example, if a store delivers to Moscow only through postal services, but cannot deliver by courier, then you do not need to show the “Courier” delivery method for the city of Moscow. Further, if when choosing the delivery method “Gruzovozoff” you technically cannot accept payment by “Cash on Delivery”, then you do not need to show this payment method for the delivery method through “Gruzovozoff”. I think the logic here is clear.

It's the same with the "locals". It is inhumane for a local buyer who wants to pick up an order himself (if he has chosen “Pickup”) to be forced to fill out the “Address” and “Zip Code” fields. Next, when Pickup is selected, we should not show that customer payment methods that are not available for Pickup. It will be strange if, when picking up, the buyer chooses to pay in cash through Euroset.

Although at first glance this relationship between fields may seem confusing, in reality everything is very simple. Especially if this feature is supported in the CMS. So, in my favorite CMS 1C-Bitrix, a similar ordering in an online store can be configured with the mouse in 10-15 minutes. Without any problems, you can specify for which city which fields to display, which delivery services and payment methods to connect, etc. Moreover, the dependence does not have to be on the city from which the buyer is from. Depends on the shipping method. I chose “Pickup” - you won’t see any extra fields in the payment methods. At the same time, from the client’s side, everything looks logical, there are no questions “why am I filling out the address” if I pick up the order myself, etc.

“Linked fields” can have applications beyond just improving checkout usability. You can display different delivery methods for different cities. For example, there is a convenient delivery service that delivers only to 15 cities with a population of over a million. You can configure this service to be available only to buyers from these cities.

It would seem that the above is obvious. But in many online stores these obvious things are not applied and, as a result, receiving and placing an order has so many fields, by filling out which you can not only order beauty products, but also receive a foreign passport :-).

Everyone has probably read the popular cases in which in large American stores (Amazon, Zappos, eBay), by swapping two forms, the conversion rate increased tenfold. Typically, such examples are given in favor of the need to make as few fields as possible when placing an order.

The cases are beautiful and arouse interest. But they usually have no backstory. Let's take an example where two forms were swapped on the checkout page.

Do you think they weren’t changed at random, but based on some kind of assumption?

Let's try to give an example of such an assumption. Do you think (remembering what was said above about the interdependence of fields), there is a difference between what should be displayed on the ordering page first of all: the “Zip Code” field or the “City” field? At first glance, there is no difference.

Now let's add the initial data from the example described above, when the store is located in St. Petersburg. There is self-pickup, it delivers by courier only in St. Petersburg, and ships orders to other cities through postal and transport companies (there is no courier delivery). Now does it make a difference which field comes first, the zip code or the city?

Yes, now there is. Moreover, new information greatly affects the entire ordering process. Now we need to make a number of fields dependent. Namely, the “City” field should be the first. While the “City” field is not filled in, we do not show the “Zip Code”, “Address”, “Delivery Methods” and “Payment Methods” fields. They will appear only after any city other than “St. Petersburg” is selected. Because in St. Petersburg, as we said above, the store delivers only by pick-up and by courier. And if so, then he does not need his zip code and address from the client (fill in two less fields at once).

Let's look further at what else has improved. We also do not show all delivery methods and payment methods, but only show those that we can actually accept. For Peter, as mentioned above in the example, this is payment upon receipt in cash or by bank card. For non-residents, whose orders will be shipped through a transport company, there will of course be no “cash on delivery” payment. This way, we saved the client from unnecessary confusion with choosing from options that are obviously not available to him, and we saved the store manager from unnecessary, related questions and customer dissatisfaction.

Thus, by simply adding a relationship of fields to the checkout page, it is possible for a number of users to reduce the number of fields required to fill out, reduce the negativity associated with misunderstanding of some points regarding payment and delivery, and as a result increase cart conversion. No one doubts that the number of sales is related to the usability of the shopping cart?

Check out the post about placing an order without registering in Bitrix. It complements this article perfectly.