Чек-лист: проектируем удобный интерфейс оплаты Статьи редакции
Советы дизайнера Адила Сиддики.
Не стоит прятать подписи к полям
Иначе пользователям придётся угадывать, какие данные они сейчас вводят.
Неправильно
Правильно
Пусть нужное поле ввода выбирается автоматически
Указывайте пользователю на цель.
Неправильно
Правильно
Показывайте правильную раскладку клавиатуры
Неправильно
Правильно
Сделайте автоматический переход к другому полю
Это поможет сэкономить время пользователя.
Неправильно
Правильно
Не стоит прятать кнопку призыва к действию
Неправильно
Правильно
Не забудьте про значки и иконки, обозначающие безопасность платежей
Поддерживайте доверие пользователя.
Неправильно
Правильно
Сразу же указывайте на ошибки
Старайтесь меньше раздражать пользователей.
Неправильно
Правильно
Постарайтесь давать обратную связь без задержки
Неправильно
Правильно
Если оплату совершить невозможно, предложите альтернативные варианты
Неправильно
Правильно
Текст на кнопках призыва к действию стоит делать понятным, а не кратким
Понятность лучше краткости.
Неправильно
Правильно
Не забудьте обозначить, что оплата прошла успешно
Неправильно
Правильно
Добавьте возможность мгновенно очистить поле ввода
Это позволит сэкономить время пользователей.
Неправильно
Правильно
Показывайте тип карты и название банка для сохранённых карт
Сделайте их легко узнаваемыми.
Неправильно
Правильно
Стоит сразу показывать тип карты, пока пользователь вводит номер
Это послужит визуальной подсказкой.
Неправильно
Правильно
Заранее сообщите о том, если ваш сервис не поддерживает какую-либо платёжную систему
Учитывайте ограничения при дизайне.
Неправильно
Правильно
Проинформируйте пользователей о возможных проблемах с определённым способом оплаты
Неправильно
Правильно
131
показ
27K
открытий
1
репост
Очень полезная статья! Глубоко надеюсь что данные фишки будут реализованы на всех сайтах!
В вебе реализовать такое очень сложно. Создатели браузеров сильно ограничивают разработчиков в кастомизации форм ((
Можете подробнее рассказать что из этого списка очень сложно реализовать?
Спорный момент, но: включение цифровой клавиатуры происходит если указать у input'a type "number". Но проблема в том, что если взять его value и первый или несколько первых символов - нули, то они не будут возвращены.
Воркараунды описаны тут: https://stackoverflow.com/questions/8437529/html5-input-type-number-removes-leading-zero
Видно что проблема старая, но адекватного семантичного решения все еще нет, нативные аппы дают больше контроля
Не number, а tel)
Для целочисленных значений — 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
На iOS, к сожалению, number позволил ввести даже русский алфавит в поле.
Да, к сожалению, но это скорее камень в огород Safari — #, * и + тоже не очень про целочисленный ввод, и их не спрячешь даже используя атрибут pattern — а ветка как раз про то, что не все рекомендации автора статьи возможно реализовать в современном вебе