Лого vc.ru

Советы по оформлению формы оплаты банковской картой от UX-дизайнера компании Wave

Советы по оформлению формы оплаты банковской картой от UX-дизайнера компании Wave

Габриэль Томеску, UX-дизайнер компании-разработчика приложений для малого бизнеса Wave, написал статью на Medium, в которой рассказал, как создать удобную и понятную форму оплаты кредитной картой.

В рубрике «Интерфейсы» — перевод заметки Томеску, подготовленный командой Faino Interactive для рассылки дизайнеров интерфейсов UX Fox.

Поделиться

Расплатиться онлайн кредитной картой легко, не правда ли? И да, и нет. С одной стороны, мы начали это делать ещё на заре интернета (например, для покупок на Amazon). С другой — не бывает двух одинаковых форм оплаты.

За последние 20 лет мы выстроили модель онлайн-оплаты: я достаю из кошелька кредитную карту, ввожу данные карты в форму на сайте и нажимаю кнопку «Отправить». Но пройти этот путь от начала до конца может быть сложно, пользователю приходится отвечать на множество вопросов. А читать инструкции, конечно, никто не хочет.

Формы оплаты кредитной картой популярных сайтов и приложений

Рассчитаться лично всё ещё гораздо проще, чем провести оплату онлайн. Ничто не заменит простую возможность провести карту в терминале. Не требуется ничего набирать. Вам даже не нужно думать о том, что написано на карте. В параллельной вселенной вы могли бы просто дотронуться картой до монитора, чтобы приобрести крутую футболку любимого бренда. Ещё лучше было бы вообще избавиться от карты, чтобы не было необходимости доставать её из кошелька. Благодаря системе Apple Pay, мы достигли значительного прогресса.Мы берём курс на упрощение и ускорение процесса оплаты онлайн. Последние спецификации HTML включают в себя внедрение форм оплаты кредитной картой, и браузеры не отстают. Chrome 42+ поддерживает автозаполнение. Safari также разработал свой инструмент. Но вам всё ещё нужна кредитная карточка в руках, чтобы при каждой транзакции вручную вводить код безопасности.

И всё же, пока формы оплаты кредитными картами не канули в прошлое, нам стоит разработать для них принципы ясности, простоты и безопасности.

Наш продукт Invoice в Wave позволяет предпринимателям выписывать и отсылать клиентам счета, которые можно оплатить с помощью кредитной карты. В мои обязанности входила разработка интерфейса формы с учётом условий работы предпринимателей. Эта статья посвящена приёмам, которые мы разработали при создании продукта.

Форма оплаты кредитной картой от Wave

Нашей целью было разобраться со всеми данными, которые пользователю необходимо ввести, и с вопросами, которые у него при этом возникают.
  1. Какие карты принимают для оплаты?
  2. Как определить сумму оплаты?
  3. Имя и фамилия на карте.
  4. Номер карты.
  5. Тип карты.
  6. Дата окончания срока действия карты.
  7. Код безопасности.
  8. Почему необходимо указывать ZIP-код?
  9. Надёжно ли защищены мои данные в этой форме?
  10. Что происходит при нажатии на «Оплатить»?
  11. Как быть с ошибками при вводе информации?
  12. Дизайн для разных размеров экрана.

1. Какие карты принимают для оплаты

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

Где в форме разместить эти логотипы? Вначале мы пытались разместить их над полем для ввода номера карты. Таким образом высота формы казалась меньше и логотипы были маленькими и сплюснутыми. Затем мы решили поместить их в само поле для ввода. Это почти сработало, но из-за того, что у нас оно узкое, а логотипы занимают слишком много места,  его не оставалось для ввода номера.

Мы пришли к решению разместить их вверху формы. Таким образом, их сразу видно, с ними пользователь сталкивается в первую очередь, когда видит форму, ему не приходится их искать. Логотипы сразу привлекают внимание, как бы говоря: «вот тут следует платить». Мы решили, что самих логотипов будет достаточно, поэтому не стали добавлять приписки «Для оплаты принимаются кредитные карты» или «Оплатить с помощью».

2. Как определить сумму оплаты

Одно из требований, которое нам следовало удовлетворить,  — дать пользователю возможность решить, сколько заплатить. В случае с большими суммами пользователю может понадобиться провести частичную оплату (например, задаток), или же гасить счёт поэтапно по мере выполнения работы. Сумма оплаты по умолчанию равна неоплаченной части инвойса. Другими словами, если проведена частичная оплата, сумма к погашению равна задолженности.

Известно, что чем больше полей для ввода в форме на сайте, тем меньше процент пользователей, завершивших её заполнение, и тем выше показатель отказов. Чтобы уменьшить число полей, мы отображаем сумму к оплате в формате «только для чтения», с кнопкой для правки, вместо того чтобы по умолчанию отображать поле для ввода.

В режиме редактирования мы думали над кнопкой «Сохранить» или «Готово», это бы возвращало поле в режим «только для чтения». Но мы посчитали это лишним, ведь сумму и так видно на экране. Если бы пользователю понадобилось снова её изменить, он мог бы просто изменить её значение в поле для ввода, без всяких нажатий на «Сохранить» или «Готово».

