Как улучшить UX вашей платежной формы за один день

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

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

Дальнейшее чтение на SmashingMag:

• Сокращение брошенных корзин в электронной коммерции
• Проверка поля формы: подход только к ошибкам
• Основные принципы дизайна касс электронной коммерции
• Подробное руководство по удобству использования веб-форм

Данные кредитной карты являются одними из наиболее часто исправляемых полей в формах. К счастью, в настоящее время почти в каждом популярном браузере есть функция автозаполнения, позволяющая пользователям хранить данные своей карты в браузере и быстрее заполнять поля формы. Кроме того, начиная с iOS 8, пользователи мобильного Safari могут сканировать информацию о своей карте с помощью камеры iPhone и автоматически заполнять поля номера карты, даты истечения срока действия и имени. Автозаполнение простое, понятное и встроено в HTML5, поэтому сначала мы добавим его в нашу форму.

И автозаполнение, и сканирование карточек работают только с формами, имеющими специальные атрибуты: autocomplete для современных браузеров (указано в стандарте HTML5) и name для браузеров без поддержки HTML5.

Примечание . Доступна демонстрационная версия со всеми описанными ниже функциями. Вы можете найти его код в репозитории GitHub .

Кредитные карты имеют определенные атрибуты автозаполнения. Для autocomplete :

• cc-name
• cc-number
• cc-csc
• cc-exp-month
• cc-exp-year
• cc-exp
• cc-type
• cc-csc

Для name :

• ccname
• cardnumber
• cvc
• ccmonth
• ccyear
• expdate
• card-type
• cvc
  

Чтобы использовать автозаполнение, вы должны добавить соответствующие атрибуты autocomplete и name для элементов ввода в файле index.html :

 <input type="text" class="card__input card__input_number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber"> <input type="text" class="card__input card__input_date card__input_month" placeholder="MM" pattern="[0-9]{1,2}" required autocomplete="cc-exp-month" name="ccmonth"> <input type="text" class="card__input card__input_date card__input_year" placeholder="YYYY" pattern="[0-9]{2,4}" required autocomplete="cc-exp-year" name="ccyear"> <input type="text" class="card__input card__input_cardholder" placeholder="CARDHOLDER NAME" required autocomplete="cc-name" name="ccname">

Не забудьте использовать placeholder в полях ввода, чтобы помочь пользователям понять требуемые форматы данных. Мы можем обеспечить проверку ввода с помощью атрибутов HTML5: pattern (на основе регулярных выражений JavaScript) и required . Например, с pattern=”[0-9\s]{14,23}” required в поле пользователь не сможет отправить форму, если поле пусто, имеет нечисловой или -пробел или короче 14 символов или длиннее 23 символов.

Как только пользователь сохранил данные своей карты в браузере, мы можем увидеть, как это работает:

Обратите внимание, что использование одного поля для даты истечения срока действия ( MM/YYYY ) не рекомендуется, поскольку Safari требует отдельных полей месяца и года для автозаполнения.

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

Несмотря на то, что теперь у нас есть автозаполнение, Google Payments и Apple Wallet, многие пользователи по-прежнему предпочитают вводить данные своей кредитной карты вручную, и никто не застрахован от опечатки с 16-значным числом. Длинные числа трудно читать, еще труднее писать и почти невозможно проверить.

Чтобы пользователи чувствовали себя комфортно с длинным номером карты, мы можем разделить его на четырехзначные группы, добавив в наш проект простую библиотеку VanillaMasker от BankFacil. Введенные данные будут преобразованы в замаскированную строку. Таким образом, мы можем добавить собственный шаблон с пробелами после каждой четвертой цифры номера карты, двухзначный шаблон для месяца истечения срока действия и четырехзначный шаблон для года истечения срока действия. VanillaMasker также может проверять форматы данных: если мы передали в идентификатор только «9» (число по умолчанию для маскировщика), то после ввода все нечисловые символы будут удалены.

 npm install vanilla-masker --save

