Недавно мы постили ряд полезных советов по созданию эффективных форм регистрации на сайте, а сегодня хотим поговорить про блок авторизации/логина. В последнее время в сети появляется достаточно много раздражающих и слишком «заумных» его реализаций. Хорошо, когда дизайнеры пытаются сделать необычные и красивые формы логина (см. нашу подборку), вписывая их в общую концепцию веб-проекта, однако совсем другое дело — когда они перебарщивают с функциональностью. Иногда доходит до того, что популярные менеджеры паролей (в Chrome или от 1Password) просто не срабатывают.
В статье увидите примеры форм авторизации с проблемами в юзабилити. Это хорошая пища для размышления веб-разработчикам, не особо понимающих как именно их аудитория использует инструмент входа в систему на сайте. Во второй части статьи покажем и расскажем как лучше всего реализовать данную задачу и создавать простые, связываемые, узнаваемые элементы, что понятны посетителям и отлично работают с разными «запоминателями» паролей. Текст является адаптацией этой заметки.
Вот несколько подходов, которые являются далеко не самыми идеальными и удобными решениями. Их лучше избегать.
Изначально обязательное поле «Фамилия» на сайте Delta скрыто, вероятно, для того, чтобы разгрузить пользовательский интерфейс путем поэтапного раскрытия данных. Фишка в том, что когда в форме логина элемент, обязательный для заполнения, становится невидимым, у менеджеров паролей нет возможности предварительно его заполнить. Человеку нужно выйти из одного поля дабы получить доступ к другому «супер секретному», которое сразу появится. В итоге вы получаете еще один (лишний) шаг в своем алгоритме действий.
Кстати, на экране приветствия у MacOS строка введения пароля также невидима, вероятно, для того, чтобы «очистить» интерфейс (или это стимул входить в систему через TouchID). Однако в итоге подобная «чистота» приводит лишь к бОльшей путанице (особенно для новичков).
Можно предположить, что все началось с сервиса Slack, но теперь уже многие вебсайты предоставляют пользователям «временный пароль», например, Notion. Нетрудно догадаться, в чем хитрость такого хода – волокита с регистрацией подразумевает, что люди должны запомнить два значения вместо одного и будут использовать линк «Забыли пароль», но:
Реализация у сервиса Shopify разделена на три(!) отдельных экрана. Опять же, судя по всему, разработчики сайта стараются сразу не перегружать пользователей большим количеством информации. В некоторых случаях такой прием, действительно, рационален, например, в e-коммерции и дизайнах интернет-магазинов, где разделены логические шаги совершения заказа: формирование корзины, выбор способа доставки/адреса, ввод платежных данных и т.д. Но согласитесь, решение простой тривиальной задачи в три этапа – это уже перебор. Недостатки метода:
Если говорить об эффективных подходах, то на самом деле, нет ничего прекрасней «скучной» и узнаваемой классической формы авторизации. Например, как у Harvest:
Еще один пример – система WordPress:
Понятный, лаконичный, узнаваемый интерфейс, который корректно работает и с 1Password, и со встроенными функциями Chrome.
Что касается рекомендаций. Они, по сути, заключаются в том, что вам следует избегать проблемных решений, озвученных выше, а именно:
Разумеется, этот список негативных решений и пожеланий нельзя назвать исчерпывающим. Здесь не были затронуты многие другие фишки для форм входа, например, авторизация в форме с помощью социальных сетей (social login) или двухфакторная аутентификация. Возможно, расскажем об этом в будущем. А пока пишите свои дополнения/мысли по этой теме в комментариях.