MasterCard и UsabilityLab провели исследование процесса оплаты банковской картой в 24 российских сервисах, 14 платежных провайдерах и банках, и сформировала рекомендации по юзабили для интернет-магазинов.
AD публикует выжимку из исследования, а также мнение представителей индустрии.
Около 68% заказов в интернет-магазинах не завершаются покупкой, отмечают исследователи. Часто причины не связаны с удобством магазина, к примеру, иногда покупатель просто находит более выгодное предложение или передумывает покупать товар.
Примеры отказов:
- Для совершения покупки требовалась регистрация.
- На странице ввода данных банковской карты были непонятные поля, а сама платежная форма показалась не безопасной.
- Процесс оформления заказа был слишком сложным и запутанным.
- Потребовалось заполнять большое количество полей, а сам процесс занял слишком много времени.
- Сумма заказа увеличилась из-за платной доставки, о которой ранее не упоминалось.
- Сайт магазина не адаптирован для мобильных устройств.
Чтобы понять, с какими именно проблемами сталкиваются пользователи интернет-магазинов при оплате картой в интернете и как можно сделать процесс более удобным для покупателей, компания MasterCard провела сравнительное юзабилити-тестирование с участием 51 респондента.
Во время исследования были протестированы 24 российских сервиса и магазина, 14 платежных провайдеров и банков, участники платили во время исследования картами 12 банков.
Корзина
1. Этап добавления в корзину не должен содержать лишних шагов
На большинстве протестированных сайтов этап добавления товара в корзину был реализован либо всплывающим окном, либо изменением области вокруг кнопки «Добавить в корзину», либо автоматическим переходом на страницу корзины. Особенно введение дополнительных страниц кажется неактуальным при покупках с мобильных устройств, когда загрузка отдельной страницы занимает большое количество времени и может приводить к тому, что пользователь не доведет покупку до конца, считают исследователи.
На сайте магазина «М.Видео» после нажатия на кнопку «Добавить в корзину» открывается отдельная страница, единственно возможное действие на которой — это переход в корзину или возврат к покупкам. Респонденты обращали внимание на этот шаг, и отмечали, что он кажется лишним.
«М.Видео»
Страница добавления в корзину на сайте «Юлмарт» также реализована с лишним шагом, но при этом есть возможность сразу оформить заказ:
2. Информация о том, что товар добавлен в корзину, должна быть очевидна для пользователя
При отсутствии мгновенной обратной связи о том, что товар добавлен в корзину, у пользователя может возникнуть ощущение, что кнопка была не нажата или товар не добавился в
корзину. В результате незаметно для пользователя товар в корзине может удвоиться.
Исследователи отмечают, что кнопка добавления в корзину должна визуально меняться при добавлении нового товара и реагировать на нажатие. После первого нажатия на кнопку, она должна становиться неактивной до момента появления обратной связи. Повторное нажатие на кнопку «В корзину» не должно добавлять товар в корзину, а должно осуществлять переход на страницу корзины. Исключение: сайты магазинов, в которых покупатели заказывают сразу много товаров одного типа.
Например, на сайте Foodpanda обратная связь о том, что товар добавлен в корзину, представлена в верхней правой части страницы, что может быть незаметно для пользователя, так как на самом товаре наименование кнопки не меняется, и нет обратной связи о том, что товар добавлен. Это приводит к тому, что пользователь добавляет несколько товаров в корзину, не замечая этого, считают эксперты.
Foodpanda
На сайте магазина Enter при нажатии на кнопку «В корзине» название меняется, и кнопка становится неактивной. Возможность повторного добавления сведена к минимуму.
Enter
3. На странице корзины должна быть представлена подробная информация о товарах
Многие пользователи используют добавление в корзину вместо функции откладывания товаров. А в корзине уже принимают решение о покупке некоторых из них. Поэтому, заключают представители Mastercard, на странице корзины должна быть представлена подробная информация о товарах, их характеристиках, фотографии товаров и ссылки на полное описание.
Например, на сайте магазина «Ривгош» в корзине не указана важная информация о товаре, пользователь может понять, что добавил нужный товар, только ориентируясь по цене:
Кроме того, на странице должно быть представлено кликабельное изображение товара, а при нажатии на изображение должна открываться либо подробная информация о товаре, либо увеличенная фотография товара. В корзине, как и на странице товара, должна быть представлена информация о наличии товара.
«Ривгош»: Пользователь узнает о том, что товара нет в наличии в магазинах его города, только после авторизации на сайте при выборе способа доставки
Если товар есть только в нескольких магазинах, информация об этом также должна присутствовать на странице корзины:
«Ситилинк»
4. Кнопка продолжения офомления заказа должна быть визуально выделена на странице
Пользователи часто не читают текст на кнопках, просто нажимая на самую заметную кнопку на странице и ожидая продолжения оформления заказа. Поэтому эта функция должна быть выделена на странице и визуально отличаться от остальных кнопок.
Например, на сайте магазина «Ситилинк» кнопка продолжения оформления заказа визуально не выделена, пользователи замечают ее не сразу:
Enter: Кнопка оформления заказа имеет визуальный приоритет, она более заметна на странице, чем все остальные элементы
5. На странице корзины должна быть информация об условиях возврата
Для некоторых категорий товаров важна возможность вернуть товар, например, для одежды, так как велик риск ошибиться с размером или фасоном.
На странице корзины в магазине Lamoda представлена информация о сроках и стоимости доставки, но нет информации о возврате товара. Так, один из респондентов несколько минут пытался найти на странице корзины магазина Lamoda информацию о возможности возврата товара. Респондент не смог сделать это самостоятельно, так как ссылка на условия возврата находилась внизу страницы в строке меню, отмечается в отчете.
6. На странице корзины должна быть информация об условиях и стоимости доставки
Во время тестирования многие респонденты после добавления товаров в корзину пытались найти на сайте информацию о том, когда будет доставлен товар и сколько будет стоить доставка.
Не на всех сайтах была представлена эта информация. Например, на сайте магазина Enter сведения о том, что доставка осуществляется платно, не представлена на странице корзины, сумма просто добавляется к стоимости заказа на этапе выбора способа доставки.
Если рассчитать стоимость доставки на странице корзины невозможно, рядом с суммой заказа должна быть указана примерная стоимость доставки или стоять пометка о том, что сумма указана без стоимости доставки. Для многих респондентов увеличение стоимости после перехода к выбору способа доставки стало неприятной неожиданностью.
«Утконос»: На странице корзины есть пометка о том, что стоимость заказа указана без стоимости доставки
7. Возможность воспользоваться скидкой или промокодом должна находиться на странице корзины
На большинстве протестированных сайтов пользователь может ввести промокод на странице корзины, но, например, на сайте магазина Buket такая возможность есть только на последнем шаге оформления заказа.
Пользователь, у которого есть скидка, может отказаться от покупки, не дойдя до этого этапа, или пытаться связаться с сотрудниками магазина по телефону.
Buket
8. Поле ввода подарочной карты, промокода или скидки не должно быть открыто по умолчанию
Внимание пользователей привлекают незаполненные поля, пользователи останавливаются на них и тратят некоторое время, чтобы понять, что никакой карты или купона у них нет. В некоторых случаях пользователи переходят на сторонние сервисы для покупки купонов.
Lamoda и «Утконос»: Поле промокода открыто по умолчанию, пользователи ищут возможность получить промокод и переходят на сторонние сервисы
Enter: Поле ввода карты лояльности выделено радиокнопкой, пользователи не понимают, как отказаться от ее использования
9. Информация о том, как получить промокод, должна быть представлена рядом с возможностью его ввести
10. Наименование поля для ввода промокода или карты лояльность должно передавать его суть
Например, на сайте сервиса Foodpanda поле ввода купона названо «Voucher», большинство респондентов не понимали, что именно требуется ввести. Так как в подсказке написано слово «Код», два респондента ввели в него код безопасности банковской карты.
11. Товары должны сохраняться в корзине до завершения оформления заказа
Во время исследования у респондентов возникали технические проблемы при оплате, из-за которых оформление заказа прерывалось. Чаще всего, после этого товары из корзины пропадали, и респонденту приходилось заново набирать товары в корзину для покупки.
В одном из случаев на сайте магазина Enter это привело к тому, что респондент не смог добавить товар в корзину во второй раз. Нужный ему товар был последним в магазине и оказался зарезервированным при первой попытке оформления заказа. В результате у респондента не получилось совершить покупку.
12. Возможность удаления товара из корзины должна по умолчанию присутствовать на странице корзины
На всех протестированных сайтах была представлена возможность удаления товара из корзины. Тем не менее, на некоторых сайтах эта возможность не была реализована по умолчанию, поэтому процесс удаления товара из корзины оказался не очевидным для респондентов.
Например, в корзине магазина Ozon необходимо выделить товар, чтобы появилась функциональность удаления из корзины. Сама функция удаления находится не рядом с выбранным товаром, а в верхней строке таблицы.
Ozon: Возможность удаления товаров из корзины появляется только после выделения товара в списке
Кроме того, возможность удаления товара из корзины должна быть представлена отдельной функцией, а не изменением количества товаров в корзине.
Wikimart и Enter: Функция удаления из корзины находится рядом с изменением количества товаров в корзине
Авторизация
13. На сайте должна быть реализована возможность заказа без регистрации
Практически все респонденты во время тестирования искали возможность оформить заказ без регистрации. Большинство из них во время тестирования говорили о том, что при первой покупке на сайте магазина предпочитают не регистрироваться, так как пока не понимают, будут ли пользоваться услугами магазина в дальнейшем, и боятся спама.
Регистрация ассоциируется у большинства пользователей с заполнением ненужных полей, необходимостью запоминать или восстанавливать логин и пароль для входа на сайт.
Ticketland: Сайт вынуждает пользователя авторизоваться для добавления билетов в корзину. Во всплывающем окне нет ссылки на возможность зарегистрироваться
Также исследователи рекомендуют внедрять возможность заказа без подтверждения контактной информации. Подтверждение контактных данных связано с риском технических проблем и тем, что заказ не будет оформлен.
Kassir: Реализована возможность заказа без регистрации. Подтверждение контактных данных для оформления заказа не требуется
14. Регистрация пользователя может осуществляться автоматически на основании введенных контактных данных
Чаще фоновая регистрация используется на сайтах, продающих электронные товары. Регистрация не была заметна для респондента и не вызывала ощущения траты времени.
При продаже физических товаров также можно использовать преимущества фоновой регистрации. На сайте магазина «Сотмаркет» регистрация осуществляется при первой же покупке. При последующих покупках достаточно ввести на странице оформления заказа свой адрес электронной почты, чтобы появилось поле «Пароль» для входа на сайт.
«Сотмаркет»: На сайте отсутствует этап авторизации. Пользователь сразу переходит на страницу оформления заказа. После оформления заказа на почту приходит письмо, содержащее информацию о регистрации и пароль
Если регистрация происходит автоматически, необходимо сообщать об этом пользователю на странице подтверждения заказа и в письме на электронную почту. На сайте магазина «ЛитРес» регистрация происходит автоматически при первой покупке. Это остается незаметным для пользователя, так как никаких уведомлений о регистрации во время и после покупки не возникает.
15. Функциональность заказа «без регистрации» не должна быть ограничена
Некоторые магазины ограничивают количество способов оплаты для незарегистрированных пользователей. Респонденты отмечали, что думают, что таким образом сайт магазина намеренно принуждает их к регистрации. Чаще всего ограничение распространяется на различные формы предоплаты (банковской картой, электронными деньгами).
Holodilnik: Варианты оплаты заказа ограничены для незарегистрированных пользователей
16. Все способы авторизации должны быть заметны и доступны на одной странице
«М.Видео»: На странице присутствуют не все виды авторизации
17. Регистрация должна быть встроена в процесс оформления заказа
На сайте магазинов «Утконос», «М.Видео», Ticketland процесс регистрации не встроен в процесс оформления заказа, для регистрации на сайте нужно совершать отдельные действия (например, перейти по ссылке наверху страницы). Все это отнимает время пользователя, кажется тратой времени.
Регистрация должна привести к автоматической авторизации, после чего необходимо продолжить оформление заказа.
«Утконос»: Для подтверждения номера телефона после регистрации нужно совершать лишние действия
«Аэроэкспресс»: После регистрации необходимо заново выбирать параметры билета
18. Предоставляйте возможность зарегистрироваться на сайте после оформления заказа, с использованием той информации, которую пользователь уже ввел
Этот вариант предпочтительнее фоновой регистрации, так как пользователь может задать свой собственный пароль и принимает решение о регистрации самостоятельно. Это кажется удобным пользователям, так как большинство из них задают один стандартный пароль на малозначимых сайтах.
«М.Видео»: Регистрация на сайте возможна на странице подтверждения заказа
«М.Видео»: На странице авторизации присутствует вариант «Продолжить без регистрации», но нет возможности зарегистрироваться
Wikimart: Регистрация осуществляется после оформления заказа, но не вызывает вопросов до начала оформления, так как не выделена в отдельный этап
19. Логин для входа на сайт должен быть адресом электронной почты или номером телефона
При регистрации на сайте «Аэроэкспресса» нужно отдельно ввести номер телефона, адрес электронной почты и логин. При этом пользователи, которые хотели зарегистрироваться на сайте, вводили адрес электронной почты и копировали его потом в поле логина:
Поле для авторизации должно называться не «Логин», а «Адрес электронной почты» или «Телефон».
20. При попытке регистрации с уже зарегистрированным адресом электронной почты, необходимо предложить авторизоваться на сайте или воспользоваться функцией напоминания пароля
21. Рядом с полем ввода контактных данных должна присутствовать уточняющая информация
Покупатели не хотят регистрироваться на сайтах магазинов, так как боятся спама. Часто пользователи уверены в том, что это будет происходить независимо от того, снят ли выбор с опции подписки на рассылку.
Порог согласия на предоставление контактных данных снизится, если рядом с полем ввода контактной информации будет указана информация о том, что контактные данные будут использованы для уточнения параметров заказа и доставки товаров.
Практически ни на одном из протестированных сайтов не было указания о том, как будут использованы контактные данные пользователя. Такая информация представлена на сайте Wikimart.
Не рекомендуется использовать принудительную подписку на рассылку:
«М.Видео»: Согласие на рассылку скрыто в условиях соглашения на обработку персональных данных и является обязательным пунктом для продолжения оформления заказа
Выбор способа оплаты
22. Название способа оплаты должно передавать его суть
В формулировках способов оплаты лучше использовать распространенные и однозначные наименования.
Например, в списке способов оплаты при оформлении подписки на издание «Ведомости» есть пункт «Кредитная карта». Респондент был не уверен, что может совершить оплату с дебетовой картой:
Варианты способов оплаты должны быть сгруппированы: предоплата, оплата при получении товара и кредит. Большинство респондентов столкнулось с проблемами при выборе варианта оплаты на сайте магазина «Связной». Список вариантов не был структурирован, поэтому многие респонденты сначала неверно выбирали пункт «Оплата платежной картой при получении», так как обращали внимание только на начало предложения и логотипы платежных систем.
Когда варианты разбиты на группы, легче составить представление о способах оплаты и сделать выбор. Например, на сайте магазина Enter варианты разбиты на группы «При получении заказа» и «Прямо сейчас».
Enter
23. Способы оплаты должны быть отсортированы по популярности
Например, на сайте магазина «Сотмаркет» варианты оплаты в пункте «Предоплата» отсортированы по популярности, а наименее частотные способы скрыты под ссылкой «Еще 7 способов оплаты». Список не перегружен низкочастотными вариантами, и пользователям легче выбрать нужную опцию.
Наиболее популярный среди аудитории сайта способ оплаты может быть выбран по умолчанию, это позволит пользователям не совершать лишних действий для выбора.
ivi.ru
24. Пользователь должен быть предупрежден о возможном изменении общей суммы заказа при разных способах оплаты
«М.Видео»: При оплате картой предоставляется скидка, но эта информация на странице отсутствует
Holodilnik: Рядом с наименованием платежного сервиса указана комиссия
«Юлмарт»: Размер комиссии указан для всех платежных сервисов, включая те, которые не взымают комиссию
25. Рядом со способами оплаты можно располагать пиктограммы и логотипы платежных сервисом
Наличие пиктограмм и логотипов сервисов для оплаты облегчает восприятие и сокращает время выбора.
Ozon
«Литрес»
26. Не следует предлагать выбор платежной системы при выборе способа оплаты банковской картой
Тип платежной системы можно определить автоматически по первым цифрам номера карты, а дополнительный шаг увеличивает время оформления заказа.
Выбор способа доставки
27. Количество полей ввода в адресе доставки должно быть минимизировано
Во время оформления доставки респонденты сталкивались с большим количеством полей данных, необходимости в которых они не видели и даже не всегда знали (например, индекс). В некоторых случаях наличие дополнительных полей незначительно увеличивает время работы с сервисом, например, при выборе станции метро, а в других может значительно затруднить работу, например, при необходимости дополнительно уточнять индекс.
К примеру, в приложении магазина ZARA требуется ввести индекс. Это не только затрудняет работу респондента, которому приходится вспоминать или искать индекс, но приводит к тому, что пользователь может решить, что товары доставляются почтой, а не курьером.
«Юлмарт»: Индекс определяется автоматически, но пользователи все равно проверяют его правильность, переходя в поисковые системы
28. Для пунктов самовывоза должны быть доступны два способа отражения: на карте и списком
29. Поле «Адрес» должно позволять ввод адреса вручную м выбор из списка
Необходимо дать возможность завершить оформление заказа, даже если адрес доставки не распознан системой.
Практически на всех сайтах, протестированных во время исследования, можно было ввести адрес в поле ввода и продолжить оформление заказа. На сайте магазина «Ситилинк» это сделать невозможно: при вводе названия улицы в нестандартном формате поле отмечается, как ошибочно заполненное, и продолжить оформление заказа нельзя.
«Ситилинк»: При вводе адреса в нестандартном формате нельзя продолжить оформление заказа
В списке адресов не должно быть дублирующихся названий улиц и номеров домов.
«Ситилинк»: Пользователю предлагается выбрать из двух одинаковых вариантов
30. В краткой информации о пункте самовывоза должна быть представлена информация о наличии товара
«Юлмарт»: В списке отмечены магазины, в которых можно забрать товар прямо сейчас
31. Ориентировочная стоимость доставки должна быть указана на этапе выбора способа доставки
На сайте магазина Enter при выборе способа доставки не указана информация о том, что доставка осуществляется платно. В реальной ситуации это могло бы привести к отказу от покупки или совершению лишних шагов по выбору другого способа доставки:
«М.Видео»: На странице уведомление об изменении цены появляется только после выбора способа доставки
32. При предоплате необходимо отмечать, что плательщик и получатель могут быть разными людьми
«Связной»: После выбора онлайн-оплаты необходимо указать имя получателя товара
Рядом с полем ввода имени получателя должна быть представлена возможность отметить, что получатель и плательщик одно лицо. Формулировка должна быть понятна и очевидна для пользователя.
Подтверждение заказа
33. На странице подтверждения заказа должна быть представлена вся необходимая информация о заказе
На странице следует дать пользователю возможность проверить контактные данные, выбранный способ оплаты и доставки, а также состав и сумму заказа.
Информация, которую необходимо поместить на страницу:
- Состав заказа и итоговая сумма.
- Контактные данные получателя.
- Информация о способе и сроках доставки.
- Способ оплаты.
- Номер заказа.
- Состав заказа (наименования товаров, количество и цены товаров каждого типа и сумму заказа).
- Информацию о выбранных способах доставки и оплаты.
- Контактную информацию получателя и адрес доставки.
- Информацию о возможности возврата товаров (для некоторых категорий товаров).
«Юлмарт»: На странице указана вся необходимая информация, но нет возможности изменить содержимое корзины
Если содержание страницы не соответствует выбранным ранее данным, у пользователя могут возникнуть сомнения в том, что он ввел все данные верно. На сайте магазина «Юлмарт» на странице подтверждения заказа указана информация о том, как получить товар в магазине, несмотря на то, что пользователь выбрал доставку:
34. На этапе подтверждения должна быть возможность перейти к редактированию информации о заказе
При проверке данных заказа пользователь может заметить ошибку в параметрах заказа, поэтому на этапе подтверждения должна быть возможность редактирования ранее введенных данных.
На сайте магазина «Ситилинк» на странице подтверждения нет возможности изменить параметры заказа. Единственный способ это сделать — перейти по ссылке в навигационной цепочке вверху экрана, что может быть не очевидно для пользователей.
На сайте магазина «Утконос» на странице подтверждения заказа можно поменять только количество товаров в корзине и номер телефона. Для всех остальных изменений нужно возвращаться на предыдущие шаги оформления заказа.
Ввод реквизитов карты и оплата
35. Формат ввода данных банковской карты должен соответствовать их формату на карте
При вводе реквизитов карты пользователям удобнее воспроизводить информацию на сайте в том формате, в котором она отображена на банковской карте, полагают эксперты. Особенно это относится к неопытным пользователям, у которых процесс заполнения реквизитов карты связан с высокой степенью тревоги и неуверенности.
Для карт с 16 цифрами номер карты должен отображаться при наборе блоками по 4 цифры.
Респонденты тратили меньше времени на ввод и проверку правильности введенной информации, когда она была разделена на блоки.
Цифры разделены пробелами, пользователю легко проверить корректность введенных данных
Отсутствие разделения на блоки становится еще большей проблемой при необходимости оплаты через смартфон. При вводе данных на мобильных устройствах велика вероятность ошибки, а изменение введенных данных вызывает затруднения и раздражение пользователей.
Приложение Steam: Цифровые блоки не разделены пробелами, на экране смартфона сложно проверить правильность ввода
Кроме того, не все карты, которыми можно совершить оплату в интернете, содержат 16 цифр в номере. Некоторые процессинговые сервисы начинают принимать к оплате карты Maestro®, но при этом формат ввода и записи остается 16-значным номером, что может смущать пользователей, так как номер на карте не соответствует формату на сайте.
Формат ввода месяца должен соответствовать формату на карте. Месяц должен быть введен двумя цифрами. При другом отображении названия месяца пользователи могут столкнуться с трудностями перевода названия месяца в его порядковый номер. В результате пользователи тратят больше времени на заполнения каждого поля и вероятность ошибки возрастает.
«Аэроэкспресс»
36. Банковская карта должна быть визуализирована на странице оплаты
Пользователи испытывали меньше затруднений с заполнением реквизитов карты, когда на странице оплаты была представлена визуальная подсказка или вся форма была представлена в виде карты.
В тех же случаях, когда карта не была представлена на странице, у респондентов возникали вопросы о том, где искать защитный код карты и в каком формате вводить данные.
Такая проблема часто встречалась при заполнении реквизитов на сайте магазина «М.Видео». Поля ввода на странице представлены не в том порядке, в котором они идут на карте. Подсказки о расположении информации на карте не понятны и их поиск требует дополнительных усилий.
Платежная форма не соответствует реальной карте. Респонденты путались в том, где на карте необходимо искать информацию
«Литрес»: Расположение полей ввода соответствует полям на карте
37. Ввод реквизитов должен соответствовать последовательности информации на карте
Типичная траектория взгляда при просмотре информации на карте отражена на скриншоте ниже. Сначала вводятся данные на лицевой стороне карты: номер карты, срок действия, имя владельца. Далее вводится защитный код карты с обратной стороны.
ChronoPay: Последовательность ввода данных не соответствует ее расположению на карте и прерывается вводом дополнительной информации, не связанной с банковской картой
Последовательность ввода реквизитов карты на странице соответствует траектории взгляда пользователя и не прерывается вводом дополнительной информации
«Рамблер.Касса»: В форме вовсе нет полей ввода данных, необязательных для проведения платежа
38. Запрашивайте необходимую информацию только один раз
Повторное заполнение полей кажется большинству пользователей неоправданной тратой времени. Практически все респонденты, столкнувшиеся на платежных страницах с требованием ввести номер телефона, почтовый адрес и электронную почту, отмечали, что эти поля уже заполняли и не понимают, зачем заполнять их второй раз.
Платежная форма магазина «Спортмастер»: Повторно запрашивается информация, которую пользователь вводил ранее (номер телефона и адрес электронной почты)
39. Сервис должен запрашивать только необходимую информацию
На платежной странице ниже из 12 представленных полей для оплаты необходимы всего 3. Все респонденты отметили избыточное количество полей формы и ее плохую структуру.
Chronopay
40. Подписи к полям форм должны быть понятны и содержать подсказки по заполнению
Большинство пользователей не обладает специальными техническими знаниями, поэтому на странице оплаты необходимо использовать распространенные общеупотребимые понятия для обозначения полей и необходимых действий.
Использование технической терминологии может затруднить работу с формой, привести к тому, что пользователь начнет чаще обращаться к подсказкам или поисковикам
Например, многие покупатели только по контексту страницы могли понять, что на платежной странице одного из банков в поле PAN необходимо ввести номер карты.
Поле ввода номера карты названо технической аббревиатурой PAN
Поле ввода защитного кода карты наиболее сложно для понимания, с ним возникает намного больше затруднений. Мало кто из респондентов во время исследования использовал аббревиатуры CVV/ CVC. Даже опытные пользователи использовали понятие «Код», «3 цифры с задней стороны карты».
Подсказка о том, где искать защитный код карты и что это такое, скрыта за подсказкой, а ее расположение понятно только из контекста
В связи с обилием неименных карт иногда пользователям требуются дополнительные подсказки, о том, что делать, если на карте нет имени.
41. Размер полей должен соответствовать вводимой в них информации
Если поле ввода слишком длинное или слишком короткое, у клиентов возникают вопросы и неуверенность в том, что поля правильно заполнены. Это приводит к увеличению количества ошибок при внесении данных в форму и повышению тревоги пользователя.
42. Ввод реквизитов карты должен осуществляться на сайте магазина или в приложении
Многие респонденты, особенно из группы неопытных пользователей, были удивлены тому, что страница ввода реквизитов карты не находится на сайте магазина. И это при том, что в ситуации исследования высока степень доверия и достаточно низка степень тревоги за безопасность введенных данных.
Многие отмечали, что в реальной ситуации при переходе на сторонний сайт, стали бы с большей опаской относиться к платежной странице.
В тех случаях, когда форма находится на сайте магазина, у пользователей возникает меньше затруднений. На странице магазина может размещаться дополнительная информация о заказе и контактных данных магазина.
43. На платежной странице должна быть реализована возможность возврата на сайт магазины без оплаты
44. На платежной странице должна быть представлена информация о безопасности платежа
Обычно пользователям сложно сформулировать, на какие именно параметры безопасности они ориентируются при оплате в интернете. Общее впечатление от страницы оплаты формируется за счет многих параметров, которые должны присутствовать на странице.
Наличие пиктограмм платежных систем увеличивает доверие к сервису
При отсутствии проверки через 3DSecure необходимо предупреждать об этом на странице ввода реквизитов карты.
45. Обратная связь о неверном заполнении полей должна быть оперативной, информативной, заметной
46. Обратная связь об ошибках в проведении платежа должна быть понятной, не содержать технических терминов и соответствовать возникшей пробелеме
При возникновении любой проблемы в ходе проведения платежа пользователю необходимо дать полную обратную связь о том, что произошло, и как можно решить эту проблему.
При возврате на сайт магазина необходимо автоматически отправить заказ на обработку или предложить выбрать другой способ оплаты.
«Робокасса»: На странице отклоненного платежа представлена краткая информация о том, что платеж не прошел, и инструкции о том, что делать дальше
Страница шлюза банка-эмитента
47. На странице ввода одноразового пароля информация о сумме списания и поле ввода пароля должны быть выделены
Сумма платежа и поле ввода пароля — основные компоненты на странице одноразового пароля из СМС. Если эти части страницы выделены и заметны пользователю, время оплаты сокращается. На страницах некоторых банков сложно выделить важную информацию из-за визуального шума и плохого расположения блоков. Например, на странице одного из банков на скриншоте ниже использована нестандартная страница ввода одноразового пароля, при этом компоновка информации неудачная, текст набран мелким шрифтом, важные блоки на странице не выделены.
Компоновка неудачная, необходимая информация не выделена
Сумма оплаты и поле ввода выделены, пользователям легко их проверить
48. На странице ввода одноразового пароля должна быть инструкция по дальнейшим действиям
Пользователь не всегда понимает специфическую банковскую терминологию. Чем проще слова и формулировки, тем скорее посетитель разберётся с тем, что требуется сделать:
49. Код подтверждения должен находиться в начале текста СМС-сообщения
Страница «Спасибо за покупку»
50. На странице подтверждения заказа должна быть предоставлена вся информация о заказе
На странице сформированного и оплаченного заказа необходимо продублировать
всю введенную ранее информацию о заказе:
В тех случаях, когда на странице не указано содержание заказа, у пользователя могут возникнуть сомнения в том, что были выбраны нужные товары.
Например, на сайте магазина Enter после оформления есть информация только о номере и сумме заказа. Если покупка совершена без регистрации, то проверить ее состав и указанные контактные данные можно только в письме на электронной почте.
51. На странице подтверждения заказа должна быть представлена информация о дальнейших событиях и действиях пользователя
На странице должны быть описаны дальнейшие шаги по получению заказа и контактная информация магазина.
Также нужно указать, что на адрес электронной почты было отправлено письмо с подробностями заказа и необходимой информацией о доставке и получении товара.
Если оформлена доставка товара, то должны быть указаны сроки и адрес доставки. Если был выбран самовывоз товара, то на странице должен быть адрес и время работы выбранного пользователем магазина. Если же для получения товара покупателю нужно соблюдать определенные условия (сообщить номер заказа или иметь при себе паспорт) — эта информация должна быть отправлена в СМС-сообщении и по почте.
«Юлмарт»: На странице указаны дальнейшие действия пользователя, но они не соответствуют выбранному способу доставки
52. Вся информация должна быть продублирована на электронную почту пользователя
У покупателя всегда должна быть возможность обратиться к своей почте для уточнения даты и времени доставки, номера телефона магазина и номера заказа.
«Спортмастер»: В письме, подтверждающем заказ, не указана важная для покупателя информация
«Ситилинк»: В письме указана вся информация о заказе
53. Если заказ был оформлен несмотря на отмену оплаты, необходимо уведомить об этом покупателя
На сайтах некоторых магазинов заказ оформляется, даже если оплата была отменена или платеж не прошел. Если сервис не предоставляет информации о успешном оформлении заказа, пользователь может решить, что заказ оформить не получилось.
54. Страница должна быть адаптирована для печати и на ней должна присутствовать функция печати информации о заказе
«Утконос»: На странице есть возможность печати состава заказа, но ее название не передает суть функции
Общие рекомендации
55. Процесс оформления заказа должен быть линейным и предсказуемым
56. В процесс оформления заказа не должны быть встроены дополнительные экраны, не содержащие важной информации
Шаг добавления товара в корзину не должен быть реализован отдельной страницей на сайте. Если после добавления товара в корзину осуществляется переход на другую страницу — это должна быть страница корзины.
57. Пользователю должна быть предоставлена информация о возможном изменении суммы заказа
58. Во время оформления заказа основная навигация сайта должна быть скрыта
59. Последовательность шагов должна быть очевидна для пользователя
Если оформление заказа совершается в несколько действий, последовательность шагов оформления заказа должна быть визуализирована на странице. В навигационной цепочке должны быть представлены все шаги оформления заказа.
Названия этапов должны быть понятны и отражать их суть. Шаги оформления заказа должны быть разделены на четкие этапы.
Уже пройденные шаги оформления заказа должны быть кликабельными. При возврате на предыдущие этапы оформления заказа, уже пройденные следующие шаги также должны быть кликабельными.
60. Элементы отдельных шагов оформления заказа не должны быть смешаны
61. Названия кнопок должны быть однозначными и передавать суть совершаемого ими действия
Не рекомендуется использовать слишком общие или неоднозначные наименования кнопок — они должны соответствовать выполняемым ими действиям.
62. Кнопка основного действия должна быть визуально выделена на странице
Основное действие должно иметь визуальный приоритет над остальными элементами страницы. Важные действия должны располагаться на траектории движения глаза пользователя.
63. Сервис не должен запрашивать необязательной для оформления заказа информации до завершения покупки
Также сервис не должен запрашивать информацию, которую можно определить автоматически.
64. На страницах с автопереходом не должно быть представлено важной информации
65. Сообщения об ошибках должны быть понятны и содержать рекомендации по устранению проблемы
Сообщения об ошибках должны быть выделены на странице. Проверка корректности введенных в поле значений должна производиться после заполнения каждого поля, а не после отправки формы. Формулировки ошибок должны описывать возникшую проблему и предлагать варианты ее устранения и альтернативные способы решения задачи.
Мнение участников рынка
Герман КлименкоLiveinternet, Mediametrics, 3D News
Любые исследования полезны, а в кризис они позволяют найти узкие места, которые не использовались в сытые годы. Если не предпринимать сейчас никаких действий, возможно падение продаж до 20%. Поэтому с исследованием в первую очередь должны ознакомиться интернет-магазины. И на его основании требовать от разработчиков платежных систем и банков-эквайеров вносить соответствующие правки в интерфейсы. Сами разработчики, тем более в банках, скорее всего, не будут ничего делать, ведь у них практически нет обратной связи для их продуктов.
Константин Копыльцовгенеральный директор Payler
Помимо оптимизации процесса оформления заказа, важно помнить о том, что до 30% покупок остаются «брошенными» на этапе оплаты заказа. Чаще всего это происходит из-за недоверия пользователя к платежной форме и его нежелания заполнять множество полей.
Повысить доверие пользователя поможет более очевидное обозначение безопасности оплаты — изображение замка, логотипы платежных систем и серый фон полей номера карты и CVC/CVV на подсознательном уровне успокоят недоверчивого пользователя. Что касается заполнения многочисленных полей, разумным решением может стать сохранение данных пользователя или возможность сканирования карты.
Дмитрий Даниленкокоммерческий директор «Яндекс.Денег»
Большое значение имеет наличие выбора методов онлайн оплаты. По данным GFK, этот критерий важен для 34% российских онлайн-покупателей. А исследование «Яндекса» показало, что 51% сайтов использует три и больше методов приема онлайн-платежей, среди которых банковские карты, электронные кошельки, оплата со счета мобильного, через мобильный и интернет-банки. Подключая все эти методы, магазин может быть уверен, что любой клиент найдет для себя удобный метод: пользователь электронных денег оплатит через электронный кошелек, держатель карты — с карты. А тот, кто опасается светить карту в незнакомом магазине, воспользуется оплатой через интернет-банк. К примеру, одно из востребованных решений, которое мы подключаем интернет-магазинам через «Яндекс.Кассу» — оплата через мобильный и интернет-банк «Сбербанка». В этом случае пользователь оплачивает покупки напрямую со счета банка — через онлайн-банк или смской на номер 900.
Если магазин предлагает товары или услуги регулярного спроса (контент, доставка еды и прочее), не нужно заставлять клиента вводить данные карты каждый раз — сервис должен уметь их запоминать. Еще лучше, если магазин может предложить клиенту реккурентные платежи (автоматическое списание заранее оговоренной суммы с определенной периодичностью — как подписка). К примеру, так действует один сервис по доставке еды для животных, по такому же принципу через «Яндекс.Деньги» пользователи платят за сотовый и интернет, аналогичное решение используют благотворительные организации, заинтересованные в постоянном притоке пожертвований. В таком случае пользователю не нужно каждый раз заходить на страничку с оплатой, вводить реквизиты и подтверждать платеж — достаточно один раз согласиться, и сервис будет делать все сам.
Не должно быть скрытых комиссий. Если за оплату определенным способом магазин берет дополнительную комиссию, это должно быть сразу указано, чтобы разочарование на последних этапах оформления заказа не заставило клиента отказаться от покупки.
Если за оплату определенным способом предполагается скидка, об этом лучше написать не только на странице с акциями и спецпредложениями, но и в разделе со способами оплаты. Бонус сделает процесс покупки приятней, а клиента – лояльнее.
Название методов оплаты не должно путать пользователя. Все понимают, что значит «оплата с банковских карт», «Яндекс.Деньги» и так далее. Но если среди методов оплаты несколько брендов агрегаторов, через которых магазин принимает оплату, это может запутать клиента — ведь с ними он, скорее всего, не знаком.
Абасалиев Марат Русланович
генеральный директор системы электронных платежей PayOnline
Безусловно, данное исследование будет полезно и для начинающих предпринимателей, и для опытных владельцев интернет-магазинов. Первые смогут избежать многих ошибок на своём пути и «стартануть» с минимальными потерями и максимальной эффективностью. Вторые — пройтись по чек-листу, найти недочеты на своих сайтах и увеличить конверсию. Думаю, в обоих случаях результат будет заметным, а рост прибыли — значительным.
Уже сейчас можно заметить тренд минимализма — интернет-магазины часто делают одностраничные сайты, которые, тем не менее, прекрасно справляются с функцией каталога. Идет избавление от лишнего шума и мусора — ничто не должно отвлекать клиента от покупки. Разве что еще более выгодное для покупателя и магазина предложение. Сегодня создатели сайта стараются думать за пользователя, посмотреть на веб ресурс его глазами: каждый элемент сайта должен быть интуитивно понятным, а каждый клик максимально приближать к покупке. Данное исследование хорошо отвечает на вопрос «Чего же хочет покупатель и как ему это дать?» — в скором времени UX станет не просто нормой, а стандартом для любого коммерческого сайта, и подобные исследования – хорошая учебная методичка.
Качество интерфейсов изменится под влиянием потребителей, хотят этого владельцы интернет-магазинов — или нет. Однако важно понимать, что привлекательные интерфейсы и отличный дизайн – это лишь первый шаг на пути к созданию действительно «user-friendly» сайта или мобильного приложения. Главное — это понимание потребностей клиента и их качественное воплощение, а значит — исследование аудитории. Без знания клиента не поможет никакой дизайн.
Конечно же, являясь системой электронных платежей, мы в наибольшей степени заинтересованы во всём, что касается процесса оплаты, от выбора платежного инструмента до страницы подтверждения. Пресс-центр PayOnline часто делает обзоры, исследования, выпускает сборник советов для увеличения платежной конверсии, и в данном материале нас больше всего заинтересовали реальные кейсы. Удивительно, что крупные интернет коммерсанты порой так пренебрежительно относятся к самому главному шагу — оплате товаров и услуг, ведь именно здесь деньги переходят от клиента компании-продавцу. Казалось бы, на этом шаге уже невозможно потерять заметную долю клиентов – они же дошли до шага оплаты. Но в проекции на большие обороты ошибка на этом шаге может обернуться потерей заметной доли прибыли и негативом со стороны потенциальных, но несостоявшихся клиентов.
Для пользователя в первую очередь важна та полезность, которую приносят эти интерфейсы. Всем известно выражение, что клиент покупает не дрель, а дырку в стене, которую он этой самой дрелью сделает. Эту фразу можно проецировать на работу любого интерфейса: клиенту всё равно, какого цвета кнопки на сайте, сколько баннеров со специальными предложениями он увидит, насколько красивые картинки и красочная анимация украшает сайт. Цель клиента — быстро найти продукт, узнать точную стоимость и условия доставки и оплатить покупку. Задача сайта – продать товар, желательно в пару кликов (здесь важна поисковая оптимизация, чтобы по первому же запросу клиент попал именно на ваш сайт с вашим предложением товара, которое бы его полностью устроило). Удобство, открытость и полнота информации, очевидность действий — вот основные критерии, по которым можно судить об интерфейсе, и оценивается он не в баллах, а в рублях клиентов, которые либо приходят и находят то, что им нужно, либо путаются, злятся и уходят к конкурентам с плохим настроением.
В платежном интерфейсе основными требованиями можно назвать простоту использования (чтобы оплатить онлайн смог даже тот, кто никогда этого не делал) и доверие пользователей. Многие до сих пор предпочитают наличный способ оплаты именно потому, что боятся доверять данные своей банковской карты сайту. Интеграция платежной формы на сайт интернет-магазина с помощью iframe (что исключает редирект на платежную страницу), кастомизация дизайна платежной формы, ссылки на международные платежные системы, информация о платежном сервис-провайдере и сертификаты безопасности — всё это может заставить даже неуверенного пользователя доверить свои денежные средства интернет магазину.
Будущее, безусловно, за мобильными разработками, и хотелось бы увидеть больше анализа ситуации, которая в данный момент складывается в мире мобильных версий сайтов и приложениях. Второй экран — это буквально продолжение руки современного человека, и особое внимание стоит уделить тому, насколько удобно этой «рукой» пользоваться. Планшеты, смартфоны, а теперь и часы — неотъемлемая часть повседневной жизни, и игрокам e-commerce придется попытаться угнаться за технологическим прогрессом, чтобы удовлетворить потребности жителя XXI века совершать покупки где и когда угодно.
Нам было бы особенно интересно ознакомиться с исследованием, характеризующим ситуацию с платежными интерфейсами в мобильных приложениях, разработанных и работающих в рунете.
About the author
