May 13, 2014 at 09:00

A 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 at the last step of the purchase does not bring any value to the user, this Western cliché is deeply rooted in the RuNet. With an average frequency of purchases (of 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 mobile phone numbers 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 with plastic cards, and to make this process easier for customers, stores link payment details to a newly created account upon the 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 authorizing, match the collected information with the information already available.

Abandoned cart remarketing

High cart abandonment rates are another known problem for 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 sending 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;
• the call center manager receives correctly posted orders into the internal processing system;
• 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. The implementation of some of our own components allowed us to significantly simplify complex forms 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 a certain element is used in a 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 effectiveness of the corresponding advertising campaigns, without complicating the page interface and improving its visibility.

One of the key characteristics of 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.

We paid special attention to the interface for selecting order pick-up points, because... In 70-75% of orders, pickup prevails, having developed two forms: on a map and in a list. In both cases, you can select the metro/district/object of interest in the area of ​​which the nearest pickup points are located. This greatly simplifies the search for the desired delivery point.

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

1. Shop

   Let's start with the fact that you can place an order in our convenient online store, which is located in the Main menu of the site in the tab -

2. Product selection

   And so, you went to the Store section and select the product category you are interested in: “Film”, “Equipment”, “Additional equipment”, “Consumables” or “Chrome”. The entire range presented is in stock! By clicking on the picture of any product, you see detailed characteristics and a large photo of it. You need to order the product you like; to do this, just click on the “Buy” button and you will see how it will be added to your “Basket”. You can add an unlimited number of such products to your cart.

3. Placing an order

   When you have chosen what you wanted, click the “Checkout” button in the “Basket” and automatically go to the page for filling out the data and choosing a payment method. Here you fill in your delivery data: Full name, Delivery address, Contact phone number, Email - these data are needed to process and further send your order. You will also see the “Comments on the order” field - in this field you can leave your wishes and comments on the order, or ask the manager to contact you and answer the remaining questions.

   So, you have filled out your details, all that remains is to choose a convenient payment method for your order. You can do this on the same page - there are 11 payment methods to choose from. Let's talk about some of them in a little more detail:

   • Transfer to a Sberbank card – Our card details for payment will be sent to your email address. You can make payment at any Sberbank branch or terminal, or, for example, by transfer through your online bank.
   • Issue an invoice for payment – ​​An invoice for payment for the goods you ordered will be sent to your email. You can pay this bill at any bank branch or by bank transfer.
   • “Online” payment methods are separately highlighted - the fastest payment methods. Money for your order is received instantly and you don’t need to go anywhere! For example, when paying for an order in this way, you can use any VISA or MASTERCARD bank card or the QIWI money transfer system, WebMoney electronic money, 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 calling the hotline 8-800-200-51-21 - for Russia (The call is free ), for other countries +7-927-010-37-58, Viber or WhatsApp +7-927-711-33-66.

   After you have filled out all the fields and chosen a payment method, click the “Place an order” button at the bottom of the page. Next, you will see that your order has been assigned a number and a notification that payment details and confirmation of our receipt of your order have been sent to your email.

   And so, you placed your order. They paid for it. What happens next with your order?

4. Assembly and dispatch of the order

   After receipt of funds, the order is immediately transferred to the warehouse for preparation! At the same time, our logistics department is working on the optimal option for order delivery (minimum terms - price / quality), agreeing, 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 your 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 in all available ways! We carry out shipments by any transport companies, Russian Post, express courier delivery, intercity buses, long-distance trains.

   Upon arrival of the order in your city, representatives of the transport company will contact you by phone number that you indicated in the order and inform you where you can receive it. You can get acquainted with the Order Pickup Points using the example of the transport company "PEK".

   You can select a product and start placing an order right now - Go to the store

The purpose of the lesson

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

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

primary goal

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

Questions

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

Tasks

Let's see what tasks the checkout page solves.

Task	Solution
Provide a simple, neat layout	To do this you will need to add free space, as well as remove all unnecessary
Draw attention to form fields	To do this, we will add a different background to the box with fields and borders around the form.
Remove unnecessary fields	You will need to determine which fields the user must fill out so that the order can be successfully completed. Nothing unnecessary that might force the user to leave the checkout page
Overcome visitors' doubts	You can inform that the order can be canceled at any time. Or talk about the benefits of purchasing in your store: warranty, return or delivery conditions
Use active voice	Guide the user through the checkout process using active verbs. They can be used in page headings or in the explanation of order form fields
Specify the number of steps and time to place an order	This is done at the top of the page, before the user proceeds to the design.

Now let's solve these problems.

Sample

Provide a simple, neat layout

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

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

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

If desired, you can completely abandon the sidebar.

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

$GLOBAL_AHEADER$

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

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

$GLOBAL_AHEADER$ $GLOBAL_CLEFTER$

If you are experiencing difficulties with global blocks, remember.

Draw attention to form fields

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

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

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

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

Remove unnecessary fields

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

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

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

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

Overcome visitors' doubts

How we will overcome:

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

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

Use active voice

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

Payment method

$PAYMENT_SELECTOR$

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

Select a Payment Method

$PAYMENT_SELECTOR$

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

Specify the number of steps and time to place an order

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

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

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

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

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

This concludes the lesson. There are a number of settings for the checkout page that will allow you to increase conversion on it. We will talk about this in the following lessons.

Exercises

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

The ASOS website provides visitors with an excellent user experience thanks to a well-thought-out checkout procedure. In this article, we'll explain why their shopping cart works so well and demonstrate some trending techniques that will allow you to boost your own checkout page.

Generally speaking, the success of a given online store's shopping cart is dictated by one simple factor: transparency. In other words, on the order page, users see all the key information: product availability/reservation period, delivery options, bonus offers, return conditions, safety precautions, and available payment methods. This makes visitors feel more confident and encourages them to complete the purchase.

Directly to cart or stay on the product page?

If you want your customers to buy multiple items at once, opt out of automatically going to cart when adding each product. Instead, place an interactive tab on the page that will always show users the contents of their cart.

This way, customers will be able to constantly track their purchases, and the buyer's transition to the cart will become a voluntary, conscious decision.

How does ASOS get 50% more new customers to pay?

There is one significant difference between the original version of the ASOS checkout page and the updated design: while previously customers had to register to place an order, now the developers do not focus on creating an account. Instead, they ask customers to click the appropriate button to continue.

Former ASOS eCommerce director James Hart explains how they achieved this improvement:

“In general, we practically did not change the functionality of the purchase stage at this stage, but after a series of lengthy split tests, the login screen was improved. As a result, we achieved a reduction in the number of failures by 50%.”

Take a look at the updated checkout page on the ASOS website:

And now on its previous version:

Testing conducted in the eCommerce segment shows that users do not want to go through the account creation procedure when they are forced to do so. Buyers don't want to go through any extra steps, much less provide their personal information, to complete a purchase because it takes up valuable time.

In fact, most customers say that ideally, when placing an order, they would only be limited to choosing a password. Next, you will see that ASOS still asks customers to register, but in addition to the standard requirements (contact name and email), users only need to provide a password.

Ordering Best Practices

Below we've highlighted a few key elements of the ASOS shopping experience that align with best practices and keep customers focused on completing their purchase.

1. Step-by-step ordering procedure

ASOS's updated checkout shows how easy the process can be if you remove all the distractions from users.

2. Security guarantee

In addition to the logo and the name of the stage in which the person is located, ASOS only places information about the security of the entered data in the page header. This is important for increasing the sense of trust, especially in the retail segment, and can be adopted by lesser-known retail services.

3. Clear progress indicator

The progress indicator is made taking into account all the nuances:

1. Minimalistic design.
2. It clearly shows what stage of the order process you are at.
3. The number of steps is clearly defined.
4. It is understood that you will have the opportunity to review your order prior to confirmation.

4. Availability of explanatory tips

Near some fields, such as email, password and gender, the developers placed supporting information so that users understood why the company needed this data. Ideally, this technique should be applied to the date of birth, but we’ll get to that later.

5. Clear main CTA element

On every checkout page, the main CTA button that takes the user to the next step is the most prominent element. While many retailers still have controversial calls to action on their websites, ASOS makes sure their customers can easily navigate to the next step in the process.

6. Manual entry of address data

For the vast majority of visitors, the ability to manually enter address information is of great importance. In addition, with this option, the online store receives more reliable information from customers.

Due to some reasons, for example, in the case of moving to a new housing complex, many clients cannot use automatic address selection. This means that you should make it as easy as possible for them to fill out the fields.

7. Availability of an address for sending an invoice

For most retail services, this option has already become a kind of standard, but it can still be improved. In this case, if a visitor uses the same address (for product delivery and invoice), ASOS immediately redirects them directly to checkout, thereby providing them with an even faster and therefore more positive user experience.

If you're interested in an alternative solution, you can send your customers to the checkout page and only then ask if they want to use an additional billing address.

8. Changing payment fields based on card selection

To some extent, the ASOS team managed to implement this approach, but still one can argue with the presence of additional fields in the form. If they are optional, then eliminating them will save your customers from unnecessary thinking that delays them from completing the purchase.

9. Full preview and editing of the order before confirmation

As you can see from the progress bar, ASOS gives visitors the critical opportunity to review and edit all information before confirming their order.

While some online retailers expect customers to confirm immediately after entering their payment details, ASOS shares the two most important decisions a person has to make during checkout. Moreover, they also provide the flexibility to edit information to accommodate possible changes.

10. Various delivery options listed in a convenient format

ASOS not only offers customers a variety of delivery options, but also showcases them in a convenient format. Typically, this information is placed in drop-down tabs, but ASOS's technique allows visitors to see all available rates at once, so they can make more informed decisions about their delivery method.

11. Ability to go back without losing information

Although ASOS does not provide customers with a back button during checkout to avoid interrupting the process, many customers may still want to return to the previous page to check or change their details.

On most eCommerce sites, this can result in warnings and requests to resend the information, but ASOS has saved its visitors from these annoying messages.

Ways for further improvement

1. Use descriptive progress indicators: replace “Continue” with “View my order”, etc.
2. Explain to visitors why they must enter their date of birth on the form.
3. Use more humane error messages that won't make your users quit.
4. Give the customer a good reason why you need their mobile number (for example, you send text notifications to customers about the status of their order).
5. Give people the ability to return to the previous page when they are in the checkout process. This will allow them to make important changes even if they remember their mistake too late.

And no contact number?

ASOS doesn't really list any contact numbers on their website - they communicate with customers through social media, help pages and a contact form.

Thanks to the efforts this team has put into improving the customer experience, they have been able to significantly reduce the number of potential reasons for calling customer service. As a result, customers very rarely ask for help because they don't want to switch to filling out a third-party form during checkout.

ASOS customers already know that the items in their cart will be reserved for no longer than 60 minutes, so waiting for a response from customer service for several hours (up to 4 hours) would simply be pointless for them.

Summing up

While ASOS's example approach is far from ideal, you should definitely try the techniques outlined here on your site to help convince customers to complete the transaction.

By combining these techniques with additional recommendations, you can optimize the shopping experience and minimize the number of abandoned carts.

There has long been an opinion that the need to register on a website 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 simply 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 this really the case? We invite you to familiarize yourself with some ordering forms on commercial websites.

Examples of checkout pages on commercial websites

Before creating a commercial website, the main thing is to understand that mandatory registration not only has a negative impact on the level of sales, but is also absolutely meaningless. you can familiarize yourself with well-known examples confirming this fact.

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

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

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

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

Once prospects 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 they asked for before and ultimately an account will be created. This means that the same process is presented in completely different ways. Surprisingly, statistics showed that such a minor change led to a halving of failures on the site.

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

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

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

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

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

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

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

And this is what she looks like now:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

House of Fraser Company

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

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

American Apparel Company

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

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

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

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

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

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