Какая она: идеальная форма авторизации

Дизайн
14.01.2020
508

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

Статья о том, как сделать форму авторизации, состоящую из простых, связываемых и узнаваемых элементов, станет полезной для разработчиков, которые стремятся идти в ногу со временем. Забегая наперед, отметим – классическая и узнаваемая форма авторизации станет вашим лучшим решением!

Чего не нужно делать?

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

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

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

Кроме того, логины в модальных окнах предполагают создание дополнительных трудностей для программ типа 1Password (возникнут проблемы с работой функции «Открыть и заполнить»). И последнее препятствие, становящееся настоящей головной болью для специалистов службы поддержки, – это невозможность перенаправить пользователя напрямую на страницу авторизации. Столкнувшись с этим, юзеры будут «атаковать» службу поддержки, требуя получения инструкций.

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

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

Капризные Magic Links («Волшебные» ссылки)

«Временный пароль» подразумевает, что юзеры должны запоминать 2 значения вместо одного, а значит, будут часто нажимать кнопку «Забыли пароль». Однако этот подход неимоверно занудный и, к тому же, заставляет изучать новые принципы работы в Сети (что в процессе авторизации совсем не актуально!).

И последнее, чего категорически не стоит делать – разбивать процесс создания логина на несколько этапов.

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

Дизайн формы авторизации будет эффективным при следовании приведенным ниже рекомендациям. В первую очередь (об этом упоминалось выше), нужно выбирать классические (пусть и несколько «скучные») варианты формы авторизации. «В моде» лаконичный, простой и узнаваемый интерфейс, который будет корректно работать с 1Password и со встроенным функционалом Хром.

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

  1. Создание специальной страницы логина. Это поможет сотрудникам технической поддержки направлять пользователей на URL страницы, а значит, последние избавятся от необходимости изучать множество инструкций. Менеджер паролей получит возможность запоминать адрес и, при необходимости, открывать его единичным нажатием кнопки (после предварительного заполнения данных).
  2. Отказ от скрытия обязательных для заполнения полей. Если разработчик требует вводить ФИО/возраст для входа, он обязан эти строки сделать изначально видимыми.
  3. Размещение всех полей на одной странице, дабы не превращать процесс авторизации в длительное перелистывание экранов.
  4. «Умеренность» в действиях. Создавая форму авторизации, не стоит отказываться от использования «волшебных» ссылок, однако нужно придерживаться меры (иначе целевая аудитория не захочет использовать этот инструмент, ссылаясь на экономию времени).

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

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна, и учиться Вам теперь станет в удовольствие!

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку