Ввод номера кредитной карты

Немного сокращённый перевод статьи Кристиана Холста из Baymard Institute.

Всем пользователям во время чекаута приходится вводить номер карты, если, конечно, на сайте нет оплаты через Apple Pay или пользователь не сохранил параметры карты в «связке ключей».

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

23% пользователей вводят или проверяют ввод, разделяя номер карты на блоки по 4 цифры, — так же, как те физически напечатаны на большинстве карт.
23% пользователей вводят или проверяют ввод, разделяя номер карты на блоки по 4 цифры, — так же, как те физически напечатаны на большинстве карт.

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

Разделение номера на блоки по 4 цифры

«Я всегда проверяю ввод. С помощью курсора отмеряю блоки по 4 цифры».
«Я всегда проверяю ввод. С помощью курсора отмеряю блоки по 4 цифры».

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

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

Проверка 50 самых оборотистых американских интернет-магазинов показало, что 18% из них действительно так поступает.

Респондент начал вводить номер карты на сайте Walmart. Он ввёл первые 4 цифры, затем посмотрел на карту, ввёл следующие 4 цифры и так далее, пока номер не был введён полностью.
Респондент начал вводить номер карты на сайте Walmart. Он ввёл первые 4 цифры, затем посмотрел на карту, ввёл следующие 4 цифры и так далее, пока номер не был введён полностью.

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

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

«Если допустим, что карта работает, то это означает, что я ввёл что-то неправильно. Но номер карты полностью совпадает, значит, карта не работает. Не понимаю, что делать дальше», — респондент ввёл пробелы после каждой 4-й цифры, что привело к ошибке валидации. Он решил, что карта заблокирована, и отказался от покупки.
«Если допустим, что карта работает, то это означает, что я ввёл что-то неправильно. Но номер карты полностью совпадает, значит, карта не работает. Не понимаю, что делать дальше», — респондент ввёл пробелы после каждой 4-й цифры, что привело к ошибке валидации. Он решил, что карта заблокирована, и отказался от покупки.
«Ввела пробелы через каждые 4 цифры. Я подумала, что их тоже надо вводить, раз они есть на карте», — у респондента не получилось ввести номер целиком. Она использовала пробелы, а на сайте American Eagle поле для ввода номера карты ограничено 16 символами.
«Ввела пробелы через каждые 4 цифры. Я подумала, что их тоже надо вводить, раз они есть на карте», — у респондента не получилось ввести номер целиком. Она использовала пробелы, а на сайте American Eagle поле для ввода номера карты ограничено 16 символами.

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

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

Ввод пробелов

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

  • 4571661027381607
  • 4571 6610 2738 1607

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

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

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

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

Авторазметка номера карты

«Он сам всё размечает», — респондент приятно удивился, когда на сайте Walmart введённый номер (первая иллюстрация) разделился на блоки по 4 цифры (вторая иллюстрация).
«Он сам всё размечает», — респондент приятно удивился, когда на сайте Walmart введённый номер (первая иллюстрация) разделился на блоки по 4 цифры (вторая иллюстрация).

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

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

BestBuy размечает номер карты автоматически во время ввода.
BestBuy размечает номер карты автоматически во время ввода.

Номер может размечаться во время ввода на лету с помощью маски ввода (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 цифр. Или для карт, которые популярны конкретно на вашем сайте. Лучше, если автоматического форматирования не будет, нежели оно будет отличаться от формата на физическом носителе.

Вывод

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

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

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

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

Также опубликовано на Медиуме и VC.