Placing an order will not take long. Online Store User Experience: Efficient Checkout by ASOS

Have you ever seen a record in Webvisor of how a customer adds an item to the cart, starts filling in the order details and… leaves the site? This scene is as dramatic as the final shots of the Titanic. Today we’ll talk about what makes a user leave the site without a purchase and how to fix it.

According to the Baymard Institute's "Cart Abandonment Rate Statistics" study, over 68% of the orders that end up in the cart do not end up with a purchase and payment.

Why does the user abandon 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 must be inactive to avoid re-adding to the cart. Offer to make a purchase or continue shopping in a pop-up window.

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 Rosette, the button becomes brighter:

The change appearance buttons in "Hello" after pressing:

1.3. Specify the procedure for returning and exchanging goods

This is especially true for clothing and footwear stores, where the probability of miscalculating with the size is high. The user wants to be sure that he will be able to receive right size in the end.

Delivery information on the "Hello" pages:

On the website "Photomag" detailed information opens by clicking on the link "More":

2. Inside the basket

2.1. Let's go to the basket detailed information about ordered goods

So that the user can check the correctness of his order and refuse the goods that he placed in the basket just for the sake of comparison, give exhaustive information about the order:

• product image (when hovering, the photo should increase),
• clicking on the image should display detailed information about the product,
• indicate the number of units in stock,
• if the product is available in offline stores, show where you can pick it up yourself.

2.2. The button to go to the next design step should be visually highlighted

The “Continue Checkout” button on the Lebutik 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. It is highly likely that a potential buyer will give up on repeated manipulations, so the site must remember the contents of the basket.

2.4. Add a remove item from cart button

For example, the ability to remove an item from the shopping cart on the website of the Mobillac store is presented as 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 and visible by default. This distracts the user, who is already ready to buy, from the checkout process and motivates them to leave the site in search of information on obtaining a discount.

The field for the promotional code in "Hello" is hidden by default:

And it opens only on click:

But on the Foxtrot website, the field for the promotional code is visible by default. In addition, on the cart page, it is proposed to check the balance of the bonus account by going to another site:

Let the name of the input field be intuitive. Blurry "Voucher" is better to replace with "Do you have a promo code?".

3. Registration

3.1. Give the user the opportunity to buy without registration

Users do not like to register at the first purchase. First, they are not sure that they will become regular customers. Secondly, no one wants to receive annoying spam in the mail. And, thirdly, registration is associated with filling in dozens of fields, password recovery and passing captcha.

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

"Lebutik" offers an alternative to registration - login using a social network account:

Remove confirmation of contact information from the checkout process (following a link from an email or entering a code from SMS). If the confirmation takes too long, the user will simply leave without completing the purchase.

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

When ordering without registration, the functionality should not be cut. If some 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 data for placing an order is enough for registration. Report automatic registration user by letter. Of course, this method has its drawbacks, for example, an automatically generated password, but the user saves time, and the store gets a new subscriber.

Here's how it's implemented in Rosette:

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

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

3.4. Offer to use your email address or phone number as a login

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

Provide a password recovery option on the login page.

Rozetka recognizes the user by e-mail and helps to remember the password "on the spot":

3.5. Save the completed information in the login field

When visiting the client again, as a rule, he sorts 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. Don't automatically sign up for mailing lists

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

3.7. Minimize the number of input fields

If the user's city and region can be determined automatically, let the system fill them in by itself. The user must be able to check and edit all fields.

On the Lebutik 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 during the filling out of the form, and not after sending

After submitting a form with incorrect data, the completed information should be kept filled out.

Checking on the page of the site "Cheaper" occurs after submitting the form, in which the entered data is not saved after the update:

3.9. Error messages should be unambiguous and explain how the problem can be solved

The input error message on the Allo site describes in great detail how to fix the embarrassment:

"Lebutik" prompts the user how to enter the correct email address:

4. Delivery

4.1. Show self-delivery warehouses on the map and in the list

"Rozetka" provides an opportunity to select points of issue by the 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 shipping method

It may come as a surprise to the buyer that the total amount of the order increases upon receipt, which will lead to a refusal. Report that shipping is paid by the buyer and calculate the approximate cost.

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

