Рассчитываем стоимость B2B-решений

24 ошибки на платёжной странице, понижающие конверсию

2017-07-17 20:10:00
Юлия Б.
Специалист по интеграции платежных систем к агрегаторам и предоставлению любых платежных сервисов B2B и B2C клиентам. Последние 6 лет Юлия работает в крупнейших платежных компаниях России и Европы: от небольших платежных шлюзов до крупнейших платежных провайдеров с нагрузкой 24+ миллиона пользователей / 16 миллионов операций / 500 000 уникальных посетителей / 500 000 платежей в день.

Если вы владелец интернет-магазина и задумываетесь о повышении конверсии, эта статья для вас. Уделите немного внимания последнему шагу процесса покупки, и вы сможете увеличить количество успешных заказов на 60%. Кроме изменений на платежной форме мы так же рассмотрим некоторые настройки вашего платежного провайдера, заметно упрощающие жизнь простого покупателя.

«Небезопасный» ввод данных банковской карты и другие механизмы психики

Пользователь не задумывается о безопасности передачи номера карты и CVV до момента их ввода на вашем сайте. Это очень субъективное чувство, однако если кроме основных полей формы вы никак не даете понять, что канал передачи конфиденциальной информации достаточно защищен, даже если это действительно так, гораздо бОльший процент покупателей имеет вероятность передумать в последний момент и купить товар у кого-то другого.

1. Одно поле для любого типа банковской карты

Странно, но факт: люди заполняют платежные формы быстрее если предложить им выбрать платежную систему, к которой относится карточка. Дальше мы поговорим про wow-эффект распознавания МПС по номеру карты, но попробуйте сделать простой шаг и добавьте выбор платежной системы. Несколько процентов конверсии гарантированы!

2. Отсутствуют логотипы принимаемых кредитных карт

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

Логотипы платёжных систем

Логотипы платёжных систем

Логотипы платёжных систем

3. Отсутствует большое изображение «замка»
Замок + слово «безопасный» дают понять пользователям, что сервис заботится о конфиденциальности. Кроме такой иконки, похожую функцию выполняет логотип используемого канала SSL. Дополнительно, поместив подобные «сигналы безопасности» рядом с конфиденциальными полями, вы даете понять, что иконка относится именно к этим полям (хотя с технической стороны это не имеет значения).

Изображение замка на платёжной форме

Изображение замка на платёжной форме

4. Поля для данных карты не выделяются на форме, особенно если она длинная

Еще один иррациональный механизм в голове вашего покупателя: если отметить поля, относящиеся к карте, например белым цветом, как это сделал Nike, пользователь посчитает что ввод в рамках этой зоны полностью безопасен. Заметьте, аналог «замка» на этой форме тоже есть.

Платёжная форма Nike

5. За что я плачу?

Если не показать товар, корзину или тарифный план на этапе оплаты, пользователь может «отвалиться» потому что недостаточно сильно хочет обладать услугой. Дублируйте список покупок на платежной странице, особенно когда процесс платежа многоступенчатый. К примеру, порносайты показывают фото моделей (и не только фото) рядом с кнопкой подписаться чтобы лишний раз показать объект вожделения.

«Что мне делать дальше?» и непонятный процесс платежа

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

6. Одна ошибка на все случаи жизни

Представьте себе ситуацию: вы прошли десяток шагов на сайте, добрались наконец до оплаты и... Получили отказ с комментарием «Что-то пошло не так». Какова вероятность что вы попробуете оплатить с другой карты? А если случилась два раза одинаковая ошибка для разных ситуаций? Например, на одной карте недостаточно средств, а на другой ошибочно введен CVV, только вы об этом не узнаете. Вот-вот, ваши клиенты думают так же.

