Чек-лист: проектируем удобный интерфейс оплаты
Советы дизайнера Адила Сиддики.
Не стоит прятать подписи к полям
Иначе пользователям придётся угадывать, какие данные они сейчас вводят.
Неправильно
Не полагайтесь только на плейсхолдер: когда он исчезает, легко забыть, что нужно вводить
Правильно
Пусть плейсхолдер поднимется над полем ввода, как только пользователь введёт первую цифру
Пусть нужное поле ввода выбирается автоматически
Указывайте пользователю на цель.
Неправильно
Правильно
Пусть система сама выбирает нужное поле ввода, когда требуются данные пользователя
Показывайте правильную раскладку клавиатуры
Неправильно
Не показывайте стандартную буквенно-цифровую клавиатуру, когда пользователю надо вводить только цифры
Правильно
Показывайте цифровую клавиатуру, когда пользователю требуется вводить только цифры
Сделайте автоматический переход к другому полю
Это поможет сэкономить время пользователя.
Неправильно
Не ждите, пока пользователь нажмёт на следующее поле вручную. Это отнимает много времени
Правильно
Как только пользователь вводит требуемое значение в поле, автоматически переключайтесь на следующее поле ввода
Не стоит прятать кнопку призыва к действию
Неправильно
Не оставляйте главную кнопку вне поля зрения пользователя или скрытой за каким-либо элементом
Правильно
Убедитесь, что на экране всегда отображается главная кнопка, призывающая к действию
Не забудьте про значки и иконки, обозначающие безопасность платежей
Поддерживайте доверие пользователя.
Неправильно
Не оставляйте страницу без каких-либо значков безопасности. Отсутствие доверия у пользователя — одна из главных причин отказа от покупки
Правильно
Сделайте так, чтобы платёжная страница внушала доверие. Добавьте туда специальные значки или иконки (как в верхнем правом углу)
Сразу же указывайте на ошибки
Старайтесь меньше раздражать пользователей.
Неправильно
Не стоит показывать уведомление об ошибке только после того, как пользователь заполнит все поля и соберётся отправить форму. Пусть отклик будет мгновенным
Правильно
Пусть данные проверяются моментально — тогда пользователь сразу узнает об ошибке
Постарайтесь давать обратную связь без задержки
Неправильно
Не заставляйте пользователя гадать, прошёл ли платёж или нет
Правильно
Чтобы дать пользователю мгновенную обратную связь, можно сделать кнопку недоступной для повторного нажатия, показать значок загрузки или отправить его на следующую страницу
Если оплату совершить невозможно, предложите альтернативные варианты
Неправильно
Не стоит просто сообщать пользователю об ошибке
Правильно
Сообщите пользователю об ошибке и дайте возможность повторить попытку оплаты или обратиться к вам за помощью
Текст на кнопках призыва к действию стоит делать понятным, а не кратким
Понятность лучше краткости.
Неправильно
Избегайте коротких и неточных описаний для кнопок
Правильно
Постарайтесь точно сказать пользователю, что произойдёт при нажатии на кнопку
Не забудьте обозначить, что оплата прошла успешно
Неправильно
Не отвлекайте внимание пользователя на другие детали операции — их можно показать после сообщения об успешной оплате
Правильно
Сперва дайте сигнал, что оплата успешно выполнена
Добавьте возможность мгновенно очистить поле ввода
Это позволит сэкономить время пользователей.
Неправильно
Не заставляйте пользователей тратить время на рутину
Правильно
Крестик справа от поля ввода позволит пользователям быстро удалить строку
Показывайте тип карты и название банка для сохранённых карт
Сделайте их легко узнаваемыми.
Неправильно
Не стоит просто показывать последние четыре цифры номера сохранённой карты без других отличительных особенностей
Правильно
Стоит добавить названия банков под номером карты
Стоит сразу показывать тип карты, пока пользователь вводит номер
Это послужит визуальной подсказкой.
Неправильно
Не оставляйте пользователей без подсказок, иначе они будут чувствовать себя неуверенно
Правильно
Добавьте визуальные подсказки, чтобы пользователь был уверен в правильности действий
Заранее сообщите о том, если ваш сервис не поддерживает какую-либо платёжную систему
Учитывайте ограничения при дизайне.
Неправильно
Не стоит скрывать от пользователя, что его действия приведут к ошибке
Правильно
Стоит прямо указать, что сервис не принимает определённый тип карт или если существуют другие ограничения
Проинформируйте пользователей о возможных проблемах с определённым способом оплаты
Неправильно
Не стоит скрывать от пользователя, что вашей системе часто не удаётся провести оплату, например, через UPI
Правильно
Увидев сообщение о возможной ошибке, пользователь сможет выбрать другие варианты или будет подготовлен, если столкнётся с ней
10 из 10, качественная статья, годные примеры. Уважение автору.
Я руководителя департамента Сбера и пару-тройку замов, которые отвечают за функционал онлайн-оплаты, уволил бы за эти 2 зелёные кнопки без выходного пособия. За то, что они обе зелёные.
Блин, на этих кнопках нет лого Сбера! точно надо уволить.
Ещё и primary кнопка слева, это тоже косяк.
А скажите ещё что-нибудь по руводительско-сбербанковски?
Ну кнопка "Отмена" меньше же)) Ну вы чего — открыли, острым взглядом выцепили маленькую кнопку, нажали и перешли в другой банк к херам)))
А ещё убедитесь, что для ваших полей ввода работает автозаполнение.
И оно корректно обрабатывает, например, год. И не получается до: 20, когда год 2023.
А лучше пользоваться платежными системами, которые поддерживают Google pay/Apple pay, или хотя бы реализовывают Payment Request API, где все сделано за вас.