Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

ОПЛАТА КАРТОЙ ОНЛАЙН

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
129
ГАЙДЛАЙНОВ
В этой статье мы разберем, что стоит учесть, чтобы предоставить лучший клиентский опыт при оплате заказа онлайн с помощью банковской карты. Как всегда, детально и с примерами.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.

1. ОБЩИЕ ТРЕБОВАНИЯ

Страница быстро загружается

Базовый момент: чем дольше клиент ждет загрузки страницы, тем выше его недовольство – и шанс отмены покупки.

Без вторичных элементов

Не располагайте на странице ввода данных карты какие-либо вторичные элементы: фокус клиента должен быть только на форме.
hardclient

Без встроенных интерфейсов

Не размещайте сторонний интерфейс в основном интерфейсе магазина. Особенно если в обоих окнах предполагается прокрутка.

Мобильная оптимизация

Сделайте так, чтобы формой было удобно пользоваться как на ПК, так и на мобильных устройствах.

Горизонтальная ориентация экрана

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

Содержит сумму заказа

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

Магазин виден по умолчанию

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

Перекликается с дизайном карты

Чтобы сделать интерфейс более привычным для клиента, сделайте так, чтобы он перекликался с дизайном самой банковской карты.
hardclient

Расположение полей

Для облегчения восприятия поля ввода можно расположить в тех же местах, где они расположены на банковской карте.
hardclient

Размер полей vs. данные

Подстраивайте размер полей под размер вводимых данных. Нет смысла делать поле ввода срока действия слишком широким, если в нем будет всего 4 цифры.
hardclient

Поля выделяются на фоне

Поля ввода должны выделяться в рамках интерфейса – за счет другого цвета фона, обводки или тени.

Быстрая оплата

Возможность быстрой оплаты с помощью Yandex.Pay, Apple Pay, Google Pay позволяет клиенту не тратить время на повторный ввод данных.
hardclient

Кнопки быстрой оплаты в начале

Разместите кнопки быстрой оплаты до ввода данных карты, т.к. это более простое для клиента действие, требующее меньше сил и времени.
hardclient

Возврат в магазин

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

На языке клиента

По умолчанию локализуйте форму ввода карты под язык клиента, установленный на устройстве клиента.
hardclient

Возможность изменить язык

При этом у клиента должна быть возможность изменить язык формы, если ему более удобно работать с интерфейсом на другом языке.
hardclient

Пометка про ограничения VPN

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

2. ТИПЫ КАРТ

Поддерживаемые типы

По возможности поддерживайте максимально широкий спектр типов карт: Visa, MasterCard, Maestro, МИР, JCB, Amex, China Union Pay.

Отображаются сразу

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

В виде иконок

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

Визуально вторичны

При этом логотипы систем должны быть визуально вторичны и не должны восприниматься, как кнопки, на которые можно нажать.
hardclient

Иконки цветные

При этом иконки платежных систем лучше отображать в цвете. Иначе у некоторых клиентов могут возникнуть проблемы с восприятием (например, MasterCard vs. Maestro).
hardclient

В хорошем качестве

Базовый момент, но встречается: логотипы платежных систем должны быть загружены в достаточно хорошем качестве не должны откровенно пикселить.
hardclient

3. PLACEHOLDER'Ы

Добавлены

Placeholder’ы в полях позволяют облегчить восприятие и упростить клиенту ввод данных карты.
hardclient

Отличаются от вводимого текста

Placeholder’ы должны визуально отличаться от вводимого текста, чтобы клиенту легче различить то, что уже введено, от того, что еще нужно заполнить.
hardclient

Визуально вторичны

Чаще всего placeholder выполняют в полувыцветшем цвете относительно вводимых значений.

Достаточно контрастны

При этом цвет placeholder’а все же должен быть достаточно контрастным для того, чтобы его легко было прочитать на фоне поля.
hardclient

Дополняют заголовки

Если вы используете заголовки полей, placeholder’ы могут их дополнять и содержать шаблон ввода: например, «ММ/ГГ» для срока экспирации.
hardclient

Содержат названия полей

Иногда, чтобы разгрузить интерфейс, placeholder’ы сами могут выполнять роль заголовков и содержать названия полей.

Не дублируют заголовки

При этом если текст placeholder'ов дублирует текст заголовков, смысла отображать и то, и то нет.
hardclient

Не пропадают при активации

Placeholder’ы не должны пропадать при активации поля ввода. Любое изменение их вида должно происходить лишь при начале ввода.
hardclient

Видны при вводе

Если placeholder’ы содержат названия полей, при вводе они могут уменьшаться, но быть видимыми. Так клиент всегда сможет понять, что это за поле.

Локализованы

К примеру, если на устройстве клиента выбран русский язык, в качестве placeholder’а отображайте ММ/ГГ, а не MM/YY.

Видны полностью

Сделайте так, чтобы placeholder’ы не обрезались и были видны полностью. Особенно если пустое место позволяет это сделать.
hardclient

Видны при очистке поля

При полной очистке поля placeholder должен появляться / возвращаться в исходное положение.

Частичная видимость

Если placeholder содержит шаблон ввода, при вводе текста недостающую часть шаблона можно отображать: например, «12/ГГ», когда введен только месяц.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

4. ВВОД ДАННЫХ

Активация по умолчанию

Если ввод данных карты – единственное целевое действие на странице, активируйте поле ввода ее номера по умолчанию – сэкономите клиенту 1 клик.

Авто-подстановка

Авто-подстановка данных сохраненными в браузере значениями карты сократит время на ввод и поможет оплатить покупку, если карты не оказалось под рукой.
hardclient

Корректная маркировка

Предложение вставить какие-либо другие данные при вводе карты вызовет лишь недоумение. В Яндексе вместо номера карты предлагают вставить ID клиента:
hardclient

Реакция на наведение

Поля ввода должны реагировать на наведение курсора, давая тем самым дополнительную визуальную обратную связь.

Highlight активного поля

Подсвечивайте активное поле на фоне остальных, чтобы сместить на него фокус внимания клиента.
hardclient

Быстрая очистка

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

Очистка видна только при вводе

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

Отступы в номере карты

Маска с отступами между блоками цифр помогает упростить проверку номера карты. Проверить 4 блока по 4 цифры легче, чем одно 16-значное число.
hardclient

Номер карты – одно поле

При этом не стоит разбивать номер карты на 4 отдельных поля, особенно если авто-переключение между полями не предусмотрено.

Логотип платежной системы

При вводе первых цифр номера карты появление логотипа платежной системы сыграет роль подтверждения корректности ввода данных.
hardclient

Логотип банка

Из данных номера карты можно подтягивать и банк-эмитент. Это дополнительно подтвердит, что клиент на правильном пути при вводе данных.
hardclient

Обновление (?) дизайна

При этом к обновлению дизайна карты стоит подходить с осторожностью, т.к. не всегда можно «попасть в точку». Карты Сбера, например, далеко не все в зеленом дизайне:
hardclient

Слэш в сроке экспирации

Не утруждайте клиента вводом слэша между месяцем и годом экспирации – добавляйте его автоматически.

Оптимизация ввода года

Спроектируйте ввод года экспирации в сокращенном формате. Это позволит сократить действия по вводу данных на 2 символа.

Оптимизация ввода месяца

Если клиент вводит месяц одним символом (например, 5), нуль можно подставить автоматически – сэкономим клиенту еще 1 действие.

Без выпадающих списков

Ввод месяца и года лучше не производить через выпадающие списки. Это менее удобно и требует от клиента больше действий.
hardclient

Курсор в конце строки

По умолчанию курсор при вводе данных должен находиться в конце строки. Иначе мы рискуем получить ошибочный ввод. Fun Craft, спасибо за пример.

Реакция масок на стирание

При стирании номера карты или срока убирайте пробелы в отступах и слэш (в дате) автоматически – не заставляйте клиента делать это самостоятельно.

Без имени владельца

В большинстве случаев имя владельца не требуется. Упразднив его ввод, вы значительно экономите клиенту время и повышаете вероятность оплаты.
hardclient

Без запроса доп.контактов

Воздержитесь от запроса дополнительных контактных данных в интерфейсе оплаты – особенно если клиент вам их и так предоставил на предыдущем шаге.
hardclient

Имя владельца в caps lock

Если имя владельца все же требуется ввести, автоматически переводите текст в верхний регистр по аналогии с самой картой, чтобы его легче было проверить.
hardclient

Латиница по умолчанию

Так как имя владельца нужно вводить строго на латинице, можно вне зависимости от раскладки учитывать именно ввод латинских символов.

Транслитерация

В некоторых случаях также встречается транслитерация кириллического текста на латиницу, если у клиента на клавиатуре включена русская раскладка.

Подсказки по CVV/CVC-коду

Поиск CVV/CVC кода может вызвать у части клиентов затруднения. Поэтому его ввод можно снабдить подсказкой о том, как его найти.