В нашем файле index.js давайте импортируем библиотеку и используем ее с одной строкой для каждого поля:

 import masker from 'vanilla-masker'; const cardNumber = document.getElementById('card__input_number'); const cardMonth = document.getElementById('card__input_month'); const cardYear = document.getElementById('card__input_year'); masker(cardNumber).maskPattern('9999 9999 9999 9999 99'); masker(cardMonth).maskPattern('99'); masker(cardYear).maskPattern('9999');

Таким образом, цифры номера карты в нашей форме будут разделены, как на настоящей карте:

Маскер удалит символы с неправильным типом значения или длиной, хотя наша проверка HTML уведомит пользователя о недопустимых данных только после отправки формы. Но мы также можем проверить корректность номера карты по мере его заполнения. Знаете ли вы, что все номера пластиковых кредитных карт генерируются по простому и эффективному алгоритму Луна? Он был создан в 1954 году Гансом Петером Луном и впоследствии стал международным стандартом. Мы можем включить алгоритм Луна для предварительной проверки поля ввода номера карты и предупреждения пользователя об опечатке.

Для этого мы можем использовать крошечный пакет fast-luhn npm, адаптированный из gist без рубашки Кирка. Нам нужно добавить его в зависимости нашего проекта:

 npm install fast-luhn --save

Чтобы использовать fast-luhn, мы импортируем его в модуль и просто вызываем luhn(number) в событии ввода, чтобы проверить правильность числа. Например, добавим класс card__input_invalid для изменения outline и color текста поля, когда пользователь допустил случайную ошибку и проверка не прошла. Обратите внимание, что VanillaMasker добавляет пробел после каждой группы из четырех цифр, поэтому нам нужно преобразовать введенное значение в простое число без пробелов, используя методы split и join перед вызовом lunh .

