Как правильно вводить данные кредитной карты

Рекомендации по итогам большого исследования чекаута от специалиста Baymard Institute Кристиана Холста.

Безошибочно ввести 15−16 цифр — непростая задача для большинства из них. Большое исследование удобства чекаута, проведённое Baymard Institute, показало, что трудно не только вводить номер карты, но и проверять корректность ввода. При этом обычные опечатки приводят к ошибкам валидации формы и вынуждают пользователей отказываться от покупки.

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

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

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

Во-вторых, респонденты часто вводят номер в том формате, в котором он выдавлен или напечатан на самой карте. Большинство карт (но не все) имеет 16 цифр, разделённых пробелами через каждые 4 цифры.

Однако многие сайты не принимают номер в таком формате.

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

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

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

  • 4571661027381607
  • 4571 6610 2738 1607
Читайте также:  Как с кредитной карты снять деньги чтобы получилось покупка

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

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

  • AMEX — 15 цифр.
  • VISA — зарезервировано право использовать 13−19 цифр.
  • Maestro — 12−19.
  • Solo и Switch — 16, 18 и 19.
  • China UnionPay — 16−19.

Пользователи позитивно воспринимают автоматическое разделение номера карты на блоки: им проще ввести номер в том же формате, как он напечатан на карте; проще перепроверить.

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

Номер может размечаться во время ввода на лету с помощью маски ввода (input mask). С маской пользователям проще проверить вводимые цифры. Также маска предупреждает их, что номер будет отформатирован за них. Если он форматируется после окончательного заполнения поля, пользователь не будет знать, что форматирование произойдёт, и будет вводить пробелы зря. (Кстати, в этом случае пробелы тоже не должны приводить к проблемам.)

Этот подход можно применить и к полю ввода даты окончания действия карты — в 40% исследованных магазинов оно работает неправильно.

Карты VISA, MasterCard, Discover и JCB обладают номерами из 16 цифр, разделённых на группы по 4 цифры. Но некоторые карты отличаются. Самая значимая из них — это AMEX с 15 цифрами и разделением по схеме 4−6−5. Номер любой карты с 19 цифрами разделяется по схеме 4−4−4−4−3.

Читайте также:  Кредитные карты какие риски

Всё это означает, что схема форматирования должна зависеть от типа карты. К счастью, тип карты можно определить по цифрам в начале номера. Например, номера карт AMEX начинаются с чисел 34 и 37.

Чтобы форма не стала слишком сложной и дорогой в разработке, реализуйте автоматическую разметку для самых популярных карт: VISA, MasterCard, JCB, Discover и AMEX, состоящих из 15 и 16 цифр. Или для карт, которые популярны конкретно на вашем сайте. Лучше, если автоматического форматирования не будет, нежели оно будет отличаться от формата на физическом носителе.

В четвёртом квартале 2016 года 5% пользователей американских интернет-магазинов отказались как минимум от одной покупки только из-за ошибок валидации номера карты.

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

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

Для номеров карт VISA, MasterCard, JCB и Discover, состоящих из 16 цифр, можно автоматически добавить пробел после каждой 4-й цифры. Для состоящей из 15 цифр AMEX — использовать схему 4−6−5.

Adblock
detector