the process of payment by bank card online

203
THE PROCESS OF PAYMENT BY BANK CARD ONLINE Review and best practices

Upload: vuongdiep

Post on 14-Feb-2017

217 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PROCESS

OF PAYMENT BY

BANK CARD ONLINE

Review and best practices

Page 2: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

INTRODUCTION

Introduction Cart Signing in Choosing the method of payment Choosing the method of delivery Order confirmation Entering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 3: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

WHAT THIS REPORT IS ABOUT

About 70% of orders in Russian online stores don't end up in a purchase. Often reasons are not related to the convenience of the store, when for example the buyer just finds a better bargain or decides not to buy the item. Yet most of the reasons for giving up on the order after adding it into the cart are due to the inconvenient process of placing an order.

Here are the main reasons:

To understand what specific problems online shoppers are facing when paying by card online and to make the process as convenient as possible for buyers, we've done comparative usability testing with 51 participants.

We've analyzed a number of issues that the web-sites' users experienced and put together a list of successful solutions for each stage of an order placement. Here you can find 123 tips that can make a purchasing process on a web-site more enjoyable and user-friendly.

3

Registration is required to make a purchase

The page for entering card details has vague blank boxes,and the payment form seems insecure.

Too complicated and confusing process of placing an order.

A lot of boxes have to be filled in, and the process takestoo much time.

The cost of the order inscreases due to the paid deliverythat hasn't been mentioned in previous steps.

The website of the store is not adapted for mobile devices.

1

2

3

4

5

6

WHO WILL BENEFIT FROM THE REPORT

The report will be of interest to owners and employees of small- and medium-sized online companies. It will help understand how to make the check-out and payment process on the store's website more intellible and simple for consumers. The employees of processing companies will benefit from the report's sections which provide the details on the best practices for payment pages and the pages with confirmation SMS codes.

The report may also be useful for designers of online stores and payment pages. At the end of the report all the recommendations are given in a comprehensive list that can be used to check major usability mistakes on a retailer's website.

Page 4: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ON THE SURVEY

In the survey we tested 24 services and stores, 14 payment providers and banks; in the survey the participants made payments with cards issued by 12 banks.

51 respondents of different age and different experience of online shopping took part in the survey. In the survey each respondent at least once made real purchases on websites, so we were able to track down the whole process of placing an order from the beginning to the page “Thank you for your purchase”. See more detailed information in the report's Appendix.

The ninth section considers general issues of navigation and the convenience of placing orders in general.Appendix to the report describes the survey methods and contains a comprehensive list of recommendations.

4

THE STRUCTURE OF THE REPORT

The report is divided into 9 sections. Among these sections 8 represent a particular stage of a check-out process:

Cart;

Signing in and registration;

Choosing the method of delivery;

Choosing the method of payment;

Order confirmation;

Entering card details;

Page of the acquiring bank's gateway;

Page “Thank you for your purchase”

1

2

3

4

5

6

7

8

*

**

According to the results of Baymard Institute's survey “Cart Abandonment Rate Statistics”,http://baymard.com/lists/cart-abandonment-rate

According to WorldPay's survey, «Reasons for consumers to drop out of an online purchase»

Page 5: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CART

IntroductionCartSigning in Choosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 6: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

AVOID REDUNDANT STEPS AND ACTIONS

WHEN ADDING ITEMS TO CART

On most of the tested sites items are added to cart by a pop-up window, by changing the area surrounding the “Add to cart” button, or by automatic proceeding to the cart page. Users are ãsed to sites operating this way. When extra steps and actions are added to the process, a feeling of wasting time and taking redundant steps comes about.

Extra pages seem particularly inappropriate when purchases are made via mobile devices, and uploading an extra page takes a great deal of time which can make the user abandon the cart.

On the site of M.Video retailer after clicking on the “Add to cart” button a separate page opens offering the only possible action – proceeding to cart or returning to shopping. The respondents pointed out that this step seemed redundant.

Critical level: low

Extra pages that pop up when an item is being added to cartappear redundant to consumers.

Adding itemto cart

1

The stage of adding items to cart has got an extra step.

It's impossible to proceed from the page straight to placing an order.

M.Video:

On the site of Ulmart retailer this problem didn't receive that much criticism from the respondents, as the page offers an option of proceeding to the stage of signing in and placing an order straight away, whereas the site of M.Video retailer does not offer that option.

6

Page 7: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

“Add to cart” page is an extra step, yet there's an opportunity to place an order straight away.

Ulmart:

Conclusion The stage of adding an item to cart should have no redundant steps.The page of adding an item to cart should offer an opportunity to proceed to order placement without reviewing the items in the cart.

Depending on the type and average quantity of items in the order an item can be added to cart with help of a pop-up window showing that the item has been added or by leading a consumer automatically to the cart page. When the average quantity of items in the cart is large, for example, when buying food, an item can be added to cart only by changing the “Add item” button.

7

Page 8: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

INFORMATION THAT AN ITEM HAS BEEN ADDED

TO CART HAS TO BE OBVIOUS FOR THE USER

Foodpanda site displays feedback saying an item has been added to cart in the top right part of the page which a user may fail to notice, as in fact the name of the button doesn't change and there is no feedback saying that an item has been added to cart. As a result a user adds a few items to cart without being aware of it.

Critical level: medium

When there's lack of instant feedback saying that the item has been added to cart a user may get an impression the button hasn't been clicked on or the item hasn't been added to cart. As a result the item can double in cart without the user's awareness of it.

2

The Add to cart button doesn't change much when adding

Foodpanda:

The button for adding to cart has to change visually whenadding a new item

2.1

The button needs to react instantly when clicked on.After the first click the button needs to become inactive untilthere is feedback that the item has been added to cart

2.2

8

Adding itemto cart

Page 9: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

After adding an item to cart the button changes its appearance yet remains active.

Sportmaster:

On the site of Sportmaster store the Add to cart button instantly changes its appearance and a pop-up window appears saying the item has been added to cart. The button, however, remains active and when clicked on adds items to cart. In some cases it may lead to multiple adding of the item to cart.

On the site of Enter store when clicking on the “In cart” button the name changes and the button becomes inactive. Chances of repeated adding are minimal.

On the site of Ozon store when adding an item to cart the name of the button changes to “In cart”, repeated clicking on the button leads to cart.

After adding an item to cart the button changes its name instantly. When clicking on the button repeatedly you proceed to cart.

Enter:

Repeated clicking on “To cart” button shouldn't add the itemto cart. Repeated clicking on the button should leadto the cart page

2.3

9

Page 10: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

On the sites of stores where buyers order multiple items of the same type at once, the “Add to cart” button when clicked on repeatedly can add another item to cart instead of directing to the cart page.

For example, on the site of Utkonos store the button doesn't change, and when clicked on repeatedly still adds items to cart. A frame appears around the item making it distinct from other items in the catalogue and indicating that the item has already been added.

Exception

The “Add to cart” button changes its name, and when clicked on leads to the cart page.

Ozon:

When adding an item to cart the name of the button and its appearance don't change, but a frame appears around the image of the item indicating the quantity of items in the cart.

Utkonos:

10

Page 11: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion Foresee the mistakes users are likely to make. After clicking on“To cart” button the user should be given clear feedback that the item has been added to cart. If customers buy only one item of the same name more often, repeated clicking on the button should direct to the cart page.

11

Page 12: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CART PAGE SHOULD PROVIDE DETAILED

INFORMATION ON GOODS

For example, on the site of RIVEGAUCHE store important information on goods is missing, and a user can guess whether (s)he has added the relevant item judging only by price.

Critical level: high

On a cart page a buyer needs to make sure all the items are added correctly. Many also use the Add to cart option as an alternative to saving items for later. And when in cart, they decide whether to buy some of them or not. That's why the cart page should provide detailed information on goods, their characteristics, the photos of goods and links to their detailed description.

3

A page needs to display an image of an item, and the imageshould be clickable. When clicking on the image either moredetailed information on the item or a bigger photo of it shouldbe displayed

3.1

The description of the good in cart is not full and does not contain information that is needed to make a decision. The name of the good and the photo do not contain links.

RIVEGAUCHE:

12

Adding itemto cart

Page 13: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The name of an item should be clickable.When clicked, the page with its detailed descriptionshould be displayed.

3.2

In the above example of RIVEGAUCHE store the page has no links to the full item description in the catalogue, making it hard to check whether the right item has been chosen. The image of the item is not a link either. As a result, half of the respondents ordered the wrong kind of item from this site.

The cart as well as a page of an item should provideinformation on whether the item is in stock

3.3

Most of the stores inform the user on the quantity of items available for ordering. However, often information on the availability of items is given too late, at the moment when the user has already started placing an order. For example, on the site of M.Video store a respondent was trying to order the item that was unavailable.

The information that the item is unavailable was given only at the end of order placement.

On the site of RIVEGAUCHE store the user finds out that the item is unavailable in his city only after having signed in to choose the method of delivery.

The user finds out that the item is unavailable in the stores of his city only after having signed in on the site to choose the method of delivery.

RIVEGAUCHE:

In the application of Zara store the information that only a few items are left is displayed right on the cart page.

13

Page 14: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Often an item has to be picked up from the store urgently. In this case it becomes important to know in which stores the necessary item is available.

The cart on the page of Citylink store may be an example of a wise solution. The stores where the item is available are listed on the cart page specifying approximate quantity of the items available in each store.

Information that the item is in stock is given on the cart page.

Zara:

The cart page gives information on availability of item in stores.

Citylink:

If an item is available only in some stores,that information also has to be displayed on the cart page

3.4

Conclusion To make a user confident (s)he has chosen the relevant item it's necessary to give full information on the characteristics of the item and its availability.

14

Page 15: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Buttons are similar, and there is no telling their function until you read what's written on them.

Buket:

THE BUTTON TO PROCEED WITH ORDER

PLACEMENT NEEDS TO BE VISUALLY

HIGHLIGHTED ON THE PAGE

For example, on the site of Citylink store the button for proceeding to place an order is not highlighted visually, and users don't notice it right away.

Critical level: medium

Users often don't read the text on buttons. They just click on the most noticeable button on the page and expect to continue placing an order. That's why this option needs to be highlighted on the page and stand out visually among other buttons.

4

The button for proceeding to place an order is not highlighted on the page.

Citylink:

On the sites of Buket and RIVEGAUCHE stores buttons with different actions are almost similar visually. To understand which one leads to order placement you need to read the text on the button.

15

Adding itemto cart

Page 16: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Most of the other tested stores have highlighted the button proceeding with the order placement on their sites, it is conspicuous and noticeable on the page. For example, on the site of Enter store this button has a visual priority.

It should be obvious for the user what will happen whenclicking on the button

4.1

Buttons are similar, and there is no telling their function until you read what's written on them.

RIVEGAUCHE:

The button for order placement has a visual priority and is more noticeable on the page than the other elements.

Enter:

For example, the cart of RIVEGAUCHE store offers to add to the order packaging for items, and the buttons for placing an order in different sections of the page aren't any different. The respondents pointed out they don't understand whether packaging will be added if they click on the lower button or not.

16

Page 17: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page has got three buttons to place an order. It's not obvious for the user whether they perform the same actions.

RIVEGAUCHE:

Conclusion The button for proceeding to place an order should be visually highlighted and be different from others. Its function should be definite and obvious for the user.

17

Page 18: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE CART PAGE SHOULD PROVIDE INFORMATION

ON RETURN POLICY

For some categories of goods an opportunity to return the product is important, for example, with clothes, as risks are high of getting the wrong size or model.

The cart page of Lamoda provides information on the time and cost of delivery, but there is no information on return policy. A respondent was trying to find information on the possibility of returning items on the cart page of the store. The respondent wasn't able to do it on his own as the link to return policy was at the bottom of the page on the menu bar.

Critical level: medium

When buying certain categories of products it's important for users to be able to return the product. If the cart page provides information on return policy, buyers will be confident that the store is reliable and will be more willing to make an advanced payment for the order.

5

The page has three buttons for placing an order. It's not obvious for the user whether they perform the same actions.

RIVEGAUCHE:

18

Adding itemto cart

Page 19: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Information on the possibility of returning an item is important when an advance payment is made. Many respondents in the survey noted they seldom pay in advance for products they order online as they don't quite understand how refunding works.

Conclusion For some categories of products with a high probability of return the information on return policy should be provided on the cart page. The information on the possibility of returning an item should be displayed as a link and direct to the page with detailed information on the terms of returning.

19

Page 20: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE CART PAGE HAVE TO PROVIDE

INFORMATION ON TERMS AND

COST OF DELIVERY

In the survey after adding products to cart many respondents were trying to search for information on the site on when the product will be delivered and how much the delivery will cost.

Not all the sites offer that information. For example, the cart page of Enter store does not say that there is a delivery fee, and the cost is just added to the cost of the order when choosing the method of delivery.

Changes in the price of the order after choosing the method of delivery is one of the main reasons customers abandon the order. The earlier information on the cost and time of delivery is given, the less likely customers will abandon the page without purchases.

6

The cart page does not inform there may be a delivery fee.

Enter:

20

Adding itemto cart

Critical level: medium

Page 21: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

If the cost of delivery cannot be calculated on the cart page, an approximate delivery fee should be displayed next to the costof the order, or there should be a note that delivery costs arenot included into the price

6.1

For many respondents an increase in price after proceeding to choose the way of delivery has been an unpleasant surprise.

The cart page has a note that delivery costs are not included into the price.

Utkonos:

If starting from a certain amount the order qualifies for freedelivery, information on that needs to be given on thecart page

6.2

The site of Sportmaster store specifies minimum cost of the order sufficient for free delivery. Next to the price there is information that the cost of the order does not include delivery fee. Respondents noted they would consider choosing other useful goods on the site to qualify for free delivery.

Minimum cost of the order sufficient for free delivery is specified.

Sportmaster:

21

Page 22: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion Information on the cost of delivery should be specified on the cart page. If it's impossible to calculate the exact cost of delivery, the cart page should specify that the cost is given without a delivery fee. If the buyer is entitled to free delivery on certain terms, this information also has to be displayed on the page.

22

Page 23: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

AN OPPORTUNITY TO USE A DISCOUNT OR

PROMO CODE SHOULD BE DISPLAYED

ON THE CART PAGE

On most of the tested sites a user can enter a promo code on the cart page, but for example on the site of Buket store this option is available only at the last stage of placing an order.

The user who has got a discount may abandon the cart if (s)he doesn't reach this stage or try to contact the store employees by phone.

Having failed to find any opportunities to use a discount, the buyer may give up on the purchase or start calling the store.

7

The box for entering a coupon code appears at the last stage of placing an order.

Buket:

Conclusion The option of entering a promo code should be offered at the initial stages of placing an order.

23

Adding itemto cart

Critical level: medium

Page 24: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE BOX FOR ENTERING GIFT CARD,

PROMO CODE OR DISCOUNT SHOULD

NOT BE OPEN BY DEFAULT

On most of the tested sites the box for entering a promo code was open by default. Almost half of the respondents who have made actual purchases on sites got delays at the box for entering a promo code trying to figure out whether there is a chance of getting a discount. In this case benefits from offering a discount policy may not be worth distracting the users' attention.

On the site of Utkonos store the open box for a promo code resulted in one of the respondents leaving the page of the store to acquire a promo code number on another website.

Unfilled boxes catch the attention of users and make them spend some time examining them only to find out they have no card or coupon. In some cases users proceed to other sites to buy coupons.

8

The box for a promo code is open by default, and users search for opportunities to get a promo code and proceed to other sites.

Lamoda and Utkonos:

On the site of Enter store the box for entering a discount is highlighted on the page and grabs the attention of users.

24

Adding itemto cart

Critical level: low

Page 25: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The box for entering the number of loyalty card program is even emphasized by a radio button; all the respondents were trying to remove the highlighting from this item and failed. Two respondents even used their loyalty card programs to enter a code as they didn't realize they could place an order without doing it.

The box for entering discount coupons is open by default and highlighted on the page

Enter:

The box for entering loyalty card is highlighted by a radio button, and users don't understand how to withdraw from using it.

Enter:

When a box for entering is not open by default it doesn't leave users wondering where they can get a code. For example, on the site of M.Video store the box for entering a promo code is hidden behind the link in which case it does not distract the users.

25

Page 26: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The box for entering a promo code is hidden behind the link. The attention of users who don't have a promo code is not attracted.

M.Video:

Conclusion The box for entering a promo code, a discount, or a loyalty card number shouldn't be open by default, so that those who don't have a promo code won't pay too much attention to it and will waste less time searching for a promo code on other websites and are less likely to give up on the order at this stage.

26

Page 27: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

INFORMATION ON HOW A PROMO CODE CAN BE

OBTAINED SHOULD BE PROVIDED NEXT TO

THE OPTION OF ENTERING IT

As it's been already noted, when users see an opportunity for entering a promo code and getting a discount they are trying to use it and sometimes proceed to search systems and sites that sell coupons and discounts.

None of the tested sites provided information on how a bonus or a discount may be obtained.

If next to the box for entering a promo code the site offers information on how to get it, the users will be less likely to proceed to other sites, cutting short the order placement.

9

Next to the box for entering a promo code there is no information on how to obtain it.

Citylink,Sportmaster,Lamoda:

However, on the site of Wikimart next to the link for activating a promo code there is a link directing to the page with information on how to obtain it. Users feel no need to proceed to other sites to get a discount.

27

Adding itemto cart

Critical level: low

Page 28: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Next to the opportunity for entering a promo code there is some information on how exactly it can be obtained.

Wikimart:

Conclusion Give users the information they will be looking for anyway on other sites. Next to the box for entering a promo code there have to be the information on how it can be obtained.

28

Page 29: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE BOX FOR ENTERING A PROMO CODE OR

A LOYALTY CARD NUMBER SHOULD BE

APPROPRIATELY NAMED

During the testing many respondents got delayed at the boxes for entering promo codes and loyalty card numbers asking the moderator questions on whether the box should be filled in and what the point of it is.

For example, on the site of Foodpanda service the field for entering a coupon is titled “Voucher”, and most of the respondents had no idea what exactly they're supposed to enter there. As the cue reads “Code”, two respondents entered the security code of their bank card.

Inappropriate name of the box for entering a discount code may slow down the process of placing an order or prevent the user from using a coupon even if (s)he's got it.

10

The name of the box is in English and doesn't make sense.

Foodpanda:

Whereas when the box was named more clearly and definitely, most of the respondents understood it doesn't have to be filled in and skipped it. The respondents didn't have any trouble with words “Promo code”, “discount coupon” and some others.

29

Adding itemto cart

Critical level: low

Page 30: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Respondents have no trouble grasping the name of the box.

Citylink, M.Video and Lamoda:

Conclusion The box for a discount coupon needs to be appropriately named.

30

Page 31: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

GOODS NEED TO BE STORED IN THE CART

UNTIL THE ORDER PLACEMENT IS COMPLETED

In the course of the survey the respondents faced technical problems when paying which interrupted the check-out process. Most often afterwards the goods were cleared from the cart, making the respondents collect them all over again. One of the cases on the site of Enter store resulted in a respondent's inability to add the item to cart for the second time. The item he needed was the last one at the store and got booked at the first attempt of placing an order. As a result the respondent failed to make a purchase.

A few respondents faced this problem when shopping on the site of Utkonos store. After registration the items disappeared from the cart and the respondents had to browse the site once again. As the usual amount of goods at a food store is quite large, it was time-consuming and reduced significantly the respondents' satisfaction from working with the site.

The goods also need to be stored in the cart when the user leaves the site temporarily.

If for example a technical problem comes up preventing the user from making a purchase, (s)he needs to be able to proceed with the order placement from the same point. Often the cart is cleared and the process of purchasing has to be started anew. In these situations risks are high that the customer will give up on the purchase.

11

Conclusion Don't make users add items to cart all over again. Goods need to be stored in the cart until the order placement is completed instead of disappearing after registration, temporary leaving of the site or in case any technical problems come up during the payment procedure.

31

Adding itemto cart Critical level: high

Page 32: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE OPPORTUNITY TO REMOVE ITEMS FROM

CART SHOULD BE OFFERED BY DEFAULT

ON THE CART PAGE

All the tested sites offered an opportunity to remove items from the cart. Nevertheless, on some of the sites this option wasn't set by default, so the process of removing items from the cart didn't seem obvious to the respondents.

For example, in the cart of Ozon store it is necessary to highlight the item for the “remove from cart” option to appear. The “remove” option is not next to the chosen item but at the top line of the chart.

The cart is often used by many as a way to save some products for further choice. In the cart users make a decision which products from the list they will purchase, that's why it's important to mark the opportunity to remove unnecessary products.

12

The option of removing items from the cart doesn't appear until the item on the list is highlighted.

Ozon:

32

Adding itemto cart

Critical level: medium

Page 33: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The option of removing an item from the cart shouldbe offered next to the button showing the quantityof items in the cart

12.1

Most of the users associate deleting an item from the cart with changing the quantity of items in the order, that's why the option of deleting an item should be offered next to the button that may change their quantity in the cart.

Examples below are taken from the sites of Wikimart and Enter.

Removing from the cart is next to the button that may change the quantity of items in the cart.

Wikimart and Enter:

The opportunity to remove an item from the cart should beoffered as a separate function, not as an option of changingthe quantity of items in the cart

12.2

On the site of Foodpanda service you can remove an item from the cart only by changing the quantity of items in the cart down to zero. It took the respondents some time to find that opportunity.

The function of removing an item from the cart is next to the button that may change the quantity of items in the cart.

Wikimart and Enter:

Most other stores offer a separate function of removing items, and the respondents easily found it.

Conclusion The opportunity to remove an item should be noticeable on the cart page. It has to be done by a separate function and put next to the button that changes the quantity of items.

33

Page 34: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

SIGNING IN

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 35: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE SITE NEEDS TO ALLOW FOR AN OPPORTUNITY

TO PLACE ORDERS WITHOUT REGISTRATION

In the survey almost all the respondents were looking for opportunities to place their order without registration. In the course of testing most of them reported that when making the first purchase on the site they'd rather not register as they don't understand yet whether they will need the store's services later on and are worried about spam. Most users associate registration with filling out too many boxes, the need to remember or restore login and password in order to enter the site.

On some sites it's impossible to make a purchase without registration. For example, on the site of Ticketland it's impossible even to add tickets to cart without registration. After adding an item to cart a sign-in form appears, but there is no link to registration. Many users take this window for the start of placing an order and enter their e-mail address which is not registered on the site. It's not until they get an error message that they realize the stage of registration has to be done separately.

Critical level: medium

Users are seldom willing to register on a store's site when making a first purchase. It's important to give them this opportunity, suggesting registration and access to the extended functions of the site later.

The site needs to allow users to place orders withoutconfirming contact information

Signing in

13

The site makes the user sign in to add tickets to cart. A pop-up window offers no link to register.

13.1

Ticketland:

35

Page 36: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

All the contact data has to be confirmed by code.

Ticketland:

The need to proceed to e-mail box or enter an SMS code to confirm registration slows down the order placement and distracts the user.

Confirming contact information is connected with the risks of technical problems and may lead to cart abandonment. On the Ticketland site confirming the phone number is required to proceed with the order. In the survey one of the respondents had to wait for 40 minutes to receive an SMS with a confirmation code which caused him to abandon the cart.

The site of Utkonos store requires an SMS code. The user has to search on the site for the opportunity to enter an SMS password. This function is not built into the process of order placement and requires redundant actions.

On the site of Kassir confirming the phone number is not necessary to place an order, and as a result all the respondents succeeded in purchasing.

Provisions for ordering without registration are made. The confirmation of contacts is not required to place an order.

Kassir:

36

Page 37: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The function of ordering without registration looks like it's inactive.

The opportunity to place an order without registration is at the bottom of the page.

Holodilnik:

The site of Sportmaster store also allows users to buy without registration. Yet like all the other options on the site, when it is not selected, it is poorly designed (grey font against grey background), so users think it's inactive.

The opportunity to order without registration needsto be noticeable on the page

13.2

Almost all the tested sites made provisions for ordering without registration, but not everywhere this opportunity was noticeable or highlighted on the page.

The site of Holodilnik store offers an opportunity to order without registration, but it is located at the bottom of the page below the registration form, and most of the usersdon't notice it.

Sportmaster:

37

Page 38: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The opportunity to order without registration is visible and highlighted on the page as important.

M.Video:

The site of M.Video store provides an opportunity to order without registration, which is highlighted on the page and visible to all the users.

Conclusion Unregistered users should be able to place orders without limitations. The sign-in page should not hide the option to order for unregistered users, as many users may refuse from purchasing if they fail to find this function on the site.

38

Page 39: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE USER MAY BE REGISTERED AUTOMATICALLY

BASED ON THE ENTERED CONTACT DATA

Often background registration is used on sites selling digital goods. Registration was not noticeable for the respondents and didn't seem like a waste of time.

When selling physical goods background registration may also be beneficial. On the site of Sotmarket store registration is completed when making the very first purchase. When shopping further, it's enough to enter one's e-mail address on the page of order placement, and “Password” box appears to enter the site.

Critical level: medium

Although registration requests the same amount of data as an order placement, users are unwilling to register on sites thinking it's a waste of time. Background registration can provide users with access to full functions of the site without giving them the feeling they take redundant steps.

Signing in

14

The stage of registration is missing on the site. The user proceeds right away to the page of order placement.

After placing an order (s)he receives an e-mail containing info on registration and password

Sotmarket:

39

Page 40: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

When buying digital goods registration needs to be automatic,in the background mode upon the first purchase

Users often don't know in advance if they may want to acquire access to content in the future and be able to use it on various devices. That's why they skip the registration stage as they don't want to spend time doing it and don't see the point of it at the stage of making a purchase.

On the site of Ivi service registration does not occur automatically upon the first purchase, but after completing the payment a pop-up window appears suggesting registration. Most users skip this step as they want to access content as soon as possible.

If registration is automatic, it's necessary to notify the userof it on the page of the order confirmation and by e-mail

14.2

On the site of LitRes store registration occurs automatically upon the first purchase. This remains unnoticed by the user as there are no notifications of registration during or after the purchase.

But most of the respondents didn't realize they had actually registered and didn't understand how to use the purchased goods on other computers or mobile devices.

Despite the strong points mentioned above background registration has a few downsides.

First, in the course of background registration a password to access account is generated automatically. Most of the users have just a few standard passwords for various services which are convenient to remember. With background registration a user will have to either change the password or each time access the e-mail box to copy the password.

Second, some users prefer not to register on the sites of stores as they are worried about spam or they are unwilling to share their private details for stores to keep. In this case it's better to use minimum amount of personal data of the client in the course of background registration.

Conclusion Automatic registration on the site is recommended if the store sells physical goods. If the store sells access to digital goods, automatic registration is necessary. With background registration minimum amount of personal info should be used, or the fact of registering with the site has to be evident for the user.

14.1

40

Page 41: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Payment methods are limited for unregistered users.

Holodilnik:

THE CAPACITY OF ORDERING “WITHOUT

REGISTRATION” SHOULD NOT BE LIMITED

Some stores limit the number of payment methods for unregistered users. The respondents pointed out it felt like the site forced them to register. Most often this limitation is concerned with different kinds of advance fee (by a bank card, by e-money).

For example, on the site of Holodilnik store payment by a bank card and e-wallet is impossible without registration. The respondents noted its inconvenience and returned to previous steps to register.

Critical level: medium

Limiting access to the full capacity of the site for unregistered users looks like forcing them to register. It has a negative impact on the attitude towards the store and increases the time of order placement.

Signing in

15

41

Page 42: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page for choosing the sign-in option doesn't mention that payment methods for unregistered users are limited.

Citylink:

Conclusion Limited capability of the site when ordering without registration looks like forcing the user to register. It's preferable to provide unregistered users with the same opportunities as the registered.

The site of Citylink store has limited payment methods for unregistered users, whereas there is no information on these limitations at the stage of choosing the sign-in option.

Don't make users return to preceding steps of order placement. On the site of Citylink unregistered users are unable to choose several payment methods. On the list of payment methods these options are blocked. The user has to come back to the preceding stages of order placement to start registration.

42

If some method of payment is unavailable without registration,it's necessary to notify of it in advance

15.1

Page 43: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Not all the modes of signing in are displayed on the page.

M.Video:

ALL THE WAYS OF SIGNING IN TO THE SITE

HAVE TO BE NOTICEABLE AND AVAILABLE

ON THE SAME PAGE

The site of Ticketland suggests signing in via social networks and registering by e-mail address. On the page that appears after adding tickets to cart these options are not presented, which leaves users unaware of their existence.

Critical level: medium

If some of the opportunities are not provided for on the sign-in page, the user may decide they are missing and not understand how to use them.

Signing in

16

The options of registering and signing in via social networks are not displayed on the page.

Ticketland:

On the site of M.Video store the registration link is missing from the sign-in page. The respondents found it only at the top of the page.

43

Page 44: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The advantages of registration are poorly structured and in small print.

Holodilnik:

Describe the advantages of registration rather than the downsides of skipping it. The site of Aeroexpress makes the user decide whether to sign in or to refuse from signing in. There's a message on why the lack of registration is disadvantageous (“when making a purchase without registration you won't be able to use…”) In this case double negation and poorly structured information result in skipping the message by most of the users who never read it till the end.

The advantages of various sign-in types need to bedescribed on the page

16.1

The page should provide a detailed and noticeable description of advantages of various registration and sign-in types. That will make it easier for the user to opt for the right kind of sign-in.

On the site of Holodilnik store different types of sign-in and their advantages are described, but the text is not structured and in small print, so that none of the respondents read it.

The downsides of making a purchase without registration are described. The option to sign in is missing.

Aeroexpress:

44

Page 45: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The site of Svyaznoy store explains the advantages of registration before choosing the sign-in option.

The advantages of registration are described in detail and with structure before choosing the sign-in option.

Svyaznoy:

Conclusion The sign-in page should display all the possible methods of signing in, contain the registration link and describe the advantages of various sign-in options (registration, signing in via social networks).

45

Page 46: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

REGISTRATION NEEDS TO BE BUILT INTO

THE PROCESS OF ORDER PLACEMENT

On the sites of Utkonos, M.Video and Ticketland the registering procedure is not built into the order placement procedure, some extra actions are required to (for example, following the link at the top of the page). It seems like a waste of time.

Critical level: medium

When the registering procedure is separated from purchasing it doesn't feel like getting any closer to completing the purchase.

Signing in

17

Registration has to lead to automatic sign-in, and thenthe order placement should continue

17.1

On the site of Aeroexpress registration is not built into the order placement procedure. After completing registration there is no proceeding to buying the selected tickets. After registration the user remains in the unauthorized area and has to sign in first.

Registration is not followed by sign-in automatically.

Aeroexpress:

If it's required to confirm the contact data for registration,this stage needs to be built into the process of registration

17.2

On the site of Utkonos store it's required to confirm the phone number. After registration one has to proceed to the cart page once again, where at the bottom of the page there is a function of confirming the phone number.

46

Page 47: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

To confirm the phone number after registration extra actions are required.

Utkonos:

On the site of Ticketland it's required to confirm the data by e-mail or phone. The process is built into registration, and the user doesn't have to perform extra actions.

Getting the confirmation code is built into the registration process.

Ticketland:

After registration is complete the contents of the cartshould be intact

17.3

The need to refill the cart after registration resulted in strong negative feedback from the respondents.

For example, on the site of Aeroexpress after registration is complete the user needs to sign in and select the details of the ticket all over again. It takes time, making the user dissatisfied with the site.

47

Page 48: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

After registration ticket details need to be selected all over again.

Aeroexpress:

Conclusion Registration needs to be built into the order placement procedure. After registration is complete, automatic proceeding to the order placement should occur. Registration should not be interrupted by extra steps or actions.

48

Page 49: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

PROVIDE FOR OPPORTUNITY TO REGISTER

WITH THE SITE AFTER THE ORDER IS PLACED

USING THE ENTERED INFORMATION

This option is better than background registration as the user can set his/her own password and make a decision on whether to register or not. It seems convenient to users, as most of them set one standard password on sites of little significance.

Only one of the tested sites provided a good solution for registering after order placement. On the page of order confirmation it's enough to enter password to complete registration.

Critical level: high

Users are unwilling to spend time on registering before placing an order. All the data necessary for registration is gathered anyway during order placement. By enabling the client to register after placing an order you can increase the number of users registering voluntarily.

Signing in

18

Registration on the site is possible on the page of order confirmation

M.Video:

On the site of M.Video it's not quite clear that registration will be complete after order placement, so a few respondents couldn't find the opportunity to register on the sign-in page.

49

Page 50: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The sign-in page offers “Continue without registration” option, but there is no chance to register.

M.Video:

On the sign-in page it's better to avoid words “Without registration”, as in this case users may search for this opportunity on the site before they place their order. On the sign-in page you can just provide users with the opportunity to sign in or proceed with the order placement as a new client offering “I'm a new customer” option.

The same is true for the site of Wikimart, yet users register effortlessly as the word “Registration” is not used at the stage of entering the contact data.

Order placement is followed by registration, but causes no questions before order placement as it is not presented as a separate stage.

Wikimart:

Conclusion The opportunity to register after order placement makes it possible to complete registration without making a user annoyed. Information on the advantages of registration and the box for entering password should be displayed next to the “register” option.

50

Page 51: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

