Дизайн
Ян Австрейх
15 479

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

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

В закладки
Аудио

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

Увидев сообщение о возможной ошибке, пользователь сможет выбрать другие варианты или будет подготовлен, если столкнётся с ней
{ "author_name": "Ян Австрейх", "author_type": "self", "tags": ["\u043f\u043b\u0430\u0442\u0435\u0436\u0438","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441"], "comments": 74, "likes": 247, "favorites": 703, "is_advertisement": false, "subsite_label": "design", "id": 88406, "is_wide": true, "is_ugc": true, "date": "Sat, 26 Oct 2019 14:42:38 +0300", "is_special": false }
0
{ "id": 88406, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/88406\/get","add":"\/comments\/88406\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/88406"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
74 комментария
Популярные
По порядку
Написать комментарий...
78

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

Ответить
38

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

Ответить
18

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

Ответить
6

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

Ответить
5

Это не так однозначно

Ответить
0

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

Ответить
2

Ну унифицировать нужно для начала Mac  и Windows в этом вопросе, что будет очень тяжело сделать

Ответить
0

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

Ответить
1

Я к тому, что пользователи на винде привыкают, что primary action слева, поэтому и дизайнеры иногда их ставят слева. Если я не ошибаюсь рекомендации по этому расположению кнопок у мака и виндоус противополжные

Ответить
0

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

Ответить
6

Вот где вы видели хороший дизайн формы оплаты, туда и идите

Ответить
0

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

Ответить
14

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

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

Ответить
21

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

Ответить
12

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

Ответить
5

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

Ответить
4

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

Ответить
11

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

Ответить
1

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

Ответить
7

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

Ответить
0

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

Ответить
5

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

Ответить
3

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

Ответить
4

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

Ответить
0

Возможно, да - но это можно спрашивать при регистрации! Зачем просить заполнять именно при чекауте

Ответить
1

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

У меня как-то не проходил платёж не помню где вроде бы из-за того, что индекс не совпадал.

Хотя большие серьёзные магазины не парятся — пару дней назад делал две покупки на Amazon, даже подтверждения по SMS не запросили.

А бывает, что и CVC не спрашивают.

Ответить
0

Там есть billing address поле: оно едва ли меняется! Можно при регистрации спрашивать, а при чекауте предлагать уточнить.

Я к тому, что желание расстаться с деньгами надо «не спугнуть» - спрашивать по возможности минимум

Ответить
1

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

Ответить
5

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

Ответить
4

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

Ответить
–6

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

Ответить
5

Камон! Сейчас 2019 год. Абсолютно все из списка реализуемо в вебе.

Ответить
0

Ну лично я с 2015 года не заметил никаких изменений относительно html/css в браузерах ((

Ответить
0

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

Ответить
1

возьметесь выполнить?

Ответить
0

Только с хорошим рейтом)

Ответить
0

js спасает

Ответить
0

возьметесь за такой заказ?

Ответить
0

Можете подробнее рассказать что из этого списка очень сложно реализовать?

Ответить
3

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

Если делать кнопку, прижатую к низу экрана, то при открытии клавиатуры iOS не уменьшает viewport и кнопка оказывается под клавиатурой (Android уменьшает).
Если сделать как в примере - кнопка сразу под формой, это все равно не гарантирует того, что на устройстве с небольшим экраном и форма и кнопка оплаты влезет на экран.
Если мы делаем нативное приложение, мы можем модифицировать клавиатуру или "прилепить" кнопку оплаты сразу над клавиатурой.
Если прямо отвечать на ваш вопрос - браузеры не позволяют узнать высоту открытой клавиатуры, а это очень варьируемое значение, даже на iOS.

Ответить
2

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

Спорный момент, но: включение цифровой клавиатуры происходит если указать у input'a type "number". Но проблема в том, что если взять его value и первый или несколько первых символов - нули, то они не будут возвращены.
Воркараунды описаны тут: https://stackoverflow.com/questions/8437529/html5-input-type-number-removes-leading-zero
Видно что проблема старая, но адекватного семантичного решения все еще нет, нативные аппы дают больше контроля

Ответить
0

Не number, а tel)

Ответить
0

Для целочисленных значений — number, для телефона — tel:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

Ответить
0

На iOS, к сожалению, number позволил ввести даже русский алфавит в поле.

Ответить
0

Да, к сожалению, но это скорее камень в огород Safari — #, * и + тоже не очень про целочисленный ввод, и их не спрячешь даже используя атрибут pattern — а ветка как раз про то, что не все рекомендации автора статьи возможно реализовать в современном вебе

Ответить
1

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

PS
Если видели сайт с подобными формами или на codepen попадался пример реализации, прошу поделиться ссылочкой

Ответить
3

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

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

удалено

Ответить
0

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

Конечно, ведь так важно приучить пользователя к нарисованным на странице замочкам, чтобы он не обращал внимания где и кому платит. Замочек — значит безопасно.

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
–1

Имеет конечно. Вопрос в эффективности затрат. Если у вас есть идея новой фичи, которая может поднять вашу выручку в x2+ раз, то надо ее делать, а не интерфейс бесконечно пилить. А если у вас нет такой идеи, то может надо получше подумать, а не делать то, что очевидно? Естественно речь про стартапы.

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }