Мы (здесь и далее повествование от имени автора) в GoSquared заботимся о деталях. С недавнего запуска двухфакторной авторизации, сделавшего GoSquared более защищенным, мы воспользовались возможностью переработать вход в аккаунт.
Проектирование страницы авторизации не такой простой процесс, как может показаться. Нужно сделать её красивой, интуитивной и быстрой для ваших пользователей, но вам также необходимо сделать авторизацию трудной и медленной для хакеров, воров, и других плохих парней.
Давайте взглянем на некоторые решения, к которым мы пришли. Пожалуйста, не стесняйтесь опробовать процесс на себе: регистрируйтесь и входите в систему!
Легкость
Вы не заходите на страницу авторизации ради самой формы. Вы заходите туда потому что вам необходимо войти в свой аккаунт, а форма - лишь средство достижения цели. По этой причине она должна быть легкой насколько возможно. Все упрощено ровно настолько, чтоб вы могли выполнить задачу (войти в свой аккаунт) и не больше.
С добавлением двухфакторной авторизации и всего, что она за собой влечет, новый процесс стал намного сложнее, чем был раньше. Вместо простой формы ввода почты и пароля, которая либо позволят успешно войти, либо покажет ошибку, появляются намного больше шагов. Есть ли у аккаунта настроенная двухфакторная авторизация? Какой метод авторизации она использует? Различные шаги включающие отправку временного кода на устройство или использование сохраненного защитного кода. Мы должны убедиться, что все это проходит легко, когда бы вы ни захотели получить доступ к вашему аккаунту
Placeholder и label
Независимо от типа ввода, placeholder должен быть использован как хитрая подсказка. С точки зрения дизайна, они выглядят классно. Тем не менее, все должно сочетаться с доступностью и автозаполнением. Если вы используете стандартный тег HTML placeholder, подсказка исчезает как только поле ввода заполнено, вы можете не знать, что на самом деле нужно было ввести в это поле. Вдвойне плохо, если поле ввода заполняется браузером автоматически, тогда вы никогда не увидите placeholder.Наша предыдущая страница авторизации обходила эту проблему определяя автозаполнение и показывая в этом случае label. Однако, если вы просто заполните поле вручную, надписи не появятся. Мы обнаружили, что людям нравится проверять формы перед отправкой, это означает, что label должен быть виден все время, когда поле заполнено.
Мы считаем, что придумали довольно изящное решение: использовали отдельный элемент label и перемещаем его за пределы поля ввода:
Конечно, на мобильных устройствах нам не хватает места, чтобы переместить label влево, поэтому мы перемещаем его вверх:
Однако, делая всю эту работу мы натолкнулись на некоторые веселые проблемы...
Безопасность может доставлять неудобства
Когда мы в первый раз написали код управления label/placeholder, он был очень простым: каждый раз, когда поле ввода изменялось, смотрели на его значение. Если оно пустое, label помещается внутрь поля ввода, как placeholder. Если нет, оно сдвигается наружу. Мы делаем ту же проверку несколько раз непосредственно после загрузки страницы, чтобы определить автозаполнение.Тем не менее, тут есть проблема. У Chrome есть особенность безопасности (называется PasswordAutofillAgent::PasswordValueGatekeeper), поле пароля может быть заполнено автоматически, но на самом деле в нем нет значения до тех пор, пока пользователь как-нибудь не взаимодействовал со страницей. Даже если зрительно оно кажется заполненным (это имеет смысл, если вы не хотите, чтоб JavaScript на странице автоматически получал автозаполненный пароль и куда-нибудь его публиковал). В результате чего наши красивые надписи делали это:
Обойти это можно проверив, соответствуют ли поля ввода селлектору :-webkit-autofill, а также проверив значение в поле для ввода. Это некрасивый, но единственный способ заставить все работать.
Более плавный, чем когда-либо
Перенаправление браузера на новую страницу при каждом новом шаге авторизации используется с 2008. Возможно, это наиболее совместимый и надежный способ, но основная часть GoSquared его не поддерживает.Новый процесс авторизации GoSquared более плавный, переход от одного состояния к другом очень сглажен. И конечно, мы хотим быть уверенными, что все наши анимации супер-плавные, и этот раз не стал исключением.
Проверка и подсказка
Как подчеркивается в нашем посте про дизайн страницы авторизации, слишком легко допустить случайную ошибку в email адресе. Приводит в ярость, когда не получаешь ни какого предупреждения до того, как нажмешь кнопку отправить и увидишь ошибку авторизации.Mailcheck отлично находит и исправляет типичные ошибки email-адресов. Мы уже использовали его в нашем предыдущем процессе авторизации, так что имело смысл перенести его в новый.
Отправка нажатием кнопки
Когда мы в прошлый раз переделывали дизайн формы входа, мы делали все супер-супер-простым: два поля ввода и ничего больше. В то время было довольно нормально отправлять форму нажатием на "Return" после того, как закончишь вводить данные. Однако, после того, как мы увидели как на самом деле люди пользуются формой, мы поняли, что многие предпочитают нажать на кнопку. Мы использовали эту обратную связь: новый экран авторизации имеет надлежащую кнопку (легко и приятно нажать на сенсорных устройствах).Медленно! Почему так медленно?
Когда вы нажимаете на кнопку "Войти", проходит добрые несколько секунд перед тем как вы действительно будете авторизованы. Есть хорошая причина, почему все работает медленно, даже после того как мы потратили много времени и усилий на оптимизацию - это безопасность. Способ, которым мы проверяем пароль при логине требует большого количества машинного времени (мы не будем вдаваться в подробности, но идея сделать очень трудным брут-форса вашего аккаунта).Так как процесс медленный, мы не хотим оставлять вас наблюдать за страницей авторизации, на которой ничего не происходит, потому что выглядит это как будто форма не работает. Нам необходимо сделать какую-нибудь визуальную обратную связь, чтоб показать "Вы отправили ту форму, все хорошо, просто подождите немного".
Мы рассмотрели использование прогресс-бара, чтоб показать как долго вы ожидаете. Однако, основанные на времени, прогресс-бары могут весьма раздражать, ведь показывают не корректную информацию, поэтому мы решили использовать анимацию.