WEBSITE LOGIN SHOULD BE E-MAIL ADDRESS

OR PHONE NUMBER

When registering with the site of Aeroexpress it's required to enter the phone number, e-mail address and login separately. The users who wanted to register entered the e-mail address and copied it to the login box later.

Critical level: high

Users have trouble remembering a multitude of logins signing in to various sites. It's always more convenient when an e-mail address or a phone number is used as the main identifier as it's often known by heart.

Signing in

19

Registration form uses the “Login” box.

Aeroexpress:

On almost all the other sites e-mail address serves as the main identifier to sign in

The box for signing in should be named “e-mail address”or “phone” rather than “login”

19.1

51

Page 52: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

When registering with Ozon app the user is requested to log in, but it's not specified that the only way to log in is by entering the e-mail address. Users don't understand why there's an error when registering and how to correct it.

E-mail address is used as an identifier of the user, but the box is named “login”.

Ozon:

Conclusion An e-mail address or a phone number should be the main identifier for registering with the site. The sign-in box should be named “e-mail address” or “phone number”. For the “phone” box during sign-in it's necessary to specify the format of entering.

52

Page 53: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

WHEN ATTEMPTING TO REGISTER WITH

THE E-MAIL ADDRESS THAT'S ALREADY BEEN

REGISTERED, IT'S NECESSARY TO SUGGEST

SIGNING IN TO THE SITE OR USE A PASSWORD

REMINDER FUNCTION

Most often users have got one e-mail address which they use to register with different sites. The user may have registered with the site and forgotten about it. In this situation the function of signing it to the site with entered contact data or restoring password may be more useful.

Critical level: low

If the user forgets that (s)he has already registered with the site, it will be appropriate to sign in to the site or remember password instead of registering with different contact data.

Signing in

20

The error message gives instructions that are irrelevant to the user's situation.

Utkonos:

At an attempt to register repeatedly on the site of Utkonos store an error appears saying the e-mail has already been registered and suggesting choosing another address.

On the site of Citylink store at an attempt to register with the address that's already been used, a cue comes up saying the address has already been saved in the data base of registered users and suggesting restoring the password. However, this message doesn't appear until the registration form made up of 11 boxes is filled out.

53

Page 54: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The message that the user is trying to register with the already existing address doesn't appear until the registration form is filled out.

Citylink:

On the page for logging in and entering a password anopportunity to restore the forgotten password shouldbe provided for

20.1

To save the user's time the logging in field when proceedingto signing in should be filled out by default

20.2

Often users forget that they have already registered with a site. In these cases it's important to allow for restoring the password. To save the user's time the box for entering an e-mail address in the form for restoring the password should be filled out.

Conclusion At an attempt to register with the e-mail address or phone number that already exist in the data base a message should appear saying the user with this data has already been registered and suggesting signing in or restoring the password.

54

Page 55: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

NEXT TO THE FIELD FOR ENTERING CONTACT

DATA CLARIFYING INFORMATION SHOULD

BE DISPLAYED

Users are often unwilling to register with the sites of stores as they are worried about spam. Often users are sure they will receive it even if they deselect the newsletter option.

Users would be more willing to share contact data if the field for entering contact data is accompanied by saying it will be used to clarify the details of the order and delivery.

Almost none of the tested sited mentioned how the user's contact data will be used. This information is provided on the Wikimart site.

Critical level: medium

Users are more willing to share their contact data when they see how exactly it will be used.

Signing in

21

Next to the field for entering contact data there is information on how it will be used.

Wikimart:

55

Page 56: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Even when using test e-mail addresses the respondents by habit disabled newsletter subscription option.

It's not recommended to make newsletter subscription compulsory or hide its terms under the guise of agreeing to processing personal data.

Accepting newsletter is hidden in the terms of agreeing to personal data processing and is compulsory to proceed with the order.

M.Video:

It's impossible to register without agreeing to newsletter hidden in the agreement on handling personal data.

Utkonos:

Conclusion Tell your customers how their contact data will be used. The newsletter option should be inactive by default instead of being hidden in the agreement on processing personal data and should be highlighted as a point in its own right.

56

Sign-up for newsletter and promo materials option should beinactive by default. We don't recommend using compulsorynewsletter sign-up.

21.1

Page 57: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CHOOSING THE METHODOF PAYMENT

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 58: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE METHOD OF PAYMENT SHOULD

BE APPROPRIATELY NAMED

Some sites suggest paying by bank card upon the receipt of the product and online payment. Users often have trouble choosing the right option. Usually it has to do with the fact that the methods of payment are not categorized and ambiguous names are used.

Critical level: medium

The methods of payment should be named unambiguously and categorized; otherwise the client can misinterpret their meaning and choose the wrong one.

22

Choosing themethod of payment

The method of payment should be named clearly22.1

The methods of payment should be given extended and clear names.

For example, the list of payment methods when subscribing to “Vedomosti” paper includes an item named “Credit card”. The respondent wasn't sure whether he can pay by a debit card or not.

The name of the item in the list is ambiguous.

Vedomosti:

The methods of payment should be categorized: advance fee, payment upon receipt and on credit

22.2

Most of the respondents had trouble selecting the method of payment on the site of Svyaznoy store. The list of options wasn't structured, so a lot of the respondents wrongly chose “Paying by payment card upon receipt” as they paid attention only to the beginning of the sentence and the logos of payment systems.

58

Page 59: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

When the options are divided into groups, it's easier to grasp the methods of payment and make a choice. For example, on the site of Enter store the options are divided into “Upon receipt of order” and “Right now” groups.

Svyaznoy:

The list of options is not structured, and it's hard to select the right option.

Enter:

Payment methods are divided into groups.

Conclusion To facilitate searching for the right method of payment it's recommended to divide the methods of payment into “Upon receipt” and “Advance fee” groups, and their names should be unambiguous. The opportunity of making a purchase on credit also should be presented in a separate group.

59

Page 60: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE METHODS OF PAYMENT SHOULD BE

SORTED BY RATING

For example on the site of Sotmarket the payment options are sorted by rating, and less frequent options are hidden behind the link “7 other payment methods”. The list is not overloaded by rarely used options, and users have less trouble selecting the right option.

When there are many options on the list, prioritizing them based on the ratings may not be enough. That's when it's recommended to divide the methods of payment into meaning-based groups, like on the site of LitRes store. Unfortunately, not all the names of the groups on the page of LitRes are relevant to their contents. It makes it hard to find the right method of payment.

The methods of payment should be displayed depending on how often they are selected by users. Both types of payment and particular kinds of payment within them should be sorted.

23

The methods payment should be divided intomeaning-based groups

23.1

The options on the list are prioritized based on the ratings.

Sotmarket:

60

Critical level: lowChoosing the

method of payment

Page 61: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The options are divided into groups. The names of the groups are irrelevant to their contents.

LitRes:

The most popular method of payment with the target audience of the site can be selected by default. That will allow users to avoid performing extra actions when making a choice.

On the site of IVI paying by bank card is selected by default, and the user doesn't have to perform extra actions to select the right option.

On the site of Afisha there are two payment options: “By bank card” and via “[email protected]" service, but the more popular payment method is selected by default.

The most popular method of payment can be selectedby default

23.2

The choice is made by default and users don't have to perform extra actions.

Ivi:

61

Page 62: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

For example, on the site and application of Steam after the first payment the user is offered to use bank card details later on, with no need to enter the details all over again.

If using the site implies frequent or regular purchases(e.g. e-goods, food delivery etc.), it's preferable to give usersthe opportunity to save the payment data and offer thatparticular method by default

23.3

The most popular option on the list is selected by default.

Afisha:

The user is offered to pay by “attached” card by default.

Steam:

Conclusion Prioritizing based on the ratings, categorizing the methods of payment and automatic selection of the most popular method of payment make searching easier for most of the users and lower the chances of abandoning the purchase.

62

Page 63: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE USER NEEDS TO BE NOTIFIED

THAT THE TOTAL COST OF THE ORDER

MAY VARY DEPENDING ON THE

METHOD OF PAYMENT

Often stores offer several methods of payment, and many of them include extra charges or discounts.

In case of a discount the change of price is not that bad. For example, on the site of M.Video the respondents noted that when paying by card the cost of the order dropped but didn't understand why.

If in the course of selection there is no information that the cost of the order will vary depending on the method of payment selected, the user can feel cheated and give up on the purchase.

24

When paying by card a discount is provided, but this information is missing from the page.

M.Video:

63

Critical level: high

Choosing themethod of payment

Page 64: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Possible price fluctuations should be mentioned next to the method of payment. For example, on the mobile site of Holodilnik store the name of the payment method is accompanied by the information on charges. Users won't be surprised when they see the cost of the order has increased.

The sites of Ulmart and Enter mention even zero charges.

If the cost of the order goes up, it's important to notify of it as soon as possible. Here's a flawed example from Zara store app, where some methods of payment bring the cost of the order up, but this information is missing at the stage of selection.

Payment charges are not mentioned in the app.

The amount of charges is specified for all the payment services including the ones that don't take charges.

Charges are specified next to the name of the payment service.

Zara:

Ulmart:

Holodilnik:

64

Page 65: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

When selecting online payment it is specified that the service is free of charge.

Enter:

Conclusion Make sure you notify the user of the possible variations in price and of charges.

65

Page 66: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE METHODS OF PAYMENT CAN BE

ACCOMPANIED BY THE ICONS AND LOGOS

OF PAYMENT SERVICES

If the page doesn't contain visual cues, selection may be complicated when there is a multitude of possible methods of payment.

For example, in Ozon app there are no visual cues in the list of payment methods. Reading the list from the top down users may overlook the point that MasterCard and Sberbank cards have special terms.

Selection is inhibited on the site of Buket store as there is plenty of small-typed text and vague definitions. Nevertheless, users still choose fast, as the text features the logos of payment systems.

Critical level: low

The icons and logos of payment services ease perception and reduce the time for selection.

25

The list doesn't contain visual cues. The user can make a mistake and overlook the right option.

Ozon:

Choosing themethod of payment

66

Page 67: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

On the site of LitRes store choosing of payment method is done by icons of pay services. Information is perceived easily, users have no trouble selecting the option they need.

The selection of the payment method is facilitated by using the logos of financial services.

The choice is offered by icons only, which makes searching on the extensive list easier.

Buket:

LitRes:

Conclusion The list of possible payment methods should feature the logos of payment services, as it facilitates searching for the right option.

67

Page 68: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

If using the cards of various types gives advantages or influences the price, selecting the payment system should be done when opting for the payment method.

For example, in the app of Ozon store paying by MasterCard gives a discount, that's why it is displayed as a separate point on the list of the payment methods.

Searching for the right option is facilitated when there is no need to specify the payment system during selection. For example, the site of Afisha requires just to select payment by bank card on the list.

When selecting the payment method it is required to select only the payment type.

Afisha:

Conclusion If using cards of various payment systems doesn't influence the price and doesn't give extra advantages, it is not recommended to request selecting the payment system at the stage of selecting the payment method.

68

Page 69: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

DON'T SUGGEST SELECTING A PAYMENT SYSTEM

WHEN PAYING BY CARD

At the stage of selecting the payment method some stores require to select the payment system of the bank card. This step takes extra time and overloads the list. The stage can be improved by defining the type of the card automatically, as you can define the payment system by the first character of its number.

This problem occurred in the apps of Steam and Zara. In Steam app the choice is complicated by using small-typed text on the list and the absence of the logos of payment systems.

Critical level: low

The type of payment system can be defined automatically by the first characters of the card, whereas an extra step takes time.

26

When selecting the payment method it is required to select the type of the bank card.

Steam:

In the app it is required to select the type of the bank card but using the logos of payment systems makes it easier.

Zara:

Choosing themethod of payment

69

Page 70: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CHOOSING THE METHODOF DELIVERY

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 71: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE NUMBER OF FIELDS FOR ENTERING

DELIVERY ADDRESS SHOULD BE MINIMALChoosing the

method of delivery

27

When arranging for delivery the respondents came across some boxes for entering data which seemed pointless or requested information they didn't even know (for example, a zip code). In some cases extra boxes don't take much time, for example, when selecting metro stations, whereas in others they seem like a major hindrance, for example when a zip code is requested.

For example, the app of ZARA store asks to enter a zip code. Not only does it hinder the respondent's work who is supposed to remember or search for a zip code, but it may make the user believe that the goods are delivered by post, not by a courier.

On the sites of some stores information is defined automatically. On the site of Enter store the metro station is selected automatically after entering address. The field remains editable, and if the system selected the wrong station, it can be changed.

Critical level: medium

Users don't like filling out many boxes. Only necessary information should be requested, and all the rest needs to be defined automatically.

“Zip code” box makes users believe the order will be delivered by post.

ZARA:

Necessary information have to be defined automatically.If there is a risk of an error, let the user edit this data

27.1

71

Page 72: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Although in many stores extra fields are filled out automatically, users still have to check all the information.

For example, on the site of Ulmart store in the box for entering delivery address across Moscow there is a “zip code” box. The respondents thought it was redundant, as a courier doesn't need that information, and other stores didn't request to fill out that box.

The metro station is defined automatically, yet the user can edit this field.

Zip code is defined automatically, but users still check if it's correct, using search engines.

Enter:

Ulmart:

Conclusion Don't make your clients fill in extra boxes, it's preferable to automatically specify the information that can be defined without using extra boxes.

72

Page 73: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion To find the pickup point easily the user needs to be able to search for it both on the map and on the list. When there are plenty of pickup points they can be sorted by the metro station with color indication to make visual search easier.

73

Page 74: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

PICKUP POINTS SHOULD BE DISPLAYED

IN TWO WAYS: ON THE MAP AND AS A LISTChoosing the

method of delivery

28

Usually customers search for pickup points near their work place or home. The point is easier to be located when presented on the map.

Not all the sites offered the opportunity to find a pickup point on the map. For example, the app of Ozon store displays available pickup points as a separate list with identical names. It was unclear what the differences were; one had to click on the “Information” icon to find out where this or that point was located.

On the site of Svyaznoy the stores are displayed both on the map and as a list. Users have no trouble locating the store. The form has got a search field which can be useful if there are many pickup points.

Critical level: high

Customers are used to being able to define the store location on the map or the metro map, that's why it's important to provide for such an opportunity.

Pickup points are displayed as a huge list with identical names.

Ozon:

74

Page 75: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

For example, on the site of Ulmart the list is sorted by metro stations and each line is color-coded.

Pickup points are displayed on the map and as a list. Sorting of the results and searching across the chart is possible.

Svyaznoy:

Pickup points can be sorted alphabeticallyor by the metro station. When there are many stores,metro lines can be color-coded.

28.1

The list indicates the metro lines with color and is sorted alphabetically and by metro stations.

Ozon:

75

Page 76: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE FIELD FOR ENTERING ADDRESS SHOULD

ALLOW FOR ENTERING IT BY HAND AND

SELECTING FROM A LISTChoosing themethod of delivery

29

The user needs to be able to complete placing an order even if the delivery address is not recognized by the system.

Almost all the sites tested during the survey allowed for entering address into the box and proceeding with the order. On the site of Citylink, however, that is impossible: when entering the name of the street in a format that doesn't comply with the standards, the box is marked as erratically filled and there is no proceeding with the order.

On the site of Enter store address can either be selected from a list or entered by hand. In any case the user is able to proceed with the order.

Critical level: medium

Users often start entering address in the format that doesn't comply with the standards of the store's data base. In some cases the form cannot be submitted, and the user fails to make a purchase.

When entering address in a non-standard format there is no proceeding with the order.

Citylink:

76

Page 77: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

When a list has identical street names, users may get confused and doubtful as to whether they're doing everything correctly. On the site of Citylink one has to select the street from two identical options.

Conclusion Selecting address from the list makes the user's work easier. Yet the box for entering address should process any entered data. Make sure the dropdown list doesn't contain identical street names and building numbers.

The address can either be entered by hand or selected from a list. The address form is accompanied by a map, so that the user can make sure the address is defined correctly.

The user has to select between two identical options.

Enter:

Citylink:

The list of addresses should contain no identical street namesand building numbers

29.1

77

Page 78: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE DETAILS OF THE PICKUP POINT

SHOULD SAY WHETHER THE GOOD

IS AVAILABLEChoosing themethod of delivery

30

Often when selecting a store next to the name of the store there's an indication of when the good can be picked up. On the sites of Ulmart and Svyaznoy the name of the store is accompanied by information on when the order can be picked up.

Critical level: medium

Sometimes the good needs to be picked up right after ordering. That's when information on whether it's available in the stores and pickup points becomes of top priority.

The list features the stores where the good can be picked up right away.

Ulmart:

78

Page 79: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The list contains information on when the order can be picked up.

Svyaznoy:

Conclusion Clients who want to pick up the good as fast as possible need to know whether the good is available and when they will be able to pick it up.

