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

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

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

Рекомендации из этой статьи основаны на информации юзабилити-исследования «Процесс оплаты банковской картой в Интернете», в котором принимали участие 14 платежных провайдеров и банков-эквайеров. Исследование проводилось компанией UsabilityLab по заказу MasterCard.

Интерфейс, созданный для пользователя

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

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

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

Структура визуальной формы

● Поля нужно располагать по порядку.

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

● При разработке форм стоит уточнять по поводу каждого элемента: можно ли обойтись без этого? Если ответ «да», то пусть конкретной строчки, поля, блока не будет в интерфейсе.

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

Дизайн и обработка данных

Хотя чаще всего модуль банка-эквайера не является «родным» для сайта, он должен быть сделан с учетом дизайна страниц интернет-магазина.

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

● Сообщения об ошибках заполнения следует помещать непосредственно над полями.

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

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

Ввод информации

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

● Формат данных пусть исправляется автоматически: фамилия и имя могут вводиться, например, строчными буквами, но отображаться будут всегда заглавными.

● Используйте визуальные подсказки, выделение и объединение.

● Обходитесь без сложных специфических терминов и аббревиатур (например, PAN и CVV).

● Размер полей должен подходить по длине к вводимым данным.

Взаимодействие с интернет-магазином на программном уровне

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

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

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

Рядом с формой ввода платежных данных не должно быть ничего лишнего. Если вы хотите, чтобы пользователь заполнил дополнительные поля, сделайте к ним пояснения. Объясните или не спрашивайте. Клиент имеет право знать, потому что в противном случае у него снижается уровень доверия и возрастает степень подозрительности. Учитывайте вариант оплаты безымянной картой. Добавьте возможность возврата на сайт магазина для редактирования параметров заказа. Пользователь не должен начинать оформление с самого начала, если забыл внести что-то непосредственно до оплаты.

Надежность = доверие

К дополнительной, но необходимой информации на странице платежного интерфейса можно отнести логотипы известных платежных систем, банков и типов соединения. Их можно оставить, но не делать чересчур броскими. Рядом можно кратко написать о гарантиях безопасности обращения с деньгами. Исследование показало, что наличие иконок узнаваемых платежных систем и различная информация, подтверждающая безопасность платежа (значок PCI DSS или 3Dsecure), положительно воспринимаются пользователями.

Работа над ошибками

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

Подводим итоги

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

Сделайте страницу ввода максимально простой — оставьте 3-4 поля, которые действительно необходимы. Чем меньше пользователь будет задумываться, тем лучше. Главное в процессе оплаты товара — это спокойный и довольный клиент. Потратьте больше усилий при проектировании интерфейса, чтобы пользователи оформляли оплату в считанные минуты.

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

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

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