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

Какие ошибки часто допускают веб-дизайнеры и верстальщики

Самая распространенная ошибка в пользовательском интерфейсе — это спрятанная форма авторизации. Обычно ее вставляют по ссылке в окне регистрации. Например, чтобы ввести свои данные и открыть личный кабинет пользователю приходится искать форму ввода, переходить по гиперссылке (совершать 2-3 действия вместо 1).

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

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

Третья ошибка — разбиение процесса авторизации на несколько этапов. Например, пользователь вводит сначала только логин/электронный адрес, а в следующем окне — пароль. Это увеличивает время выполнения всего процесса в среднем на 20%, что негативно сказывается на лояльности пользователя. Максимально упрощайте процесс!

Какой должна быть идеальная форма для авторизации

Выделим ключевые особенности правильной формы авторизации, которую описывают пользователи:

1. Наличие возможности быстрой авторизации через профили социальных сетей (Facebook, Google, Twitter).
2. Не более двух форм в окне авторизации (предпочтительнее, чтобы входить в собственный профиль можно было ИЛИ через адрес электронной почты, ИЛИ через логин).
3. Используйте отдельную страницу для авторизации (чтобы окно имело уникальную ссылку).
4. Минимизируйте дизайн формы — не добавляйте лишних деталей и надписей.

Для повышения удобства рационально, чтобы окно авторизации имело уникальный адрес. Ссылка может публиковаться на сторонних ресурсах, а может передаваться службой технической поддержки (пример ссылки: www. site.com/login).

Цветовая гамма может использоваться любая. Но требование по выделению форм ввода данных остается актуальным!

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

Перед окончательным запуском формы на сайте проверьте ее работоспособность и на мобильной, и на десктопной версии. Многие пользователи сошлись на мнении, что описываемое окно входа может быть одинаковым и для интернет-магазинов, и для новостных сайтов (без отличий).