I am ready for a long road flight for work with a week- or months-long projects.
ОПЛАТА КАРТОЙ ОНЛАЙН
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
129
ГАЙДЛАЙНОВ
В этой статье мы разберем, что стоит учесть, чтобы предоставить лучший клиентский опыт при оплате заказа онлайн с помощью банковской карты. Как всегда, детально и с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. ОБЩИЕ ТРЕБОВАНИЯ
Страница быстро загружается
Базовый момент: чем дольше клиент ждет загрузки страницы, тем выше его недовольство – и шанс отмены покупки.
Без вторичных элементов
Не располагайте на странице ввода данных карты какие-либо вторичные элементы: фокус клиента должен быть только на форме.
Без встроенных интерфейсов
Не размещайте сторонний интерфейс в основном интерфейсе магазина. Особенно если в обоих окнах предполагается прокрутка.
Мобильная оптимизация
Сделайте так, чтобы формой было удобно пользоваться как на ПК, так и на мобильных устройствах.
Горизонтальная ориентация экрана
На мобильных устройствах также важно предусмотреть гибкую верстку, чтобы при повороте экрана форма ввода отображалась корректно и была видна полностью.
Содержит сумму заказа
В интерфейсе должна содержаться общая сумма заказа, чтобы клиенту не требовалось переходить обратно для ее проверки.
Магазин виден по умолчанию
Не прячьте магазин, сделайте его видимым по умолчанию в рамках интерфейса. Это даст клиенту больше контекста при оплате.
Перекликается с дизайном карты
Чтобы сделать интерфейс более привычным для клиента, сделайте так, чтобы он перекликался с дизайном самой банковской карты.
Расположение полей
Для облегчения восприятия поля ввода можно расположить в тех же местах, где они расположены на банковской карте.
Размер полей vs. данные
Подстраивайте размер полей под размер вводимых данных. Нет смысла делать поле ввода срока действия слишком широким, если в нем будет всего 4 цифры.
Поля выделяются на фоне
Поля ввода должны выделяться в рамках интерфейса – за счет другого цвета фона, обводки или тени.
Быстрая оплата
Возможность быстрой оплаты с помощью Yandex.Pay, Apple Pay, Google Pay позволяет клиенту не тратить время на повторный ввод данных.
Кнопки быстрой оплаты в начале
Разместите кнопки быстрой оплаты до ввода данных карты, т.к. это более простое для клиента действие, требующее меньше сил и времени.
Возврат в магазин
Предусмотрите возможность возврата в магазин до оплаты, чтобы клиент в случае проблем не уходил из интерфейса полностью.
На языке клиента
По умолчанию локализуйте форму ввода карты под язык клиента, установленный на устройстве клиента.
Возможность изменить язык
При этом у клиента должна быть возможность изменить язык формы, если ему более удобно работать с интерфейсом на другом языке.
Пометка про ограничения VPN
Если интерфейс оплаты недоступен через VPN-соединение, лучше сказать об этом на более ранних шагах, чтобы лучше управлять ожиданиями клиента.
2. ТИПЫ КАРТ
Поддерживаемые типы
По возможности поддерживайте максимально широкий спектр типов карт: Visa, MasterCard, Maestro, МИР, JCB, Amex, China Union Pay.
Отображаются сразу
Это позволит лучше управлять ожиданиями клиента и поможет ему быстрее понять, принимается ли его карта.
В виде иконок
Реализуйте поддерживаемые типы карт в формате широко распространенных иконок, чтобы облегчить их восприятие.
Визуально вторичны
При этом логотипы систем должны быть визуально вторичны и не должны восприниматься, как кнопки, на которые можно нажать.
Иконки цветные
При этом иконки платежных систем лучше отображать в цвете. Иначе у некоторых клиентов могут возникнуть проблемы с восприятием (например, MasterCard vs. Maestro).
В хорошем качестве
Базовый момент, но встречается: логотипы платежных систем должны быть загружены в достаточно хорошем качестве не должны откровенно пикселить.
3. PLACEHOLDER'Ы
Добавлены
Placeholder’ы в полях позволяют облегчить восприятие и упростить клиенту ввод данных карты.
Отличаются от вводимого текста
Placeholder’ы должны визуально отличаться от вводимого текста, чтобы клиенту легче различить то, что уже введено, от того, что еще нужно заполнить.
Визуально вторичны
Чаще всего placeholder выполняют в полувыцветшем цвете относительно вводимых значений.
Достаточно контрастны
При этом цвет placeholder’а все же должен быть достаточно контрастным для того, чтобы его легко было прочитать на фоне поля.
Дополняют заголовки
Если вы используете заголовки полей, placeholder’ы могут их дополнять и содержать шаблон ввода: например, «ММ/ГГ» для срока экспирации.
Содержат названия полей
Иногда, чтобы разгрузить интерфейс, placeholder’ы сами могут выполнять роль заголовков и содержать названия полей.
Не дублируют заголовки
При этом если текст placeholder'ов дублирует текст заголовков, смысла отображать и то, и то нет.
Не пропадают при активации
Placeholder’ы не должны пропадать при активации поля ввода. Любое изменение их вида должно происходить лишь при начале ввода.
Видны при вводе
Если placeholder’ы содержат названия полей, при вводе они могут уменьшаться, но быть видимыми. Так клиент всегда сможет понять, что это за поле.
Локализованы
К примеру, если на устройстве клиента выбран русский язык, в качестве placeholder’а отображайте ММ/ГГ, а не MM/YY.
Видны полностью
Сделайте так, чтобы placeholder’ы не обрезались и были видны полностью. Особенно если пустое место позволяет это сделать.
Видны при очистке поля
При полной очистке поля placeholder должен появляться / возвращаться в исходное положение.
Частичная видимость
Если placeholder содержит шаблон ввода, при вводе текста недостающую часть шаблона можно отображать: например, «12/ГГ», когда введен только месяц.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
4. ВВОД ДАННЫХ
Активация по умолчанию
Если ввод данных карты – единственное целевое действие на странице, активируйте поле ввода ее номера по умолчанию – сэкономите клиенту 1 клик.
Авто-подстановка
Авто-подстановка данных сохраненными в браузере значениями карты сократит время на ввод и поможет оплатить покупку, если карты не оказалось под рукой.
Корректная маркировка
Предложение вставить какие-либо другие данные при вводе карты вызовет лишь недоумение. В Яндексе вместо номера карты предлагают вставить ID клиента:
Реакция на наведение
Поля ввода должны реагировать на наведение курсора, давая тем самым дополнительную визуальную обратную связь.
Highlight активного поля
Подсвечивайте активное поле на фоне остальных, чтобы сместить на него фокус внимания клиента.
Быстрая очистка
Если клиент ввел данные с ошибкой и хочет ввести их заново, быстрая очистка поля поможет ему избежать стирания текста посимвольно.
Очистка видна только при вводе
Нет смысла отображать кнопки очистки полей, если они пусты. Кнопки должны появляться, если уже есть введенные значения.
Отступы в номере карты
Маска с отступами между блоками цифр помогает упростить проверку номера карты. Проверить 4 блока по 4 цифры легче, чем одно 16-значное число.
Номер карты – одно поле
При этом не стоит разбивать номер карты на 4 отдельных поля, особенно если авто-переключение между полями не предусмотрено.
Логотип платежной системы
При вводе первых цифр номера карты появление логотипа платежной системы сыграет роль подтверждения корректности ввода данных.
Логотип банка
Из данных номера карты можно подтягивать и банк-эмитент. Это дополнительно подтвердит, что клиент на правильном пути при вводе данных.
Обновление (?) дизайна
При этом к обновлению дизайна карты стоит подходить с осторожностью, т.к. не всегда можно «попасть в точку». Карты Сбера, например, далеко не все в зеленом дизайне:
Слэш в сроке экспирации
Не утруждайте клиента вводом слэша между месяцем и годом экспирации – добавляйте его автоматически.
Оптимизация ввода года
Спроектируйте ввод года экспирации в сокращенном формате. Это позволит сократить действия по вводу данных на 2 символа.
Оптимизация ввода месяца
Если клиент вводит месяц одним символом (например, 5), нуль можно подставить автоматически – сэкономим клиенту еще 1 действие.
Без выпадающих списков
Ввод месяца и года лучше не производить через выпадающие списки. Это менее удобно и требует от клиента больше действий.
Курсор в конце строки
По умолчанию курсор при вводе данных должен находиться в конце строки. Иначе мы рискуем получить ошибочный ввод. Fun Craft, спасибо за пример.
Реакция масок на стирание
При стирании номера карты или срока убирайте пробелы в отступах и слэш (в дате) автоматически – не заставляйте клиента делать это самостоятельно.
Без имени владельца
В большинстве случаев имя владельца не требуется. Упразднив его ввод, вы значительно экономите клиенту время и повышаете вероятность оплаты.
Без запроса доп.контактов
Воздержитесь от запроса дополнительных контактных данных в интерфейсе оплаты – особенно если клиент вам их и так предоставил на предыдущем шаге.
Имя владельца в caps lock
Если имя владельца все же требуется ввести, автоматически переводите текст в верхний регистр по аналогии с самой картой, чтобы его легче было проверить.
Латиница по умолчанию
Так как имя владельца нужно вводить строго на латинице, можно вне зависимости от раскладки учитывать именно ввод латинских символов.
Транслитерация
В некоторых случаях также встречается транслитерация кириллического текста на латиницу, если у клиента на клавиатуре включена русская раскладка.
Подсказки по CVV/CVC-коду
Поиск CVV/CVC кода может вызвать у части клиентов затруднения. Поэтому его ввод можно снабдить подсказкой о том, как его найти.