Банк-эквайер при отказе в проведении операции передает платежному сервису код ошибки. Агрегаторы тоже умеют присылать весьма подробные коды, которых достаточно для покрытия самых популярных ситуаций. Не поленитесь, сделайте разные тексты для разных ошибок. Сфокусируйтесь на следующем шаге, потому что в голове вашего пользователя в момент попадания на страницу ошибки крутится только «Эээм. А что дальше-то?». Например, при недостатке средств замечательная мысль — предложить пользователю оплатить с другой карты или через интернет-кошелек, т.е. совсем другим способом. И не забудьте дать ссылку на повторную форму оплаты.

Причины ошибок оплаты онлайн


7. Слишком много шагов

Когда пользователь не знает что его ждет за поворотом, он быстро «устает» от вашего сайта и может уйти к конкуренту. Добавьте «хлебные крошки» с навигатором, где находится покупатель.

Хлебные крошки платёжной формы


8. Неконтрастная кнопка призыва к действию

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

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

Контрастная кнопка оплаты


9. Нет подсказок в полях (плэйсхолдеров)

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

Платёжная форма банковской карты

Платёжная форма банковской карты


10. Недостаточная или избыточная валидация полей

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

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

Оптимальным будет проверять каждое поле «на лету» при переводе курсора на следующее поле. Обязательно сохраняйте данные сразу после их появления в поле ввода!

«Это слишком сложно, Аааа!» или как упростить жизнь покупателя

11. Ненужная капча

Зачем в 21-м веке капча, тем более аудио? Исследование Стендфордского университета показало что:

  • на решение визуальной капчи требуется 9,8 секунд;
  • на решение аудио-капчи требуется 28,4 секунды;
  • по сравнению с визуальной капчей, на 50% больше пользователей бросают аудио-капчу, так и не решив её.

Действительно ли избавление от спама стоит потери потенциальных конверсий?

12. Обязательная регистрация

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

Форма регистрации перед покупкой


13. Нелогичные и лишние шаги

Зачем пользователю вводить номер карты дважды? Зачем два раза нажимать кнопку «Оплатить»?

Кроме «хлебных крошек» проверьте что все данные запрашиваются только один раз. Убедитесь что каждая кнопка ведет на следующий шаг процесса заказа и нет лишних подтверждений (как это часто работает (и раздражает) у всем известной операционной системы). Относитесь как можно критичнее к каждому клику покупателя. Чем меньше кликов, тем больше заказов.

14. Слишком много полей

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

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

Более того, с точки зрения банка-эквайера для проведения платежа нужен только номер карты. Даже CVV может не запрашиваться при определенных настройках антифрода, что уж говорить о дате окончания срока действия карты. Уточните наличие такой возможности у вашего платежного провайдера.

15. Слишком много кликов

Всем известно, чем проще оплатить товар, тем легче воспринимается процесс покупки. Каждый лишний клик суммируется сознанием покупателя с остальными сложностями и в результате пользователь может не вернуться на ваш сайт только потому что оплата показалась слишком сложной.

Простой шаг на пути упрощения процесса — добавление автопереходов между полями. Т.е. после ввода месяца курсор самостоятельно переходит на поле год и далее на CVV. Разумеется, при открытии страницы ввода данных карты, курсор должен быть предустановлен на поле номера карты.

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

16. Номер карты в одну строку

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

Однако стоит учитывать неодинаковость номеров карт и настроить разные группы в зависимости от типа карты. Например, вот так:

Типы номеров карт


Здесь же отметим известный алоритм Луна, применяемый для валидации номера карты: можно на 100% быть уверенным что номер карты существует до отправки данных в банк.

А если добавить распознавание банка, выдавшего карту, на основе BIN (первых 6 цифр), то будет абсолютный wow-эффект.

17. Всплывающие окна

Сталкиваясь со всплывающим окном, большинство вспоминает интернет 90х годов с баннерами и прочим подозрительным контентом. Для исключения ассоциации вашего сервиса с фишинговыми сайтами, вместо открытия нового окна постарайтесь провести платеж, не выходя из одной вкладки. Платежные провайдеры предлагают услугу I-frame — встраивания в страницу вашего сайта модуля от сервиса проведения оплаты. Альтернатива — открытие карточной формы в новой вкладке. Если возможно, не используйте всплывающие окна и для 3DS в том числе.

