Как упростить ввод номера кредитной карты для пользователей12.10.2017 14:37

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

В избранное

В избранном

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 4571661027381607
  • 4571 6610 2738 1607

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

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

Перевод подготовил Антон Григорьев.

#интерфейсы

©  vc.ru