Placing an order. There are explanations for the fields. Smart input validation
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. How to implement in this case correct design ordering on the website, so that it is convenient for everyone, including those of your clients who are in the same city as you (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 which minimum set fields on 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 in in this case are needed and provide a choice of only those methods of payment and delivery that we can accept and implement.
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” have applications beyond just improving checkout usability. Can be displayed for different cities different ways delivery. 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 needs to be displayed on the ordering page first of all, the “Index” 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 influences 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” has been 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. So 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, with this related issues 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.
May 13, 2014 at 09:00A different look at placing an order in an online store
- Usability
- Web design
In the CIS countries, at least 75-80% of orders come from cash-and-delivery (payment for the order upon delivery). This difference between Russian and Western consumers formed the basis for the redesign of the Sotmarket ordering process back in 2012. Then, for the first time in Russia, an online store stopped requiring client authorization or registration before making a purchase.
Background registration and authorization of users
Although authorization for last step purchases and does not bring any value to the user, this Western cliché is deeply rooted in the RuNet. Co average frequency purchases (equipment) once every 9-10 months, people often do not remember registration data: email. email, login, password. The paradox is that most online stores readily accept orders by phone, but at the same time create artificial obstacles when making a purchase online.This observation formed the basis of the concept background registration and authorization users. Now, if the client was not registered with us, we automatically did this and sent a notification about registration along with the order data, otherwise we simply reminded the buyer of the password to access his personal account.
Account matching occurs by numbers mobile phones and email addresses, which allows you not to lose client history. The approach paid off: the percentage of orders registered through the site increased from 28% to 52%.
Western online stores have developed and traditionally choose for themselves the case of preliminary authorization/registration of users on the resource in order to saving time consumer. The bottom line is that purchases from foreign companies are prepaid plastic cards, and to make it easier this process For customers, stores link payment details to a newly created account upon their first purchase. This makes checkout much easier for the user during subsequent purchases.
This case is relevant only if consumer behavior is similar to that described above. However, most store functions still need to be provided to the user without requiring authorization. For example: comparison of products, information about viewed, added to cart or favorite products. Use for identification cookies, and when logging in, match collected information with the existing one.
Abandoned cart remarketing
High cart abandonment rate - another known issue any online store. Sotmarket was no exception. The solution to this problem was to change the sorting of just three input fields.
Now immediately after entering your phone number or email. mail, subject to their validation, the order is registered as incomplete, and we get the opportunity to contact those customers who, for one reason or another, have not completed the form to the end. As a result, the average increase in orders from unfinished to created is 17-18%.
Data collected in this way cannot be (read: pointless) use for mailing advertising messages not related to specific orders.
Asterisks in input fields are archaic. Try to avoid using this technique in your forms; in most cases, asterisks can be replaced with smarter hints, with information about why this field is critically important.
Full name in one field
A small innovation was the full name input field - 3 in 1, which made it possible to solve several problems at once:
- an unobtrusive reminder of the need to enter your full name;
- call center manager gets paid internal system order processing is correctly posted;
- the form itself maintains visual simplicity and does not look more complex than it actually is.
To redesign the Sotmarket website back in 2013, we began developing our own GUI, which was used both in the cart and in placing an order. Implementing some of our own components allowed us to significantly simplify complex shapes and reduce the number of errors made when filling out individual fields.
A systematic approach to working with text, buttons, fonts, colors, indents, pop-ups and other interface elements is the key intuitive interface. The more often specific element used in design, the faster and more error-free user interaction with it occurs.
Increasing influence on user decision making
Changing the presentation of data in the delivery and payment blocks made it possible to implement another interesting concept - broadcasting promotions on the ordering page. This approach made it possible to significantly increase the efficiency of the relevant advertising campaigns without complicating the page interface and improving its visibility.
One of key characteristics A good interface is its ability to focus the user's attention. Placing an order is no exception, where complex relationships between delivery and payment methods often arise.
If choosing self-pickup from Pickpoint, the client cannot choose payment on credit.
If choosing DPD courier delivery, the client cannot pay for the order upon receipt or on credit. At the same time, inaccessible payment methods are not hidden, they are disabled with a hint why this functionality cannot be used in this situation. This approach makes the interaction process friendlier.
Entering the delivery address in one field
It is difficult to overestimate the importance of convenient choice of delivery and pickup methods. Using the Yandex.Maps API, we have made it much easier to enter the delivery address and select the order pick-up point. This solution allowed us to simultaneously solve 2 problems at once:- on the one hand, simplify the process of filling out the form for clients; now they only need to fill out one input field, instead of 3-4;
- on the other hand, the number of errors/typos when filling out the form has significantly decreased due to address prompts, which reduces the time managers process orders created through the site.
The procedure for purchasing goods in our online store is very simple and consists of several steps.
1. Product selection
You can select the desired product from top menu by going to the desired directory. It is convenient to select fabrics using a filter. In this case, you can make a choice either by one or by several parameters at once. You can also set a price range for fabrics.
2. Adding an item to the cart
Once you have decided on the product, click on the button "Add to cart". The number of added products and their amount are displayed in the “Cart” field, which is located in the site header. For fabrics and applied materials, please indicate the required footage, but Not less than 0.7 meters. When ordering fractional quantities of fabric, use a period or comma as a separator. When ordering coupon fabric, indicate the yardage that is a multiple of the length of one coupon.
After you have added all the products you are interested in to the cart, click on this field and you will be taken to the page "My basket"
. This page will list all the products you have selected. In the “Quantity” field you can change the quantity of goods to purchase. After changing the quantity of goods, the amount will be recalculated automatically. You can also delete an unnecessary product by clicking on the cross in the “Action” column.
3. Placement and confirmation of order
Once you have completed and checked your order, click on the button "Checkout".
Enter information:
* Full name of the recipient,
* delivery address,
* Contact details.
Select delivery option and payment method. Fields marked with asterisks are required. Next, to complete the ordering procedure, you need to click the button "Checkout" .
Attention! Wrong specified number phone number, inaccurate or incomplete address may result in additional delay! Please check your personal information carefully when placing an order.
Note! For regular customers on the store's website there is . In your account, you can view the contents of your shopping cart, the history of your orders, and repeat or cancel your order. Also from personal account payment for the order occurs if you have chosen the payment method through the ASSIST system.
Payment by the buyer of the seller's invoice automatically means the buyer's agreement with the above rules for purchasing goods from the Season company.
4. Work with the order
Orders are processed from 10.00 to 18.00.
On weekends and holidays there may be a delay in order processing.
After you have ordered a product on our website, your e-mail address An email will be sent with the order number - confirmation that order is accepted. Then our consultant will contact you, clarify the details of the order and answer all your questions. The product you ordered will be reserved in stock and ready for shipment.
You can pay order immediately after placing the order or after the operator’s call if you chose to pay by receipt or electronically.
Our consultant will inform you about sending order by phone or sent to your email address shipping information including mail ID by which the parcel can be tracked or the invoice number when sending the goods by a transport company or courier service.
Important! The payment period for the goods is one day from the moment the order is confirmed by the online store operator. The goods are reserved for the same time. After this period, if payment is not received from you, the product reserve will be cancelled.
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 - To the one you specified email You will receive our card details for payment. 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 using this method, you can use any by bank card VISA 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 the 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 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
