Юзабилити форм авторизации

Помните, как обычно выглядят формы для входа на сайт какого-нибудь магазина или сервиса? Вот типичный пример:

2015-10-02 23-54-03 Авторизация — АВТО.РУ

У вас всегда получалось войти на сайт с помощью такой формы с первого раза? Не было никаких проблем? Лично для меня эти формы — боль и страдания. Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо? Под катом альтернативный подход к интерфейсу входа на сайт, частично облегчающий жизнь.

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

Фейл-сценарий №1. Случайная повторная регистрация

  1. Захожу на сайт в полной уверенности, что я тут еще не регистрировался
  2. Ищу кнопку «Регистрация», расстраиваюсь из-за времени, которое предстоит потратить на заполнение полей и отдельно расстраиваюсь из-за капчи:
    2015-10-03 00-19-44 Регистрация
  3. Тем не менее, мужественно заполняю все поля. После чего сервис радостно сообщает мне, что я же тут уже регистрировался и что капчу ввел некорректно. В общем, память ни к черту, да еще и невнимательный:
    2015-10-03 00-23-01 Регистрация
  4. В итоге — полный провал, 3 минуты жизни безвозвратно потеряны, возвращаюсь на форму входа, повторно(!) ввожу эл. почту и пытаюсь вспомнить пароль.

Фейл-сценарий №2. Повторный вход через другую соц. сеть

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

  1. Я уже пользовался этим сервисом когда-то, и теперь снова хочу войти в свой аккаунт. Кажется, я входил тогда через соц. сеть. Но через какую? У меня их 6 или больше, а тут такой богатый выбор:
    2015-10-02 23-54-03 Авторизация — АВТО.РУ
  2. Вроде Вконтакте. Попробую.
  3. Зашел. Вот черт, мой аккаунт пустой, хотя я точно помню, как заполнял его:
    2015-10-03 00-44-52 Профиль пользователя
    Я-то понимаю, что просто зашел не через ту соц. сеть: придется перепробовать еще 3-4 варианта, потратить еще пять минут, но в итоге я найду свою учетку. А вот среднестатистический пользователь решит, что сервис попросту удалил его данные и скорее всего покинет этот злодейский сайт навсегда.

По-моему, все это достаточно паршиво. Как думаете, сколько человеко-лет или человеко-веков потратили все люди на планете на борьбу с этими дурацкими проблемами?

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

Более дружественный подход

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

Дальше самое интересное. Просим ввести эл. почту. Это ровно одно поле, не больше:

Planner

 

Жмем «Ввод» или иконку продолжения. Если в базе находится пользователь с такой эл. почтой, просим ввести пароль:

Planner

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

Planner

 

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

Боль, связанная с повторным входом не через ту соц. сеть (фейл-сценарий №2) частично лечится довольно топорно: нужно выбрать одну, самую популярную соц. сеть, в которой сидит целевая аудитория сервиса, и оставить вход только через эту соц. сеть. Я сказал «частично», потому что еще остается два способа входа (эл. почта и соц. сеть): пользователь все еще может ошибиться. Но согласитесь, вспомнить способ первичного входа при выборе из двух вариантов гораздо проще, чем при выборе из 8 вариантов (эл. почта и 7 соц. сетей).

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

2015-10-04 12-37-08 Skybuy UI Design Preview Mode - InVision

 

Заключение

Допускаю, что у предложенного подхода могут быть некоторые существенные недостатки, из-за которых он до сих пор не стал популярен. В комментариях буду рад услышать вашу критику и обсудить эти самые недостатки. Если у кого-то есть возможность быстро протестировать этот паттерн на большой аудитории в режиме A/B-теста, с интересом поучаствую и помогу с дизайном: хотелось бы получить количественное обоснование пригодности подхода на разных аудиториях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *