Редизайн формы авторизации

Редизайн формы авторизации За кулисами: нахождение баланса между безопасностью и юзабилити

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

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

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

Плавное окно авторизации

Легкий

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

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

Placeholder и label

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

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

Мы считаем, что придумали довольно изящное решение: использовали отдельный элемент label и перемещаем его за пределы поля ввода:

Плавный label Конечно, на мобильных устройствах нам не хватает места, чтобы переместить label влево, поэтому мы перемещаем его вверх:

Плавный label для мобильных устройств
Однако, делая всю эту работу мы натолкнулись на некоторые веселые проблемы...

Когда безопасность может доставлять неудобства

Когда мы в первый раз написали код управления label/placeholder, он был очень простым: каждый раз, когда поле ввода изменялось, смотрели на его значение. Если оно пустое, label помещается внутрь поля ввода, как placeholder. Если нет, оно сдвигается наружу. Мы делаем ту же проверку несколько раз непосредственно после загрузки страницы, чтобы определить автозаполнение.

Тем не менее, тут есть проблема. У Chrome есть особенность безопасности (называется PasswordAutofillAgent::PasswordValueGatekeeper), поле пароля может быть заполнено автоматически, но на самом деле в нем нет значения до тех пор, пока пользователь как-нибудь не взаимодействовал со страницей. Даже если зрительно оно кажется заполненным (это имеет смысл, если вы не хотите, чтоб JavaScript на странице автоматически получал автозаполненный пароль и куда-нибудь его публиковал). В результате чего наши красивые надписи делали это:

Форма с автозаполнением Обойти это можно проверив, соответствуют ли поля ввода селлектору :-webkit-autofill, а также проверив значение в поле для ввода. Это некрасивый, но единственный способ заставить все работать.

Более плавный, чем когда-либо

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

Плавный переход

Проверка и предположение

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

Mailcheck отлично находит и исправляет типичные ошибки email-адресов. Мы уже использовали его в нашем предыдущем процессе авторизации, так что имело смысл перенести его в новый.

Всплывающая подсказка

Отправка кнопкой входа

Когда мы в прошлый раз переделывали дизайн формы входа, мы делали все супер-супер-простым: два поля ввода и ничего больше. В то время было довольно нормально отправлять форму нажатием на "Return" после того, как закончишь вводить данные. Однако, после того, как мы увидели как на самом деле люди пользуются формой, мы поняли, что многие предпочитают нажать на кнопку. Мы использовали эту обратную связь: новый экран авторизации имеет надлежащую кнопку (легко и приятно нажать на сенсорных устройствах).

Но стойте! Медленно! Почему так медленно?

Когда вы нажимаете на кнопку "Войти", проходит добрые несколько секунд перед тем как вы действительно будете авторизованы. Есть хорошая причина, почему все работает медленно, даже после того как мы потратили много времени и усилий на оптимизацию - это безопасность. Способ, которым мы проверяем пароль при логине требует большого количества машинного времени (мы не будем вдаваться в подробности, но идея сделать очень трудным брут-форса вашего аккаунта).

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

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

Кнопка ожидания загрузки

Сходите, проверьте!

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

От переводчика

Оригинал статьи можно прочитать здесь: https://www.gosquared.com/blog/login-screen-design-flow

Возврат к списку