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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Реальные отзывы заказчиков о работе с «Профиланс»

star star star star star
оценок: 1889
среднее 4,9 из 5
Работы выполнена качественно и даже раньше ср...
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Очередной заказ выполнен быстро и качественно...
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очень быстро выполнено задание, все замечания...
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРО...
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Какой великолепный сайт, благодарна этому са...
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно...
Инна
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно выполнила перевод немецкого языка, быстро и на самую лучшую оценку "5", сразу чувствуется, что знает этот предмет на отлично! Я безмерно счастлива, у меня нет теперь долгов к этой сессии, благодарю Мария Вы супер! С наступающим Новым годом Мария, всех благ, счастья, любви, и все, то, что сами себе желаете!
Инна
Андрей - опытный и исполнительный специалист,...
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок...
Василий
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок. Заданием было выставить правильный тайминг готовых субтитров и добавить озвучку перевода документального фильма. Помимо самого задания были устранены шумы, получившиеся при записи озвучки, а также оперативно была исправлена ошибка в озвучке: фрагмент с оговоркой благополучно вырезан и заменен на присланный правильный.
Василий
Работа сделана быстро, единственное хотелось...
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Очень быстро и качественно. До работы были за...
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены н...
Валентина
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены несколько итоговых вариантов. Очень рада сотрудничеству!!! Обращайтесь
Валентина

Вы заказчик и вам необходимо найти фрилансера?

«Профиланс» — это безопасный сервис для работы с фрилансерами

Вы фрилансер и вам нужны заказы?

Заполните заявку и получите доступ к заказам

Стать фрилансером

Заполните форму
и узнайте цену

Специализация
Специализация
Категория
Категория

Файлы при наличии

    Профиланс специализируется на фриланс-заказах: дизайн, маркетинг, реклама, программирование и т.д. Для студенческих заказов используйте сервис «Всё сдал!».
    • здесь больше исполнителей по студенческим заказам;
    • ниже цены;
    Все сдал!