79

Page 80: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE APPROXIMATE DELIVERY COST SHOULD

BE SPECIFIED AT THE STAGE OF SELECTING

THE METHOD OF DELIVERYChoosing themethod of delivery

31

On the site of Enter store when selecting the delivery method there is no information that there's a delivery fee. In a real situation that could lead to refusing from purchasing or taking extra steps to select another method of delivery.

The M.Video store site notifies a user that the cost of the order has changed only after the method of delivery is selected. During the survey none of the respondents complained about the sudden change in price as the price dropped due to a discount. However, all the respondents noted they could not understand why it had happened and how they had received a discount.

Critical level: high

Most often order abandonment in e-commerce is related to extra charges and hidden delivery terms. The sooner you mention the delivery fee the better.

The cost of delivery is not mentioned when selecting the delivery method.

Enter:

80

Page 81: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Notification of the change in price on the page doesn't appear until the delivery method is selected.

M.Video:

Conclusion Make sure you notify a user that the price of the order will change upon selecting a delivery method. It should be done when the delivery method is being selected and at the beginning of order placement.

81

Page 82: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

IN THE CASE OF ADVANCE FEE

NOTE THAT THE PAYER AND THE RECEIVER

CAN BE DIFFERENT PEOPLEChoosing themethod of deliery

32

Almost all the tested sites allowed for specifying another receiver. It's especially important for the sites that sell flowers or other gifts.

If it may be important upon receiving the purchase, the page for selecting a delivery method should contain a form for entering the receiver's personal details.

As the names of a receiver and a payer can differ only in the case of advance payment, the field for entering the name of the receiver should appear only after selecting the payment method.

On the site of Ulmart store after proceeding to payment there's an opportunity to enter information on the payer. However, this form appears after proceeding to payment, so users associate it with entering card details. Almost all the respondents started entering information from their bank card and got perplexed by a need to fill out usually unnecessary payer's middle name box.

Critical level: low

In some cases the receiver is different from the person who placed the order. If upon the delivery a courier can request an ID, this information needs to be displayed on the page.

The field for entering the receiver's name should be providedonly after selecting the advance payment method

32.1

82

Page 83: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The form for entering a receiver's data appears after proceeding to payment, and users associate it with entering the payer's bank card data.

The page doesn't allow for marking that the payer and the receiver are the same person.

Ulmart:

For example, on the site of Svyaznoy store when selecting payment by card an extra field appears for entering the receiver's name. Unfortunately, the opportunity to mark that the receiver and the payer are the same person is missing from the site.

After selecting online payment you need to enter the name of the receiver.

Svyaznoy:

83

Page 84: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The field for entering the receiver's name should allowfor pointing out that the receiver and the payerare the same person

32.2

Most often the good is received by the person ordering it. To make things easier for the client next to the entry field you can add: “I will receive the order myself”.

The site of Holodilnik store allows for this. However, none of the respondents used this option, as its name is vague and is to be found under the title of “Receiver” block.

Filling out any extra boxes is a hassle for a customer, so don't request any extra information.

The site allows for mentioning that the receiver and the payer are the same person, but this opportunity is unnoticeable, and its relevance is not obvious for the respondents.

Holodilnik:

Request as little information about the receiveras possible

32.3

84

Page 85: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion Don't request any extra information about the receiver. If there is such a need, the data about the receiver shouldn't be entered until the payment method is selected. The box for the first and last names of the receiver should be filled out by default or should be accompanied by the option of stating that the receiver and the payer are the same person.

85

Page 86: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ORDER CONFIRMATION

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 87: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE ORDER CONFIRMATION PAGE

SHOULD PROVIDE ALL THE NECESSARY

DETAILS OF THE ORDER

Critical level: medium

Users often want to double-check the entered data, so make sure this page displays all the data entered by the user.

Orderconfirmation

33

The user should be able to check the contact data, the selected method of payment and delivery, as well as the contents and cost of the order.

Information that needs to be displayed on the page:

The contents of the order and the total cost

The receiver's contact data

Information on the method and time of delivery

Payment method

Depending on the selected delivery method the page may display the address of the selected pickup point or the delivery address.

Almost all the stores tested in the survey display the detailed description of the order on the confirmation page. The site of Ulmart store provides all the necessary information about the store, but it doesn't allow for editing the contents of the order.

1

2

3

4

87

Page 88: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page contains all the necessary information, but there is no opportunity to edit the contents of the cart.

Ulmart:

The order confirmation page should be relevant to the selected delivery, payment and pickup method

33.1

Instructions on the page are irrelevant to the selected delivery method.

Ulmart:

88

If the page contents are irrelevant to the selected data, the user may be having doubts as to whether the data was entered correctly.

The confirmation page of the Ulmart site provides information on how to pick up the good at the store, although the user has opted for delivery.

Page 89: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page does not allow for changing the order details and the goods in the cart. Returning to previous steps is possible only through the navigation chain at the top of the page or with “Back” button in the browser.

Citylink:

THE CONFIRMATION STAGE SHOULD ALLOW

FOR PROCEEDING TO EDIT INFORMATION

ON THE ORDER

Critical level: medium

When checking the data about the order the user may notice a mistake in the order specifications, that's why the confirmation stage should allow for editing the data entered before.

Orderconfitmation

34

On the site of Citylink store the confirmation page does not allow for changing the order specifications. The only way to do it is to follow the link in the navigation chain at the top of the screen, which may not be obvious for the user.

89

Page 90: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

On the site of Utkonos store the confirmation page allows only for changing the quantity of goods in the cart and the phone number. For other changes you need to return to previous steps.

On the site of Buket store all the order specifications can be changed. The user doesn't have to return to previous steps for editing.

The page allows for changing just the phone number.

Utkonos:

90

Page 91: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

All the entered data can be edited.

Buket:

Conclusion The order confirmation page should allow for editing all the data entered before.

91

Page 92: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE FORMAT FOR ENTERING

THE BANK CARD DETAILS SHOULD MATCH

THAT OF THE CARD

When entering the card details, users are more comfortable copying the information as it is presented on the bank card. That is especially the case with inexperienced users who feel very anxious and insecure when entering the card details.

Critical level: medium

If the fields for entering the card details don't match those pictured on the card, users may feel doubts as to whether they are filling them out correctly and performing extra actions. They end up spending more time on filling out the details and checking the entered data or failing to do it altogether.

Visual division of the blocks of digits on the card is much more convenient for users who check whether the information is entered correctly during or after entering the data.

In the survey the respondents didn't use their actual bank information, so the level of anxiety when filling out the details was less than in real life. However, more than half of the respondents checked the correctness of the entered payment data.

When the card number was displayed as a continual sequence of digits, the respondents had a hard time checking whether the data is correct.

For the cards with 16 digits the card number when enteredshould be displayed in groups of 4 digits each

Entering card detailsand payment

35

The card number is not divided by gaps; the text is small-typed and placed next to the example of filling out the box. It makes it hard to check whether the data is entered correctly.

35.1

92

Page 93: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ENTERING CARD DETAILSAND PAYMENT

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 94: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Blocks of characters are not divided by gaps, and it's hard to check whether the data is correct on the smart phone screen.

Steam app:

If the digits are not divided into groups it gets even more complicated when paying via smart phone.

When entering data on mobile devices there's a high probability of errors, and changing the entered data is hard, making users annoyed.

In the Steam app the card number is not divided into groups, and the respondents had to spend more time on entering and checking the data.

Respondents spent less time on entering and checking the correctness of the data when it was divided into groups.

The format of the card number is displayed by a cue inside the field, yet it cannot be entered with gaps.

The digits are divided by gaps, and the user can easily check whether the data is entered correctly.

The card number is divided into groups of digits.

Zara app:

94

Page 95: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Displaying the format of entering data doesn't adjust to the card type.

LitRes:

When filling out the fields from mobile devices all the respondents found out that after they were done with filling out a field on their tablet PC or smart phone, there was no automatic proceeding to the next one. The keyboard shuts down, and to proceed to the next field they have to choose a box. All the respondents who came across that problem noted that it took extra time and was inconvenient.

The format of entering the card details should be adjustedto the card type

35.3

Not all the cards that can be used to make a purchase online have 16 digits in their number. Some processing services start accepting Maestro® cards, yet the format of entering and recording remains 16-digit which can be confusing, as the card number does not comply with the format on the site.

Month should be entered into a field, not selected froma dropdown list

35.4

When selecting from a drop-down list users spend more time to fill in the form. Usually the field for entering month is between the card number and the name of the holder which are entered from the keyboard, so it's easier to enter the date likewise.

The form should provide for automatic proceedingto the next field, or division into separate boxes in the fieldfor entering the card number shouldn't be used

35.2

The format of entering month should match the formaton the card. Month should be displayed in two numbers

35.5

The expiry month on bank cards is presented by two digits, not its name.

95

Page 96: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The format of entering month does not match the format presented on the card. Users spend a lot of time translating the number of the month into its name.

Aeroexpress:

Months on the list are presented both by names and numbers. Users have no trouble selecting the right option, but the names of the months overload the list visually.

The format of entering data on the card validity (year)should be limited to two digits

35.6

Some users may be confused by the format of writing the year in four digits, whereas it is presented in two digits on the card. This problem is less critical than the previous one.

When the year is selected from a dropdown list it's not much of a problem and overloads the list just mildly. But when the field for the card validity is the entry field, users can have difficulties filling it out.

Most of the respondents who tested the mobile application of Aeroexpress didn't notice the cue and entered the year as presented on the card. They couldn't sort out why the payment button remained inactive.

The cue about the format of entering data doesn't appear inside the entry field until the latter is clicked on. It remained unnoticed by most of the users as it is inside the field and is immediately being replaced by the entered text.

When the month is presented in a different way, users may have trouble translating the name of the month into its sequence number. Users end up spending more time filling out each field, and the risk of errors is higher.

On the mobile site of Aeroexpress the list presents the names of the months instead of their numbers. Whereas on the page for entering details of another payment provider both the numbers and names are displayed, which can also probably hinder the search.

96

Page 97: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The format of entering the year does not match the format on the card. The respondents don't notice it and fail to pay for the ticket.

Aeroexpress:

First and last names should be entered into one field35.7

Users are used to having one field for entering their first name, and when they start entering it into the form, they write the last name as well. Users also read only the name of the current field, without looking through or taking notice of the following ones.

That's why when users see that the first and last names are in separate fields they have to delete or copy the last name from the “Name” field and enter it repeatedly into the other field.

The fields for entering the first and last names are separated, users enter their last name into the “Name” field and it's not until they proceed to the next field that they notice the error.

97

Page 98: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The name should automatically be entered in capital letters.The letters entered in Cyrillic should automaticallybe replaced by equivalent Latin symbols

35.8

The first and last names on the bank card are printed in capital Latin letters which confuses inexperienced users who are trying to fill out the field. Almost all the respondents with little experience of paying for purchases online when filling out the “Name” field were wondering: are they supposed to use capital or small letters, is it necessary to use the Latin alphabet.

Users end up entering their name holding the Shift key or in CapsLock mode. Entering from mobile devices is even more complicated as changing into capital letters is not evident to most users. Eventually users consistently press the key transforming the letter into a capital one which is very time-consuming.

The first and last names of the card holder are entered into one field.

Most of the payment forms use writing the name in one field. The example below is from the site of Aeroexpress.

Shall I use small or capitalletters?

I used to write in Caps all the time, wondering ifit mattered, then tried otherwise and saw it madeno difference.

The site of Aeroexpress showcases an efficient solution for this function: when entering the name into the form letters are displayed as capital. If the user started entering Cyrillic text without switching the keyboard layout, letters are automatically replaced by equivalent Latin letters.

Capital letters are automatically printed and replaced by equivalent Latin letters.

RuRu:

LitRes store went for the same solution. The symbols entered into the “Name” field are transliterated and entered in capital letters whether CapsLock is pressed or not.

98

Page 99: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE BANK CARD SHOULD BE VISUALIZED

ON THE PAYMENT PAGE

Users had less trouble filling in the card details when the payment page displayed the visual cue or the form was presented as a card.

When the card was not presented on the page, the respondents were wondering where the security code is and what the right format of entering data is.

This problem often occurred when filling in the details on the site of M.Video store. The entry fields on the page are presented in the order that's different from that on the card. The cues indicating where the information is to be found on the card are unclear, and looking for them requires extra effort.

Critical level: medium

When the form is presented as a card with the details to be entered, users know exactly what information they are supposed to enter and where they can find it.

36

The payment form differs from the actual card. The respondents got confused as to where they can find the information on the card.

During payment for the subscription to “Vedomosti” newspaper the respondents were also having problems. Although the payment page visualizes the card, some users don't understand where the security code is. Many respondents used the cue as they couldn't find the relevant information on the front side of the card.

99

Entering card detailsand payment

Page 100: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Letters are automatically transformed into capital ones. When entering Cyrillic letters the text gets transliterated automatically.

LitRes:

Entering data on the site of LitRes is different from that on the site of Aeroexpress. Letters are replaced by the ones that sound similarly, not by their equivalents on the keyboard. In our survey only one respondent tried to enter his name in Cyrillic letters; however, during the survey over 10 people at least once started entering text forgetting to switch the keyboard layout.

Conclusion Using the format of writing equivalent to that presented on the card eases off the cognitive load imposed on the user and affects positively the experience of working the site. It makes it easier to find the necessary information on the card, and few questions arise when filling out the form.

100

Page 101: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The card is visualized, but the entry field for the security code is presented on the front side of the card. That makes users confused and they go to the cue.

Conclusion Visual cues indicating the layout of the fields or visualizing the card on the page helps find the information faster.

A good example of the payment form is showcased on the site of LitRes. The entry fields are presented as on the card. In this version even inexperienced users easily succeed with searching for the information they need.

The entry fields are presented exactly as on the card.

101

Page 102: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The sequence of entering data doesn't match its layout on the card and is interrupted by entering extra information not related to the card.

ChronoPay:

The screenshot below presents entering the payment data inside the image of the card. As all the users fill out the form from top to bottom, the process of filling out the payment form is still interrupted by entering extra information which is time-consuming.

1

2

3

4

3

The screenshot below highlights the areas that require entering the card data. Arrows show the sequence of entering data by the user.

ChronoPay:

Filling out the form is interrupted by entering extra information.

102

Page 103: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ENTERING THE CARD DETAILS SHOULD

BE ALIGNED WITH THE SEQUENCE

OF DATA ON THE CARD

Typically, when scanning information the glance travels as presented on the screenshot below. First, the data from the front side of the card is entered: the card number, its validity, the name of the card holder. After that the security code from the reverse side is entered.

Critical level: low

Users spend less time filling in the card details when the sequence of entering data is aligned with the sequence of data on the card.

37

1

2

34

Naturally, when viewing the card details the glance travels this way in a real situation:

The card number

Validity

The name of the card holder

Security code(reverse side)

1

2

3

4

When the sequence of entering data is different from the sequence on the card, users spend more time looking for the information, go to cues more and are less confident about the accuracy of the entered details.

Entering the card data should not be interruptedby requesting extra information

37.1

The payment form of ChronoPay showcases an example of an inefficient solution. Users spend more time filling out the card details when they need to keep switching between entering the card data to entering any extra information (for example, e-mail address).

103

Entering card detailsand payment

Page 104: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Even when the layout sequence of the card details is adequate, many respondents still skipped and didn't fill out some fields of the form as they didn't notice them.

It occurred because the layout of extra entry fields doesn't get into the path of the user's glance.

On the site of Lamoda the field for security code is unnoticeable, as when filling out the form the user's glance travels from top down to the button of confirming the purchase, which is highlighted on the page and grabs attention. Some respondents ended up filling out the form without entering code.

The fields of the form should be visually consolidatedand highlighted on the page

37.2

The site of RIVEGAUCHE store showcases an efficient solution for the payment page. Entering data from the card is not interrupted by entering any extra information and is aligned with its layout on the card.

The field for entering security code is not taken by the user's glance and is not highlighted on the page.

On the payment page of PayOnline service the field called “Your Email address” is taken by the user's glance. The field for security code is also conspicuous when filling out the form, but its location is not aligned with the sequence of filling out the details.

“Your Email address” field is not highlighted visually, but it is taken by the user's glance.

The field for security code is taken by the user's glance, but the sequence of filling out the fields is unnatural.

104

Page 105: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

REQUEST NECESSARY INFORMATION

ONLY ONCE

Repeated filling out of the boxes seems like a huge waste of time to users. Almost all the respondents who were required to enter their phone number, post address and e-mail address said they had already filled out those boxes, so it didn't make sense to do it once again.

On the payment page of Uniteller service it is required to enter a phone number and address which were already entered by the user when placing an order.

Critical level: medium

