Идеальная форма авторизации - как делать не нужно (ошибки и советы)

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

Ознакомьтесь с ними, чтобы использовать в качестве примера. Форма авторизации хороша в том случае, если она отражает общую концепцию веб-сайта. Некоторые дизайнеры разрабатывают довольно интересные и простые формы, в которых обычному человеку легче понять механизм авторизации. То есть, форма должна быть такой, чтобы менеджеры паролей в Chrome или 1Password сработали.

Также мы с вами рассмотрим такие формы авторизации, в которых прослеживаются проблемы в юзабилити.

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

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

Чего делать не стоит?

Ниже мы рассмотрим список неэффективных приемов, которые мы советуем использовать как можно реже.

Логины в модальных окнах:

• Наличие дополнительных действий. Сюда можно причислить кнопки, открывающие диалоговые окна, в которых необходимо что-то заполнить. Оптимальнее добавить подобную информацию в шапке профиля;
• Модальное всплывающее окно может повлечь за собой новые трудности, например, для программ по типу 1Password. Так, могут возникнуть ошибки в открытии окна. Зачастую, оно просто не срабатывает;
• Непрямое перенаправление юзера на авторизацию, из-за которого приходится давать дополнительные инструкции о том, как можно перейти на страницу. Легче будет предоставить ссылку.

Не следует скрывать поля

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

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

В MacOS мы встречаем подобное. Но невидимость строки пароля приводит к путанице среди новичков. 

«Волшебные» ссылки (magic links), с которыми нужно быть осторожнее

Возможно, использование временных паролей началось с сервиса Slack. Но на Notion используется этот же метод. Суть в том, что забывая пароль, пользователи начинают использовать линк «Забыли пароль».

Происходит так из-за того, что нужно запомнить два значения. Давайте рассмотрим, в чем минусы варианта для тех, кто входит на сайт:

• Трудность и занудливость подхода. Какие только этапы не ждут пользователя, который заходит на подобный сайт! Для начала, потребуется ввести свою электронную почту, на которую придет письмо с кодом, похожим на абракадабру. Далее вам следует открыть дополнительную вкладку, на которой вы зайдете на свою почту. Потом вам предстоит открыть письмо и скопировать пароль. Ну а затем, зайти опять на сайт! Не правда ли, слишком много путаницы?
• То, насколько продукт совместим с глобальной паутиной, также очень важно. Бывает, что данная проблема становится поводом для раздражений. Несовместимость с менеджерами или запоминателями паролей лучше предусмотреть при разработке;
• Изучение новых принципов работы в Интернете. Это, конечно хорошо и интересно, но когда перед пользователем стоит задача авторизоваться, зачем загружать форму. Побуждать клиентов сервиса на поиск чего-то нового в Интернете не только не практично, но и замедляет работу сайта.

Процесс авторизации не должен состоять из нескольких шагов

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

Но такая многоэтапность излишняя, так как:

• При входе в систему нужно совершать дополнительные шаги. Просмотр нескольких экранов затрудняет работу и занимает больше времени;
• Менеджер паролей не поддерживает заполнение формы сразу на трех страницах. 

Что рекомендуется делать

Как известно, все самое гениальное – просто. Поэтому мы рекомендуем вам учесть все приведенные советы о том, как делать не стоит. Далее мы рассмотрим с вами, какие же варианты считаются наиболее эффективными.

Обратите внимание на то, как устроен сервис Harvest. Классическая форма также у системы WordPress. Интерфейс, который построен по такому типу, корректно работает с 1Password и встроенными функциями Chrome. 

Рекомендации по созданию простых форм:

• Для логина используйте специальную страницу. Это позволит вам при возникновении проблем перенаправить пользователя на URL-адрес страницы (domain.com/login). Необходимость давать массу инструкций иногда путает больше пользователей, нежели техподдержку. Используйте данный совет, если хотите сохранить URL-адрес. При этом, менеджер паролей сможет сохранить данные и заполнять форму повторно не будет надобности. Иногда форма используется как элемент сайта. Тогда размещайте ее в видном поле страницы.   
• Заполнение полей должно быть без «скрытых кнопок». Поля, на которых нужно вводить фамилию/возраст, должны быть видны. Скрывать их мы вам не рекомендуем, так как это может повлиять на работу сайта.
• Удобнее будет такая форма, в которой все поля размещены на одной странице. Помните, мы говорили о том, что несколько экранов для авторизации – очень непрактично с точки зрения веб-разработки. Тем более, вам необходимо привлечь пользователей на ваш сайт, а не запутать их. 
• Не нужно стараться делать форму излишне функциональной. Учитывайте то, как интернет-аудитория использует сервис. Интерфейс не должен усложнять процесс авторизации. Старайтесь поддерживать статус, так как среди вашего ЦА точно есть люди, привыкшие использовать более простые инструменты. Минимальное количество полей и простота формы логина – наиболее удачный вариант.

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

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