Формы: исключите некорректный ввод данных, и вы исключите некорректный результат

Корректная форма оплаты — это не только форма, которую заполняют множество пользователей, но и форма, получающая правильную и надёжную информацию о пользователе. Это возможно только тогда, когда вы проектируете форму оплаты для получения корректных данных на входе, чтобы предотвратить некорректные данные на выходе. Предлагаем вам три техники ввода данных в форме, которые следует использовать во избежание получения некорректной информации о пользователе.





Автоматизируйте поля ввода в форме

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

Определяйте название города и штата (области) по введённому индексу

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

Вы можете автоматизировать поля ввода названия города и штата или области, попросив пользователя сначала ввести индекс.

Определяйте тип кредитной карты по её номеру

У многих пользователей на руках есть по нескольку кредитных карт, и им будет легко перепутать одну карту с другой во время совершения покупок. Поэтому необходимо избегать запрашивания у пользователей типа кредитной карты, которую они используют для оплаты, а вместо этого автоматизировать данное поле ввода.

С помощью определителя типа кредитных карт по номеру, например, jQuery Credit Card Validator от Павела Дековски, можно определить тип карты по введенному номеру карты. Это возможно, потому что каждая компания, выпускающая карты, приняла к использованию уникальную структуру номеров карт. Когда пользователь введёт номер карты, её тип подсветится автоматически.

Ограничивайте ввод

Ещё один приём для предотвращения ввода некорректных данных — внедрение ограничения. Так как пользователь может сделать опечатку во время ввода, ограничения минимизируют их количество.

Только цифры для полей ввода номера телефона и индекса

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

Разбейте ввод имени, номера телефона и адреса на несколько полей

Иногда пользователи могут упустить важную для вас информацию, если ваш запрос расплывчат. Чаще всего это происходит с именами, номерами телефонов и адресами. Если вам нужно полное имя пользователя, например, имя и фамилия, важно ясно и чётко запросить эти данные, разбив ввод на поле имени и поле фамилии. Поле ввода, подписанное как «Имя», может привести к тому, что пользователь введёт только своё имя.

Также важно делать определёнными поля ввода номера телефона. Пользователю необходимо понимать, какой тип телефонного номера — основной, мобильный, домашний, рабочий — вы от него ждёте. Не помешает выделить код телефона в отдельное поле ввода, чтобы пользователь не оставил его пустым.

Пользователи имеют тенденцию пропускать важную информацию при вводе адреса, если она явно не запрашивается. Вместо единственного поля ввода, озаглавленного «Адрес», разместите в форме отдельные поля для ввода названия улицы и номера дома, подъезда, квартиры. Это предотвратит ситуацию, в которой пользователь ввёл только название улицы, но забыл ввести номер дома и квартиры.

Используйте выпадающие списки, если ожидаемые данные известны

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

Дайте возможность проверить и подтвердить введенные данные

Последний приём предотвращения получения некорректных данных — дать возможность пользователям проверить введенные ими данные и подтвердить их правильность перед тем, как отправить их. Это очень важно для форм оплаты, потому что если информация о карте пользователя неверна, сделка не состоится, а если адрес доставки ошибочный, покупатель не получит товар.

Исключите некорректный ввод данных, и вы исключите некорректный результат

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

Источник: uxmovement.com





Автор: Перевод: Константин Войцеховский


Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма




Забавное видео

Этот малыш еще ходит в садик, но играет в баскетбол лучше многих взрослых!