На днях сугубо по работе попытался формализовать набор требований по тестированию платёжных форм. Речь в данном случае о банковских картах, но принципы — общие для всего. За исключением некоторой узкотематической специфики, правила применимы почти везде.
Впрочем, многие на этих достаточно простых и понятных вещах делают продукты и, следовательно, деньги.
Совсем общие принципы:
- Мы не пугаем пользователя. Ему в каждый момент должно быть понятно, что происходит и зачем.
- Достичь результата, т. е. заплатить, должно быть максимально просто. Мы не должны спрашивать у пользователя то, что можем узнать сами.
- Мы делаем вещи, затрагивающие платежи, т. е. мы должны заботиться о безопасности и соблюдении формальных требований (законодательство, требования МПС и т.д.).
А теперь ближе к делу:
- Общее
- Только https, только PCI DSS
- Поддерживаем все типы карт. Не забываем, что есть карты с длиной номера, отличной от 16.
- На странице есть все необходимые по стандартам элементы (логотипы Visa/MasterCard, если требуется — оферта с условиями проведения платежа)
- На странице есть информация о заказе. Сразу понятно, что оплачивает человек.
- Не спрашиваем то, что и так можем узнать (например, тип карты мы можем определять по БИНу)
- Страница корректно ведёт себя в iframe и в полноэкранном режиме
- Форма нормально работает на мобильных
- «Складывается» под размер экрана
- fat-finger-friendly
- Клавиатуру показываем по типу содержимого. Например, для номера карты — цифровая клавиатура.
- Понятно, как выводить доп. поля, иногда необходимые для проведения платежа (доп. поля для фрод-мониторинга, хайриск и т.д.)
- Понятно, как делать рекурренты
- Форма в полном размере максимально повторяет внешний вид карты (вкусовщина, по хорошему надо ставить эксперименты)
- CVC корректно/понятно подписан
- Есть контактные данные саппорта
- Валидация
- expiry date не в прошлом
- Номер карты проходит валидацию по Luhn (https://ru.wikipedia.org/wiki/Алгоритм_Луна)
- Пропускаются короткие имена/фамилии (1-2 буквы) и составные фамилии (содержат дефис)
- Поведение
- Номер карты можно скопировать и вставить в форму. Более того, форма должна быть дружественна к приложениям, сохраняющим и заполняющим данные карты (1password, iCloud keychain и т. д.)
- Цифры в номере карты форматируются по группам
- Между полями можно переходить по табуляции. Последовательность перехода соответствует визуальному расположению полей на форме.
- Вбиваемая кириллица приводится к латинице. Все буквы приводятся к верхнему регистру
- Доп. функционал (специфично для интеграторов, но… мало ли)
- Кастомизируется под мерчанта — фоны-логотипы
- Максимально много информации для предзаполнения можно передать со стороны мерчанта
- Понятно, как делать рекурренты – https://www.chargify.com/, https://recurly.com/
Ссылки в порядке занимательного чтения:
- https://baymard.com/blog/visually-reinforce-sensitive-fields
- http://gigliwood.com/blog/designing-the-perfect-credi.html
- https://www.lukew.com/ff/entry.asp?1667
- http://bradfrost.com/blog/post/single-field-credit-card-input-pattern/
- https://designmodo.com/ux-credit-card/
- https://designmodo.com/ux-credit-card-payment-form/
- https://dribbble.com/shots/797913-Credit-Card-input
Автор: Борис Богданов.
Быстро оформить онлайн-заявку на кредитную карту в онлайн-банках
Интересное...
Комментариев нет:
Отправить комментарий