The shipping 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. Specify payment methods in descending order of popularity

"Hello" offers to choose a payment method:

Display icons of payment systems next to the name.

5.2. Break the payment methods into groups according to their meaning:

• prepayment by credit card,
• cash payment upon receipt,
• electronic payments,
• payment through the terminal.

Choosing a payment method in Rosette:

5.3. Specify the fee for each payment method

When choosing a payment method, the total amount on the page of the site "Cheaper" changes:

Mobillac motivates customers to pay by card:

5.4. If your product is regularly bought, save the payment details so that the user needs to add the product 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 the 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 completing each block, the transition to the next should be carried out automatically.

Please note that there are cards with a number of digits other than sixteen. Maestro cards can have 13 or 16 or 19 digits. If your processing accepts cards with a different number of digits for payment, make sure that the input field adjusts to the input 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 card numbers, the field should change.

5.7. Collect payment data on the store website

If, after clicking on the "Pay" button, the user gets to the page of the payment resource, then this is confusing. Even experienced Internet users feel uncomfortable leaving payment information outside the store.

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

Leave the option on the payment page to go back to the store's website without paying. Here you also specify information about the order (the amount of the order and the contents of the basket).

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 not gone through, the user is simply redirected to the payment page or basket, then it is difficult to understand whether the payment was successful or not.

Message stating that the payment failed, on the "Hello" page:

Suggest alternative options pay for the purchase.

5.10. Communicate with the client in an understandable 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 must be placed at the beginning of the SMS so that it can be read without opening the message

6. Order confirmation

On the order confirmation page, display full information:

• Name of product,
• Quantity,
• the price
• Cost of delivery,
• Delivery method,
• payment system commission,
• Recipient's contact information.

Allow the user to edit the information on the confirmation page.

Order confirmation when placing an order on the Mobillac website:

7. "Thank you for your purchase"

Place your order information on the Thank You for Your Purchase page.

The message on the final page of the purchase in the "Cheaper" store is very concise:

"Photomag" also indicates the order number:

"Hello" gives detailed information:

Duplicate complete order information on email box client.

Place an option to print the data on the order confirmation page.

If the product is electronic, tell us how it can be downloaded.

Let's repeat the past

Basket:

• adding to the 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 goods,
• the button to continue shopping should be prominent and named according to the user's expectations,
• the promo code input field should be hidden by default,
• add a button to remove an item from the cart,
• the cart should 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 payment method names with icons,
• display payment methods in descending order of popularity,
• warn about commissions of payment systems,
• data entry fields bank card should visually repeat the location of information on a physical map,
• allow the user to return to the store page without paying,
• provide details if the payment was declined.

Delivery:

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

Thank you for your purchase page:

• display the order number
• duplicate order information by e-mail,
• tell the client how events will develop further.

Post Scriptum

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

The main message of the study and our article is that you can almost always make a purchase on the site 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, then be sure to download and read.

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

09Apr

Hello dear readers! Today, as I promised earlier, we will continue the topic of opening our online store.

In past articles, we have already talked about, considered, payment systems and much more, but now it's time to move on to another mandatory part - the design and structure of your online store.

I will tell you what must be on the website of your online store, what should be its minimum structure and design, in general, we will try to analyze everything in detail. I must say right away that all of the following is mandatory, but your additions and your imagination will also be required.

Online store design

The design of an online store is far from the last thing you need to focus on. The more unique you are, the better. When budgets are tight, you have to look away ready template, because it is cheaper and also unique in its own way, because various templates thousands.

The design and layout of your online store must necessarily emphasize the theme, be in the same style with the goods you sell. If you sell children's toys, then obviously the site should not be in black colors, but on the contrary, it should be brighter and lighter. Universal option of course, minimalism in white with some separate colored elements and blocks, but you can make or find a ready-made design specifically for your theme.

The site of the online store should not have anything superfluous, nothing that will distract potential buyer from the choice of goods. If there are distracting blocks with information, then the chances of a sale are reduced. Everything you need should be there!

Online store structure (pages)

Every website must have the following pages:

1. Home;
2. Contact Information;
3. Page(s) with product catalogs (by category or all together);
4. The page of the product itself;
5. Basket;
6. Terms of delivery, payment, guarantees;
7. Checkout page.