В результате получается код, который выглядит так:

 import luhn from 'fast-luhn'; const cardNumber = document.getElementById('card-number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; if (number.length >= 14) { const isLuhnCheckPassed = luhn(number.split(' ').join('')); cardNumber.classList.toggle('card__input_invalid', !isLuhnCheckPassed); cardNumber.classList.toggle('card__input_valid', isLuhnCheckPassed); } else { cardNumber.classList.remove('card__input_invalid', 'card__input_valid'); } });

Чтобы предотвратить luhn , пока пользователь печатает, давайте вызывать его только в том случае, если введенный номер имеет минимальную длину с пробелами (14 символов, включая 12 цифр) или больше, или же удалим класс card__input_invalid .

Вот примеры проверки в действии:

Алгоритм Луна также используется для некоторых номеров дисконтных карт, номеров IMEI, номеров национальных идентификаторов поставщиков услуг в США и номеров социального страхования в Канаде. Таким образом, этот пакет не ограничивается кредитными картами.

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

Доступно несколько бесплатных шрифтов для кредитных карт:

• Холтер, Apostrophic Labs
• Кредит, Типодермические Шрифты
• Кредитная карта, K-Type (бесплатно для личного использования)

Мы будем использовать Холтер. Сначала загрузите шрифт, поместите его в папку проекта и создайте правило CSS3 @font-face в style.css :

 @font-face { font-family: Halter; src: url(font/HALTER__.ttf); }

Затем просто добавьте его в правило font-family для класса .card-input :

 .card-input { color: #777; font-family: Halter, monospace; }

Не забывайте, что если вы вводите CSS в файл JavaScript с пакетом webpack, вам нужно будет добавить file-loader :

 npm install file-loader --save

И добавьте file-loader файлов для типов файлов шрифтов в webpack.config.js :

 module: { loaders: [ { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file', }], },

Результат выглядит неплохо:

Вы можете сделать его еще более привлекательным, если хотите, с эффектом тиснения, используя двойную text-shadow и полупрозрачность color текста:

 .card-input { color: rgba(84,110,122,0.5); text-shadow: -0.75px -0.75px white, 0.75px 0.75px 0 black; font-family: Halter, monospace; } 

И последнее, но не менее важное: вы можете приятно удивить клиентов, добавив в форму функцию раскраски. У каждого банка есть свой фирменный цвет, который обычно доминирует на карте этого банка. Чтобы сделать платежную форму еще более удобной для пользователя, мы можем использовать этот цвет и печатать название банка над полями формы (соответствующее тому месту, где оно появляется на реальной карте). Это также поможет пользователю избежать опечатки в номере и убедиться, что он выбрал правильную карту.

Мы можем определить банк карты каждого пользователя по первым шести цифрам, которые содержат идентификационный номер эмитента (ИИН) или банковский идентификационный номер (БИН). Banks DB от Ramoona — это база данных, которая получает название банка и фирменный цвет от этого префикса. Автор создал демо-версию Banks DB.

Эта база данных управляется сообществом, поэтому она не содержит информацию обо всех мировых банках. Если банк пользователя не представлен, место для названия банка будет пустым, а фон будет иметь цвет по умолчанию ( #fafafa ).

Банковская БД предполагает один из двух способов ее использования: с PostCSS или с CSS в JavaScript. Мы используем его с PostCSS. Если вы новичок в PostCSS, это хороший повод начать его использовать. Вы можете узнать больше о PostCSS в официальной документации или в статье Дрю Миннса «Введение в PostCSS».

Нам нужно установить плагин PostCSS Banks DB, чтобы задать шаблон CSS для Banks DB, и установить плагин PostCSS Contrast, чтобы улучшить читаемость названия банка:

 npm install banks-db postcss-banks-db postcss-contrast --save

После этого мы добавим эти новые плагины в наш процесс PostCSS в соответствии со сборщиком модулей и конфигурацией загрузки, используемой в нашем проекте. Например, с Webpack и postcss-load-config просто добавьте новые плагины в файл .postcssrc .

Затем в наш файл style.css нам нужно добавить новый шаблон правила класса для БД Banks с плагином postcss-contrast:

 @banks-db-template { .card_bank-%code% { background-color: %color%; color: contrast(%color%); } }

Мы также могли бы установить длинный transition для всего класса .card , чтобы плавно появляться и исчезать фон и цвет текста, чтобы не пугать пользователей резким изменением:

 .card { … transition: background 0.6s, color 0.6s; }

Теперь импортируйте базу данных банков в index.js и используйте ее в прослушивателе input событий. Если БИН представлен в базе данных, мы добавим в форму класс, содержащий название банка, чтобы вставить название и изменить фон формы.

 import banksDB from 'banks-db'; const billingForm = document.querySelector('.card'); const bankName = document.querySelector('.card__bank-name'); const cardNumber = document.getElementById('card__input_number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; const bank = banksDB(number); if (bank.code) { billingForm.classList.add(`card_bank-${(bank.code || 'other')}`); bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle; } else { billingForm.className = 'card'; bankName.innerText = ''; } });

Если вы используете веб-пакет, добавьте json-loader для расширения файла .json в конфигурацию веб-пакета, чтобы правильно вводить базу данных в пакет.

Вот рабочий пример БД банков:

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

Заключение

Улучшение формы выставления счетов может сделать пользовательский интерфейс более интуитивно понятным и, как следствие, обеспечить удобство для пользователя и повысить доверие к вашему продукту. Это важная часть веб-приложений. Мы можем быстро и легко улучшить его, используя эти простые функции:

• подходящие атрибуты autocomplete и name для автозаполнения,
• атрибут placeholder для информирования пользователя о формате ввода,
• pattern и require атрибуты для предотвращения неправильной отправки формы,
• VanillaMasker для разделения цифр карт,
• fast-luhn для проверки номера карты,
• шрифт Halter для удобства сравнения,
• Банки БД для более приятного представления цветов.

Обратите внимание, что только для БД банков требуется сборщик модулей; вы можете использовать другие в простом скрипте. Добавление всех этих функций на страницу оформления заказа, скорее всего, займет меньше дня.