18. Неадаптированная мобильная версия

В 2017 году у крупнейших игроков еCommerce рынка более 50% платежей совершаются с мобильных устройств. Чтобы не потерять половину успешных транзакций, мыслите mobile first. Все профитные фичи десктопного сайта должны быть на мобильной версии. Кроме того, мобильный сайт, а особенно мобильная платежная форма, обязаны выглядеть привлекательно, то есть быть адаптированными.

Экспериментируйте!

19. Наличие 3DS

По данным платежного агрегатора Payler, чаще всего отказы в проведении платежа происходят по следующим причинам:

  • Ошибки 3D-S авторизации (пользователь не ввел код/ ввел с ошибкой, код не пришел, страница 3D-S авторизации не открылась). Это — самая распространенная причина отказа. По статистике на нее приходится до 42-45% отказов.
  • Операция отклонена банком-эмитентом/ банком-эквайером. На долю этой ошибки приходится около 29-33% отказов. Покупатель проявляет подозрительную активность и блокируется антифрод-системами. От 18 до 25% отказов происходят по этой причине.
  • Ошибки покупателя. Самая редкая причина — всего 3-4% отказов.

Чтобы отключить 3DS для всех операций или настроить его наличие в зависимости от суммы платежа, свяжитесь со своим поставщиком эквайринга. Учтите, отключение 3DS может негативно сказаться на CR. В норме сhargeback rate не должен превышать 1%, иначе вам грозят санкции регуляторов.

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

20. Отсутствие мониторинга конверсии

Чтобы понимать насколько изменилась воронка конверсии на платежной форме, необходимо замерить исходные показатели. Перед началом опытов в улучшении показателя конверсии, соберите статистику на каких этапах «отваливаются» ваши пользователи. В этом вам поможет Google Analytics, Яндекс.Метрика и данные вашего эквайера.

21. Отсутствие А/В тестов

Чтобы понять какая из гипотез работает лучше, используйте сервисы A/B тестирования.

А/Б тест


22. Слишком много платежных опций

Зачастую владельцы интернет-магазинов подключают все доступные платежные способы, старясь тем самым увеличить конверсию. Однако доказано, большинство пользователей предпочитают оплату картой или одним из популярных электронных кошельков. Изучите % покупок разными способами и оставьте только нужные чтобы не запутывать покупателя. Альтернатива — скрыть редко используемые опции под кнопку «Другие способы».

Способы оплаты

23. День сурка на платежной форме

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

24. Вы не в тренде

Наконец, изучите самые современные способы принятия платежей, такие как ApplePay. Интеграция этого сценария оплаты возможна в том числе на web-версии сайта. Более подробную информацию можно получить из официальной документации Apple.

Кроссдевайсная оплата

Вместо заключения

Ваш покупатель принимает решение о совершении платежа на сайте руководствуясь не техническими знаниями, а интуицией. Большинство советов этой статьи основаны на психических реакциях и статистике, а не на сложных компьютерных алгоритмах.

Вы можете поднять конверсию на десятки процентов простыми интерфейсными изменениями, главное начать экспериментировать!

И помните, 100% конверсия — это миф. Важно бороться за каждый % и спустя время вы удивитесь насколько поднялась прибыль от онлайн-покупок на вашем сервисе.

Смотрите также:

Комментарии (2)

  1. Роман Судоргин 18 июля 2017, 14:42 # 0
    Отличная статья, Юль, спасибо!
    1. Артур Стоянов 09 августа 2017, 19:46 # 0
      Спасибо за компетентный материал. Юля, вы не подскажите кто из эквайеров работает с нерезидентами РФ? Речь о сайте, принадлежащему юрлицу из Армении. А в Армении интернет-эквайринг пока еще в зачаточном положении, увы.

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

      Регистрация