Correct checkout page. How to improve the usability of the checkout page in an online store by adding field display dependencies
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 quantity fabric use a dividing point or comma. 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. You can also pay for your order from your personal account 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.
Good examples were selected according to usability principles. It is also worth noting that some examples are unique and will not be suitable for every site. Always test and improve elements on the checkout page.
If there are doubts about the approaches - .
What makes ordering enjoyable?
Easy to use. While users do not have an account, they must enter their address and payment information to place an order. Good form should simplify this process: enter as little information as possible from the keyboard.
Useful features:
- Address search or predictive text input.
- Copying the delivery address to the payment information address.
- The request to create an account appears at the end when the user is ready to make purchases.
- Placing an order without registration.
- Clear error messages so that the user can quickly fix them.
Sources of problems:
- Forced registration before placing an order.
- Too many steps.
- Unnecessary form fields.
- Unclear error messages.
- Problems with form confirmation. For example, strict time format rules.
Best examples of checkout forms
Domino's
Domino's website has placed an emphasis on mobility. It recognizes device types and adapts to them.
The order form is nice and easy to use: no registration, simple fields to fill out, saved payment information for repeat customers.
Even if the user forgets the password, but uses the same email address, he will still be able to place an order. In such situations, many sites simply return the registration form asking you to reset your password. And this is not always convenient.
They also have an app where you can order with one click. Just open the app, wait 10 seconds, and your pizza is sent to you.
Lowe's
Registration can become an obstacle to making purchases. This extra step before placing an order may be overwhelming for many users.
On the other hand, registration allows you to simplify the purchasing process in the future. It is also convenient for users
Offer to register at the end of the checkout process. You can register on the Lowe's website before clicking the 'make an order' button. There shouldn't be any difficulties here.
Threadless
Excellent ordering form. The user is immediately taken to a page with a shopping cart and payment information. You can place an order without registering, by the way.
The entire order form is on one page. And it's very convenient.
Amazon
It's easy to make repeat purchases on Amazon. Of course, first you will have to fill out information about yourself, but then Amazon will remember them once and for all.
This minimizes the number of clicks and steps. The process from adding an item to your cart to confirming your order takes three steps. Not everyone can handle that much. Plus, spontaneous buyers will disappear.
On their website at the order form great design. One improvement they should make is to make the checkout form stand out from the rest of the content on the page.
There is a progress indicator, total number of products, price and delivery terms. You can also enter the address using autofill, which is very convenient.
Schuh
Their team understands the importance of usability and is constantly improving it.
Look at the screenshot below to see the beauty of this page:
- Safety. At the top is a confirmation that the page is secure and the company's contact information.
- Notification about delivery and return of goods. Three points above the checkout form remind users about good conditions delivery, discounts and simple process return of goods.
- Progress indicator. Helps users understand how many steps to expect. And the fact that there are three of them already suggests that this is a fast process.
- Easy registration. Schuh not interested in registering for at this stage, he will offer it later.
- Links to important information. You don't need to make these links at the bottom too noticeable, but they should be there if the user needs them.
- Payment Methods. A visual reminder of how users can pay for their order.
- Centered shape. There are a few distracting elements on the page, but the focus is on making a purchase.
Crate & Barrel
The form has a beautiful and simple design. Everything is arranged logically, every field is marked. There is a progress indicator and there are no distracting elements on the page.
Nordstrom
A good example of a one-page order form. It has one advantage - it seems to the user that placing an order is much faster. And it doesn't matter whether it's true.
Nordstrom's website has information about the product and its price, plus empty fields are highlighted in red so the user doesn't miss anything important.
Superbalist.com
This site made the registration form in the form of a novel - as soon as the user adds an item to the cart, he is offered (in the form of a pop-up window) to create an account using Email or Facebook account, or log into an existing one.
The user is then asked to create a password before continuing. 
After this, he is sent to beautiful shape placing an order (although this is not entirely convenient for users who want to add more than one item to the cart).
What’s noteworthy is that the Superbalist website adds a lot of small text that explains the delivery terms and what to enter in the fields.
AO.com
AO.com done Good work. On this page you can select the time and date of delivery, and it’s very easy:
The payment page is great. The order amount, delivery date, quantity of goods, etc. are displayed. AO left his contact information so that any user can call immediately if he has any questions.
Joseph Joseph
Another site with beautiful design order forms - Joseph Joseph . The page that was chosen as an example is the registration form/checkout without registration.
What they do right: give the customer choice. Some will want to register, while others will not, and they will have the opportunity to place an order without additional procedures.
Good examples, but there is room for improvement...
Zappos website - good example, they focus on customer service and loyalty.
However, the checkout process is not perfect. Account creation - required condition, which will not suit all users.
Perhaps in the case of Zappos, brand reputation removes this barrier. I wonder if they tried something different.
After registering, users are redirected to the cart page, which is not very convenient.
In addition, the order form is not highlighted. She gets lost in the background navigation menu, search bar, alphabetical index, etc. There are too many distracting elements that will make users reluctant to place an order.
Highlighting your checkout form doesn't mean luring users in, it means making it easier for them to buy.
Boots
This checkout form is the worst one out there.
What's bad here: the user must write his address twice - when filling out payment information and delivery information. Using the same default address − good way reduce the form filling time that many sites use.
Conclusion
The forms may not be similar to each other, but each of them has useful features that you can use when creating your website.
What do each of these forms have in common? They aim to make things easier for users. For example, when you want a user to register, it's better to add one or two steps at the end of the checkout rather than at the beginning.
Do you have any examples of checkout forms that are better than those presented? If yes, share them with us in the comments below the post...
To place an order, you need to go to the cart and click the “Place an order” button; if you are not yet registered in our store, you will be asked to enter your email address and create a password.
You can also register using your account on one of the social networks.
After registration, you can go directly to the ordering procedure. Below you will find answers to all questions related to placing an order.
"1C Interest" is a retail chain and does not deal wholesale sales. Therefore, we reserve the right not to confirm orders containing more than 3 copies of 1 item. To purchase more goods, please send a request in free form to the address
In order to buy something, the selected product must first be added to the cart. This can be done both in the product catalog by hovering the mouse over the product card and clicking the “Add to Cart” button that appears on it, and on the product page itself.
Clicking the “Add to Cart” button does not obligate you to anything. You can always remove the item from your cart or simply not place an order. After you click the “Add to Cart” button, the product will be added and you can continue to select or proceed to checkout.
Attention! Pre-orders are placed bypassing the shopping cart. When you click on the “Pre-order” button, you will immediately go to the ordering process.
If you want to remove some products, just click on the button with a cross located to the right of each product in the cart. The order amount will be automatically recalculated.
You can also add a product to Favorites if you want to return to its page later. All your favorite products are displayed on your personal page in the corresponding tab.
If you want to change the quantity, you can either click on the arrows in the “Quantity” column to increase or decrease goods by one piece, or enter the required quantity manually. The order amount will be automatically recalculated.
If you don’t have much time or don’t want to bother with the registration yourself, you can select the “Quick order” form. In the pop-up window, enter your name (how to contact you), contact number, email address and a short comment if necessary.
The online store manager will contact you as soon as possible to clarify the delivery address, payment method and other information about the order.
After registering (or logging in), you will be taken to a page where you will be asked to select a delivery method: Express delivery, pickup from the nearest store or point of delivery, as well as delivery by postal services - Russian Post or EMS.
Depending on the order amount and region, you may have access to different ways delivery.
Please note: delivery to any of the 1C Interest chain stores or partner pick-up points is free.
Depending on whether you are an individual or a legal entity, the selected delivery method, whether you are making a regular or downloadable purchase in electronic format product, you will be offered different payment methods.
When placing an order for individual The following fields are required: last name, first name, patronymic, E-mail, phone number and delivery address*. The exception is orders with receipt in one of the stores of our retail network “1C Interest” or pick-up points, where the address in the order is filled in automatically when choosing a delivery method.
For legal entities In addition to the above, the following fields are required: name and type of organization, tax identification number, checkpoint and legal address.
Pre-orders prior to release date may require additional confirmations relevance of the order. For this purpose we send e-mail letter with a request to confirm the relevance of the pre-order. If there is no response, we reserve the right to cancel such order.
* Attention! When placing an order, you undertake to provide correct contact information. If, based on the information provided, it is not possible to promptly contact us to confirm the order or clarify important information, we reserve the right to cancel an order with such contact details.
When choosing any delivery method other than courier, you have access to the SMS notification service. A message will be sent to you when your order is ready at the store or pickup point, or when it has been transferred to the delivery service, depending on which delivery you have chosen. The service is provided free of charge.
If you would like to receive such SMS notifications, please provide your phone number when placing your order. mobile phone in the special “SMS notification” field.
Introduction subscriber number means that you give your consent to Clean Soft Center LLC to carry out the mailing ( SMS text messages) to the specified number about the progress of the order, for which third parties may also be involved, and also confirm that you are using it legally.
You can always make changes to your order, go back one or more steps by clicking on the appropriate tab - product basket, delivery or payment methods.
If all the specified data and the contents of the order are correct, click the “Confirm order” button and it will be sent for processing.
After you place an order, you can follow the process of its assembly and shipment both on the website and by letters that will be sent to your email address.
On the website, current information about orders is displayed in the section in your Personal account(authorization required).