MasterCard: Процесс оплаты банковской картой в интернете

Полный чек-лист корзины интернет-магазина

Плохо:

• Обязательна регистрация
• Небезопасная и малознакомая платежная система
• Сложный и запутанный процесс оформления заказа
• Большое количество полей обязательны к заполнению
• Сумма заказа увеличивается из-за платной доставки
• Сайт не адаптирован к мобильным устройствам

Корзина интернет-магазина

1. Этап добавления товара в корзину не должен содержать лишних шагов и действий (Критичность: низкая)
2. Информация о том, что товар добавлен в корзину, должна быть очевидна для пользователя (Критичность: средняя)

   - Кнопка добавления в корзину должна визуально меняться при добавлении нового товара.

   - Кнопка должна мгновенно реагировать на нажатие. После первого нажатия на кнопку, она должна становиться неактивной до момента появления обратной связи о добавлении товара в корзину.

   - Повторное нажатие на кнопку «В корзину» не должно добавлять товар в корзину. Повторное нажатие на кнопку должно осуществлять переход на страницу корзины.

3. На странице корзины должна быть представлена подробная информация о товарах (Критичность: высокая)

   - На странице должно быть представлено изображение товара. Изображение товара должно быть кликабельным. При нажатии на изображение должна открываться либо подробная информация о товаре, либо увеличенная фотография товара.

   - Наименование товара должно быть кликабельным. При нажатии должна открываться страница с его подробным описанием.

   - В корзине, как и на странице товара, должна быть представлена информация о наличии товара.

   - Если товар есть только в нескольких магазинах, информация об этом также должна присутствовать на странице корзины.

4. Кнопка продолжения оформления заказа должна быть визуально выделена на странице (Критичность: средняя)

   - Действие, которое произойдет при нажатии на кнопку, должно быть очевидно для пользователя.

5. На странице корзины должна быть информация об условиях возврата (Критичность: средняя)
6. На странице корзины должна быть информация об условиях и стоимости доставки (Критичность: средняя)

   - Если рассчитать стоимость доставки на странице корзины невозможно, рядом с суммой заказа должна быть указана примерная стоимость доставки или стоять пометка о том, что сумма указана без стоимости доставки.

   - Если начиная с определенной суммы заказа доступна бесплатная доставка, информация об этом должна присутствовать на странице корзины.

7. Возможность воспользоваться скидкой или промокодом должна находиться на странице корзины (Критичность: средняя)
8. Поле ввода подарочной карты, промокода или скидки не должно быть открыто по умолчанию (Критичность: низкая)
9. Информация о том, как получить промокод, должна быть представлена рядом с возможностью его ввести (Критичность: низкая)
10. Наименование поля для ввода промокода или карты лояльности должно передавать суть поля (Критичность: низкая)
11. Товары должны сохраняться в корзине до завершения оформления заказа (Критичность: высокая)
12. Возможность удаления товара из корзины должна по умолчанию присутствовать на странице корзины (Критичность: средняя)

    - Возможность удаления товара из корзины должна находиться рядом с кнопкой изменения количества товаров в корзине.

    - Возможность удаления товара из корзины должна быть представлена отдельной функцией, а не изменением количества товаров в корзине.

Авторизация и регистрация

1. На сайте должна быть реализована возможность заказа без регистрации (Критичность: средняя)

   - На сайте должна быть реализована возможность заказа без подтверждения контактной информации.

   - Возможность заказа без регистрации должна быть заметна на странице.

2. Регистрация пользователя может осуществляться автоматически на основании введенных контактных данных (Критичность: средняя)

   - При покупке электронных товаров регистрация должна происходить автоматически, «фоново» при первой покупке.

   - Если регистрация происходит автоматически, необходимо сообщать об этом пользователю на странице подтверждения заказа и в письме на электронную почту.

3. Функционал заказа «без регистрации» не должен быть ограничен (Критичность: средняя)

   - Если какой-то из видов оплаты не доступен без регистрации, необходимо сообщать об этом заранее.

4. Все способы авторизации на сайте должны быть заметны и доступны на одной странице (Критичность: средняя)

   - На странице должны быть описаны преимущества различных типов авторизации.

5. Регистрация должна быть встроена в процесс оформления заказа (Критичность: средняя)

   - Регистрация должна привести к автоматической авторизации, после чего необходимо продолжить оформление заказа.

   - Если для регистрации необходимо подтвердить контактные данные, этот этап также должен быть встроен в процесс регистрации.

   - После завершения регистрации содержимое корзины должно сохраняться.

