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

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



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

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

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


    1. Захожу на сайт в полной уверенности, что я тут еще не регистрировался
    2. Ищу кнопку «Регистрация», расстраиваюсь из-за времени, которое предстоит потратить на заполнение полей и отдельно расстраиваюсь из-за капчи:



    3. Тем не менее, мужественно заполняю все поля. После чего сервис радостно сообщает мне, что я же тут уже регистрировался и что капчу ввел некорректно. В общем, память ни к черту, да еще и невнимательный:


    4. В итоге — полный провал, 3 минуты жизни безвозвратно потеряны, возвращаюсь на форму входа, повторно(!) ввожу эл. почту и пытаюсь вспомнить пароль.

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


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

    1. Я уже пользовался этим сервисом когда-то, и теперь снова хочу войти в свой аккаунт. Кажется, я входил тогда через соц. сеть. Но через какую? У меня их 6 или больше, а тут такой богатый выбор:



    2. Вроде Вконтакте. Попробую.
    3. Зашел. Вот черт, мой аккаунт пустой, хотя я точно помню, как заполнял его:



      Я-то понимаю, что просто зашел не через ту соц. сеть: придется перепробовать еще 3-4 варианта, потратить еще пять минут, но в итоге я найду свою учетку. А вот среднестатистический пользователь решит, что сервис попросту удалил его данные и скорее всего покинет этот злодейский сайт навсегда.

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

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


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

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



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



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



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

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

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



    Заключение


    Допускаю, что у предложенного подхода могут быть некоторые существенные недостатки, из-за которых он до сих пор не стал популярен. В комментариях буду рад услышать вашу критику и обсудить эти самые недостатки. Если у кого-то есть возможность быстро протестировать этот паттерн на большой аудитории в режиме A/B-теста, с интересом поучаствую и помогу с дизайном: хотелось бы получить количественное обоснование пригодности подхода на разных аудиториях.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 60

      +7
      Чисто моё имхо: всё-таки, одна соцсеть — мало. Пример: у меня есть контакт, и через него я предпочитаю логиниться на большинстве сайтов. Но англоязычные сайты его предоставляют крайне редко (на этот случай у меня есть аккаунт в FB, авторизация через который есть везде). Но я бы хотел, чтобы у меня был выбор, потому что мне удобно, когда все аккаунты привязаны к основной соц. сети, а не к акку FB, которым я пользуюсь крайне редко.

      Так что сценарий с соцсетью я предлагаю к доработке: во-первых, можно прямо спросить пользователя «Уже авторизовались здесь, но не помните, через какую соцсеть? Попробуйте несколько, а мы скажем вам, на которую есть учётка». А те соцсети, что он перепробует, потом привязать к успешно найденной оригинальной — и не забыть сказать об этом пользователю, мол, в следующий раз авторизуйтесь через любую.

      А вот с логином и паролем схема мне нравится.
        +5
        Если бы я вводил пароль каждый раз руками, это было бы удобно. Но если использовать 1Password или другое хранилище паролей, то нужно будет совершить больше действий, чтобы войти — это минус.

        А проблема разных учетных записей из под разных соц.сетей вполне решается в коде, за счет сравнивания e-mail'ов при регистрации. Тут главное, чтобы выбранные соц.сети отдавали эти e-mail'ы.
          –3
          Вот в этом и проблема — вконтакт и твиттер, например, почту не отдают принципиально (пи****ы!). Те, кто отдают, отдают тоже не сразу — нужно не забыть запросить соответствующее разрешение. Ну и самое весёлое: mail.ru и google будут отдавать именно свою почту. Т.е. у пользователя НЕ БУДЕТ одинаковой почты во всех соцсетях.
            +1
            ВК отдает мыло при скоупе email
              0
              Возможно, что это появилось недавно — год или два назад я такого не находил. Рад, что они исправляются :-)
          +13
          Если в базе находится пользователь с такой эл. почтой, просим ввести пароль

          Утечка информации, без перехода ко второму шагу позволяет узнать, зарегистрировался ли определённый человек уже или нет.
          По нормальному в современных браузерах есть менеджеры паролей, так что вход сокращается до одного единстевеного клика.
            +1
            Такая «утечка» итак есть почти на всех сервисах, взять тот же хабр: yadi.sk/i/x8aYR6YrjXYbo
            Именно с этой точки зрения предложенный подход не лучше и не хуже.
              0
              А не проще ли традиционную связку имя-пароль разместить и не заморачиваться? Если пользователь ввёл имя и/или пароль неправильно, код проверки подлинности просто сообщит что-то наподобие.
              Вы ввели неправильное имя пользователя или пароль.

              И никакие данные не утекут. Единственное, может быть использована форма регистрации для проверки, зарегистрирована ли уже почта, но как-то можно снизить эту угрозу, думаю, с помощью капчи, например.
            +18
            Меня пошаговые формы больше отпугивают.
            1. Какой объем информации мне предстоит заполнить?
            2. По привычке пользуюсь табом (не все под него будут затачивать шаги)
            На вашем примере
            3. Как вернуться на предыдущий шаг?
            4. Подсказка вне формы. Большая часть клиентов не будет обращать внимание
            5. >>> Если в базе находится пользователь с такой эл. почтой, просим ввести пароль
            Название «Пожалуйста, вспомните пароль» никак не навеивает на мысль, что у меня уже есть аккаунт на этом сайте
            6. Где сравнение с кол-вом отказов классического подхода и пошаговой упрощенной формой? (А/Б тесты?)

              0
              У меня еще была идея — когда в форме логина юзер вводит email, которого нет в системе, не говорить ему об этом, а тут же регистрировать его и сообщать об этом.
                +2
                И когда пользователь попробует 5 разных адресов в попытках вспомнить, какой именно он использовал на этом сайте, в качестве бонуса будут 4 новых аккаунта, а то и все 5.
                  +1
                  Если немного подумать, а не воспринимать мою идею как указание к действию, то эти моменты можно решить. Речь об интересных подходах к вариантам решения проблем с формами авторизации.
                  +1
                  Надеюсь в этой схеме, при регистрации, пароль не отправляется plain-текстом на почту…
                    0
                    Можно вообще упразднить пароль, отправлять каждый раз одноразовую ссылку для входа в письме.
                      0
                      спорное решение… вместо того что бы заполнить два поля и нажать кнопку войти, пользователю нужно будет еще открывать другое приложение (сайт/вкладку), искать там письмо (возможно в спаме, а если используется сборщик писем с ящика на которое должна прийти ссылка то дождаться письма), открыть авторизационную ссылку и только потом начать пользоваться сервисом.
                      Вообще считаю подтверждающие письма не должны блокировать доступ к использованию сайта до подтверждения (сайты которые не дают пользователю войти после регистрации пока тот не перейдет по подтверждающей ссылке из письма), а вы предлагаете на каждый вход — такую ссылку.
                        0
                        Если это сайт из тех которые посещаются изредка, и пользователь чаще восстанавливает пароль чем вводит его правильно — почему бы и нет? У меня такой сценарий случается время от времени.
                  0
                  Зачем при авторизации через соц. сети вводить email?
                  Если есть email, то можно авторизовать через ВК или через ФБ.
                    0
                    Чтобы слать вам «Интересное предложение». Плюс это техническое ограничение некоторых CMS где из коробки не может быть пользователя без email.
                      +3
                      Я не про это.

                      Допустим делаем так:
                      1) получаем email из соц сети, которую выбрал пользователь.
                      2) находим в БД пользователя с этим email
                      3) предоставляем доступ.
                      Т.е. если пользователь сначала зашел через ВК, то потом может зайти в тот же аккаунт через ФБ или ОК.
                        0
                        Логично, но может быть кейс когда одна соцсеть регнута на мыло, а другая на сотовый.
                          0
                          Обычно так и делают. Тогда выбор из нескольких соцсетей не мешает жить.

                          В нормальном варианте ещё добавляется возможность слияния аккаунтов (например, если email'ы различаются): пользователь явно логинится через login+passwd и аккаунт соцсети. Или подключает дополнительные аккаунты в настройках.
                      +1
                      Много много разных менеджеров паролей существует. Но у всех у них большая беда с двухшаговыми формами авторизации, т.к. эвристика определения формы входа часто строится на предположении что «есть два инпута, на одном текст открытый, на другом пароль закрытый».
                        0
                        Мне кажется, это можно решить, добавив в форму на первом шаге скрытое (через CSS) поле «пароль». Менеджер его заполнит, а на втором шаге это поле просто покажется, уже заполненное.
                        +1
                        как мне кажется, отсутствие кнопки «регистрация» будет ставить уже привыкших к ее наличию пользователей в тупик. Попробуйте сами А/В тестированием :)
                          +7
                          Одному мне кажется, что это неприятно, когда просто по вводу электропочты можно идентифицировать — пользуется ли пользователь данным ресурсом или нет? Ещё, кажется, вполне возможно паразитировать на подобных сайтах, натравляя робота и перебирая почту — выдалась форма с приглашением вспомнить пароль — почту в копилку спамера.
                            0
                            Этим моментом предложенный подход не отличается от существующих. Взять тот же хабр: yadi.sk/i/x8aYR6YrjXYbo
                              +5
                              Не стоит ссылаться на Хабр, как на непреложную истину.
                            0
                            Если вы дергаете из соц.сети почту, то после ввода разве нельзя понять через что зареган юзер и вывести ему только одну кнопку? А в обычном режиме не показывать соц.сеть вовсе? Ну это так, размышления…
                              0
                              Что бы дёрнуть данные соцсети, нужно сначала, спросить разрешения на это у сети, для чего пользователь будет туда редиректнут, где он должен авторизироваться (если куки протухли), после чего вас вернут назад, где вы уже окажетесь авторизированным или не авторизированным. Дальше к следующей… и так далее, пока не достигните нужной сети. Да за такое…
                                0
                                Зачем спрашивать каждый раз соц.сеть, если можно себе 1 раз в базу положить через какую соц.сеть регнулся юзер?
                                  0
                                  Я для случая первоначальной авторизации. А для последующей и кнопку выводить не нужно — уже всё знаем. Точнее нужно только тогда, когда привязано более одной сети (если сервис такое предоставляет).
                                    0
                                    На странице с регистрацией ничего перебирать не нужно. Обычная форма для ввода пароля или выбора соц.сети.
                              –1
                              Наша форма авторизации выглядит так

                              Мы даже провели небольшое исследование — аккаунт Google есть практически у всех, путаницы не возникает. Никакой регистрации нет.
                                +7
                                У меня нет.
                                  +1
                                  Обычно если у человека нет Google аккаунта это значит
                                  1. Он не сидит на ютубе.
                                  2. Он не использует гугл почту.
                                  3. У него нет Android устройства
                                  4. Скорее всего у него нет хрома
                                  5. Скорее всего у него вообще нет аккаунтов соц сетей исходя их пунтов выше.
                                  6. Исходя их всего что выше — он вообще врядли будет пользоваться нашим сервисом. Хотя есть случаи, когда для людей наш сервис идет как переломный момент в создании гугл аккаунта.
                                    +2
                                    Проверил, сам не ожидал, но оказывается есть, извиняюсь )
                                      +2
                                      У меня нет андроид-устройства, я не пользуюсь хромом и почти никакими соцсетями (где я есть, связки с гуглом нету). Но вот гуглопочта у меня есть, хотя при всём, сказанном выше, она могла бы быть на маил.ру или яндексе, например. Тогда такая авторизация была бы для меня фейлом.
                                      Обычно для меня фейл, когда надо авторизоваться через фейсбук.
                                        0
                                        Вот видите. У вас нет соц сетей, но есть гугл почта. Если бы её у вас не было, что лучше сделать универсальный гугл аккаунт или не универсальный аккаунт на очередном сайте?
                                        Скажем так, этим мы ещё больше поддерживаем идеологию универсальности нашего сервиса.
                                          0
                                          Лично у меня есть, а вот у друзей многих нету. И также нету андроид-аппаратов. Мне, как владельцу люмии, вообще можно было бы пользоваться почтой от M$.
                                            –1
                                            Это как пример выше. Вроде не знаешь что есть гугл акк, а если копнуть глубже, оказывается человек заходит на ютуб или у него есть запасная почта на Gmail.
                                              0
                                              как человек, заходящий на ютуб, у меня g+ с ютубом не ассоциируется. Да и вроде нет g+ акка, только ютубовский. И почта там не гмыло.
                                  • UFO just landed and posted this here
                                      +1
                                      А вы не сравнивали в режиме А/Б-теста с вариантом, когда кроме этой кнопки есть еще и регистрация через почту? Или у вас на этой форме итак 0% отказов?
                                        0
                                        У нас конверсия была 80% по ссылке подписки на канал. Т.е. люди, которым целенаправлено нужны уведомления просто жмут вход.
                                        У нас вообще сложно понять, что значит отказ. У нас пользователи заходят. подписываются на канал и их может вообще больше не быть на сайте. Они скачают клиент и будут получать уведомления. На сайте они находятся меньше 1 минуты.

                                        У нас все завязано на гугл акк, аватарки, ссылки на гугл+, гугл авторизация в приложении. Мы не можем просто так сделать АБ тестирование с регистрацией на почту, но даже если бы и сделали 99% там была бы конверсия в разы меньше. Многие, как выше описал, просто делают себе Google аккаунт. Та же самая регистрация на почту, только не нашими силами, а гугла.
                                        0
                                        Для вашей ЦА этот вариант более чем подходит. Любой другой бы сервис потерял бы меня как пользователя. Чаще всего я логинюсь либо через твиттер, где нет никакой ценной инфы и я сразу увижу, если приложение/сайт начало шалить. Либо через ФБ, где есть настройки публикаций такие, что приложение постит сообщения видные только мне (на самом деле даже я их не увижу).
                                        0
                                        Чтобы перейти на форму с одним полем, надо сначала принципиально отказаться от капчи, приняв на вооружение иной способ борьбы с ботами
                                          0
                                          Я один не понимаю, зачем вообще бороться с ботами? И как тогда выживают все сервисы, в которых при регистрации нет капчи?
                                            0
                                            зачем вообще бороться с ботами?

                                            На одном из моих проектов я как-то было нашествие ботов — до 100 попыток регистрации в час. И в такой ситуации вопрос «зачем?» как-то не возникает.

                                            И как тогда выживают все сервисы..?

                                            Видимо, как я писал выше, принимают на вооружение иные способы. Хотя, разумеется, это актуально только для тех сервисов, которые представляют какой-то интерес для спамеров
                                            +1
                                            Я вот считаю что капчу надо спрашивать 1 раз. Если уж так хочется. А не в общей форме. А то пароль сбрасывается, капча сбрасывается. Сиди и вбивай раз за разом. При регистрации особенно. Такой ник занят, сбрасывают оба поля с паролем и капчу (хорошо если емейл остается), потом пароль слишком короткий или не содержит чего-то…
                                              0
                                              Я вот считаю что капчу надо спрашивать 1 раз

                                              А вот это да, разумное предложение
                                            +2
                                            Вход в Гугл-аккаунт именно так и происходит: сначала вводишь почту, а потом вводишь пароль.
                                            Если почта не зарегистрирована, то пишет, что не удалось распознать адрес.
                                            Так что Климентий на верном пути (по идеологии Гугл).

                                            image
                                              0
                                              Гугл своим новшестваом сильно усложняет. Использовать автонабор в keepass затруднительно стало. И уж совсем никуда не годится то, что закрепить вкладку с почтой теперь нельзя.
                                                0
                                                почему нельзя?
                                                  0
                                                  При разлогинивании какую то рекламную страницу гугла покапзщывает. А чтобьы залогиниться уже нужно новую вкладку открывать, обратно не вернуться. Немало раздражает такая навязчивость.
                                              +6
                                              Меня больше угнетает, что кнопка «забыли пароль?» такая маленькая, неприметная и фиг знает где находится… это же мой основной способ входа, а не эти ваши социалочки :-)

                                              Реально, куда проще тыкнуть на неё, получить на почту ссылку и войти через неё, чем вспоминать какой же пароль я вводил на этом сайте при регистрации. Поэтому на последнем проекте мы сделали без паролей — есть только две графы — почта и телефон, плюс россыпь социальных кнопок, для ленивых. При этом по мере ввода все данные сохраняются в базу в уже созданный профиль пользователя, так что ничего не теряется. На почту приходит ссылка. На телефон — код и ссылка.
                                                0
                                                Одна соц-сеть — это очень мало. У меня, например, нет ВК, а ФБ я не люблю использовать для авторизации.

                                                Интересный момент: а почему бы в случае создания нового аккаунта пользователя из социалки не дать ему возможность, поняв ошибку, дать возможность пересвязать акаунт с другой социалкой и слить два профиля? На многих сервисах можно привязываться ко многим сетям, это будет логичный шаг еще дальше.
                                                  +1
                                                  Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо?
                                                  Нет. Вижу форму авторизации -> ALT-TAB в открытый Keepass, CTRL+F -> название сайта -> ENTER. Если регистировался, то без проблем залогинюсь с первого раза, ибо можно удобно скопипастить логин-пароль хоть вместе с автоподстановкой, хоть по отдельности.

                                                  Самое главное моё пожелание к формам, чтобы форма регистрации была такой же как авторизации — 1 поле email'а и 1 поле пароля.
                                                    +2
                                                    Думаю, что сегодня большинство пользуется софтинками типа 1Password (и подобными под виндами) и поэтому категорически нельзя разделять поля логина и пароля на два шага. Это будет настоящее злостное анти-юзабилити :)
                                                      0
                                                      Я сам не разработчик, но есть ощущение, что это можно обойти. Например, на первом экране можно сделать скрытое от глаза человека поле ввода пароля, но так чтобы 1Password это поле видела. Тогда следующий клик уже приведет к успешной авторизации, можно даже не показывать следующий экран с видимым полем ввода пароля.
                                                        0
                                                        В этом случае живой человек не сможет пройти первый экран — система будет требовать заполнения обоих полей.

                                                    Only users with full accounts can post comments. Log in, please.