Как улучшить UI/UX ваших форм регистрации: 10 практических советов


14.05.2022 Время чтения - 3 минуты 629

Здесь собран список из 10 основных ошибок, которые люди совершают при разработке форм регистрации, а также советы, помогающие избежать этих ошибок.

Форма регистрации — это барьер между пользователями и вашим веб-приложением. Именно поэтому важно сделать так, чтобы его преодоление было максимально простым.

1. Не просите слишком много

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

Вам наверняка не нужен номер телефона пользователя, его имя и фамилия. Можно даже опустить поле пароля! А вместо этого автоматически сгенерировать его и отправить пользователю по электронной почте.

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

Когда форма слишком велика, подумайте о том, чтобы разбить ее на несколько шагов.

Совет по пользовательскому интерфейсу №1.  Скриншот, показывающий длинную и короткую формы регистрации

2. Автофокус первого поля

Если автофокуса нет, пользователям приходится двигать мышкой и делать лишний клик.

Очень советуем автофокусировку первого поля. Не только в формах регистрации, но и в большинстве других форм.

Совет по пользовательскому интерфейсу №2.  Скриншот двух форм регистрации.  Вторая форма имеет автофокусировку первого ввода.

3. Позвольте пользователям видеть пароли, которые они вводят

Когда пользователи делают ошибку в поле пароля, они могут захотеть посмотреть, что они вообще набрали, и исправить один или два символа, а не вводить пароль заново.

Маленькая иконка в виде глаза уже стала общепринятой и легко узнаваемой. Ну или используйте вместо иконки метку «Показать».

Совет по пользовательскому интерфейсу №3.  Скриншот двух форм регистрации.  Вторая форма имеет значок глаза, чтобы раскрыть пароль.

4. Сразу расскажите про свои требования к паролю

Не ждите, пока пользователь нажмет кнопку «Зарегистрироваться» и увидит ошибки.

Хороший пример — форма Mailchimp. Как только пароль, который вводит пользователь, соответствует требованию, это требование становится серым.

Скриншот формы регистрации Mailchimp.

5. Поощряйте пользователей по мере их продвижения

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

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

Скриншот формы с зелеными галочками рядом с правильно заполненными полями

6. Забудьте про имена пользователей, используйте электронную почту

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

Скриншот двух форм: одна с полем имени пользователя, другая с полем электронной почты

7. Не удаляйте учетные данные после неудачных попыток входа

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

Соображения безопасности: это работа сервера по предотвращению перебора паролей, а не интерфейса.

Скриншот двух форм: левая заставляет пользователя повторно вводить учетные данные, правая — нет.

8. Автозаполнение страницы забытого пароля

Когда вы перенаправляете пользователей на страницу восстановления пароля, гуманно автоматически заполнять адрес электронной почты, чтобы им не приходилось вводить его снова.

9. Добавьте оповещение Caps Lock

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

Скриншот двух форм: правая показывает предупреждение Caps Lock, левая нет

10. Используйте правильный тип ввода

Если ваша форма включает такие поля, как адрес электронной почты или номер телефона, не забудьте определить правильный тип ввода через HTML. Если вы этого не сделаете, пользователям придется переключать тип клавиатуры вручную.

A screenshot of two mobile apps with screen keyboard open: the left one shows caps, the right one shows lower-case letters