Most of the users see no difference between the site of the store and the payment page. That's why users may get surprised and annoyed when the payment page requires filling out the boxes all over again.

38

The information that the user has already entered (phone number and an e-mail address) is requested once again.

Payment formof Sportmaster store:

In some cases additional information is filled out by default. The screenshot below showcases an example of the payment form where an e-mail address, phone number and name were entered automatically. However, the respondents still spent time checking the accuracy of the entered data.

105

Entering card detailsand payment

Page 106: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The form does not have fields for entering data which are not needed to proceed with the payment.

Rambler.Kassa:

Rambler.Kassa service offers an efficient solution for paying from mobile devices. All the fields are presented in the same sequence as on the card.

The sequence of entering the card details on the page is aligned with the path of the user's glance and is not interrupted by entering extra information.

When using the Tab key to proceed to the next fieldthe sequence of proceeding should match the sequenceof viewing and filling out of the fields

37.3

Conclusion To make filling out the payment data efficient the entry fields should be placed in the same sequence as on the card, and that sequence should not be disrupted by entering any extra information. Additional fields for information should be placed on the pathway of the user's glance after the card details.

106

Page 107: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The fields for name, e-mail address and phone number were filled in automatically, but users still have to double check the information.

107

Page 108: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE SITE SHOULD REQUEST ONLY

NECESSARY INFORMATION

For an online buyer filling out extra, unnecessary or seemingly pointless fields feels like a waste of time and sometimes like a mockery on part of the site, as if the user's time were not valuable.

To make a payment just three fields have to be filled in: the card number, its validity and security code.

On the payment page below from 12 fields presented for filling out just 3 are necessary. All the respondents noted the form was too cluttered and poorly structured.

Critical level: medium

People don't like filling out long forms. The payment pages should request as little information as possible. And it should be explained why this particular piece of information is required.

39

The payment page contains too many fields that seem pointless to users.

108

Entering card detailsand payment

Page 109: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The payment pages of other sites request less information; however, entering extra data still takes up a user's time.

Most often it's related to the contact data of the card holder which the user entered when placing the order (for example, an e-mail address or a phone number) which seems needless to the user.

It's also the case with the information that can be defined automatically by the card number.

Don't request information that can be defined automatically39.1

The card type, the name of the bank and the bank's technical support number can be defined by default; still they are often requested as a safety measure.

Examples of additional fields on the form:

Applications of Ozon and Steam, sites of RIVEGAUCHE and Vedomosti stores.

Card type:

The card type is defined by default as it is being entered.

PayU:

109

Page 110: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

PayOnline and ChronoPay.

Information on the bank:

Additional fields do not create a feeling of safety with the user as few people associate them with protection. Besides, this information can easily be found out with the first six digits of the card number.

There are many services that find out additional details of the card by its number. For example, the first six digits of the Alpha bank card number allow for identifying the payment system type, issuing bank, country and phone number of the bank's technical support.

Additional fields on the form don't make the user feel any safer, whereas the scammer can identify them easily by the card number.

Field with the card holder's name may actually be not necessary too, but since it is always present users consider it compulsory.

On the payment page of Afisha's app only the necessary fields for making a payment are presented, so users don't feel annoyed and fill out the payment form fast.

110

Page 111: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The payment page presents only the fields that are necessary to make a payment.

Afisha:

Conclusion Introducing additional fields when entering a card's details doesn't make the user feel that payment is safer yet it creates inconveniences, making the user look for this information on the card.

It's preferable to avoid using additional entry fields. When such information is requested though, the purpose needs to be clarified.

111

Page 112: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE FIELDS OF THE FORMS SHOULD BE

ACCOMPANIED BY CLEAR CAPTIONS AND

CONTAIN CUES ON HOW TO FILL THEM IN

Most users don't have special technical knowledge, that's why the payment page should contain common terms to define the fields and the expected actions.

Using technical terminology may hinder working with the form and make the user go to cues and search engines more often.

For example, only the context of the page enabled many users to understand they were supposed to enter their card number in the PAN box on the payment page of one of the banks.

Critical level: medium

The need to enter banking details sets off anxiety in most of the users. If at this point the card holder starts feeling doubts as to which information and in which format needs to be entered, (s)he may spend more time filling it in or give up on cashless payment altogether.

Don't use rare and technical terms in the namesof the fields and cues

40

40.1

The field for entering card number is named by technical abbreviation PAN.

Most often this field is captioned “Card number” or “Bank card number”, and users don't have any difficulties grasping its function. Or the field has no name, like on the site of Afisha, but its function is clear from the context.

112

Entering card detailsand payment

Page 113: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Most often the “Card number” caption is used, which is convenient for users.

The entry field has no name, but its function is evident for the user.

The field for entering the card security code is the most complicated and causes most trouble. Few of the respondents during the survey used abbreviations CVV/ CVC. Even experienced users used words like “Code”, “3 digits on the reverse side of the card”.

However, most often the payment pages use CVV/CVC name. Information on where it can be found and what it looks like is provided as a cue.

Steam and Zara applications don't provide any cues on where the security code can be found on the card.

Indicating the location of the card security code is hidden behind the cue, and the location of the cue is clear only from the context.

The payment form on the screenshot below doesn't use CVV/CVC name at all. Yet combined with visual and verbal cues the function of the field is obvious.

113

Page 114: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The site doesn't have any field names that may be unclear to users.

In some rare cases the payment pages contain vague terms and definitions in the names of other forms, and also in error and other notifications.

The lack of information on the format of entering data slows down the procedure and causes negative emotions.

Few users understand that the format and contents of the entered data makes a difference just in several fields. Even experienced users often wonder which format they are supposed to use to present information.

