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

В закладки

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

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

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

Номер может размечаться во время ввода на лету с помощью маски ввода (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": ["\u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 13, "likes": 19, "favorites": 24, "is_advertisement": false, "subsite_label": "flood", "id": 27451, "is_wide": true, "is_ugc": true, "date": "Thu, 12 Oct 2017 14:09:00 +0300", "is_special": false }
0
{ "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, "last_count_and_date": null }
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

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }