10 практических советов по улучшению формы регистрации в UI/UX дизайне
Форма регистрации является связующим звеном между пользователями и приложением. Поэтому очень важно сделать ее максимально простой.
Ниже приведен список 10 самых распространенных ошибок, связанных с дизайном форм регистрации, а также несколько полезных советов, как их избежать.
1. Не задавайте слишком много вопросов
Избегайте лишних вопросов на моменте регистрации пользователя. Жизнь слишком коротка, чтобы тратить ее на заполнение форм. Запрашивайте только важную информацию и, как говорит бритва Оккама, просто будьте более лаконичными.
Возможно, вам даже не понадобится номер телефона, имя и фамилия пользователя. Вместо предложения установить пароль, вы можете автоматически генерировать его и отправлять на электронную почту.
Если вам требуется запросить больше информации, всегда указывайте причину. Пользователь будет уверен, что не тратит зря время.
Если форма слишком большая, разбейте ее на несколько.
Чем меньше форма, тем лучше
2. Фокус на первом поле
Если у вас не настроен автофокус, то пользователю придется делать много лишних движений мышкой.
Отлично работает возвращение пользователя на страницу входа. Это касается не только форм регистрации, но и любых других форм.
Автофокус на первой строке
3. Пользователи должны видеть пароль, который они вводят
Когда пользователи неверно вводят пароль, они хотят видеть, где они совершили ошибку, и быстро исправить ее, вместо того, чтобы вводить пароль заново.
Самый понятный и простой вариант — установить значок с изображением глаза. Также вместо значка вы можете разместить фразу «Показать пароль».
Видимость пароля
4. Обозначайте правила ввода пароля
Указывайте требования сразу. Не допускайте момента, когда пользователь нажимает кнопку входа и видит несоответствие. Конечно пользователь имеет право на ошибку, как гласит третья эвристика, но давайте создавать дизайны, где ошибки — это скорее редкость, чем обычное дело.
Хорошим примером является форма Mailchip. Если пароль отвечает всем требованиям, они выделяются серым цветом.
Проверка пароля на соответствие правилам
5. Поощряйте пользователей в процессе заполнения формы.
Если форма небольшая, это условие необязательно выполнять. Но если форма включает в себя десятки полей к заполнению, лучше установить зеленую галочку напротив каждого корректно заполненного поля. Таким образом вы покажите текущее состояние системы, а как говорил гуру usability Якоб Нильсен в первой эвристике: «Это помогает пользователю чувствовать контроль над ситуацией!»
Представьте, что вам нужно заполнить форму заказа и ввести данные карты. Довольно просто допустить здесь ошибку. Даже если вы ввели 16 цифр, номер карты может быть некорректным. Поэтому зеленая галочка будет указывать, что все остальное заполнено верно.
Подтверждение правильного заполнения каждой строки
6. Замените имена пользователей на электронные почты
Пользователю очень сложно запомнить логин для каждого сервиса. Электронная почта в данном случае намного удобнее. Более того, это позволит избежать раздражающей надписи «это имя уже используется».
Электронная почта вместо имени
7. Сохраняйте учетные данные после неудачных попыток входа
Не заставляйте пользователей заново вводить все данные. Даже в поле для ввода пароля лучше сохранить знаки, чтобы пользователь смог исправить небольшую опечатку. Ведь согласно закону Миллера, мы просто не сможем запомнить больше семи (плюс-минус двух) элементов. А если у вас двадцать паролей от разных сервисов, что тогда?
А что касается вопроса безопасности, именно сервер отвечает за защиту от попытки взлома пароля, а не сам интерфейс.
Сохранение набранного текста
8. Автозаполнение страницы по восстановлению пароля
Когда пользователь попадает на страницу по восстановлению пароля, избавьте его от необходимости заново вводить адрес электронной почты.
9. Предупреждайте пользователя о включенной кнопке Сaps Lock
Такая мелочь, как напоминание о включенной/выключенной функции Сaps Lock, будет очень полезной.
Напоминание о включенной Caps Lock
10. Используйте корректный тип ввода
Если в поле вашей формы нужно ввести адрес электронной почты или номер телефона, не забудьте установить корректный тип ввода. В противном случае пользователям придется менять его вручную.
Корректный тип ввода
Источник: icons8.com
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