These are required pages, but as I said above, you still need imagination on your part and additions with other pages. For example, I also have: a page of reviews, a page with frequently asked questions, promotions (a category, but as a separate page). Why didn't I register the registration page and Personal Area for clients? Because, as it turned out, for some stores, such as my cmoda.ru and for other stores operating in a separate city, this is not so necessary. Once again, this is required list of pages, but you can and should supplement it.

By location individual elements and I won’t paint the various blocks on the pages, because everything is known in testing and comparison, and I haven’t tested the location of individual parts on hundreds of online stores. This is usually a private matter!

Online store header

In the header at the very top, there must be a logo on the left, a basket on the right, in the middle search and brief information delivery, payment and Contact Information v summary. Below should be a menu for convenient navigation by site. Here's how I did it:

Contact Information

Contacts should be indicated in the header of the online store, at the very top and on separate page. The header contains a phone number and mail, or just a phone number. And already on the contact page, a legal or physical adress, all phone numbers, mail and other means of communication. You can also add a location map if you have a physical point of sale or pickup point. Contacts are necessary because they inspire more trust. We are often called to the online store and the phone number is a very important component of contacts that should be visible!

Product page (catalogs)

There can be several such pages on the site if you have several product groups. They should contain thumbnails of product photos, price, name, "Buy" or "Add to Cart" button, and additionally there may be a star rating (based on positive or negative reviews). There should not be 1-2 products on the page, because in this case the page will look empty.

Product page

On the page of the product itself, there should be detailed large photos of the product, Name, price, description, main characteristics, delivery terms, whether it is in stock or not, the "Buy" button, the number of reviews, a list of similar products, and additional blocks that enhance the credibility of the store. I have this mention of free shipping, that you can order several products and choose houses upon receipt and payment terms. Although what I explain) Here is a screenshot of the structure of my store:

Terms of delivery, payment and guarantee

The most important elements and pages on the website of your online store!!! These pages must be described in detail, there is nowhere to go in more detail! Pro various ways delivery, you must write down the points and put down the prices of each type of delivery. After reading the delivery information, your customer should clearly understand everything!

Guarantees are a must! This allows the client to think less before purchasing a product in your online store, because he sees that you are responsible for its quality.

Shopping cart and checkout

There is nothing intricate in the basket. She just has to calculate the amount correctly and that's it. But when placing an order, you should have a simplified form without registration, because not everyone wants to register in an online store. When entering data, do not allow extra points, take only the data that is needed, no need to force you to fill in tons of lines. The most necessary: ​​full name, phone number, delivery address, mail, order comment (optional).

Social networks

On the website of your online store, it is desirable to have widgets or buttons leading to your groups or accounts on social networks. It inspires more confidence and users social networks buy more there.

Important additions

Fast buy

Quick purchase is suitable for almost all online stores and allows you to greatly simplify the process of placing an order for those who like to save their time. What you need to do: place on the product page the button "Buy in 1 click" or "Quick buy". By clicking on the button, a window will pop up, in which you will be asked to enter the “Name” and “Phone”, to which you will call back. Some still place an email field to immediately register a person or simply save their email.

Back call

One more simple thing which not everyone uses. But this great way save your customer's time and help him place an order by phone at a convenient time for the customer. What you need to do: in the header of the site, next to your phone, place a button or text “Call back”. On click, a window should pop up in which the buyer will enter the Name and Phone. After sending the application, it is advisable to contact the clientwithin 10-50 minutes.

Information about delivery and payment in the product card

There is nothing simpler and at the same time more complex than simple and plain language write the terms of delivery and payment. This information is accessed already when the decision to purchase is practically made and it is important to form the buyer's understanding of the cost and delivery time to his region as soon as possible. And this will help to place this information in a compressed form in the product card itself. What needs to be done: in 3-5 paragraphs, write the main terms of delivery and payment. You can place it in a separate block or in a tab. Don't forget to include a link at the end of the text. full terms delivery and payment.

Promotions that revitalize the site

