Поле «Номер телефона» вместе с полем «Дата рождения» сложно сделать правильно. Есть много форматов телефонных номеров, которые пользователи могут выбирать, и они часто не уверены, какой из них корректный. Иногда пользователи даже не уверены, должны ли они указывать код страны.
Когда пользователи не уверены в правильности выбранного формата, они опасаются, что форма не примет введенные данные. Ошибка проверки из-за неверного формата номера телефона может заставить их отказаться от заполнения всей формы.
Ваши пользователи не должны задаваться вопросом, какой формат номера телефона правильный или получить ошибку проверки из-за неверного формата номера. Если это так, то поле «Номер телефона» вашей формы имеет плохой пользовательский опыт и нуждается в редизайне.
Избегайте плохих примеров и следуйте лучшим практикам, если хотите улучшить свои формы.
Сомнительный способ
Некоторые дизайнеры считают, что позволять вводить номер телефона в любом формате – решение проблемы. Это предотвратило бы ошибки проверки заполнения формы, но тогда пользователи не будут знать, какой формат они должны использовать.
Любая неопределенность для пользователя, может снизить коэффициент конверсии вашей формы. Пользователи должны быть уверены в формате номера телефона, иначе они будут беспокоиться о том, что вводимая ими информация не пройдет проверку.
Пользователям также не ясно, нужно ли указывать код страны перед номером телефона. Они могут ошибиться, введя код своей страны, когда это не требуется, что приведет к неправильному номеру телефона.
Неэффективный способ
Некоторые дизайнеры считают, что показ примера правильного формата в текстовом поле позволит решить неопределенность формата. Пользователь просто посмотрит на пример и наберет свой номер телефона в соответствующем формате.
Оказывается, пользователи замечают пример, но большинство из них не следует ему. Исследование показало, что «89% испытуемых набрали свой номер телефона в формате, отличном от приведенного примера».
Предоставление отформатированного примера не помогает, поскольку большинство пользователей игнорируют его. Это также приводит к ошибкам проверки, когда пользователь ввел номер в неправильном формате. Исследование показало, что ошибки проверки формата привели к отказу от заполнения формы.
Сложный способ
Некоторые дизайнеры говорят, что разделение строки номера телефона на отдельные текстовые поля решает проблемы с форматированием. Для американского номера у вас будет три текстовых поля. Эта практика делает форматирование правильным и последовательным, но только для американских пользователей.
Пользователи из других стран не смогут ввести данные, потому что их номера телефонов имеют другой формат и длину. Создание текстовых полей, локализованных под одну страну, не удобно для пользователей из других стран.
Отдельные текстовые поля также затрудняют ввод данных для мобильных пользователей. Тесты юзабилити показали, что многим пользователям было «трудно перемещаться между полями на мобильных устройствах». Это также затрудняет исправление введенных данных, если была допущена ошибка.
Легкий способ
Лучшая практика – это, когда пользователям даже не нужно думать о формате номера телефона или коде страны, потому что он автоматически исправляется на нужный.
Автоматическое форматирование ввода с геолокацией и маской ввода – это лучший способ представить поле «Номера телефона». Когда пользователи набирают свой номер телефона, надлежащий формат отображается без каких-либо усилий со стороны пользователя.
Пользователям не нужно вводить никаких скобок, тире, слэшей, точек или пробелов, только цифры. В поле есть одно ограничение – можно вводить только цифры, чтобы предотвратить ошибки проверки, если пользователи введут другие символы.
Геолокация страны пользователя позволяет автоматически форматировать номер телефона каждого пользователя независимо от того, откуда он. Вы также узнаете код страны пользователя, без необходимости его набора. Это означает, что для пользователя будет меньше работы, а для вас лучший коэффициент конверсии.
Код страны должен отображаться рядом с номером телефона, чтобы пользователи знали, что им не нужно вводить его. Самый интуитивный способ сделать это – отобразить значок флага страны пользователя внутри текстового поля рядом с введенными данными.
Можно разрешить пользователям изменять код страны, если они хотят ввести международный номер телефона. Нажав на значок флага, вы увидите раскрывающееся меню с кодами других стран.
Не заставляйте пользователя думать
Когда пользователи заполняют формы, они не хотят думать. Они хотят заполнить форму как можно быстрее. Разрешая пользователям вводить свой номер телефона в любом формате, вы заставляете их думать. Вместо этого, разгрузите пользователей, автоматически форматируя вводимые ими данные.
Внесение этого изменения в поле «Номер телефона» может предотвратить отказ от заполнения формы и увеличить коэффициент конверсии. Просто следуйте этим рекомендациям.
Перевод статьи uxmovement.com
Топ коментарі (0)