• Placing an order in your online store. The ideal order form for an online store

    Changes are constantly happening. Strong competition does not allow Internet marketing development trends to stand still.

    If, for example, yesterday the “request a call” button was some kind of attractive innovation, today it is already everywhere and not a single consumer will be surprised by it. That is why the owners of leading online stores are in constant search new ideas and new tricks. Moreover, it often turns out that you don’t have to go far – sometimes a simple “cosmetic” redesign is enough.

    Today we will talk about such a seemingly simple thing as placing an order in an online store. Every website has such a section. However, not every site can boast that the operation of this function is perfectly adjusted and brings in the maximum number of customers. Most often, just the opposite happens: stores generally “don’t bother” about this. Well, there is an order form and what else is needed.

    So, this is a very big misconception. The more difficult and incomprehensible it is how to place an order, the greater the chances that about 2/3 of visitors will not even bother purchasing goods in your online store.

    Basic rules of the order form

    Let's start with the fact that it is always necessary to indicate in how many stages the process occurs placing an order and how long will it all take. For example, the phrase “three simple steps and a few minutes of your time” increases the chance that the buyer will complete the order and complete it.

    When a person has already clicked “ and is in the process of making a purchase, he needs to understand what stage he is at and how many stages he still has to overcome. It is best not to use special characters, icons or any pictures to indicate further steps. The client may interpret them incorrectly. It is safer and more correct to write everything with the words: “choose a delivery method” or “confirm the order.” Next to the buttons indicating the action, you should not place anything unnecessary. Let her be alone free space, but visible, accessible and understandable.

    From the point of view of human psychology and habit, positive action buttons (“place an order”, “confirm”, etc.) should be located on the right and be attractive and noticeable to the client’s eyes. Buttons of the “return”, “cancel”, etc. series should be on the left and should not stand out against the general background so that there is no incentive to press them.

    If, when filling out the form, you ask the client for some personal data, always explain why it is needed: first and last name - for processing documents for the goods, phone number - for contacting delivery issues, email address– to confirm the order.

    The registration process must be consistent. It should not be allowed that during any stage the buyer would have to interrupt his actions and go, for example, to register. It is unlikely that after this he will continue his order, stay in your online store or come there again. There should be no reason why a buyer would have to interrupt their ordering process.

    Here is an example of incorrect registration, where sudden registration is required during the purchase process. But this is Ozon.ru - the largest hypermarket in Russia and here it dictates its own rules.

    Another common mistake that is often found on websites and that you have probably encountered. So, you filled out many different fields indicating a lot of data about you, it took some time, click the “next” button and then the system gives you an error that, for example, in some field you wrote something incompletely or incorrectly . And then you see that to correct these errors, you need to fill out all the forms first! At the very least, it's annoying. Maximum – the client leaves your site. Don't allow such a sad misunderstanding.

    Do not forget, at all stages of placing an order the most visible important information: cost and composition of the order, delivery terms and payment methods.

    And finally, the most ideal option– this is when you specifically indicate all delivery times and its specific cost. In other words, the phrase “delivery within 5-15 days” sounds vague and does not evoke any positive emotions. The inscription “the product will be delivered on September 1” will please the buyer much more. For example, I really like this technique in online stores when the delivery field automatically determines my city by IP address and immediately calculates the cost of delivery of the goods and time.

    Working on an online store website is long and painstaking work. It is necessary to think through every detail and every little detail in this detail, introduce new “tricks”, analyze, change and refine.

    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 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. The button to move to the next design step should be visually highlighted

    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 fields for entering 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 become 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. Notify the user about automatic registration by email. 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 the address as a login email or phone

    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 email address are data that the client always remembers.

    Provide a password recovery option on the login page.

    “Rozetka” recognizes the user by email and helps to 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 the entered data is not saved after updating:

    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:

    On the Photomag website we do not see the final amount, but we will 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 you select a payment method, the total amount on the “Cheaper” page of the website 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 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:

    • Product name,
    • Quantity,
    • Price,
    • Delivery cost,
    • 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 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?

    The profitability of any online store primarily depends on how comfortable the conditions are created on the site. Any buyer wants to find what they are looking for as quickly as possible and at the same time spend a minimum of effort. Statistically, most customers don't like the checkout process. That is why, if you want to increase the number of sales, you need to simplify the ordering system on your website.

    In online stores, in order to buy a product, the client must fill out order form, which is installed on the site using special scripts, modules or plugins. When creating an order form, adhere to the following rules.

    1. Simplicity is the key to effectiveness.

    As practice shows, if a buyer encounters any problem when placing an order, he most often leaves the resource for fear of encountering this problem again. If your order form has a few simple steps and is easy to fill out, you are guaranteed consistent sales. It is worth noting that the main thing is not to overdo it with simplicity; always take into account the specifics of your project. The order form on the website should collect a minimum necessary information to complete the order.

    2. Use clear examples.

    A person always needs a clear example, especially when filling out an order form. Try to create a web form that even a complete beginner can fill out.

    3. In total, show the progress of the order to your client.

    The client should always see how many stages he has completed and how many still remain to be completed. is of particular importance from a psychological point of view. The classic ordering process takes place in 3-4 stages. The first stage is when the user creates an order list. The second stage - the buyer enters his contact information. The third stage is information verification. The fourth stage is the deal.

    4. Dispel all doubts of clients.

    In our country, a law on the protection of personal data has recently come into force, but many users do not know about it. IN html form When ordering, be sure to indicate the non-disclosure of personal information. This will significantly increase the trust of your customers.

    5. No! registrations.

    Almost all buyers have a negative attitude towards any registration, due to the fact that this process can take a long time (in their opinion). Therefore, even if you register on your website without confirming your profile, delete it or make the ordering process available to unregistered users. It is worth noting that in some cases registration, on the contrary, is necessary. For example, when you intend to create a quality customer base. In this case, register on the site via social media. It's very simple.

    All of the above rules and tips undoubtedly increase the efficiency of the order form on the website, but you should always remember that a lot depends on the specifics of the topic. Only by trial and error can you really increase website conversion.

    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. A 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 details. 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.

    The checkout form on their website has a 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 there is a confirmation about the security of the page and the company’s contact information.
      • Notification about delivery and return of goods. Three points above the checkout form remind users of good delivery conditions, discounts and an easy return process.
      • 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 I made the registration form in the form of a novel - as soon as the user adds an item to the cart, he is prompted (in the form of a pop-up window) to create an account using email or a Facebook account, or log in to 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 job. 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 - prerequisite, 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...

    Read more: