Чек-лист: проектируем удобный интерфейс оплаты Статьи редакции
Советы дизайнера Адила Сиддики.
Не стоит прятать подписи к полям
Иначе пользователям придётся угадывать, какие данные они сейчас вводят.
Неправильно
Правильно
Пусть нужное поле ввода выбирается автоматически
Указывайте пользователю на цель.
Неправильно
Правильно
Показывайте правильную раскладку клавиатуры
Неправильно
Правильно
Сделайте автоматический переход к другому полю
Это поможет сэкономить время пользователя.
Неправильно
Правильно
Не стоит прятать кнопку призыва к действию
Неправильно
Правильно
Не забудьте про значки и иконки, обозначающие безопасность платежей
Поддерживайте доверие пользователя.
Неправильно
Правильно
Сразу же указывайте на ошибки
Старайтесь меньше раздражать пользователей.
Неправильно
Правильно
Постарайтесь давать обратную связь без задержки
Неправильно
Правильно
Если оплату совершить невозможно, предложите альтернативные варианты
Неправильно
Правильно
Текст на кнопках призыва к действию стоит делать понятным, а не кратким
Понятность лучше краткости.
Неправильно
Правильно
Не забудьте обозначить, что оплата прошла успешно
Неправильно
Правильно
Добавьте возможность мгновенно очистить поле ввода
Это позволит сэкономить время пользователей.
Неправильно
Правильно
Показывайте тип карты и название банка для сохранённых карт
Сделайте их легко узнаваемыми.
Неправильно
Правильно
Стоит сразу показывать тип карты, пока пользователь вводит номер
Это послужит визуальной подсказкой.
Неправильно
Правильно
Заранее сообщите о том, если ваш сервис не поддерживает какую-либо платёжную систему
Учитывайте ограничения при дизайне.
Неправильно
Правильно
Проинформируйте пользователей о возможных проблемах с определённым способом оплаты
Неправильно
Правильно
116
показов
27K
открытий
1
репост
10 из 10, качественная статья, годные примеры. Уважение автору.
Я руководителя департамента Сбера и пару-тройку замов, которые отвечают за функционал онлайн-оплаты, уволил бы за эти 2 зелёные кнопки без выходного пособия. За то, что они обе зелёные.
Блин, на этих кнопках нет лого Сбера! точно надо уволить.
Ещё и primary кнопка слева, это тоже косяк.
А скажите ещё что-нибудь по руводительско-сбербанковски?
Ну кнопка "Отмена" меньше же)) Ну вы чего — открыли, острым взглядом выцепили маленькую кнопку, нажали и перешли в другой банк к херам)))
А ещё убедитесь, что для ваших полей ввода работает автозаполнение.
И оно корректно обрабатывает, например, год. И не получается до: 20, когда год 2023.
А лучше пользоваться платежными системами, которые поддерживают Google pay/Apple pay, или хотя бы реализовывают Payment Request API, где все сделано за вас.
Особенно бесят формы ввода, в которые номер кредитной карты из менеджера паролей нельзя скопировать, потому что кто то решил номер карты сделать четырьмя полями ввода - и они не способны номер из буфера обмена правильно обработать. Просто жесть.
Круто! Теперь есть что править вечером.
Кстати, как сочетать кнопку очистки и тип карты?
Скорее всего автор знал об этой уязвимости, но умышленно привел удобные примеры, поскольку это скорее взаимоисключающие в конкретном концепте.
В реальности просто стоит выделить, например, доп. пространство до номера карты или выше поля, возможно текстом
Можно в поле номер, сделать отступ и показывать тип карты перед номером.
Казалось бы - всё настолько просто, что дальше некуда, но дебильные интерфейсы встречаются куда чаще, чем хотелось бы.
точно. Хотя их почему-то называют "интуитивно -понятными". Видно, у меня так себе интуиция(
В одном случае в поле с номером карты он предлагает поставить крестик, чтобы быстро очистить поле, а в другом — лого платежной системы. Как то непоследовательно.
Ахах действительно
А что насчёт убрать поле "Name on card", которое необязательно для большинства случаев?
Ещё иногда и адрес спрашивают. Чего не кличку домашнего животного?
Согласен. Ещё Лебедев писал про ненужность ввода имени. Поэтому можно вводить любое
Ух! Сейчас у себя всё поравим и попрёт!
ну и как за 4 месяца? Попёрло?
Очень полезная статья! Глубоко надеюсь что данные фишки будут реализованы на всех сайтах!
В вебе реализовать такое очень сложно. Создатели браузеров сильно ограничивают разработчиков в кастомизации форм ((
И что :) Вы рассказали юзеру, что у вашего софта проблемы при работе с баблом. Отличный ход. Вызывает доверие и уверенность в сохранности денег.
Мало того, этот вариант в "правильном" исполнении почему-то стал первым. Хотя логичнее его вообще было бы убрать.
Спс, кэп
Заебись, почти чек лист.
Статья хорошая.
Хотя поле имени для транзакции по карте вообще не нужно.
Все классно, советы правильные, но часто ли вам выпадает шанс реализовывать формы оплаты с полями для ввода номера карты и прочей sensitive инфы?
Примеры статьи вполне применимы к обычным формам ввода данных
Классаная статья - спасибо. А в чём вы делали прототипы? и где можно всему этому (ux/ui/прототипирование) обучиться
Наконец-то, статьи про дизайн составлена не из текста, а из визжала. Большой плюс за труд автора, что сделал эти наглядные примеры.
Блиииин, у Адила пока только один совет.
Для кард ещё нужен 3ds 1 или 2. Кто ж без этого сейчас делает?
Это обычно реализовано на стороне банка и, в принципе, подчиняется тем же рекомендациям
Больше всего напрягает, когда поле cvc не скрывает свои значения. Особенно офигенно, когда при оплате фон затеняется, крутится лоудер, и любой мимокрокодил может запомнить эти цифры.
Хорошая статья, прям чек-лист в помощь по исправлениям ошибок)) Спасибо!
Комментарий недоступен
отличная статья для джуниора в ux
Надо сменить название на "Стандарты качества пользовательского интерфейса".
Это не частный случай, а про шаблоны проектирования графических интерфейсов с адекватной реакцией на различные действия пользователя. С упреждением ошибок (т.е. не "вы ввели данные неверно", а не позволить неверно ввести данные). Удивился, что тут есть про мгновенный отклик на действие (раздел "Постарайтесь давать обратную связь без задержки").
Самое странное, что все очевидно и вроде для джунов, но зачастую в жизни "знаю, но не применяю". Возьмите топ 10 своих приложений, которыми пользуетесь, и удивитесь, что там не реализовано и 50% описанных тут идей.
Статья про внимание к мелочам и качественную работу. Разработчикам и руководителям на заметку. Тестировщикам в кейсы на проверку. Автору зачет!
советы хорошие, но реализация некоторых из них зависит от возможностей платёжного партнёра, а партнёров таких очень немного
Но на анимации он поднимается при клике в поле ввода.
А где такое можно встретить? Пользуюсь Андроид, там всегда так. На Айфоне проблемы с этим что ли?
Не скажу точно за приложения, но в вебе такое встречается повсеместно. А всё потому что разработчики зачастую не удосуживаются поставить один единственный дополнительный атрибут на поле ввода (ну или просто не знают о его существовании)
Ещё добавил бы правило хранить введённое таким трудом данные как зеницу ока. А то сделал что-то не то, например случайно нажал назад - и всё, всё пропало и набирай заново.
А быстрое удаление текста крестиком справа я бы заменил на быстрое выделение всей строки, чтобы этот крестик случайно не нажать.
Либо таки удалять, но вместо крестика остаться кнопка возврата (иконка круговой стрелки) или удалять двойным нажатием, т.е. сначала строка выделяется.
Можно совместить все три способа.
всем привет.
нашему сайту как раз нужна такая платежная форма.
кто возьмется создать дизайн+адаптивную верстку (html) платежной страницы, принимающей кредитные/дебитовые карты по этим рекомендациям?
ТЗ немного проще, чем тут описано.
Например, не нужно определять тип карты, и еще некоторые моменты для нас излишни
Где ссылка на гитхаб с реализацией?
прекрасная статья, спасибо!
удалено
Хорошая статья. Была бы отличной если бы в конце было написано, что для большинства читающих это не надо. Тысячные доли конверсии ничего не изменят для большинства читающих. Лучше заняться фичами, которые могут что-то существенно изменить.
Я, конечно, ни разу не претендую на звание эксперта в этом вопросе, но разве удобный интерфейс не имеет положительного влияния на лояльность пользователей и всякие такие штуки?