Кроме того мы хотели, чтобы пользователь подтверждал сумму к оплате, перед тем как отправить форму. Это обеспечивает его осведомлённость о средствах, которые будут сняты с кредитной карты. Мы отображаем эту сумму внутри кнопки «Оплатить», внизу формы. Это число меняется синхронно с тем, как пользователь заполняет поле «Сумма».

3. Имя и фамилия на карте

Следующий пункт, который мы просим указать , — имя и фамилия владельца кредитной карты. Мы рассматривали несколько вариантов надписи в поле для ввода:

  • Имя и фамилия владельца карты;
  • Владелец карты;
  • Имя и фамилия на карте;
  • Имя и фамилия (как указано на вашей карте);
  • Полное имя на карте.

Мы пришли к выводу, что слова «Имя и фамилия на карте» яснее и короче всего описывают необходимую для ввода информацию. Пользователя просят просто перепечатать то, что написано на карте, вместо того чтобы гадать, как указать полное или сокращенное имя владельца карты.

4. Номер карты

Когда дело доходит до ввода номера карты, у многих пользователей возникает вопрос: «В номере моей карты есть пробелы, следует мне их учитывать при вводе или нет? » Чтобы справиться с этим, мы ограничили вводимые знаки только цифрами, то есть 0–9. Поэтому, если пользователь нажимает на пробел, это не отображается на экране и не влияет на числовой формат

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

5. Тип карты

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

  • 3  —  Карты для развлечений и туризма (например, American Express и Diners Club);
  • 4  —  Visa;
  • 5  —  MasterCard;
  • 6  —  Discover Card.

Как только пользователь вводит первые две цифры, мы отображаем логотип карты в правой части поля для ввода.

Конечно, мы могли это сделать по-другому, основываясь на выводах из пункта 1.

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

6. Дата окончания срока действия карты

У большинства кредитных карт дата окончания срока действия отображается в формате ММ/ГГ (месяц и год). У некоторых встречается формат ГГГГ (полное отображение цифр года).

Чтобы заполнять форму было быстрее, мы хотели добавить поле ввода даты, которое пользователь заполнял бы с клавиатуры. Ему не пришлось бы тянуться за мышкой или с помощью стрелок вверх/вниз выбирать дату из выпадающего списка. Пользователю нужно просто набрать цифры, которые он видит на кредитной карте. Это также лишает необходимости сопоставлять номер месяца и его название (например, 08 — это август), тем самым минимизируя когнитивную нагрузку.

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

7. Код безопасности

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

  • MasterCard —  код проверки карты (card validation code — CVC2);
  • Visa — проверка подлинности карты (card verification value CVV2);
  • Discover —  номер идентификации карты (card identification number CID);
  • American Express  —  CID, или уникальный номер карты (unique card code);
  • Debit Card — CSC, или код безопасности карты (card security code).

Есть и такие вариации:

  • Данные для проверки карты (card verification data);
  • Номер проверки карты (card verification number);
  • Код проверки карты (card verification code);
  • Проверка кода карты (card code verification).

Бред, не правда ли? Сокращения создают путаницу. Мы хотели уйти от них, но всё равно сообщить пользователю, что этот код связан с безопасностью. Поэтому мы решили назвать это поле «Код безопасности».

Кроме того, код безопасности может состоять из 4 цифр (American Express, на лицевой стороне карты) или 3 цифр (все остальные карты, на тыльной стороне). Чтобы помочь пользователю понять, какой код ему следует вводить и где его искать, мы создали визуальную подсказку. У неё 3 состояния:

  1. Дуальный код: когда пользователь ещё не ввёл номер карты, подсказка демонстрирует оба варианта размещения кода безопасности.
  2. 4-значный код: когда пользователь ввёл номер карты American Express, подсказка выделяет код из 4 цифр на лицевой стороне.
  3. 3-значный код: когда пользователь ввёл номер любой другой карты, подсказка отображает код из 3 цифр на тыльной стороне.

8. ZIP-код

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

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

ZIP-коды США состоят только из цифр, их максимум десять. В Канаде это не только цифры, но и буквы и пробелы. Мы ограничили поле для ввода десятью знаками.

Нам необходимо было учитывать названия этого кода в обоих странах, поэтому мы поместили в поле для ввода текст «ZIP/Почтовый код».

9. Надёжно ли защищены мои данные в этой форме

Когда пользователь видит форму оплаты кредитной картой, он думает: «Она точно безопасна? Стоит доверять этому сайту или у меня хотят выведать данные карты?» С помощью интерфейса можно по-разному подкрепить чувство безопасности. Мы рассматривали такие варианты:

  • Поместить в шапку формы, рядом с «Оплатить счёт», пиктограмму замка. Это выглядело как-то слабо и было оторвано от полей для ввода.
  • Поместить пиктограмму замка в поле для ввода номера карты. Это привело бы к вопросу «Безопасна вся форма или только это поле?»
  • Сделать на кнопке оплаты надпись «Безопасно заплатить $1.00». С большими суммами текст мог не поместиться.
  • Добавить знак безопасности внизу формы. Нам показалось, что он бы отвлекал и не вписывался бы в стиль формы. Кроме того, пользователи могут не отличить различные знаки друг от друга, поэтому мы откинули эту идею. Предшествующие A/B-тестирования также подтвердили отсутствие разницы в конверсии.