6. Предоставляйте возможность зарегистрироваться на сайте после оформления заказа, с использованием той информации, которую ввел пользователь (Критичность: высокая)
7. Логин для входа на сайт должен быть адресом электронной почты или номером телефона (Критичность: высокая)

   - Поле для авторизации должно называться не «Логин», а «Адрес электронной почты» или «Телефон».

8. При попытке регистрации с уже зарегистрированным адресом электронной почты, необходимо предложить авторизоваться на сайте или воспользоваться функцией напоминания пароля (Критичность: низкая)

   - На странице ввода логина и пароля для входа на сайт должна быть предоставлена возможность восстановления забытого пароля.

   - Для экономии времени пользователя, логин при переходе к авторизации должен быть по умолчанию заполнен.

9. Рядом с полем ввода контактных данных должна присутствовать уточняющая информация (Критичность: средняя)

   - Опция подписки на новости и акции должна быть по умолчанию снята. Не рекомендуется использовать принудительную подписку на рассылку.

Выбор способа доставки

1. Название способа оплаты должно передавать его суть (Критичность: средняя)

   - Название вида оплаты должно быть однозначным.

   - Варианты способов оплаты должны быть сгруппированы: предоплата, оплата при получении товара и кредит.

2. Способы оплаты должны быть отсортированы по популярности (Критичность: низкая)

   - Способы оплаты должны быть разделены на смысловые группы.

   - Самый популярный способ оплаты может быть выбран по умолчанию.

   - Если использование сервиса предполагает частые или регулярные покупки (например, электронные товары, доставка еды и т.п.), желательно предоставлять пользователям возможность сохранять данные платежа и по умолчанию предлагать именно этот способ.

3. Пользователь должен быть предупрежден о возможном изменении общей суммы заказа при разных способах оплаты (Критичность: высокая)
4. Рядом со способами оплаты можно располагать пиктограммы и логотипы платежных сервисов (Критичность: низкая)
5. Не следует предлагать выбор платежной системы при выборе способа оплаты банковской картой (Критичность: низкая)

Выбор способа оплаты

1. Количество полей ввода в адресе доставки должно быть минимизировано (Критичность: средняя)

   - Необходимая информация должна быть по возможности определена автоматически. Если при автоматическом определении есть вероятность ошибки – позволяйте пользователю редактировать эти данные.

2. Для пунктов самовывоза должны быть доступны два способа отображения: на карте и списком (Критичность: высокая)

   - Пункты могут быть отсортированы по алфавиту, по названию станции метро. При большом количестве магазинов можно использовать цветовую индикацию линий метро.

3. Поле ввода адреса должно позволять ввод адреса вручную и выбор из списка адресов (Критичность: средняя)

   - В списке адресов не должно быть дублирующихся названий улиц и номеров домов.

4. В краткой информации о пункте самовывоза должна быть представлена информация о наличии товара (Критичность: средняя)
5. Ориентировочная стоимость доставки должна быть указана на этапе выбора способа доставки (Критичность: высокая)
6. При предоплате необходимо отмечать, что плательщик и получатель могут быть разными людьми (Критичность: низкая)

   - Поле ввода имени получателя должно быть предоставлено только после выбора предоплать.

   - Рядом с полем ввода имени получателя должна быть представлена возможность отметить, что получатель и плательщик одно лицо. Формулировка должна быть понятна и очевидна для пользователя.

   - По возможности не запрашивайте дополнительную информацию о получателе.

Подтверждение заказа

1. На странице подтверждения заказа должна быть представлена вся необходимая информация о заказе (Критичность: средняя)

   - Страница подтверждения заказа должна по содержанию соответствовать выбранному способу доставки, оплаты и получения товара.

2. На этапе подтверждения должна быть возможность перейти к редактированию информации о заказе (Критичность: средняя)

Ввод реквизитов карты и оплата

