Люк Врублевский, признанный специалист в области проектирования интерфейсов для Web, рассмотрел основные преимущества, недостатки и перспективы развития форм авторизации на различных сайтах.
Для многих из нас форма авторизация на веб-сайтах является частью повседневной жизни. Фактически, мы, наверно, авторизуемся настолько часто, что даже не задумываемся над тем, как это делается… до тех пор, пока что-то не пойдет не так: мы забываем наш пароль, наше имя пользователя, адрес электронной почты, по которому мы регистрировались, как мы регистрировались, и регистрировались ли мы вообще.
Эти ситуации не только портят настроение, но и губительно сказываются на работе. Каким образом? Анализ пользовательского интерфейса крупного интернет-магазина показал, что 45% всех клиентов несколько раз регистрировались в системе, 160 000 человек ежедневно запрашивали свой пароль, а 75% из них не завершили начатые покупки после запроса своего пароля.
В довершение всего, неавторизованные посетители не видят персонализированную версию сайта и рекомендации, что уменьшает коэффициенты пересчета и вовлеченности. Таким образом, форма авторизации на сайте – это важное дело, настолько важное, что некоторые веб-сайты начали изучать новые проектные решения для создания форм авторизации на сайтах.
Добавление аватара на форму авторизации
Форма авторизации на сайте Gowalla (внизу) выглядит довольно стандартно: введите ваше имя пользователя или адрес электронной почты и пароль, а затем войдите. Также есть кнопка помощи для тех, кто забыл свой пароль или впервые на этом сайте. Другими словами, учтены все наиболее распространенные элементы пользовательского интерфейса авторизации.
Форма авторизации на сайте Gowalla.
Но разработчики Gowalla уделили время добавлению на форму авторизации сайта нескольких компонентов, помогающим людям войти с большей уверенностью, если их первая попытка не сработала. Если вы попытаетесь войти в систему по имени пользователя (или адресу электронной почты) и паролю, которые не совпадают, сайт выдает не только ошибку, но и аватар и имя пользователя учетной записи, в которую вы пытаетесь войти:
Ошибка авторизации на Gowalla.
Добавление аватара в форму авторизации обеспечивает мгновенное визуальное подтверждение: «Да, это моя учетная запись, и я, возможно, забыли свой пароль», или «Нет, это не моя учетная запись, так что я, должно быть, вошел по неправильному имени пользователя или адресу электронной почты». В любом случае, Gowalla дает возможность решить проблему: «Это не я» или «Я забыл свой пароль».
Справочный сайт Quora использует подобный подход, но он не ждет вашей ошибки при входе, прежде чем предложить вам решение. Форма авторизации на Quora сразу сообщает, связана ли с вводимым адресом электронной учетная запись. Это дает вам возможность сразу же создать новую учетную запись:
Quora сразу же оповещает вас, если введенному вами электронному адресу не соответствует ни одна из существующих учетных записей.
Если адрес, который вы ввели, соответствует учетной запись на Quora, то справа от формы авторизации появятся аватар и имя пользователя. Такое подтверждение похоже на Gowalla, но оно появляется сразу, а не после того как вы попытались войти.
Если введенный вами электронный адрес соответствует учетной записи на Quora, вы немедленно получите визуальное подтверждение.
Форма авторизации без пароля
Форма авторизации на Quora также включает в себя возможность «Авторизации без пароля в этом браузере». Если этот параметр включен по умолчанию, то он делает только то, что заявлено: он позволит вам не вводить пароль при повторном входе на Quora. Все, что вам нужно сделать, чтобы зайти на сайт, — нажать на аватар или имя на экране авторизации.
Страница мгновенной авторизации на Quora.
Чтобы вернуться к стандартной странице авторизации, просто нажмите «х» или «Войти под другим именем», после чего вы сможете авторизоваться на «тяжелым» способом: введя свой адрес электронной почты и пароль.
Но, несмотря на то, что мгновенная авторизация на Quora очень удобна, она не особо поможет вам на других сайтах. Для этого, многие веб-сайты прибегают к решению вопроса авторизации с помощью сторонних сайтов.
Такие системы «единой авторизации», как Facebook, Twitter, OpenID и прочие, пытались решить вопрос авторизации, путем сокращения количестве параметров для авторизации, которые люди должны помнить для всех используемых веб-сайтов. С помощью этих сервисов одна учетная запись поможет вам войти на самые разные веб-сайты.
Пример системы «единой авторизации».
Авторизация в этом случае происходит быстрее. Когда кто-то объединяет свою учетную запись на Facebook или Twitter в веб-сайтом, им просто нужно нажать кнопку «Авторизоваться через Facebook (или Twitter)», чтобы войти. Конечно, в первую очередь, вы должны быть авторизованы в Facebook или Twitter, чтобы эта система работала в один клик. Но, учитывая, что 50% из 750 миллионов активных пользователей Facebook входят на Facebook каждый день, велики шансы, что вопрос будет решен именно в один клик.
Вы можете наблюдать данную технологию авторизации в действии на сайте Gowalla (скриншот ниже). Пользователь Gowalla, привязавший свою учетную запись на Facebook, должен лишь нажать на кнопку «Авторизоваться с помощью Facebook», чтобы войти на сайт, конечно, при условии, что он уже авторизован на Facebook. Если он не авторизован на Facebook, вначале он должен сделать это (как правило, в новом диалоговом окне или вкладке браузера). После этого, он будет немедленно перенаправлен и авторизован на Gowalla.
Gowalla предоставляет опцию авторизации с помощью учетной записи Facebook.
Проблемы форм авторизации
Но с этими новыми преимуществами приходят и новые проблемы – как правило, в виде слишком большого количества вариантов. Сталкиваясь с множеством форм авторизации на веб-сайте, люди обычно действуют следующим образом:
- Помнят сервис, который использовали при регистрации (или который связали с учетной записью), и мгновенно авторизуются. Это лучший из сценариев.
- Предполагают, что систему можно войти с помощью любого стороннего сервиса (на котором они зарегистрированы), независимо от того, имеют ли они учетную запись на сайте, на который они пытаются войти. Полет мысли у этих людей происходит примерно следующим образом: «Он говорит, что я могу авторизоваться через Facebook. У меня есть аккаунт на Facebook. Я могу авторизоваться».
- Забывают, какой сервис они использовали при регистрации, и использовали ли они его вообще, из-за чего сомневаются или не могут авторизоваться через форму.
Что еще хуже, если кто-то выбирает неправильную систему, вместо авторизации в сервисе, они в конечном итоге могут еще раз зарегистрироваться, создав вторую учетную запись. Даже если веб-сайт может изо всех сил работать над сопоставлением учетных записей с разных сервисов, не существует абсолютно точного способа (о котором мне известно) для определения того, точно ли учетные записи в Twitter и Facebook принадлежат одному и тому же человеку.
Таким образом, хотя использование сторонних сервисов в формах авторизации и решает некоторые проблемы, в то же время, оно создает несколько новых. В попытке решить некоторые из этих новых проблем авторизации, мы поэкспериментировали с новым экраном авторизации на Bagcheck.
Самая последняя из наших форм авторизации (ниже) – это попытка избежать путаницы и предотвратить вышеописанные ошибки. Однако нам пришлось пожертвовать авторизацией в один клик. При таком оформлении люди должны ввести свое имя пользователя или адрес электронной почты, чтобы войти. Мы используем мгновенные результаты поиска, соответствующие вводимому имени существующего на веб-сайте пользователя, поэтому кому-то нужно будет ввести только первые несколько букв своего имени, чтобы быстро найти свою учетную запись. Как правило, это отнимает гораздо меньше времени, чем ввод полного адреса электронной почты. Но учитывая то, что множество людей могут иметь одинаковое имя, мы также предоставляем возможность авторизации по адресу электронной почты.
После того, как пользователь выбирает свое имя или вводит адрес электронной почты на форме авторизации, для него открываются возможности авторизации. Заранее опции авторизации не показываются.
Текущая форма авторизации Bagcheck не показывает опции авторизации, прежде чем вы выберете свое имя или введете свой адрес электронной почты.
Правда, при таком оформлении формы авторизации пользователи больше не могут зайти в один клик, потому что кнопки авторизации не видны по умолчанию. Но это может быть стоящим компромиссом по следующим причинам:
- Мы оставляем пользователя в системе, пока он целенаправленно не выйдет из нее. Хочется надеяться, что благодаря этому пользователям придется реже проходить процедуру авторизации. Помните: чем реже пользователи должны использовать форму авторизации, тем меньше будет возникать проблем с авторизацией!
- Прилагаемые для входа усилия увеличиваются незначительно: просто начните набирать имя и выберите результат поиска, или введите ваш полный адрес электронной почты, а затем нажмите кнопку входа. Это, конечно, не вход в один клик, но и не такая уж большая работа.
- Пытаясь войти в систему с помощью стороннего сервиса, который вы еще не использовали для авторизации на Bagcheck больше не возможно, потому что кнопки входа в систему не показываются до тех пор, как вы выберете свое имя. Это сокращает количество учётных записей и путаницу с тем, какую учетную запись вы использовали для регистрации (особенно на разных браузерах и компьютерах, где не используются cookie).
А вот для мобильной версии этот вариант может не подойти. Вход на веб-сайт на мобильном устройстве, путем набора имени намного сложнее, чем простое нажатие кнопки. Таким образом, в мобильной версии Bagcheck в центре мы сохранили кнопку авторизации через сторонние сервисы, что позволяет людям войти с помощью одного нажатия. Это просто еще один пример того, как ограничения и возможности различных устройств могут повлиять на варианты оформления формы авторизации на сайте.
Мобильная версия Bagcheck сохранила возможность авторизации в один клик.
С момента запуска этой формы авторизации на Bagcheck мы получили много отзывов и идей по усовершенствованию взаимодействия. Многие люди предложили использовать cookie для установки опции авторизации по умолчанию для посетителей, повторно заходящих на сайт. И хотя это может помочь людям, которые возвращаются на сайт, используя тот же браузер, мы получили гораздо больше вопросов от людей, использующих другой браузер или компьютер. В этих случаях, cookie браузера не помогут.
Другой распространенный вопрос – не снижает ли возможность просмотра списка имен или электронных адресов пользователей Bagcheck уровень безопасности. Хотя такое оформление в некоторой степени снижает безопасность учетной записи Bagcheck (по сравнению с нашей предыдущей формой авторизации), оно не уступает формам авторизации многих веб-сайтов, которые позволяют войти с помощью такого общедоступного имени пользователя, как Twitter.
И учитывая, что все профили на Bagcheck являются открытыми, пользователей можно найти с помощью Google и на самом Bagcheck. Несмотря на это, мы заметили несколько повышенную степень обеспокоенности из-за этой возможности поиска на странице входа. Так что, если вы рассматриваете применение такого оформления, убедитесь, что профили являются общедоступными, и учитывайте, что люди могут отнестись к этому несколько эмоционально.
Использование email в форме авторизации
В то время как авторизация с помощью одного лишь имени может стать чем-то новым для некоторых людей, вход в систему с помощью адреса электронной почты – обычное дело для большинства пользователей. Использование технологий, которое объединяют множество идей, изложенных в этой статье, Инструмент идентификации в Google (Google Identity Toolkit) и «Выбор аккаунта» позволяют людям авторизоваться на любом сайте, просто используя свой адрес электронной почты:
Инструмент идентификации в Google позволяет людям авторизоваться, используя несколько вариантов подтверждения электронного адреса.
Если в одном и том же браузере было использовано несколько учетных записей, каждая из них вносится в список в качестве варианта авторизации, делая выбор учетной записи проще. Если вы хотите испробовать такую технологию авторизации, вы можете присоединиться к системе на сайте Google или внедрить ее в своей форме авторизации с помощью Инструментов идентификации Google.
Выбор из нескольких учетных записей на экспериментальной странице авторизации Google.
Мобильные формы авторизации
Рассмотренные нами примеры Bagcheck и Google отражают попытку переосмысления формы авторизации в целом. Но не все инновации в сфере авторизации должны быть настолько всеобъемлющими. Даже небольшие изменения могут оказать большое влияние. Например, я уже упоминал, что точный ввод текста на мобильных устройствах может оказаться более сложной задачей, чем на компьютерной клавиатуре. В сочетании с неясным полем пароля, авторизация на веб-сайте с мобильного устройства становится испытанием.
Мобильная версия Facebook решает эту проблему довольно простым, но полезным способом. Если вы ввели неправильный пароль в форму авторизации, сайт сменит поле ввода пароля на читаемый текст, так что вы можете увидеть, что именно вы ввели. Facebook также предлагает альтернативный способ авторизации с использованием адреса электронной почты или номер телефона (скриншот ниже). И хотя это небольшое улучшение, оно может иметь большое значение для мобильных устройств.
Facebook делает многое, чтобы помочь вам авторизоваться с помощью мобильного устройства.
Как показывают эти примеры, даже самые обычные действия в Интернете (например, авторизация) могут быть улучшены, благодаря новым идеям и конструктивным усовершенствованиям. Далеко не каждая из рассмотренных мною идей станет частью всех форм авторизации, с которыми мы сталкиваемся в Интернете – велика вероятность, что не посчастливиться ни одной из них. Но не попробовав, не узнаешь.
Таким образом, если у вас есть какие-то новые идеи для форм авторизации или любых других действий в Интернете, которые мы принимаем как само собой разумеющееся, воплощайте их в жизнь, и пусть все учатся на вашем опыте!