Основываясь на существующем представлении пользователей об оплате картой онлайн, мы решили, что достаточно будет одной пиктограммы замка. Разместили мы её внутри кнопки «Оплатить». Это ключевая позиция, ведь она укрепляет чувство безопасности в критический момент: когда пользователь совершает оплату.

10. Что происходит при нажатии на «Оплатить»

Как только пользователь готов отправить средства, он нажимает на кнопку «Оплатить». Она меняет состояние на ожидание/загрузку, появляется текст «Отправка…» Мы отправляем запрос на сервер и при отсутствии сбоев выдаём сообщение об успешном проведении платежа.

11. Как быть с ошибками при вводе информации

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

Есть две основные категории проверки ошибок в интернет-приложениях: со стороны клиента и со стороны сервера.

Проверка со стороны клиента

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

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

Основываясь на исследовании Люка и на своей интуиции, мы выбрали метод «После проверки». Согласно ему, сообщение об ошибке появляется после того, как пользователь закончил отвечать на поставленный вопрос и переходит к следующему. Другими словами, проверка осуществляется в фоновом режиме. Следует учесть, что пользователь не зацикливается на поле с ошибкой. Он может набирать символы и переходить к другим полям для ввода, а затем возвращаться и исправлять возникшие ошибки.

Наши критерии проверки данных для ошибок со стороны клиента:

  • Все вводимые данные, кроме полей «Имя и фамилия на карте» и «ZIP-код», должны содержать только цифры (никаких букв и символов);
  • Сумма платежа: минимум $1;
  • Номер карты: длина 16 цифр (15 для American Express), первые цифры — один из четырёх существующих кодов карт;
  • Дата окончания срока действия: по две цифры для отображения месяца и года (например, ММГГ). Месяц необходимо вводить в диапазоне от 01 до 12, год — минимум 15;
  • Код безопасности: длина 4 цифры для American Express или 3 цифры для других типов карт;
  • ZIP-код: длина минимум 5 цифр, максимум 10.

Чтобы отобразить ошибку визуально, мы выделяем содержащее её поле красным фоном с красными границами. Введённый текст мы не отображаем красным. Сообщение об ошибке показано внизу поля и также выделено красным.

Проверка со стороны сервера

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

  1. Некорректно введённая информация, такая как номер карты, дата окончания срока действия, код безопасности или ZIP-код (например, истёкший срок действия карты, недействительный почтовый индекс);
  2. Системные ошибки, когда наблюдаются проблемы с сервером (например, превышение времени ожидания, потерянное соединение);
  3. Ошибки с картами, когда система отклоняет проведение платежа с помощью карты по каким-либо причинам (их около сотни).

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

12. Дизайн для разных размеров экрана

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

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

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


Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Слишком очевидные вещи, за исключением может 1-2 пунктов

0

Первый пункт для России не очень актуален.

А вот идея с замочком на кнопке интересная. Кто-то пробовал тестировать такой вариант? Есть опасение, что замок может смутить пользователя (например, он подумает, что кнопка заблокирована).

0

Самый лучшмй вариант - это рисунок карты с полями на месте данных в таком же формате. Мудаков, пишущих в поле "Expire" месяцы словами и прочее нужно убивать.

«Чтобы заполнять форму было быстрее, мы хотели добавить поле ввода даты, которое пользователь заполнял бы с клавиатуры. Ему не пришлось бы тянуться за мышкой или с помощью стрелок вверх/вниз выбирать дату из выпадающего списка»

Все наоборот. Пользователю удобнее не тянуться к клавиатуре а свободно развалившись в кресле тыкать мышкой в выпадайки.

0

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

Сейчас обсуждают
Yus Teryukalov

рискну предположить, что нанимает лично только топ-менеджеров, ключевых сотрудников, а на потоке по найму рядовых сотрудников сидит отдел HR. всё просто. само интервью отличное, Тинькова всегда читаю с удовольствием, такой шоумен от бизнеса

«В кризис банк никто не купил, пришлось развивать самому»
0
Philip Salnikov

Суммы инвестиций и заработков тоже удивляют. Кому нужны любительские фото в таких количествах?

«Я потратил $10 млн и два года на то, что мог выяснить за 4 недели»: основатель Twenty20 об ошибках проекта
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Sakari Sauso

но драйв этот сомнительный, в идеале, ты сам должен выбирать продукты с одной стороны, а с другой, это для тех кто не совсем готовить умеет, т.к. речь о конкретном рецепте, а если у меня в холодильнике половина продуктов для блюда есть? Сразу вспоминается Никита Лихачёв))) Хотя вот пишу это и сам понимаю, что лишний раз мотивировать людей готовить дома для себя и семьи всё таки благое дело)))

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
John Smith

А Саванна?

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Показать еще