10 простых правил платежных интерфейсов. Читайте на Cossa.ru

07 июля 2015, 11:25
1

10 простых правил платежных интерфейсов

UsabilityLab совместно с MasterCard провели исследование «Процесс оплаты банковской картой в интернете. Обзор и лучшие практики». В данном материале собрана выжимка самых ценных советов по созданию платежных форм и удобных лаконичных интерфейсов, которая будет полезна всем разработчикам и продюсерам.

Клиентами агентств порой становятся банки и e-commerce компании, которым нужно интегрировать свои сервисы в промо-страницы. Подобным сервисом может быть форма моментальной покупки рекламируемой услуги, товара. У клиента не всегда есть готовая форма, поэтому до интеграции нужно сделать ее с нуля.

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!


Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

  1. Автоматически предлагайте пользователям самый популярный способ оплаты. Начнем с простого: название вида оплаты должно быть однозначным. Частой ошибкой бывает обозначение «Оплата кредитной картой». У пользователя возникает логичный вопрос: «А что, дебетовой нельзя?». Вторым шагом является группировка способов оплаты, которая позволит в дальнейшем вывести в топ самый популярный из них. Так вы сэкономите время клиента и порадуете его тем, что первый параметр в процессе оплаты уже заполнен.
  2. Сделайте платежную форму похожей на настоящую пластиковую карточку. Речь идет о группировке полей, логотипов и текстовой информации. Пусть каждый возьмет свою карту и просто введет всю информацию с нее в электронную копию на сайте. При этом важно соблюдать такие детали, как расстановка пробелов между цифрами, как на карте. А в поле набора имени и фамилии лучше всего по умолчанию подставлять только заглавные буквы.
  3. Расположите все поля по порядку и разделите их логически. Логика в процессе оплаты должна быть понятна даже не очень продвинутому пользователю. Сначала он указывает сумму, потом выбирает способ оплаты, потом заполняет данные карточки, потом получает подтверждение платежа с указанием суммы, даты и своих данных. Только в таком порядке. При этом важно отделять эти шаги друг от друга, если вывести все на один экран — пользователь растеряется.
  4. Сделайте форму платежа унифицированной. Если форма оплаты будет похожей на большинство других, пользователь не будет теряться. Клиент любит видеть привычное и знать заранее, что и когда от него потребуют ввести. В идеале интегрировать ту платежную форму, которую предоставит банк или платежный шлюз, но часто бывают варианты, когда это невозможно по техническим причинам.
  5. Избавляйтесь от лишних элементов. Спросите себя: обязательно ли это поле, строчка информации? Люди будут благодарны за лаконичный, максимально упрощенный интерфейс. Важно не спрашивать у пользователя ту информацию, которая не является необходимой для осуществления платежа. Например, необязательно спрашивать у пользователя, какой платежной системы у него карта, эти данные можно определить автоматически по номеру карты и другим данным.
  6. Выделяйте поля по степени важности. Обязательные должны сразу бросаться в глаза. Здесь действует простое правило: самый крупный и заметный текст в вашем интерфейсе — это цифры суммы, которую переводит пользователь.
  7. Сообщения об ошибках делайте яркими, а текст в них — простым. Не утомляйте клиентов терминами и аббревиатурами. Лучше сразу подскажите, как внести исправления. Проверяйте и по возможности автоматически исправляйте каждое заполненное поле. В противном случае пользователь разозлится после отправки всей формы, когда получит в ответ «красные алерты». Также хорошим тоном считается присылать пользователю уведомление об ошибке на почту с указанием полной платежной информации и подсказками, как решить проблему. Это нужно, чтобы мотивировать пользователя провести операцию еще раз, даже если первый раз платеж не прошел. Информация нужна для того, чтобы он смог проверить, не допустил ли где-то ошибку при заполнении.
  8. Свяжите между собой одинаковые поля в формах. Пользователи терпеть не могу вводить одну и ту же информацию несколько раз. Заполнили на одной странице — на другой пусть сработает автозаполнение, если, конечно, существует реальная необходимость в повторении полей. Если нет — смотрите пункт 5. Если на вашем сайте только вводится сумма платежа, а следующим шагом пользователя переводят на внешний платежный шлюз, сумма должна автоматически быть проставлена на открывшейся новой странице.
  9. Сделайте размер поля максимально подходящим к формату данных. Это добавляет пользователям уверенности. Если в полях останется пустое пространство или, наоборот, данные не поместятся, клиент будет чувствовать себя неуютно и волноваться о правильности ввода.
  10. Подчеркните, насколько безопасно платить через конкретную платежную систему. Добавляйте логотипы платежных операторов (особенно, если это известные компании) и небольшим текстом уверяйте пользователя в надежности любой операции с его деньгами. Оказывается, это успокаивает пользователей — проверено в рамках исследования.

С полным текстом исследования можно ознакомиться здесь.


Источник картинки на тизере: Depositphotos

Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru

📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is