{"id":14279,"url":"\/distributions\/14279\/click?bit=1&hash=4408d97a995353c62a7353088166cda4ded361bf29df096e086ea0bbb9c1b2fc","title":"\u0427\u0442\u043e \u0432\u044b\u0431\u0435\u0440\u0435\u0442\u0435: \u0432\u044b\u0435\u0445\u0430\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0438\u043b\u0438 \u0437\u0430\u0435\u0445\u0430\u0442\u044c \u0440\u0430\u043d\u044c\u0448\u0435?","buttonText":"","imageUuid":""}
Дизайн
Ян Австрейх

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

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Купить рекламу Отключить

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

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

Неправильно

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

Правильно

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

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

Неправильно

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

Правильно

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

#платежи #интерфейс

131 показ
27K открытий
1 репост
0
81 комментарий
Написать комментарий...
Показать всё . Вы видите только часть дискуссии
 Иван Дубышкин

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Показать 81 комментарий . Вы видите только часть дискуссии
Написать комментарий...
78 комментариев
Раскрывать всегда