1. Формат ввода данных банковской карты должен соответствовать их формату на карте (Критичность: средняя)

   - Для карт с 16 цифрами номер карты должен отображаться при наборе блоками по 4 цифры.

   - В форме должен быть реализован автоматический переход в следующее поле, либо не использовать разделение на отдельные ячейки в поле ввода номера карты.

   - Формат ввода данных карты должен изменяться в соответствии с типом карты.

   - Ввод месяца должен быть реализован полем ввода, а не выпадающим списком.

   - Формат ввода месяца должен соответствовать формату на карте. Месяц должен быть введен двумя цифрами.

   - Формат ввода данных о сроке действия карты (год) должен быть ограничен двумя цифрами.

   - Имя и фамилия должны быть указаны в одном поле.

   - Имя должно автоматически набираться заглавными буквами. Введенные в кириллической раскладке буквы должны автоматически заменяться на соответствующие им на клавиатуре латинские символы.

2. Банковская карта должна быть визуализирована на странице оплаты (Критичность: средняя)
3. Ввод реквизитов карты должен соответствовать последовательности информации на карте (Критичность: низкая)

   - Ввод информации с банковской карты не должен прерываться запросом дополнительной информации.

   - Поля форм на странице должны быть визуально объединены и выделены.

   - При использовании клавиши Tab для перехода в следующее поле последовательность переходов также должна соответствовать последовательности просмотра и заполнения полей.

4. Запрашивайте необходимую информацию только один раз (Критичность: средняя)
5. Сервис должен запрашивать только необходимую информацию (Критичность: средняя)

   - Не запрашивайте информации, которую можно определить автоматически.

6. Подписи к полям форм должны быть понятны и содержать подсказки по заполнению (Критичность: средняя)

   - Не используйте низкочастотных и технических терминов в наименованиях полей и подсказках.

   - В пояснении к полю должна быть подсказка о формате ввода информации.

   - При вводе информации в неверном формате не нужно прерывать работу пользователя, данные должны быть автоматически переведены в нужный формат.

   - Подсказка по заполнению поля должна располагаться рядом с полем ввода.

   - Рядом с полем «Имя» должна быть представлена инструкция по оплате неименной картой.

7. Размер полей должен соответствовать вводимой в них информации (Критичность: средняя)
8. Ввод реквизитов карты должен осуществляться на сайте магазина или в приложении (Критичность: низкая)

   - На платежной странице должна быть представлена информация о сумме заказа и товарах в корзине.

   - Желательно предоставлять возможность связаться с магазином на платежной странице.

   - При переходе на платежную страницу вне магазина, на ней должен сохраняться стиль оформления. Также на платежной странице должна быть представлена информация о сумме заказа и его составе.

9. На платежной странице должна быть реализована возможность возврата на сайт магазина без оплаты (Критичность: средняя)
10. На платежной странице должна быть представлена информация о безопасности платежа (Критичность: средняя)

    - Форма ввода реквизитов карты должна находиться на странице с безопасным соединением.

    - На странице формы оплаты должны присутствовать логотипы платежных систем или пиктограммы сервисов двухфакторной аутентификации (например, MasterCard SecureCode).

    - При отсутствии проверки через 3DSecure необходимо предупреждать об этом на странице ввода реквизитов карты.

11. Обратная связь о неверном заполнении полей должна быть оперативной, информативной и заметной (Критичность: высокая)

    - Проверка корректности введенной в поля информации должна производиться во время заполнения, а не после отправки формы.

    - Поле, заполненное ошибочно, должно быть визуально выделено на странице. Сообщения об ошибках должны находиться рядом с полем, в котором совершена ошибка.

    - После отправки формы введенная в поля информация должна сохраняться, даже если некоторые поля были заполнены неверно.

    - Сообщения об ошибках на платежной странице должны отражать причину возникшей ошибки и предлагать возможности для ее исправления.

12. Обратная связь об ошибках в проведении платежа должна быть понятной, не содержать технических терминов и соответствовать возникшей проблеме (Критичность: высокая)

    - При отмене операции должен происходить переход на страницу с информацией об отклоненном платеже.

    - В инструкции по исправлению ошибки должна быть представлена информация о возможных причинах и способах устранения проблемы.

    - При отсутствии дополнительной аутентификации через одноразовый СМС-пароль должна предоставляться информация о том, что платеж не прошел.

Страница шлюза банка-эквайера

1. На странице ввода одноразового пароля информация о сумме списания и поле ввода пароля должны быть выделены (Критичность: низкая)

   - На странице должна быть выделена информация о сумме списания и поле ввода одноразового пароля.

   - Действие подтверждения операции должно быть выделено на странице.

   - Кнопка подтверждения должна находиться справа от поля ввода одноразового пароля.

2. На странице ввода одноразового пароля должна быть инструкция по дальнейшим действиям (Критичность: средняя)

   - На странице должна быть представлена информация о том, что будет выслан одноразовый пароль и инструкции по дальнейшим действиям.

   - Не используйте низкочастотные и технические формулировки.

3. Код подтверждения должен находиться в начале текста смс-сообщения (Критичность: низкая)

Страница «Спасибо за покупку»

1. На странице подтверждения заказа должна быть предоставлена вся информация о заказе (Критичность: высокая)
2. На странице подтверждения заказа должна быть представлена информация о дальнейших событиях и действиях пользователя (Критичность: высокая)

   - Если куплены электронные товары или электронные билеты, на странице должна присутствовать инструкция по получению покупки или возможность скачать приобретенный товар.

3. Вся информация о заказе должна быть продублирована на электронную почту пользователя (Критичность: высокая)
4. Если заказ был оформлен несмотря на отмену оплаты, необходимо уведомить об этом покупателя (Критичность: низкая)
5. Страница должна быть адаптирована для печати или на ней должна присутствовать функция печати информации о заказе (Критичность: низкая, актуально не для всех магазинов.)

   - Если оплата не проходит, можно не оформлять заказ автоматически, а предложить пользователю выбрать другой вариант оплаты.

Общие рекомендации

1. Процесс оформления заказа должен быть линейным и предсказуемым (Критичность: высокая)
2. В процесс оформления заказа не должны быть встроены дополнительные экраны, не содержащие важной информации (Критичность: средняя)

   - Шаг добавления товара в корзину не должен быть реализован отдельной страницей на сайте. Если после добавления товара в корзину осуществляется переход на другую страницу – это должна быть страница корзины.

3. Пользователю должна быть предоставлена информация о возможном изменении суммы заказа (Критичность: высокая)
4. Во время оформления заказа основная навигация сайта должна быть скрыта (Критичность: средняя)
5. Последовательность шагов должна быть очевидна для пользователя (Критичность: средняя)

   - Если оформление заказа совершается в несколько действий, последовательность шагов оформления заказа должна быть визуализирована на странице.

   - В навигационной цепочке должны быть представлены все шаги оформления заказа.

   - Названия этапов должны быть понятны и отражать их суть.

   - Шаги оформления заказа должны быть разделены на четкие этапы.

   - Уже пройденные шаги оформления заказа должны быть кликабельными. При возврате на предыдущие этапы оформления заказа, уже пройденные следующие шаги также должны быть кликабельными.

6. Элементы отдельных шагов оформления заказа не должны быть смешаны (Критичность: высокая)
7. Названия кнопок должны быть однозначными и передавать суть совершаемого действия (Критичность: средняя)

   - Не рекомендуется использовать слишком общие или неоднозначные названия кнопок.

   - Наименования кнопок должны соответствовать выполняемым ими действиям.

8. Кнопка основного действия должна быть визуально выделена на странице (Критичность: высокая)

   - Основное действие должно иметь визуальный приоритет над остальными элементами страницы.

   - Важные действия должны располагаться на траектории движения глаза пользователя.

9. Сервис не должен запрашивать необязательной для оформления заказа информации до завершения покупки (Критичность: средняя)

   - Сервис не должен запрашивать информацию, которую можно определить автоматически.

10. На страницах с автопереходом не должно быть представлено важной информации (Критичность: высокая)
11. Сообщения об ошибках должны быть понятны и содержать рекомендации по устранению проблемы (Критичность: высокая)

    - Сообщения об ошибках должны быть выделены на странице.

    - Проверка корректности введенных в поле значений должна производиться после заполнения каждого поля, а не после отправки формы.

    - Формулировки ошибок должны описывать возникшую проблему, предлагать варианты ее устранения и альтернативные способы решения задачи.

Скачать полное руководство можно по ссылке: рекомендации MasterCard

Требования к корзине безусловно являются одними из важных коммерческих факторов, но есть и другие относящиеся к оптимизации самих карточек товаров.

Связаться в Telegram

Следующие страницы вас также могут заинтересовать:

• Робототехника
• SEO-продвижение образовательного сайта: 7 лет — от старого HTML до AI Search
• Паллетирование: что это такое, технологии, оборудование и роботизация
• Промышленные роботы: что это, виды, устройство и применение
• Машинное зрение в робототехнике: что это, как работает и где применяется

Обновлено: 12.06.2021