The variety of the entry fields presented on the payment pages is quite large (including the phone number of the bank's technical support). Yet users are having questions and doubts even when filling out the essential and common fields.

Even experienced users may have troubles filling out the form if there are no extra cues. For all the fields where misunderstanding of the format can occur explanations should be provided next (inside, above) the field.

The caption to the field should have a cue on the formatof entering data

40.2

The entry field doesn't provide any cue on the location of the code on the card.

Steam application:

114

Page 115: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page contains many redundant fields, yet all the fields are accompanied by cues on how the information should be entered.

Sometimes even if a cue is provided, a user may still overlook it and enter information in a non-standard format (phone number in 10 digits instead of 11 or card number with gaps).

In these cases it's better not to interrupt the user's work and automatically transform the data into the right format instead.

When entering information in the wrong format, don't interruptthe work of the user; the data needs to be automaticallytransformed into the right format

40.3

All the fields are captioned, visual cues help define the format of entering information.

This issue is especially acute with mobile devices. If any questions on filling out the field arise, most users start looking for cues next to the name of the field.

When the cue is on the right and opens as a new page or a pop-up window, it makes working with the form harder and the user feels like (s)he is doing too much.

The cue on how to fill out the field should be placednext to the entry field

40.4

115

Page 116: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The worst version of placing cues to the fields is making references to the bottom of the page. First, they create an impression that some fields of the form are compulsory, as the asterisk sign is a common indicator of a compulsory field. Second, references make the user feel like there are some hidden terms.

The cue is to the right from the entry field.

The cues on filling out the fields of the form are placed at the bottom of the page, the fields are highlighted as references.

Due to the popularity of non-personalized cards users sometimes need additional cues in case the card has no name.

The “Name” field should be accompanied by instructionson how to pay by non-personalized card

40.5

The payment page has information on filling out the form for non-personalized cards.

116

Page 117: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE SIZE OF THE FIELD SHOULD BE ADEQUATE

TO THE ENTERED DATA

If the entry field is too long or too short, consumers start having questions and doubts as to whether the fields are filled out correctly. More errors are likely to occur, as the level of the user's anxiety increases.

Most often these problems arise when the entry field for security code is too big. The respondents doubted that they entered the information correctly into the form, and some ended up entering 7 symbols from the reverse side of the card into the field for security code.

Critical level: medium

If the appearance of entered symbols is not adequate to the size of the field, users wonder whether they entered the data correctly.

41

The size of the field exceeds considerably the possible number of symbols of the card security code.

The field for entering security code is adequate to the number of the entered symbols.

Sometimes the size of the entry field is smaller than the number of the symbols that can be entered into it. It makes checking the entered data difficult.

117

Entering card detailsand payment

Page 118: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The size of the field for entering the card number is too small.

Conclusion The size of the field has to be adequate to the number of the entered symbols. It makes the user more confident that all the data is entered correctly and allows for checking the accuracy of the entered data.

118

Page 119: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE CARD DETAILS SHOULD BE ENTERED

ON THE SITE OF THE STORE OR INSIDE

AN APPLICATION

Many respondents, especially the inexperienced ones, were surprised that the page for entering the card details is not on the store's site. And that's been the case even considering the fact that the survey situation provides a high level of trust and quite a low level of anxiety concerning the safety of the entered data.

Many noted that in a real-life situation when proceeding to an external site they would be more cautious about the payment page.

When the form is on the site of the store, users have less trouble. The page of the store may provide additional information on the order and the contact data of the store.

Critical level: low

Few people understand why after clicking on the “Pay” button they're directed to the page of an external site. Users feel calmer and more comfortable when they pay on the pages of the store.

42

Before paying for the order the user may want to check the correctness of the order. But that's not always possible, as the payment page seldom presents information on the goods in the cart.

The respondents acknowledged that problem only after some prompting questions of the moderator. In a real situation the user wouldn't be able to check the contents of the cart before paying, should such a need arise.

Often information on the contents of the order is not presented on the page even if the user doesn't proceed to an external site.

On the site of Aeroexpress there is no checking the tickets' specifications before paying, as the information is not given on the payment page.

The payment page should provide information on the costof the order and the goods in the cart.

It's preferable to allow for an opportunity to contactthe store on the payment page

42.1

119

Entering card detailsand payment

Page 120: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

It's impossible to check the ticket's specifications before paying.

When going to the payment page of one of the banks some respondents didn't notice the link has changed but were surprised at the change of design and the fact that a bank logo appeared. Some respondents took it for inappropriate advertisement. The design of the payment page doesn't help identify the store where the purchase is being made: the name of the store and information on the order are presented in tiny letters.

When going to the payment page outside the store, that pageneeds to stick to the original design. The payment page shouldalso display the cost of the order and its contents

42.2

When the payment form is built into the page of the store's site, there is a chance to display the contents of the cart. The site of M.Video allows for this. The user can check the contents of the cart and the cost of the order.

The payment form of Gazprombank is built into the page of the store's site.

M.Video:

When there are a lot of orders in the cart (for example, when shopping at Utkonos store) the payment page may display only the cost of the order and the name of the store.

120

Page 121: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

It's almost impossible to identify the store where the purchase is being made by the design of this payment page.

When paying for the subscription to “Vedomosti” newspaper there is proceeding to the payment page of the bank, but the style of the newspaper's site is maintained, the logo of “Vedomosti” and the order description is present. Most of the respondents don't notice the address of the page has changed and are sure the payment is secure.

When paying for subscription, the original design is maintained. There is the newspaper's logo at the top of the page.

Conclusion The payment procedure should be done through the payment form built into the page of the store's site. That allows for displaying more detailed information on the order and the contact data of the store on the page. In the case of proceeding to the pages of a processing center, the page for entering the card details should stick to the original design of the store.

121

Page 122: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PAYMENT PAGE SHOULD ALLOW

FOR RETURNING TO THE SITE OF

THE STORE WITHOUT PAYMENT

Even during the survey some respondents needed to return to the site of the store to specify the order. However, this opportunity was not always provided for on the page for entering the card details.

Many users tried using the “Back” button in the browser. Most often it led to cancelling the order and deleting all the items from the cart. The order placement had to be started all over again, which annoyed the respondents.

The site of Utkonos store allows for returning to the site of the store without payment, but the name of the return link discourages users as it implies “cancellation” of the order.

Critical level: medium

When filling out the payment form some extra questions, comments or changes in the order may arise. The user needs to be able to return to the site of the store and correct the order or clarify some information.

43

The payment page allows for returning to the site of the store, but its name is ambiguous.

Utkonos:

Just few of the tested sited allowed efficiently for returning to the site of the store without payment. On the site of Lamoda the link to return without payment was available next to the payment button.

122

Entering card detailsand payment

Page 123: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The payment page allows for returning to the site of the store without paying.

Conclusion To save the user's time, the page for entering the card details should allow for going back to the page of the store without paying.

123

Page 124: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PAYMENT PAGE SHOULD GIVE

INFORMATION ON THE PAYMENT SECURITY

Among frequent security parameters we can mention the presence of logos of payment systems, secure connection on the page, logos and names of well-known banks or processing centers, and also mentioning guarantees of the payment security and data storage.

Critical level: medium

Often users aren't very clear which security parameters they are guided by when paying online. The general impression of the payment page is shaped by many parameters, which have to be displayed on the page.

44

The indicator of safe connection in the browser line creates a feeling the payment is secure.

Almost all the respondents point out that they check whether a “lock” icon appears in the browser line to indicate secure connection.

On the payment page of M.Video store this indicator is present, so the page looks secure to the users.

The form for entering the card details should be placedon the page with secure connection

44.1

124

Entering card detailsand payment

Page 125: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page of the payment form should feature the logosof payment systems or the icons of 3DSecure services(e.g., MasterCard SecureCode)

44.2

To most of the users the icons on the payment page make no sense. Still these icons are an additional factor to back up the feeling that the payment is secure.

I guess they put it there justfor appearance's sake.To inspire respect.

I know something's been examined andthis certificate was given. It's another indicatorof security.

The icons of payment systems inspire more trust for the service.

If 3DSecure checkup is missing, you need to notifyof it on the page for entering the card details

44.3

In many e-commerce stores, especially e-good retailers, there is no additional SMS-based authentication; yet online stores don't inform that entering additional code won't be required.

Experienced users who were guided by the logos of payment systems and marks (MasterCard Secure Code, Verified by Visa) were puzzled by the fact that during the check-out procedure one-time password wasn't requested.

The site of LitRes offers information on the certificates of payment systems; however, one-time password is not requested, which puzzles the users.

The payment page doesn't inform that there is no authentication based on one-time password.

LitRes:

125

Page 126: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

IF FIELDS ARE FILLED OUT ERRATICALLY,

FEEDBACK SHOULD BE SWIFT,

INFORMATIVE AND NOTICEABLE

If it's technically possible, the data accuracy should be validated as a field is being filled out. After the field has been filled out, the data accuracy should be validated. The erratic field should be highlighted, and relevant notification should be displayed next to it.

When filling out the bank details this recommendation is concerned with the fields that can be validated as they are being filled out: the card number, validity, card type, bank name etc. If the user is trying to enter more symbols than it is required, the indicator of an error should appear before extra symbols are entered. If the user hasn't completed filling out the field – the indicator should appear when proceeding to the next field.

When the quantity of symbols is correct, validating the number accuracy is also possible. For example, all the numbers of bank cards comply with the Luhn algorithm. The sum of all the digits of the card when each second digit is doubled has to be divisible by 10. Using this algorithm allows to notify the user of a typo in the card number.

On most of the tested sites the validation of accuracy is conducted after the form is submitted.

The payment page of the Wargaming store is a rare example of the case when the bank details are being validated while they are being entered. The data accuracy is validated as it is entered, yet the feedback on the erratic fields is displayed at a distance from the entry field.

Critical level: high

When entering banking information the risks of errors are high. Providing full and clear feedback is important to help the user correct it timely.

45

Validating the accuracy of the information entered intothe fields should be done when the forms are beingfilled out, not after they have been submitted

45.1

126

Entering card detailsand payment

Page 127: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Notification of the erratic field appears before the form is submitted, yet the notification is at a distance from the field where the error occurred.

Wargaming:

When notification is at a distance from the entry field, the user has trouble taking notice of it or relating it to the erratic field.

The erratic field needs to be visually highlighted on the page.Notifications of errors should appear next to the field wherethe error has occurred.

45.2

Error notification appears below the form and is hardly noticeable.

Information on errors appears next to the entry field.

If an error occurs, users expect they will be able to correct it checking the data entered into the field. However, often after submitting the payment form all the data in it is cleared, and the user has to enter the card details all over again.

After submitting the form the information entered intothe field has to be saved, even if some field wasfilled out with errors

45.3

127

Page 128: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

After submitting the form with invalid field content the data is cleared, and the user is unable to check its accuracy.

The erratic field should be accompanied by information on how the problem arose and how to deal with it. In the course of testing whenever any errors occurred when filling out the card details, the respondents often received vague, confusing error notifications that contained unfamiliar terms.

These notifications didn't help correct the error and instead baffled the respondents as they didn't suggest instructions on how to fill out the form correctly.

Error notifications on the payment page should explainthe error and suggest instructions for correcting it

45.4

Examples of flawed error notifications.

Conclusion Full, clear and unambiguous feedback on the erratic fields of the form helps the user correct the error timely. The accuracy of the entered data should be validated right on the page before the form is submitted.

128

Page 129: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The page of declined payment provides brief information stating the payment has failed and suggesting further actions.

Robokassa:

FEEDBACK ON THE ERRORS WHEN MAKING

A PAYMENT SHOULD BE CLEAR, SHOULD NOT

CONTAIN TECHNICAL TERMS AND BE ADEQUATE

TO THE PROBLEM THAT OCCURRED

Critical level: high

Whenever during payment a problem comes up, the user needs to receive full feedback as to what happened and how to deal with the problem fast. Upon returning to the online store the order needs to be automatically submitted for processing or another method of payment has to be suggested.

46

Cancellation of the operation should be followed by proceeding to the page that explains why the payment has been declined

46.1

During payment there is a risk of technical issues, problems on part of the user (such as the lack of money on the card) or any other problem leading to payment cancellation.

At a failed attempt on the site of Robokassa service there is proceeding to the page with brief information on the error that occurred. The user is suggested returning to payment or returning to the store to make corrections to the order.

129

Entering card detailsand payment

Page 130: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Error feedback was provided not in Russian and didn't make sense to most of the users.

The page has visible buttons for returning to the store and repeating the operation, which allows users to take actions to correct errors.

On many tested sites, especially e-good retailers, there is no additional authentication of the user via one-time password. Often after the payment is declined there is returning to the page of the good or selecting the method of payment. The page doesn't contain error notification. The respondents who tested LitRes site didn't manage to sort out the problem.

When additional authentication based on one-time SMSpassword is missing, information that the paymentailed should be provided

46.3

On the screenshots below from Steam and Aeroexpress applications possible actions are suggested (contacting the service of Steam and repeating the payment later), but they are of no use as there is no money on the card.

The notification of the payment failure doesn't help figure out the problem

Steam and Aeroexpress:

If the error feedback is vague, ambiguous, or missing, the user may have troubles dealing with the problem.

130

The instructions on error correction should suggestprobable reasons and ways of solving the problem

46.2

Page 131: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion When payment is declined for any reason, there should be proceeding to the page with information on possible problems during the payment procedure.

131

Page 132: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

PAGE FOR GATEWAYOF THE ACQUIRING BANK

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 133: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ON THE PAGE FOR ENTERING ONE-TIME PASSWORD

INFORMATION ON THE SUM OF TRANSACTION AND

THE FIELD FOR ENTERING A PASSWORD

SHOULD BE HIGHLIGHTED

On the pages of some banks it's hard to grasp important information because of the visual noise and poor arrangement of information blocks. For example, on the page of one of the banks on the screenshot below a non-standard entry page for a one-time password is used, yet the arrangement is inefficient, the text is printed small, and the important blocks are not highlighted.

Critical level: low

The sum of transaction and the field for entering a password are the main components on the page for SMS one-time password. If these parts of the page are highlighted and noticeable for the user, the payment is made faster.

47

On the page of another bank information on the sum of transaction and the field for entering a one-time password are highlighted and noticeable. The user can check important information easily.

The page should highlight information on the sum of transactionand the field for entering a one-time password

47.1

The arrangement is inefficient, the necessary information is not highlighted.

Page for gatewayof the acquiring bank

133

Page 134: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

On the pages of some banks the buttons for cancellation and confirmation of the operation are close to each other and almost identical; the user may make a mistake easily by clicking on the wrong button.

On the screenshot below the Continue button is highlighted and more visible than the link to cancel the operation, which is a less frequent action.

The action of confirming the operation should be highlightedon the page

47.2

The sum of payment and the entry field are highlighted, users can check them easily.

The buttons are too close to each other and are almost identical.

134

Page 135: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The Continue button is placed on the right, on mobile devices it is not overlapped by the keyboard.

If the button confirming payment is placed below the entry field, when paying from a smart phone the keyboard often overlaps it. When it is placed on the right, the payment procedure takes less time and no problems with locating the button come up.

The Continue button is visually highlighted on the page.

The Confirm button should be placed to the right of the fieldfor entering a one-time password

47.3

Conclusion The sum of transaction and the field for entering a password should be highlighted on the page. When the main information is highlighted, the user can get it easily and proceed with payment.

135

Page 136: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PAGE FOR ENTERING A ONE-TIME PASSWORD

SHOULD CONTAIN GUIDELINES ON

FURTHER ACTIONS

Users, especially with little experience of online shopping, may be having doubts about the proceedings on the page until they see an SMS from the bank.

For example, on the page for entering a one-time password of one of the banks there is no information that the password to confirm the operation will be sent to the specified phone number.

Instructions on where to look for “Activation code” are hidden behind the “What is it?” link. Inexperienced users spend extra time searching for information and are not always sure they get it right.

Critical level: medium

The user is not always acquainted with specific banking terminology. The easier the words and terms are, the sooner the user will sort things out.

48

The page should present information that a one-time passwordwill be sent and guidelines on further actions

48.1

The page does not provide guidelines on further actions.

136

Page for gatewayof the acquiring bank

Page 137: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

“Client's Authentication” may make no sense to the user.

Some pages for entering a one-time password feature terms that may be unclear to most of the users. It's recommended to avoid using such words as “Authentication”, “Dynamic password”, and the like.

The page of one of the banks informs that a message was sent to the specified phone number and guidelines on how to apply it were provided. The form uses the terms that are clear to most of the users.

Don't use rare or technical terms48.2

The page of another bank provides information that one-time password was sent to the phone, and there are guidelines on further actions.

The page provides information on what's going on and on further actions of the user.

“Dynamic password” is not a common term; it can be unfamiliar to the user.

137

Page 138: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Only common terms are used that make sense to most of the users.

Guidelines on necessary actions are also quite concrete and clear.

Conclusion To speed up the procedure for entering a one-time password and to make users more confident give clear and direct guidelines on the page for entering a one-time password, using common words.

138

Page 139: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CONFIRMATION CODE SHOULD BE PLACED

AT THE BEGINNING OF AN SMS

An SMS sent to mobile phones by most of the banks contain the code at the end of the text. Most of the smart phones display just the first few words in the notification line, so users have to open the SMS separately and search for the code in it. It takes time to find the code.

Texts messages of other tested banks showcase more efficient solutions. The confirmation code is presented in the opening words of the message. The user doesn't have to waste time opening the SMS.

Critical level: low

The need to open an SMS separately to copy the confirmation code does not add much security yet wastes the user's time.

49

One-time password is placed at the end of the message, it's not visible in the fragment at the top of the screen.

The confirmation code is contained in the opening lines of the message.

139

Page for gatewayof the acquiring bank

Page 140: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

When paying with smart phone this problem is even more acute. If a one-time password is in the closing lines of the message, the user has to switch between the applications to see it.

Conclusion The opening lines of the text message is the most convenient place for placing a one-time password, as it can be read without opening the SMS and performing extra actions.

140

Page 141: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

“THANK YOU FOR YOUR PURCHASE” PAGE

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 142: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PAGE FOR ORDER CONFIRMATION

SHOULD DISPLAY ALL THE

ORDER INFORMATION

On the page of complete order that's been paid for it's needed to repeat all the information on the order that was entered before:

1. The order number.

2. The order contents (names of the items, quantity and prices of the goods of each type and the cost of the order).

3. Information on the selected methods of payment and delivery.

4. Contact information on the receiving person and delivery address.

5. Information on return policy (for certain categories of goods).

When the page doesn't specify the contents of the order, the user may feel doubts as to whether the right goods have been selected.

For example, on the site of Enter store after the order is complete there is information only on the number and cost of the order. If the purchase is made without registration, its contents and the entered contact data can be checked only in the e-mail letter.

Critical level: high

Display the order information on the “order complete” page; that will help check the entered data.

50

Page “Thank youfor your purchase”

The option of ordering without registration seems inactive to users.

Enter:

142

Page 143: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

For example, on the site of Ulmart store the “order complete” page lists all the details for validation.

The page features all the important order details:

1. Order number

2. Delivery information

3. Payment information

4. User's contact data

Ulmart:

Conclusion “Thank you for your purchase” page should contain full information on the order: its contents, method of delivery and payment, and return policy.

143

Page 144: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PAGE FOR ORDER CONFIRMATION SHOULD

INFORM THE USER OF EVENTS AND

ACTIONS TO FOLLOW

The page should point out further actions on receiving the order and provide the contacts of the store.

Let the customer know that a letter containing the order and delivery information was forwarded to the provided e-mail address.

If delivery has been arranged for, the delivery period and address should be set out. If customer pickup was selected, the page should provide the address and working hours of the selected store. If the buyer needs to meet certain requirements to receive the order (present the order number or an ID), this information should be sent by SMS or e-mail.

For example, the page of Ulmart store points out which actions need to be taken to receive the order, but they are not adequate to the selected delivery method.

For example, when shopping on the site of Svyaznoy store the “order complete” page provides detailed instructions on how to pick up the order, with tips on how to avoid queuing.

Critical level: high

51

The page outlines further actions of the user, but they are not adequate to the selected delivery method.

Ulmart:

144

Page “Thank youfor your purchase”

Page 145: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

For example, Steam application suggests remote installation of the games after the purchase is complete.

After purchasing the confirmation page suggests installing the purchased games.

Steam:

The page provides detailed instructions on how to pick up the order.

Svyaznoy:

If e-goods or e-tickets have been purchased, the page shouldprovide instructions on receiving the purchase or options todownload the purchased item

51.1

145

Page 146: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion The page should tell the user what to do next and how to get in touch with the store's employees to receive the order.

146

Page 147: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ALL THE INFORMATION ON THE ORDER SHOULD BE

FORWARDED TO THE USER'S E-MAIL ADDRESS

All the stores tested in the survey forwarded a confirmation letter after the order was submitted. However, many letters provided scarce information on receiving the order.

For example, the letter that is sent upon making a purchase on the site of Sportmaster store contains no information on the receiving person or the method of delivery and payment.

The letter is also inadequate to the selected method of receiving the order. It explains the details of customer pickup, yet the user has opted for delivery.

Critical level: high

52

The user needs to be able to double-check the delivery date and time, phone number and order number in his/her e-mail box.

In the letter confirming the order, important information for customers was not specified.

Sportmaster:

147

Page “Thank youfor your purchase”

Page 148: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The letter of Citylink store repeats all the information on the delivery, payment and contact data of the receiving person. The letter also specifies the number and contents of the order, as well as its total cost.

The letter specifies all the information on the order.

Citylink:

Conclusion The letter forwarded to an e-mail address should contain all the information on the order: its contents, the contact data of the receiving person, the method and period of delivery, the method of payment and any other information the user may need.

148

Page 149: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

IF THE ORDER WAS PLACED DESPITE THE

CANCELLATION OF PAYMENT,

THE BUYER NEEDS TO BE NOTIFIED

In many stores the order still gets placed despite the cancellation or interruption of payment; the payment method changes to paying in cash upon receipt.

If the user isn't notified that the order has been placed, he may decide it has been cancelled and not expect it to be delivered.

For example, on the site of Utkonos store the order is still placed although online payment is cancelled. The user isn't notified of it, so (s)he may not expect it to be delivered. The store doesn't get in touch with the client, and the buyer is oblivious of the purchase until it is delivered by a courier.

During the survey the store's courier delivered the order two times although the payment was cancelled. Yet the page says that if the payment fails the order will be cancelled by default.

Critical level: low

53

On the sites of some stores the order is placed even if the payment was cancelled or declined. If the site doesn't let the user know the order was placed successfully, the latter msy think the order procedure was not complete.

After payment is cancelled the order is placed, but the user is not notified.

Utkonos:

149

Page “Thank youfor your purchase”

Page 150: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PAGE NEEDS TO BE READY TO PRINT

OR ALLOW FOR THE FUNCTION OF

PRINTING OUT INFORMATION

ON THE ORDER

That may be the case when the buyer is not the person receiving the item. The function may be helpful when the order contains numerous goods.

For example, on the site of Utkonos store the respondents noted that they wanted to print out the contents of the order to check it upon delivery. The page for order confirmation allows for this opportunity, but the name of the icon is inadequate to the purpose of the function, so the respondents were not able to find it.

Critical level: low, not for all the stores

54

The page allows for printing out the contents of the order, but its name is inadequate to the purpose of the function.

Utkonos:

To check the received good the user may want to print out the information on the cost and contents of the order.

150

Page “Thank youfor your purchase”

Page 151: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

GENERAL RECOMMENDATIONS

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 152: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

On the site of Lamoda after a failed payment one is redirected to the online store. The page displays information that the order is shaped and the manager will contact the client to specify the order.

Although the payment was cancelled, the order is submitted.

The operator gets in touch with the customer to specify the new method of payment.

Lamoda:

Conclusion The user needs to be notified that the order has been placed even though the payment wasn't made. The method of payment should be switched to “Payment in cash”, or an opportunity to change the method of payment or cancel the order should be offered.

If the payment fails, another method of payment may besuggested to the user instead of placing the orderautomatically

54.1

A consumer may have several bank cards or e-wallets which (s)he can use to pay for the order, so it's important to suggest other methods of payment to the consumer.

152

Page 153: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The document that the user may print out should contain information on the number of the order, the purchased goods, their cost, the receiving person, the time and address of delivery. If there are any extra requirements for the receiving person (for example, presenting an ID upon receipt), that should also be mentioned.

Conclusion The option of printing out the information on the order is necessary for the stores with large average quantity of goods in the order. The consumer uses the printed list to make sure all the goods have been delivered.

153

Page 154: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE ORDER PLACEMENT PROCEDURE SHOULD BE

STRAIGHTFORWARD AND PREDICTABLE

The site of Holodilnik store showcased the largest amount of navigation problems during order placement.

Critical level: high

Unclear and unpredictable procedure of order placement makes users confused and causes trouble with completing the order.

Generalrecommendations

154

After selecting the method of delivery the user is redirected to a page that wasn't part of the navigation chain before.

The current stage of order placement is not highlighted, and the user doesn't understand which section of the site it is in.

Each subsequent step of order placement doesn't appear in the navigation chain until proceeding to that section occurs.

The site presents three navigation types at once (see the screenshot below).

1.

2.

3.

4.

All these factors make the order placement procedure unpredictable and unclear to the user.

55

Page 155: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The sequence of steps is adequate to the one in the navigation chain, it is clear and predictable.

Aeroexpress:

Conclusion The process of order placement should be clear, straightforward and predictable, without any extra steps.

155

Page 156: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

156

The order placement procedure is puzzling and unpredictable; the user doesn't understand which navigation panel presents the sequence of order placement and has no idea how to return to the preceding stages.

Holodilnik:

On the site of Utkonos store to arrange for delivery the user needs to return to personal account to specify the new delivery address there. The steps of order placement with the site are visualized, yet don't fully present the sequence of necessary actions.

When placing an order with the site of Aeroexpress the procedure is straightforward and predictable, so the users have no trouble using the site.

Page 157: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE PROCESS OF ORDER PLACEMENT SHOULDN'T

HAVE ANY BUILT-IN EXTRA SCREENS THAT DON'T

CONTAIN IMPORTANT INFORMATION

The sites of many tested stores contain pages that seemed redundant to the respondents. They pointed out these screens make them feel like they have to perform extra actions, which is baffling.

Critical level: medium

Redundant screens built into the order placement procedure trigger the feeling of performing extra actions and are time-consuming for the user during order placement.

157

The “Add to cart” step shouldn't be presented as a separate pageon the site. If after adding an item to cart the user proceeds toanother page, that should be the cart page

56.1

On the site of M.Video store adding an item to cart is followed by “Confirm adding item to cart”. Most of the respondents took it for the cart page. After adding the second item to cart they were wondering why the cart contained just one item. The user is unable to start order placement from that page, not until (s)he proceeds to the cart.

The process of order placement has an extra step the users mistake for the cart.

M.Video:

On the site of Citylink store there is also a screen for adding the item to cart, but the page allows for skipping that stage of the cart and proceeding straight to order placement.

56

Generalrecommendations

Page 158: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

On the site of Ulmart store after filling out registration fields the user is directed to the page for completing registration, which requires entering more information. The screen seemed unnecessary to the users, it didn't feel like bringing them any closer to making a purchase.

Adding to cart is presented as a separate page, yet it allows for proceeding to order placement.

Citylink:

158

An extra page for providing information on the client is included into the order placement procedure, but the respondents felt like they could skip it.

Ulmart:

Conclusion Order placement should include as few steps as possible. Don't include redundant steps into the order placement procedure.

Page 159: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE USER NEEDS TO BE INFORMED THAT

THE COST OF THE ORDER MAY VARY

On the site of Ozon the user doesn't find out there's a delivery fee until the stage of selecting the delivery method. The delivery fee is specified only at the top part of the page and the user doesn't see it, yet notices the cost of the order has increased.

Critical level: high

One of the main reasons users don't complete their orders is hidden charges, such as a delivery fee or a service charge. Information on probable changes of cost should be presented as soon as possible in the course of order placement.

159

The cost of the order changes due to the delivery fee, but the buyer may overlook it.

Ozon:

The site of Enter has the same issue. The delivery fee isn't mentioned until the method, date and time of delivery are opted for.

57

Generalrecommendations

Page 160: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The delivery fee is specified only after the method, date and time of delivery are set.

Enter:

160

This issue also often came up on the sites selling tickets. All the sites have the so-called “service charge” usually amounting to 10% of the cost of the order, but the user learns about it only after adding tickets to cart and going through the long registration procedure.

The service charge is taken whenever a ticket is ordered; still it is not included into the price. The users don't learn about it until they add tickets to cart.

Ticketland:

Page 161: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

It's impossible to calculate the delivery fee in advance, but next to the price there is a comment that a delivery fee is not included.

Utkonos:

Often it's impossible to calculate extra costs, for example, when the delivery fee depends on the region or the time of delivery. In these cases you need to specify in the cart (or the item profile) that the price doesn't include delivery costs.

For example, on the site of Utkonos store the cost may depend on the time of delivery, and it's mentioned in the cart that the price doesn't include a delivery fee.

161

Conclusion Mention probable changes in the cost of the order in advance or let the user know that the cost may vary.

Page 162: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE MAIN NAVIGATION OF THE SITE SHOULD

BE HIDDEN DURING ORDER PLACEMENT

Most of the tested sites had no main navigation across the site during order placement. When navigation across the site remained on the page, the respondents got distracted and navigated away from their order to view the terms of delivery.

Holodilnik.ru keeps the main navigation across the site; below it offers navigation across personal account, and at the bottom there is navigation of the order placement procedure. Numerous distracting elements on the screen make order placement complicated.

Critical level: medium

After proceeding to the order placement page the user has already decided to make a purchase, and nothing should distract him/her from placing an order.

162

The site presents three navigation types: across the catalogue, personal account and order placement, all of them distracting the user.

Holodilnik.ru:

58

Generalrecommendations

Page 163: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

163

On the site of Svyaznoy the main navigation during order placement is hidden, and the user doesn't get distracted when placing an order.

The main navigation during order placement is hidden.

Svyaznoy:

Conclusion Hide the main navigation of the site and the catalogue during order placement; that will keep your customers focused on placing their order.

Page 164: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE SEQUENCE OF STEPS SHOULD BE

OBVIOUS FOR THE USER

On many of the tested sites the procedure was divided into stages presented on several pages. The names of the stages were often non-informative and provided poor guidance.

Critical level: medium

When the procedure of placing an order is clear and the steps are determined, it becomes more structured and predictable.

164

If placing an order is competed in a few actions, the sequenceof steps should be visualized on the page

59.1

The user should be confident which stage (s)he is on and which ones are to follow. Holodilnik.ru visualizes the steps; the page displays just the current and the previous steps of order placement.

The navigation chain presents just the current and the previous steps of order placement.

Holodilnik.ru:

On most of the other sites the order placement procedure is fully displayed in the navigation chain. For example, on the site of Utkonos store all the steps are presented on the page beforehand.

59

Generalrecommendations

Page 165: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Navigation across the section features all the steps of order placement.

Utkonos:

165

For example, on the site of Ulmart selecting the method of payment is available only after the order is placed. It's not obvious from the navigation of the order placement.

Navigation doesn't specify when selecting of payment method occur.

Ulmart:

The navigation chain should present all the stepsof order placement

59.2

On many online stores the stages of order placement had ambiguous or pointless names. For example, on the site of Buket.ru all the stages of order placement were titled “Placing your order Step Õ out of 3”.

The stages should be named clearly and adequately59.3

The steps have got non-informative inadequate names.

Buket.ru:

Page 166: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

If order placement is made up of several stages, these stages should be logically divided into a few blocks, such as “Select delivery method”, “Select payment method” etc. When the methods are not divided into stages, or the elements of one stage are present in another, users may be having a hard time trying to figure out what will be happening next and what they are supposed to do.

The most vivid example is the online store Buket.ru that we already mentioned. Information on the address of the receiving person is on the page for entering personal data, whereas selecting the time and date of delivery is on another screen. Clients who had no idea they would be able to choose the time of delivery, entered time and date into the “Notes” field at the stage of entering address. See the screenshot on the previous page.

166

The completed steps should be clickable. When returning tothe preceding stages of order placement, the completedsubsequent steps also should be clickable.

59.5

If the user wants to specify or correct some information in the course of order placement, most often there is only one option of going back to the preceding steps, with a “Back” button of the browser or a “Back” button on the page for order placement, but most of the respondents first tried to click on the name of the step in the navigation on top of the page.

For example, to correct time of delivery on the site of Utkonos all the users first were trying to return to the step through the navigation on top of the page.

The steps of order placement should be dividedinto clear stages

59.4

Page 167: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Information on further stages is presented in a caption that's hardly noticeable below the Continue button.

It is not displayed in the navigation chain, so users have no idea what will be going on at the next stages.

Buket.ru:

Information on further steps is presented only as a small-lettered grey caption below the Continue button. As the respondents didn't know they would be able to choose the date and time of delivery, many of them entered this data into the field for delivery address at the first stage of the order placement.

167

On the site of Utkonos, information on the stages of order placement is displayed both in the navigation chain and the Continue buttons.

The names of the sections are presented both in the navigation chain and the Continue buttons.

Utkonos:

Page 168: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

168

On the site of Citylink the steps of order placement are clickable, so users have no trouble returning to the previous steps.

The steps of order placement are clickable, so users have no trouble returning to the previous steps.

Citylink:

Conclusion If order placement is divided into a series of subsequent pages, this sequence should be displayed on the page and be obvious for the user. Each section should be clearly and appropriately titled. Going back to the previous stages of order placement should be facilitated by the Back button and the clickability of the titles.

Navigation on top of the page is unclickable, and users don't understand how they can return to the previous steps of order placement.

Utkonos:

Page 169: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE ELEMENTS OF SEPARATE STEPS OF ORDER

PLACEMENT SHOULD NOT TO BE MIXED UP

The user sees the order placement procedure as a series of particular stages: choosing an item, selecting a delivery method, selecting a payment method, payment, order confirmation, receiving the order. How many stages there are varies depending on the type of the item, delivery and payment. However, the sequence should remain clear for the user.

If a step is missed or the sequence is disrupted, the user may fail to locate the right option, spend too much time placing the order or fail to do it altogether.

Most often online sites present a clear sequence of order placement stages, they are not mixed up.

On the site of M.Video the delivery method is selected on the cart stage, and for each of the items it is required to select the delivery method. Most of the respondents couldn't find the button for selecting delivery method as it was located in an unusual area. Besides, the Continue button distracts the attention of users.

Critical level: high

If different stages of order placement are mixed up, users may doubt they get things right.

169

Selecting delivery method is on the cart page, users don't notice it.

M.Video:

When viewing the site with a mobile device the problem is aggravated by the fact that selecting a delivery method and “pay by card” option is over the bend of the screen.

The location of this option on the cart page is not obvious, and users overlook it.

60

Generalrecommendations

Page 170: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Edge of the screen, iPhone4S.

M.Video:

170

Selecting delivery method is below the cart and Place order button.

M.Video:

Selecting payment method by card is at the very bottom of the page.

M.Video:

Page 171: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

171

Other stores have got this problem, too. On the site of RIVEGAUCHE the delivery method is also selected on the cart page and is hardly noticeable.

Delivery method selected on the cart page.

RIVEGAUCHE:

On the site of buket.ru entering information on the delivery address and the receiving person is presented on the same page, and selecting date and time of delivery on the next one. As users expect to see all the details of delivery on the same page, they enter their preferences as to the time and date of delivery on the page in the field for adding address.

Selecting the date of delivery is not on the same screen with entering delivery address. Users don't expect to see it and enter extra information in the field of delivery address.

Buket:

Page 172: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion The stages of order placement should not to be mixed up or presented in an unexpected sequence.

172

Page 173: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Clicking on a Place order button the customer expects to complete the order, not to proceed to extra steps.

M.Video:

173

The names of the buttons should be relevant to the actionsthey perform

61.2

On the site of Utkonos when confirming a phone number the button confirming the entered number is named “Change”. All the respondents who tested the site noted they have no idea what will happen if they click on the button.

The name of the button is irrelevant to the actions it performs.

Utkonos:

Page 174: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE NAMES OF THE BUTTONS SHOULD BE

CLEAR AND ADEQUATE TO THEIR PURPOSE

Critical level: medium

Unclear, ambiguous or inadequate names for the buttons make the user struggle to figure out what the button is for, spend more time on order placement, return to the previous steps many times, or fail to complete the order altogether.

174

Too general or ambiguous names for the buttons shouldbe avoided

61.1

For example, on the site of Buket.ru the purpose of the buttons is captioned in small grey type below them instead of on the buttons. That leaves users wondering what to expect next.

The names of the buttons are inadequate to their purpose and to the page they direct to. The purpose of the button is captioned in small grey type below the button.

Buket.ru:

61

Generalrecommendations

Page 175: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Conclusion The names of the buttons should be adequate to the actions they perform. The name of the button should be unambiguous and definite.

175

Page 176: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

THE BUTTON OF THE MAIN ACTION SHOULD BE

VISUALLY HIGHLIGHTED IN COLOR ON THE PAGE

Critical level: high

When the main target action on the page is unnoticeable or lost against the background of brighter images, the user may spend too much time looking for it.

176

The main action should have a visual priority comparedto the other elements on the page

62.1

When placing an order users look for opportunities to select the right option and proceed with the order. Many people don't read what's written on the buttons.

In some cases it may be hard even locating the payment button. For example, in personal account of Onlime the payment button is absolutely unnoticeable and is lost against the background of brighter elements. The respondents spent a few minutes looking for it, and some just figured the page does not allow for payment and were trying to find it in other sections.

The button of the target action is not highlighted on the page and is lost against the background of brighter elements.

Onlime:

62

Generalrecommendations

Page 177: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

All the buttons on the pages look identical. The main action “Confirm order” is not highlighted on the page.

Buket.ru:

177

On the site of M.Video “Place your order” button is visually highlighted and noticeable on the page, as it is different from a less important button. Even without reading what's written on the button the client is able to locate the main action on the page.

“Place your order” button is visually highlighted on the page

M.Video:

Important actions should be placed to catch the user's eye62.2

On the site of RIVEGAUCHE when adding items to cart opting for additional characteristics does not catch the user's eye. That's why most of the respondents made the wrong choice as they couldn't find the option of selecting the bottle's size.

Page 178: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Selecting additional characteristics of the product does not catch the user's eye.

RIVEGAUCHE:

178

Conclusion The target action on the page should be visually highlighted and catch the user's eye. Besides, the work and design of target actions and elements should be characterized by integrity, as discrepancies between the elements of the page that look alike may cause difficulties when working with the site.

Page 179: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

“City” and “Metro” fields are auto-filled. As during auto-filling there's a probability of errors, the field may still be edited by the user.

Svyaznoy:

179

Conclusion Requesting optional information should be avoided as much as possible. Try to bring the number of fields to a minimum, auto-fill data where possible.

Page 180: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Before completing the purchase the user is asked for information that seems unrelated to the order.

RIVEGAUCHE, Citylinkand Ulmart:

THE SITE SHOULD NOT REQUEST REDUNDANT

INFORMATION FOR ORDER PLACEMENT

Critical level: medium

Filling out optional unnecessary fields seems like a waste of time to users, they often skip these fields.

180

Many respondents in the survey didn't fill out all the form fields saying that was unnecessary. Those who didn't notice the indication of whether the field is required for filling out said they'd rather not fill out numerous forms and they don't like sharing extra information with the site of an unknown store.

Yet many online stores request optional information (age, gender, year of birth). Users don't understand why this information is requested, as it seems redundant and doesn't bring them any closer to their purchase. Often users skip these fields.

The site should not request information that can be auto-filled63.1

A form for personal and optional contact information can be placed on a "Thank you for your purchase" page that comes up after the payment is complete.

The fields that may be auto-filled are quite a hassle at online stores. Lots of sites use such fields as “Metro station”, “Zip code” etc which can be defined automatically by the address entered by the user.

“Zip code” field makes users confused, causing them to think the order will be delivered by post.

63

Generalrecommendations

Page 181: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The city for delivery can be easily selected automatically. Still when providing delivery address it often has to be entered. Many online stores suggest selecting the nearest metro station after entering delivery address. This information can be defined automatically based on the address and is not necessary on the page.

The page contains “Zip code” field which is auto-filled, but still causes the respondents' doubts.

Ulmart:

181

To register with the application zip code is required. The respondents thought the order would be delivered by post.

Zara:

Even after selecting city on the main page of the site it still has to be entered.

M.Video:

Metro station is not selected automatically. Yet the city of delivery is auto-filled.

Enter:

Page 182: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

PAGES WITH AUTO-LINKS SHOULDN'T

FEATURE IMPORTANT INFORMATION

Critical level: high

If a page containing an auto-link to another site features important information, most likely the user won't have time to read it and will return to the page.

182

The page redirecting to the payment page often contains notification of redirection to a new page. On some sites this page contains important information on the order number and brief summary of the order.

On the site of Sportmaster the order complete page contains plenty of insignificant text and the order number. Yet the respondents returned to the page a few times to read the text and remember the order number as they were not sure it will be provided later.

The page redirecting to payment contains important information on the number of the order and also a lot of text.

Sportmaster:

Whereas On the site of Lamoda the redirecting page contains only large-size text informing that the order is accepted and in a few seconds the user will be redirected to payment.

64

Generalrecommendations

Page 183: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

The redirecting page contains minimal amount of information.

Lamoda:

183

Conclusion The redirecting page shouldn't contain important information except the number of the order. The page should notify that in some time the user will be redirected to the payment page.

Page 184: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ERROR NOTIFICATIONS SHOULD BE CLEAR

AND PROVIDE INSTRUCTIONS ON

HOW TO SOLVE THE PROBLEM

Critical level: high

Users sometimes commit errors when filling out forms for order placement. In these cases the user needs to know what's wrong and how to deal with it.

184

Error notifications should be highlighted on the page65.1

The field should be marked as erratic (highlighted by color, outline, or caption). Next to the field explanation should be provided.

On the screenshot below “Email address” field is erratically filled, that's why the Continue button is inactive. Yet the field is not highlighted. There is no understanding that one of the fields is erratic, so the user ends up feeling there's something wrong with the form.

Most often the problems are concerned with the words used to notify of errors, their appearance and also with the lack of data validation as it is being entered.

65

Generalrecommendations

Page 185: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

185

During checkup it also makes sense to indicate the data is entered correctly into the field, like on the screenshot below.

Error notifications should describe the problem, suggestoptions for solving it and alternative actions

65.3

Error notifications should be clear, concrete, and should use common words. They should be unambiguous and describe the presenting issue accurately. See more in the section “Entering card details”.

The data is checked right after proceeding to the next field.

M.Video:

The fields with pre-set amount of contents (e.g. bank card number or phone) should be checked after entering the last symbol into the field before the user has proceeded to the next one. For the fields with variable number of symbols it should occur after proceeding to the next field.

Conclusion The erratic field should be highlighted; the presenting issue should be explained, as well as instructions on how to solve it.

Page 186: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

“Email” field is erratic, but there is no indication of it on the page.

Citylink:

186

Data should be checked after each field is filled out,not after the form is submitted

65.2

Data should be checked after each field is filled out, not after the whole form is submitted. After filling out one field the user is still focused on the data, so it takes less effort to check the contents of the field and correct the error.

A good example was found on the site of M.Video, see the screenshot below.

The data is checked right after proceeding to the next field.

M.Video:

Page 187: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

LIST OF RECOMMENDATIONS

Appendix

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 188: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CART

188

Make sure there are no redundant steps and actions when adding items to cart

1

Information that an item is added to cart has to be obvious for the user

2

Information that an item is added to cart has to be obvious for the user.2.1

The button needs to react instantly when clicked on. After the first click the button needs to become inactive until there is feedback that the item has been added to cart.

2.2

Repeated clicking on “To cart” button shouldn't add the item to cart. Repeated clicking on the button should lead to the cart page.

2.3

The cart page should provide detailed information on goods3

The page needs to display the image of the item, and the image should be clickable. When clicking on the image either more detailed information on the item or a bigger photo of it should be displayed.

3.1

The name of the item should be clickable. When clicked, the page with its detailed description should be displayed.

3.2

The cart as well as the page of the item should provide information on whether the item is in stock.

3.3

If the item is available only in some stores, that information also should be displayed on the cart page.

3.4

The button to proceed with order placement needs to be visually highlighted on the page

4

The cart page should provide information on return policy5

The cart page should provide information on terms and cost of delivery

6

If the cost of delivery cannot be calculated on the cart page, an approximate delivery fee should be displayed next to the cost of the order, or a note that delivery costs are not included into the price.

6.1

If starting from a certain amount the order qualifies for free delivery, information on that needs to be given on the cart page.

6.2

Page 189: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

189

An opportunity to use a discount or promo code should be displayed on the cart page

7

The box for entering a gift card, discount or promo code should not be open by default

8

Information on how a promo code can be obtained should be provided next to the option of entering it

9

The option of removing an item from the cart should be offered next to the button changing the quantity of items in the cart.

12.1

The opportunity to remove an item from the cart should be offered as a separate function, not as changing the quantity of items in the cart.

12.2

The box for entering a promo code or loyalty card number should be appropriately named

10

Goods need to be stored in the cart until order placement is complete

11

The opportunity to remove items from cart should be offered by default on the cart page

12

SIGNING IN

The site needs to allow for an opportunity to place orders without registration

13

The site needs to allow users to place orders without confirming contact information.13.1

The opportunity to order without registration needs to be noticeable on the page.13.2

The user may be registered automatically based on the entered contact data

14

When buying digital goods registration needs to be automatic, in the background mode upon the first purchase.

14.1

If registration is automatic, it's necessary to notify the user of it on the page of the order confirmation and by e-mail.

14.2

The capacity of ordering “without registration” should not be limited15

Page 190: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

190

All the ways of signing in to the site have to be noticeable and available on the same page

16

If some method of payment is unavailable without registration, it's necessary to notify of it in advance.

15.1

Registration has to lead to automatic sign-in, and then the order placement should continue.

17.1

Registration needs to be built into the process of order placement 17

The advantages of various sign-in types need to be described on the page.16.1

If it's required to confirm the contact data for registration, this stage needs to be built into the process of registration.

17.2

After registration is complete the contents of the cart should be intact.17.3

Provide for opportunity to register with the site after the order is placed using the entered information

18

Website login should be e-mail address or phone number19

The box for signing in should be named “e-mail address” or “phone” rather than “login”.19.1

When attempting to register with the e-mail address that's already been registered, it's necessary to suggest signing in to the site or use a password reminder function

20

On the page for logging in and entering password an opportunity to restore the forgotten password should be provided for.

20.1

To save the user's time the logging in field when proceeding to signing in should be filled out by default.

20.2

Next to the field for entering contact data clarifying information should be displayed

21

Sign-up for newsletter and promotional materials box should be unchecked by default. We don't recommend using compulsory newsletter sign-up.

21.1

Page 191: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

CHOOSING THE METHOD OF PAYMENT

191

The method of payment should be appropriately named22

The method of payment should be named clearly.22.1

The methods of payment should be categorized: advance fee, payment upon receipt and on credit.

22.2

The methods of payment should be sorted by rating23

The methods payment should be divided into meaning-based groups.23.1

The most popular method of payment can be selected by default.23.2

If using the site implies frequent or regular purchases (e.g. e-goods, food delivery etc.), it's preferable to give users the opportunity to save the payment data and offer that particular method by default.

23.3

The user needs to be notified that the total cost of the order may vary depending on the method of payment

24

The methods of payment can be accompanied by the icons and logos of payment services

25

Don't suggest selecting a payment system when paying by card26

CHOOSING THE METHOD OF DELIVERY

The number of fields for entering delivery address should be minimal27

Necessary information should be defined automatically. If there is a risk of an error, let the user edit this data.

27.1

Pickup points should be displayed in two ways: on the map and as a list

28

Pickup points can be sorted alphabetically or by the metro station. When there are many stores, metro lines can be color-coded.

28.1

Page 192: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

192

The field for entering address should allow for entering it by hand and selecting from a list

29

The list of addresses should contain no identical street names and building numbers.29.1

The details of the pickup point should say whether the good is available

30

The approximate delivery cost should be specified at the stage of selecting the method of delivery

31

In the case of advance fee note that the payer and the receiver can be different people

32

The field for entering the receiver's name should be provided only after selecting the advance payment method.

32.1

The field for entering the receiver's name should allow for pointing out that the receiver and the payer are the same person.

32.2

Request as little information about the receiver as possible.32.3

ORDER CONFIRMATION

The order confirmation page should provide all the necessary details of the order

33

The order confirmation page should be relevant to the selected delivery, payment and pickup method.

33.1

The confirmation stage should allow for proceeding to edit information on the order

34

ENTERING CARD DETAILS AND PAYMENT

The format for entering the bank card details should match that of the card

35

For the cards with 16 digits the card number when entered should be displayed in groups of 4 digits each.

35.1

The form should provide for automatic proceeding to the next field, or division into separate boxes in the field for entering the card number shouldn't be used.

35.2

Page 193: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

193

The format of entering the card details should be adjusted to the card type.35.3

Month should be entered into a field, not selected from a dropdown list.35.4

The format of entering month should match the format on the card. Month should be displayed in two numbers.

35.5

The format of entering data on the card validity (year) should be limited to two digits.35.6

First and last names should be entered into one field.35.7

The name should automatically be entered in capital letters. The letters entered in Cyrillic should automatically be replaced by equivalent Latin symbols.

35.8

The bank card should be visualized on the payment page36

Entering the card details should be aligned with the sequence of data on the card

37

Entering the card data should not be interrupted by requesting extra information.37.1

The fields of the form should be visually consolidated and highlighted on the page.37.2

When using the Tab key to proceed to the next field the sequence of proceeding should match the sequence of viewing and filling out the fields.

37.3

Request necessary information only once38

The site should request only necessary information39

Don't request information that can be defined automatically.39.1

The fields of the forms should be accompanied by clear captions and contain cues on how to fill them in

40

Don't use rare and technical terms in the names of the fields and cues.40.1

The caption to the field should have a cue on the format of entering data.40.2

When entering information in the wrong format, don't interrupt the work of the user; the data needs to be automatically transformed into the right format.

40.3

The cue on how to fill out the field should be placed next to the entry.40.4

Page 194: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

194

The “Name” field should be accompanied by instructions on how to pay by non-personalized card.

40.5

The size of the field should be adequate to the entered data41

The card details should be entered on the site of the store or in the application

42

The payment page should provide information on the cost of the order and the goods in the cart. It's preferable to allow for an opportunity to contact the store on the payment page.

42.1

When going to the payment page outside the store, that page needs to stick to the original design. The payment page should also display the cost of the order and its contents.

42.2

The payment page should allow for returning to the site of the store without payment

43

The payment page should give information on the payment security44

The form for entering the card details should be placed on the page with secure connection.

44.1

The page of the payment form should feature the logos of payment systems or the icons of 3DSecure services (e.g., MasterCard SecureCode).

44.2

If 3DSecure checkup is missing, you need to notify of it on the page for entering the card details.

44.3

If fields are filled out erratically, feedback should be swift, informative and noticeable

45

Validating the accuracy of the information entered into fields should be done when filling out, not after submitting forms.

45.1

The erratic field needs to be visually highlighted on the page. Notifications of errors should appear next to the field where the error has occurred.

45.2

After submitting the form the information entered into the field has to be saved, even if some field was filled out with errors.

45.3

Error notifications on the payment page should explain the error and suggest opportunities for correcting it.

45.4

Page 195: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

195

Feedback on the errors when making a payment should be clear, should not contain technical terms and be adequate to the problem that occurred

46

Cancellation of the operation should be followed by proceeding to the page that explains why the payment was declined.

46.1

The instructions on error correction should suggest probable reasons and ways of solving the problem.

46.2

When additional authentication based on a one-time SMS password is missing, information that the payment failed should be provided.

46.3

PAGE FOR GATEWAY OF THE ACQUIRING BANK

On the page for entering a one-time password information on the sum of transaction and the field for entering password should be highlighted

47

The page should highlight information on the sum of transaction and the field for entering one-time password.

47.1

The action of confirming the operation should be highlighted on the page.47.2

The Confirm button should be placed to the right of the field for entering one-time password.

47.3

The page for entering one-time password should contain guidelines on further actions

48

The page should present information that a one-time password will be sent and guidelines on further actions.

48.1

Don't use rare or technical terms.48.2

Confirmation code should be placed at the beginning of the text of an sms

49

“THANK YOU FOR YOUR PURCHASE” PAGE

The page for order confirmation should display all the information on the order

50

The page for confirming the order should inform the user of further events and actions

51

Page 196: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

196

If e-goods or e-tickets were purchased, the page should provide instructions on receiving the purchase or opportunities to download the purchased item.

51.1

GENERAL RECOMMENDATIONS

The order placement procedure should be linear and predictable55

The Add to cart step shouldn't be presented as a separate page on the site. If after adding an item to cart one proceeds to another page, that should be the cart page.

56.1

The user needs to be informed that the cost of the order may vary57

All the information on the order should be sent to the user's e-mail52

If the order was placed despite the cancellation of payment, the buyer needs to be notified

53

The page has to be adapted for print or allow for the option of printing out information on the order

54

The process of order placement shouldn't have any built-in extra screens that don't contain important information

56

During order placement the main navigation of the site should be hidden

58

The sequence of steps should be obvious for the user59

If placing an order is completed in a few actions, the sequence of steps should be visualized on the page.

59.1

The navigation chain should present all the steps of order placement.59.2

The stages should be named clearly and adequately.59.3

The steps of order placements should be divided into clear stages.59.4

Page 197: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

197

Too general or ambiguous names for the buttons should be avoided.61.1

Elements of separate steps of order placements should not be mixed up

60

The names of the buttons should be clear and adequate to the action they imply

61

The completed steps should be clickable. When returning to preceding stages of order placement, the completed subsequent steps also should be clickable.

59.5

The names of the buttons should be relevant to the actions they perform.61.2

The main action should have a visual priority compared to other elements on the page.62.1

The button of the main action should be visually highlighted in color on the page

62

Important actions should catch a user's eye.62.2

The site should not request information that can be defined by default.63.1

The site should not request redundant information for order placement

63

Pages with auto-links shouldn't feature important information 64

Error notifications should be clear and provide instructions on how to solve the problem

65

Error notifications should be highlighted on the page.65.1

Data should be checked after each field is filled out, not after the form is submitted.65.2

Error notifications should describe the problem, suggest options for solving it and alternative actions.

65.3

Page 198: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

SURVEY METHODS

Appendix

IntroductionCartSigning inChoosing the method of paymentChoosing the method of deliveryOrder confirmationEntering card detailsPage of the acquiring bank's gatewayPage “Thank you for your purchase”General recommendations

AppendixList of recommendationsMethods of survey

Page 199: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

INFORMATION ON THE RESPONDENTS

The survey involved 51 participants aged 21 - 60. The average age of participants is 34.5 y.o.. There were 28 women and 23 men.

The respondents were divided into several groups: by age, gender and experience of paying by bank card online.

The survey includes 28 women and 23 men divided into 4 age groups:

The respondents were also divided into three groups depending on their experience of using bank card to pay for their purchases online.

The group of experienced users paying by card several times a month included 23 people. The group paying for purchases several times a year included 17 people. The group of inexperienced users paying for purchases less than once a quarter of year included 11 people.

15 respondents aged 18 - 25

17 aged 26 - 35

10 aged 36 - 45

9 respondents aged 46 - 52

15

17

10

9

METHOD AND DESCRIPTION OF TEST SESSION

During the survey a respondent was suggested placing an order online and paying for it by card.

The suggested tasks varied depending on the site, the device used for testing, and real life situation of the respondent. In some cases the respondents chose items at their personal discretion, in others the items were determined by the moderator.

199

Page 200: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Buket.ru

All the information needed to place an order online was also provided on a sheet of paper. Each respondent was provided with an email address, password and phone number, the same for all the tasks.

Each respondent was notified that one of the purchases made during the survey will be real. The bought item was delivered to one of the employees of the company conducting the survey.

Each respondent worked with two services (from 2 to 4). The testing lasted from 1.5 to 2 hours depending on the speed of the respondent's work.

The respondents were asked to say out loud what comes to their mind, to ponder what seemed inconvenient and hindered their work. When a respondent faced difficulties working with the site but didn't comment his/her actions, the moderator came up with specifying open questions to find out the reasons for presenting issues. If a respondent was having a hard time sorting out some issues, the moderator offered help in searching for the product or placing an order, but the task wasn't considered complete by the respondent.

All the test sessions were conducted in the office of USABILITYLAB company in Moscow. Compensation for participation amounted to 1000 rubles.

Your boss is having her birthday soon. Your colleagues andyou decided to arrange for a surprise and give her flowers.You decided to choose and order flowers at buket.ru. Thebirthday is on 7 July, and you want to have the flowersdelivered by the start of the working day.Let's use the site buket.ru to order flowers for her

M.Video

Kassir.ru

Your vacuum cleaner has broken down, and you want to buya new one. You have already been at the store and chosenthe right model, now you want to order the vacuum cleanerto be delivered to your home. Let's use the site of M.Videostore to order the vacuum cleaner

Your friend and you are going to the theatre and want to buytickets for King Lear at the Mossovet Theatre. You don't knowexactly how much the tickets cost, but you are willing to paymaximum 4000 rubles for both tickets.

DEVICES

The respondents used three devices: PC, tablet iPad 4 and smartphone iPhone 4S.

200

Some tasks suggested to the respondents:

Page 201: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

Sports

goods

Clothes

Flowers

Hypermarket

Books

Games

Newspaper

Movies

Tickets

to events

Transport

Communications

Beauty

care

http://ulmart.ru

http://sportmaster.ru

http://zara.com.ru

http://lamoda.ru

http://jcrew.com

http://rivegauche.ru

http://boots.com

http://buket.ru

http://ozon.ru

http://thehut.com

http://litres.ru

http://wargaming.net

http://store.steampowered.com

http://vedomosti.ru

http://ivi.ru

http://kassir.ru

http://ticketland.ru

http://afisha.ru

http://livingsocial.com

http://aeroexpress.ru

http://onlime.ru

Dengi Online

Uniteller

Payture

MasterPass

MasterPass

Promsvyazbank

Assist

MasterPass

PayOnline

Yandex.Dengi

Russki Standart

Alfa-bank

Sberbank

Alfa-bank

Rambler kassa

MasterPass

RuRu

Chronopay

3

3

3

2

3

2

3

2

2

2

2

1

2

2

3

3

2

1

2

3

3

1

3

2

3

2

2

1

1

1

1

1

2

1

2

3

2

3

2

2

3

3

2

2

1

1

3

1

2

1

Ulmart

Sportmaster

ZARA

Lamoda

JCrew

RIVEGAUCHE

Boots

Buket

Ozon

The Hut

Liters

Wargaming

Steam

Vedomosti

IVI

Kassir

Ticketland

Afisha

LivingSocial

Aeroexpress

Onlime

201

Area Name of the store Website address Processing D T M

Page 202: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

PERSONAL AND BANK INFORMATION

All the respondents who participated in the survey had at least 6 months of experience of working with Apple devices. By default all the users were offered to work with Chrome browser. Some respondents, however, switched to Safari browser while working with mobile devices, as it seemed more familiar to them.

All the data needed to place an order were provided by the moderator, although in some cases the respondents forgot about it and used their personal information, phone numbers, email addresses and loyalty card numbers to place their orders.

Purchases were also paid for by the bank cards provided by the moderator.

TESTED SERVICES

The chart lists the services tested in the survey and shows how many respondents conducted operations on different platforms.

Due to the specific character of certain sites testing was conducted just on some of the platforms.

Testing of sites is highlighted in green, testing of mobile sites – in blue, testing mobile applications – in yellow. The boxes contain information on how many respondents tested the service on some of the platforms.

Area

Ordering food

Ordering food

Appliances

and electronics

Name of the store Website address

http://utkonos.ru

http://foodpanda.ru

http://holodilnik.ru

http://mvideo.ru

http://enter.ru

http://citilink.ru

http://svyaznoy.ru

Processing

Sberbank

PayU

Chronopay

Gazprombank

Robokassa

Chronopay

Promsvyazbank

D

4

3

3

3

3

3

3

T

3

3

3

3

3

3

3

M

3

3

3

3

2

3

3

Utkonos

Foodpanda

Holodilnik

M.Video

Enter

Citylink

Svyaznoy

202

Page 203: THE PROCESS OF PAYMENT BY BANK CARD ONLINE

The process of payment by bank card online. Review and best practices

ON THE AUTHORS

Ruslan KryuchkovGeneral concept and planning the survey

Natalia Razheva Project manager on part of USABILITYLAB

Konstantin Abramov

Evgeniya Petrova

Idea generator

Project manager on part of MasterCard

Maria KocharovaAndrey StolyarovTesting and writing the report

Elena LyakhDesign