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

Рекомендации по итогам большого исследования чекаута от специалиста 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.

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

#интерфейсы

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Антон Григорьев", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 13, "likes": 19, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 27451, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 27451, "author_id": 5732, "diff_limit": 1000, "urls": {"diff":"\/comments\/27451\/get","add":"\/comments\/27451\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/27451"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

13 комментариев 13 комм.

Популярные

По порядку

Написать комментарий...
12

Можно было оставить только вывод, в статье в каждом абзаце повторяется одно и то же.

Ответить
0

Сам только что то же самое хотел написать :)

Ответить
9

Отдельную сковородку в аду тем, кто вместо одного поля ввода номера делает 4 (по 4 символа в каждом) - так, что воспользоваться Ctrl-C/Ctrl-V из любимого менеджера паролей не получится.

Ответить
4

Так у меня в хром автомат предлагает. Я написал один раз, сохранил и теперь больше не требуется.

Ответить
8

Мой внутренний параноик поперхнулся...

Ответить
4

Вот если честно, чувствую себя слегка обманутой..
А как же
- автоматический перевод курсора
- использование полей импута, а недроплистов для ввода даты и года
- распознавание фото карты
21 век всё-таки.

Ответить
1

Нене, ничего не знаем, это все другие исследования

Ответить
2

Скоро w3c одобрит Payment Request API и браузеры смогут заполнять автоматически из сохраненных данных. А то уже плохо становится, от костылей и велосипедов некоторых форм оплаты.

Ответить
0

Работает уже. Можешь посмотреть тут: https://wifimag.ru.
Кнопка - "Оплата сохраненной картой". Пробовать в Chrome 53+ по документации (В 61 точно работает).

Ответить
2

Всю статью можно было поместить в заголовок "Как упростить ввод номера кредитной карты для пользователей - раздели номер на 4 части" ))

Ответить
0

В статье ещё написано, как это разделение правильно организовать :)

Ответить
1

Всегда ввожу по памяти. Запомнить номер карты - от силы 10 минут.
У людей, у которых несколько карт - в интернете обычно платят одной и той же.

Ответить

Комментарий удален

1

Как можно было одну мысль размазать на такое количество текста? У нас тут конечно не литературный кружок, ощущения от статьи как после кликбейта

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления