Поле ввода карты

Эта статья о дизайн-паттерне. Категория: формы.

Apple Pay и ему подобные инопланетные технологии пока не очень распространены в качестве платёжного способа на сайтах. За ними будущее, но пока мы должны поддерживать пластик как основной метод оплаты.

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

Задача

Для запроса на списание с карты нужны 4 поля: номер карты, срок действия (месяц и год), проверочный код CVC.

Задача — максимально легко принять от пользователя данные о пластиковой карте.

Решение

Сгруппировать все данные одно умное поле ввода цифр. При помощи скрипта, так называемой маски, выстраивать вбитые цифры по смысловым группам. Если данные некорректны, сообщать об этом до отправки формы.

Ошибки

Заставлять вводить имя держателя карты

Это поле лишнее, потому что транзакция пройдёт и без этой информации. Платёжному сервису плевать, что там написано, в чём я лично убедился. Можешь смело писать, что ты DARTH VADER. Нужны только цифры. Если меня заставляют вбивать имя, для экономии времени я вбиваю только инициалы.

Не использовать tabindex

Если сфокусировано поле ввода карты, клавиша Tab должна переключать поле на следующее, чтобы пользователь лишний раз не брал в руки мышку, оставаясь руками на клавиатуре. За это отвечает параметр tabindex. Увы, не всегда на это обращают внимание. Нет ничего более раздражающего, чем не работающий табиндекс в формах.

Множить поля

Согласно принципу простоты, чем меньше в форме полей — тем лучше. Отдельные идиоты создают для номера карты четыре поля вместо одного. Наверное, чтобы пользователям было больнее:

Поле с номером карты должно быть единым.

Замусоривать форму блоками

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

Выполнять форму в виде двух карт старомодно

Скеоморфическую моду на рисование двух карт пора прекращать, потому что этот подход не позволяет объединять поля, в которые нужно вбивать цифры. Да, я знаю, так все делают. Это лучше, чем форма Paymaster, потому что скеоморфизм кажется дружелюбнее. Он был бы ещё лучше, если дизайнер объединил месяц и год в одно поле, а заодно убрал лишние синие иконки:

Выполнять месяц и год в виде дропдаун-меню

Фонд помощи «Вера» и Билайн допустили ещё одну ошибку: срок действия карты нужно вводить с клавиатуры, а не выбирать из дропдаун-меню. Гораздо проще вбить цифры «07 18», чем искать оба значения в меню. Когда человек вбивал номер карты, он использовал одну логику. Когда он дошёл до срока действия, мы заставляем его менять логику и разбираться, как работают дропдауны. Это повышает логическую нагрузку интерфейса.

Как надо

Стремиться к минимализму

Интернет-магазин скриптов Codester не наступил на эти грабли и сделал хорошую форму. Если надо быстро и эффективно, надо так:

Если ты хочешь перестраховаться, чтобы любой человек, который ни разу в жизни не вводил карту, смог это сделать, вынеси обучающую информацию в отдельный всплывающий блок. Там можно написать, что такое номер карты, срок действия, CVC и какой сейчас год. Но если пользователь уже хоть раз в жизни платил в интернете картой, он поймёт, что такое ММ/ГГ и CVC.

Как запрашивает карту Dropbox. Неплохо, хотя и без нижней строки могли бы обойтись.

Использовать маски

Маска — это скрипт, который распознаёт, какие данные были вбиты в форму и может делать из них группы. Маски используются для номеров карт, сумм и телефонов.

5536301490730718 — без отступов глазу сложно вычленить кусок информации.

Маска отвечает, чтобы поля не слипались в одну кучу и разделяет группы пробелами. Такой номер карты просто диктовать и переписывать.

5536 3014 9073 0718 — по фэншую.

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

Например, бывают карты, в которых не 16 символов, а до 19. Если маска переключит поле на 16 символе, есть вероятность, что пользователь не сможет вбить оставшиеся 3.

Используй маски только там, где точно известно максимальное количество символов.

Позволять вставлять номер карты

Обязательно надо учесть ситуацию, когда номер карты копируют в поле ввода. Пользователи не помнят свои карты наизусть, поэтому записывают их номера в файл. Это плохо с точки зрения безопасности, но это неизбежность. Если вставить его в первое поле, далеко не факт, что цифры правильно распределятся по остальным полям. Часто бывает так, что они так и остаются только в первом. Их приходится из него удалять и вбивать весь номер карты вручную.

Все данные — в одно поле

Тинькофф не учёл, что номер карты может храниться у пользователя в файле уже с пробелами: при вставке их маска не позволяет вставлять номер карты и теряет символы:

Есть решение ещё лучше. Я нашёл его в форме хостинга Namecheap.com.

Оно выглядит как единственное поле Card, но по факту объединяет все четыре фрагмента данных. Заполнять поле из цифр нет никакой проблемы, если они разделяются группами по смыслу.

Этот пример использует анимацию, но можно было бы обойтись и без неё, главное, чтобы цифры группировались блоками. Психологически пользователю просто заполнить всего лишь одно поле. Когда номер карты заполнен, он сдвигается влево, освобождая место для номера CVC. Маска переключает поля и пользователь знает, что вводит. Это удачная мотивирующая анимация, которая помогает завершить начатое действие. Держись, юзер, чуть-чуть осталось.

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

Другая приятная деталь: в процессе ввода можно менять иконку карты. Так система понимает, что мы вводим карту «Виза». Можно пойти дальше: по первым шести цифрам определить банк и подгрузить иконку с его логотипом.

Ссылки по теме

Baymard Institute: Credit Card IIN Ranges & Spacing Patterns

vc.ru: Как упростить ввод номера кредитной карты