Чек-лист: проектируем удобный интерфейс оплаты Статьи редакции

Советы дизайнера Адила Сиддики.

Не стоит прятать подписи к полям

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

Неправильно

Не полагайтесь только на плейсхолдер: когда он исчезает, легко забыть, что нужно вводить​

Правильно

​Пусть плейсхолдер поднимется над полем ввода, как только пользователь введёт первую цифру

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

Указывайте пользователю на цель.

Неправильно

Правильно

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

Показывайте правильную раскладку клавиатуры

Неправильно

​Не показывайте стандартную буквенно-цифровую клавиатуру, когда пользователю надо вводить только цифры

Правильно

​Показывайте цифровую клавиатуру, когда пользователю требуется вводить только цифры

Сделайте автоматический переход к другому полю

Это поможет сэкономить время пользователя.

Неправильно

​Не ждите, пока пользователь нажмёт на следующее поле вручную. Это отнимает много времени

Правильно

​Как только пользователь вводит требуемое значение в поле, автоматически переключайтесь на следующее поле ввода

Не стоит прятать кнопку призыва к действию

Неправильно

​Не оставляйте главную кнопку вне поля зрения пользователя или скрытой за каким-либо элементом

Правильно

Убедитесь, что на экране всегда отображается главная кнопка, призывающая к действию

Не забудьте про значки и иконки, обозначающие безопасность платежей

Поддерживайте доверие пользователя.

Неправильно

​Не оставляйте страницу без каких-либо значков безопасности. Отсутствие доверия у пользователя — одна из главных причин отказа от покупки

Правильно

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

Сразу же указывайте на ошибки

Старайтесь меньше раздражать пользователей.

Неправильно

​Не стоит показывать уведомление об ошибке только после того, как пользователь заполнит все поля и соберётся отправить форму. Пусть отклик будет мгновенным

Правильно

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

Постарайтесь давать обратную связь без задержки

Неправильно

​Не заставляйте пользователя гадать, прошёл ли платёж или нет

Правильно

Чтобы дать пользователю мгновенную обратную связь, можно сделать кнопку недоступной для повторного нажатия, показать значок загрузки или отправить его на следующую страницу

Если оплату совершить невозможно, предложите альтернативные варианты

Неправильно

​Не стоит просто сообщать пользователю об ошибке

Правильно

​Сообщите пользователю об ошибке и дайте возможность повторить попытку оплаты или обратиться к вам за помощью

Текст на кнопках призыва к действию стоит делать понятным, а не кратким

Понятность лучше краткости.

Неправильно

​Избегайте коротких и неточных описаний для кнопок

Правильно

​Постарайтесь точно сказать пользователю, что произойдёт при нажатии на кнопку

Не забудьте обозначить, что оплата прошла успешно

Неправильно

​Не отвлекайте внимание пользователя на другие детали операции — их можно показать после сообщения об успешной оплате

Правильно

​Сперва дайте сигнал, что оплата успешно выполнена

Добавьте возможность мгновенно очистить поле ввода

Это позволит сэкономить время пользователей.

Неправильно

Не заставляйте пользователей тратить время на рутину​

Правильно

​Крестик справа от поля ввода позволит пользователям быстро удалить строку 

Показывайте тип карты и название банка для сохранённых карт

Сделайте их легко узнаваемыми.

Неправильно

​Не стоит просто показывать последние четыре цифры номера сохранённой карты без других отличительных особенностей

Правильно

Стоит добавить названия банков под номером карты

Стоит сразу показывать тип карты, пока пользователь вводит номер

Это послужит визуальной подсказкой.

Неправильно

​Не оставляйте пользователей без подсказок, иначе они будут чувствовать себя неуверенно

Правильно

​Добавьте визуальные подсказки, чтобы пользователь был уверен в правильности действий

Заранее сообщите о том, если ваш сервис не поддерживает какую-либо платёжную систему

Учитывайте ограничения при дизайне.

Неправильно

​Не стоит скрывать от пользователя, что его действия приведут к ошибке

Правильно

​Стоит прямо указать, что сервис не принимает определённый тип карт или если существуют другие ограничения

Проинформируйте пользователей о возможных проблемах с определённым способом оплаты

Неправильно

​Не стоит скрывать от пользователя, что вашей системе часто не удаётся провести оплату, например, через UPI

Правильно

Увидев сообщение о возможной ошибке, пользователь сможет выбрать другие варианты или будет подготовлен, если столкнётся с ней
0
81 комментарий
Написать комментарий...
GamerStreams sidirovich

10 из 10, качественная статья, годные примеры. Уважение автору.

Ответить
Развернуть ветку
Иван Дубышкин

Я руководителя департамента Сбера и пару-тройку замов, которые отвечают за функционал онлайн-оплаты, уволил бы за эти 2 зелёные кнопки без выходного пособия. За то, что они обе зелёные.

Ответить
Развернуть ветку
Sergey Mikeyev

Блин, на этих кнопках нет лого Сбера! точно надо уволить.

Ответить
Развернуть ветку
Roma Schreibikus

Ещё и primary кнопка слева, это тоже косяк.

Ответить
Развернуть ветку
5 комментариев
Pixel Lens

А скажите ещё что-нибудь по руводительско-сбербанковски?

Ответить
Развернуть ветку
1 комментарий
Ксения Троицкая

Ну кнопка "Отмена" меньше же)) Ну вы чего — открыли, острым взглядом выцепили маленькую кнопку, нажали и перешли в другой банк к херам)))

Ответить
Развернуть ветку
Anton Ivanov

А ещё убедитесь, что для ваших полей ввода работает автозаполнение.
И оно корректно обрабатывает, например, год. И не получается до: 20, когда год 2023.

А лучше пользоваться платежными системами, которые поддерживают Google pay/Apple pay, или хотя бы реализовывают Payment Request API, где все сделано за вас.

Ответить
Развернуть ветку
Denis Kiselev

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

Ответить
Развернуть ветку
Anton Smets

Круто! Теперь есть что править вечером.
Кстати, как сочетать кнопку очистки и тип карты?

Ответить
Развернуть ветку
Dima Poznyak

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

Ответить
Развернуть ветку
Pavel Voronkov

Можно в поле номер, сделать отступ и показывать тип карты перед номером.

Ответить
Развернуть ветку
Syzygy

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

Ответить
Развернуть ветку
Анастасия Романова

точно. Хотя их почему-то называют "интуитивно -понятными". Видно, у меня так себе интуиция(

Ответить
Развернуть ветку
Pavel Chelyuskin

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

Ответить
Развернуть ветку
Diquman

Ахах действительно

Ответить
Развернуть ветку
Новицкас Стас

А что насчёт убрать поле "Name on card", которое необязательно для большинства случаев?

Ответить
Развернуть ветку
Denis Kiselev

Ещё иногда и адрес спрашивают. Чего не кличку домашнего животного?

Ответить
Развернуть ветку
4 комментария
Artem Dzyuba

Согласен. Ещё Лебедев писал про ненужность ввода имени. Поэтому можно вводить любое

Ответить
Развернуть ветку
2 комментария
Аркадий П.

Ух! Сейчас у себя всё поравим и попрёт!

Ответить
Развернуть ветку
Тофсла, Вифсла и партнёры

ну и как за 4 месяца? Попёрло?

Ответить
Развернуть ветку
2 комментария
Виктор Русов

Очень полезная статья! Глубоко надеюсь что данные фишки будут реализованы на всех сайтах!

Ответить
Развернуть ветку
Алексей Струков

В вебе реализовать такое очень сложно. Создатели браузеров сильно ограничивают разработчиков в кастомизации форм ((

Ответить
Развернуть ветку
16 комментариев
Serega Sheypak
Увидев сообщение о возможной ошибке, пользователь сможет выбрать другие варианты или будет подготовлен, если столкнётся с ней

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

Ответить
Развернуть ветку
Alexander Ice

Мало того, этот вариант в "правильном" исполнении почему-то стал первым. Хотя логичнее его вообще было бы убрать.

Ответить
Развернуть ветку
Vlad Vlad

Спс, кэп

Ответить
Развернуть ветку
Платон Щукин

Заебись, почти чек лист.

Ответить
Развернуть ветку
Denis Bystruev

Статья хорошая.

Хотя поле имени для транзакции по карте вообще не нужно.

Ответить
Развернуть ветку
Artem Korsunov

Все классно, советы правильные, но часто ли вам выпадает шанс реализовывать формы оплаты с полями для ввода номера карты и прочей sensitive инфы?

Ответить
Развернуть ветку
Иван Дубышкин

Примеры статьи вполне применимы к обычным формам ввода данных

Ответить
Развернуть ветку
Alexandr Grachov

Классаная статья - спасибо. А в чём вы делали прототипы? и где можно  всему этому (ux/ui/прототипирование) обучиться

Ответить
Развернуть ветку
Виталий Ягодкин

Наконец-то, статьи про дизайн составлена не из текста, а из визжала. Большой плюс за труд автора, что сделал эти наглядные примеры.

Ответить
Развернуть ветку
Платон Щукин

Блиииин, у Адила пока только один совет.

Ответить
Развернуть ветку
Serega Sheypak

Для кард ещё нужен 3ds 1 или 2. Кто ж без этого сейчас делает?

Ответить
Развернуть ветку
Artem Korsunov

Это обычно реализовано на стороне банка и, в принципе, подчиняется тем же рекомендациям

Ответить
Развернуть ветку
Денис Курган

Больше всего напрягает, когда поле cvc не скрывает свои значения. Особенно офигенно, когда при оплате фон затеняется, крутится лоудер, и любой мимокрокодил может запомнить эти цифры.

Ответить
Развернуть ветку
Kseniya

Хорошая статья, прям чек-лист в помощь по исправлениям ошибок)) Спасибо!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Dmitry Lyamin

отличная статья для джуниора в ux

Ответить
Развернуть ветку
Anton Maltsev

Надо сменить название на "Стандарты качества пользовательского интерфейса". 
Это не частный случай, а про шаблоны проектирования графических интерфейсов с адекватной реакцией на различные действия пользователя. С упреждением ошибок (т.е. не "вы ввели данные неверно", а не позволить неверно ввести данные). Удивился, что тут есть про мгновенный отклик на действие (раздел "Постарайтесь давать обратную связь без задержки"). 
Самое странное, что все очевидно и вроде для джунов, но зачастую в жизни "знаю, но не применяю". Возьмите топ 10 своих приложений, которыми пользуетесь, и удивитесь, что там не реализовано и 50% описанных тут идей. 

Статья про внимание к мелочам и качественную работу. Разработчикам и руководителям на заметку. Тестировщикам в кейсы на проверку.  Автору зачет!

Ответить
Развернуть ветку
Вячеслав Гладышев

советы хорошие, но реализация некоторых из них зависит от возможностей платёжного партнёра, а партнёров таких очень немного

Ответить
Развернуть ветку
Роман Романов
​Пусть плейсхолдер поднимется над полем ввода, как только пользователь введёт первую цифру

Но на анимации он поднимается при клике в поле ввода.

Ответить
Развернуть ветку
Роман Романов
Не показывайте стандартную буквенно-цифровую клавиатуру, когда пользователю надо вводить только цифры

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

Ответить
Развернуть ветку
Artyom Zakharov

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

Ответить
Развернуть ветку
Роман Романов

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

А быстрое удаление текста крестиком справа я бы заменил на быстрое выделение всей строки, чтобы этот крестик случайно не нажать.
Либо таки удалять, но вместо крестика остаться кнопка возврата (иконка круговой стрелки) или удалять двойным нажатием, т.е. сначала строка выделяется.
Можно совместить все три способа.

Ответить
Развернуть ветку
Uforward.net SEO

всем привет.
нашему сайту как раз нужна такая платежная форма.
кто возьмется создать дизайн+адаптивную верстку (html) платежной страницы, принимающей кредитные/дебитовые карты по этим рекомендациям?
ТЗ немного проще, чем тут описано.
Например, не нужно определять тип карты, и еще некоторые моменты для нас излишни

Ответить
Развернуть ветку
Денис Мамаев

Где ссылка на гитхаб с реализацией?

Ответить
Развернуть ветку
Maks Nekrylov

прекрасная статья, спасибо!

Ответить
Развернуть ветку
Игорь Перов

удалено

Ответить
Развернуть ветку
Vlad P

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

Ответить
Развернуть ветку
Artyom Zakharov

Я, конечно, ни разу не претендую на звание эксперта в этом вопросе, но разве удобный интерфейс не имеет положительного влияния на лояльность пользователей и всякие такие штуки?

Ответить
Развернуть ветку
1 комментарий
78 комментариев
Раскрывать всегда