The Internet is full of shops for which it is not clear whether they work or not. Seeing the news, for example, from June 2015, many people think that the store is rather dead and leave the site. And your task is to show that you really work, process orders and are ready to help your customers. What you need to do: place a cross-cutting static banner on your site, in which you will always have some kind of promotion with a time limit. At the end of the term, you simply shift the term by 1-2 weeks ahead and post it againto your site. Thus you will havea permanent promotion and by the dates on it you can always understand that the store is alive.

As well as

Be sure to put the information in plain sight that will increase the chances of a sale. For example: free delivery, payment upon receipt, we will bring several products to choose from, a gift for each buyer, order today - we will bring it tomorrow, certificates and reviews about your store, and so on. It enhances your online store and should be prominently displayed.

Conclusion

I repeat once again that these are only recommendations and mandatory points for the site of the online store. But you simply have to come up with something of your own in the appendage and diversify your online store.

I am also a person and I can miss something, make a mistake in something, and so on, so I am waiting for your comments, corrections and additions in the comments. We will complete the article together;)

Thank you for your attention!

The profitability of any online store primarily depends on how comfortable 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 their efforts. Statistically, most customers dislike 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 efficiency.

As practice shows, if the buyer encounters some problem when placing an order, he most often leaves the resource, fearing to face this problem again. If your order form contains a few simple steps and is easy to fill out, you are guaranteed stable sales. It is worth noting that with simplicity, the main thing is not to overdo it, always consider the specifics of your project. The order form on the site must collect a minimum necessary information to make an order.

2. Use visual examples.

Man always needs good example, especially when filling out the order form . Try to create a web form that even a complete "teapot" can fill out.

3. Totally show the order progress to your customer.

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

4. Dispel all customer doubts.

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

5. No! registrations.

Almost all buyers have a bad attitude towards any registration, due to the fact that this process can take a long time (in their opinion). Therefore, even if registration on your site is carried out without profile confirmation, delete it or make the checkout process available to unregistered users. It should be noted that in some cases registration, on the contrary, is required. For example, when you intend to build a quality customer base. In this case, register on the site through social networks. It's very simple.

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

The purpose of the lesson

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

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

the main goal

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

Questions

• Where to begin?
• Is filling out the form easy? And how much time will it take?
• Which payment/shipping method is right for me?
• How many steps do you need to go to complete the form?
• Why do I need to complete these fields? Why do they need this data?
• Can you be trusted? My email / phone number will 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. This is what the default checkout page looks like:

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

• Leave only the logo and site name at the top of the site. Without links
• Change the content of the sidebar. We no longer need to show a list of categories. We will put a little help in the sidebar for those who place an order and a message that you can call if something goes wrong
• Simplify the bottom part of the site - leave only the copyright of the system and the site in it

If desired, the sidebar can be completely abandoned.

Find the global block in the service forms page template that is responsible for upper part site (usually $GLOBAL_AHEADER$) and put it in the following structure:

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, rework it, leaving the corporate identity, 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're having trouble with global blocks, remember .

Draw attention to form fields

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

1. Order content form (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 set up .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$ . You've probably 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 from it really so important to us that we are willing to lose some customers for it?".

Often enough "Name", "Phone number" and "Delivery address".

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

Once you have decided to remove extra or add new fields, return to lesson 31.

Overcome visitor doubts

How will we overcome:

• After the form with the content 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 certificates, certificates (if any) or icons of payment methods;
• Before the "Place an order" button $ORDER_BUTTON$ we will inform you that the order can be canceled/changed at any time. So the user will not have long thoughts on the topic "Have I done everything correctly"
• Under the "Place an order" $ORDER_BUTTON$ button, place the "What's next?" block. In it, we will inform you that before the delivery of the order, we will definitely call you back, we will 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$ .

Apply active voice

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

Payment method

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

Select a Payment Method

The same goes for choosing a delivery method, checking the contents of an order, and filling out a user data form.

Specify the number of steps and time to place an order

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

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

Why are there multiple checkout steps on uCoz? Here we are talking about steps within one page. I suggest this option:

1. Step 1. Check the contents of the order
2. Step 2. Choose a shipping method
3. Step 3. Choose a shipping method
4. Step 4. Enter information about yourself

Please note that the active voice is used in the name of each of the steps.

This is where the lesson ends. For the checkout page, there are a number of settings that will allow you to increase the conversion on it. We will talk about this in the next lessons.

Exercises

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

It has long been believed that the need to register on the site leads to a decrease in the number of sales. Given this, it is logical to assume that a page for paying for the goods should appear, where you just need to enter your email address and delivery details. Thus, online shopping should resemble a self-service store, where the buyer is given complete freedom, no additional information is required, but the total cost of the purchase can be easily calculated.

But is that really the case? We suggest you familiarize yourself with some forms of ordering on commercial sites.

Examples of checkout pages on commercial sites

Before creating a commercial site, the main thing is to understand that mandatory registration not only negatively affects the level of sales, but is absolutely meaningless. You can find well-known examples confirming this fact.

In any case, to confirm the order, the user must be asked for email, delivery address and name. These are the same items that you need to enter 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 something from you, when the whole process can be “turned off” almost imperceptibly during the checkout process?
Here's an example of how ASOS simplified their registration page with:

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

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

As soon as potential customers click on the “continue” icon after selecting a product, they will be taken to a page where they will be asked to enter the same information that was asked before and, ultimately, an account will be created. This means that the same process is presented in completely different ways. Surprisingly, the statistics showed that such a slight change led to a halving of bounces on the site.

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

Macy's company
Here is another great example - a nice, clear and not overloaded page that draws the attention of users to key points:

(Fig. If you have previously bought something on the site, then you can go to your orders page by entering your email address and password. Only after choosing a product, beginners are offered to go to the checkout page by clicking on the button "Make calculation as guest". This will automatically create a profile).

Macy's did a good job of this also because the checkout page provides customers with return and shipping information (by clicking on the "box" and "lock" icons), and at the top of the page there is a number to call and clarify all the necessary information. Agree that such an approach to business inspires confidence and respect.

Walmart company
On its checkout page, Walmart offers options for guests to either create an account or proceed to checkout without creating an account. Those. the new buyer has a choice - to save time "here and now" or in the future:

(Fig. Loyal customers log into the system by entering an email address and password, and newcomers can find out the total cost and place an order without creating an account (i.e. save time now), or create an account (thus save time in future)).

Sears company
An interesting approach to this issue was taken by Sears, which decided that they did not need a login page for regular customers. So the company sends all of its users straight to the checkout page.
This is what their checkout page used to look like:

And this is how she looks now:

Everything is very clear (you must enter the delivery address, the name of the recipient and email), there are no barriers to making a purchase.

WHSmith Co.
Another role model. A very neat page that doesn't force the user to sign up:

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

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

(Fig. Log in by entering your email address and password. Register by entering your email address, zip code and club card number)

This approach, I think, can scare off a number of casual buyers, so I can advise Tesco to still try to introduce checkout for random visitors to the site and track the result.

The John Lewis Company
Another great example of order page design. There is no condition for mandatory registration of all users, and the page itself contains all the necessary contact details of the company, a secure order confirmation function is offered (ordering can only be continued by clicking on the link sent to the email address):

(Fig. The user is asked to enter an email address to which a link will be sent to further place an order)

The boots company
Previously, we have already considered the site of the company "Boots", where the 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 with email and password or register on the site before you start shopping)

Amazon company
Amazon, before directing the user to the checkout and checkout page, also forces users to register. However, this requirement is presented very gently, so the registration process does not seem to be a barrier to further actions on the site.
The new visitor is prompted to enter an address and click on the radio icon to proceed with the checkout:

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

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

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

House of Fraser

They have a very simple checkout page that doesn't 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 address to begin with).

American Apparel Co.

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

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

Summing up
This article featured randomly selected checkout pages from various commercial sites to show how different ways you can approach this issue.
In most cases, all visitors to different sites are required to enter the same information, but it is very important to know how to correctly ask the user to enter the necessary information and in what order it is best to do so.

For example, aside from entering a club card number (which is optional anyway), checkout and billing forms from companies like House of Fraser and Tesco require the same information to be entered.

But Tesco turned it into a barrier with their implementation style, while House of Fraser does not create any obstacles and directs all users immediately to the checkout page without mandatory registration. What is the best tactic? In my opinion, the second...

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