У вас всегда получалось войти на сайт с помощью такой формы с первого раза? Не было никаких проблем? Лично для меня эти формы — боль и страдания. Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо? Под катом альтернативный подход к интерфейсу входа на сайт, частично облегчающий жизнь.
Но сначала все же поясню, чем именно так плох классический подход. Тут есть два основных фейл-сценария.
Фейл-сценарий №1. Случайная повторная регистрация
- Захожу на сайт в полной уверенности, что я тут еще не регистрировался
- Ищу кнопку «Регистрация», расстраиваюсь из-за времени, которое предстоит потратить на заполнение полей и отдельно расстраиваюсь из-за капчи:
- Тем не менее, мужественно заполняю все поля. После чего сервис радостно сообщает мне, что я же тут уже регистрировался и что капчу ввел некорректно. В общем, память ни к черту, да еще и невнимательный:
- В итоге — полный провал, 3 минуты жизни безвозвратно потеряны, возвращаюсь на форму входа, повторно(!) ввожу эл. почту и пытаюсь вспомнить пароль.
Фейл-сценарий №2. Повторный вход через другую соц. сеть
Почему-то среди руководителей интернет-проектов бытует мнение, что чем больше иконок соц. сетей будет в авторизации, тем более успешен и популярен будет продукт. Никогда не замечал такой корреляции на своей практике, но это другой вопрос. Вернемся к сценарию провала.
- Я уже пользовался этим сервисом когда-то, и теперь снова хочу войти в свой аккаунт. Кажется, я входил тогда через соц. сеть. Но через какую? У меня их 6 или больше, а тут такой богатый выбор:
- Вроде Вконтакте. Попробую.
- Зашел. Вот черт, мой аккаунт пустой, хотя я точно помню, как заполнял его:
Я-то понимаю, что просто зашел не через ту соц. сеть: придется перепробовать еще 3-4 варианта, потратить еще пять минут, но в итоге я найду свою учетку. А вот среднестатистический пользователь решит, что сервис попросту удалил его данные и скорее всего покинет этот злодейский сайт навсегда.
Попытаюсь сформулировать частичное решение, несколько более дружественный подход, который вроде как подает надежды.
Более дружественный подход
В первую очередь стоит забыть ужасные слова «авторизация» и «регистрация», потому что слова эти относятся к миру разработчика, а не пользователя. Если вы хотите «юзабилити», то для начала нужно хотя бы говорить на языке вашего посетителя. Есть «Вход» на сайт. И все, никаких технических терминов. Остальное — проблемы системы, а не человека.
Дальше самое интересное. Просим ввести эл. почту. Это ровно одно поле, не больше:
Жмем «Ввод» или иконку продолжения. Если в базе находится пользователь с такой эл. почтой, просим ввести пароль:
Если эл. почта не находится, значит пользователь скорее всего новый и вместо этого экрана показываем поле «Пожалуйста, придумайте пароль»:
Да, пользователь мог опечататься в почте. Но вероятность допустимо мала: есть визуальный контроль ввода плюс скорее всего этот человек часто вводит свою эл. почту повсюду и научился делать это без ошибок. В случае опечатки в пароле, его можно будет восстановить через ту же почту. Есть ссылки на восстановление пароля и ввод другого адреса.
Боль, связанная с повторным входом не через ту соц. сеть (фейл-сценарий №2) частично лечится довольно топорно: нужно выбрать одну, самую популярную соц. сеть, в которой сидит целевая аудитория сервиса, и оставить вход только через эту соц. сеть. Я сказал «частично», потому что еще остается два способа входа (эл. почта и соц. сеть): пользователь все еще может ошибиться. Но согласитесь, вспомнить способ первичного входа при выборе из двух вариантов гораздо проще, чем при выборе из 8 вариантов (эл. почта и 7 соц. сетей).
Стоит ли говорить, что наилучший вариант — интерфейс с одним способом входа (только эл. почта или только одна соц. сеть). К сожалению, маркетологи, как правило, не готовы на это пойти. Поэтому предложенный дружественный вариант интерфейса дополняется кнопкой входа через соц. сеть:
Заключение
Допускаю, что у предложенного подхода могут быть некоторые существенные недостатки, из-за которых он до сих пор не стал популярен. В комментариях буду рад услышать вашу критику и обсудить эти самые недостатки. Если у кого-то есть возможность быстро протестировать этот паттерн на большой аудитории в режиме A/B-теста, с интересом поучаствую и помогу с дизайном: хотелось бы получить количественное обоснование пригодности подхода на разных аудиториях.
Комментарии (60)
merk
05.10.2015 14:55+5Если бы я вводил пароль каждый раз руками, это было бы удобно. Но если использовать 1Password или другое хранилище паролей, то нужно будет совершить больше действий, чтобы войти — это минус.
А проблема разных учетных записей из под разных соц.сетей вполне решается в коде, за счет сравнивания e-mail'ов при регистрации. Тут главное, чтобы выбранные соц.сети отдавали эти e-mail'ы.
Envek
05.10.2015 15:54-3Вот в этом и проблема — вконтакт и твиттер, например, почту не отдают принципиально (пи****ы!). Те, кто отдают, отдают тоже не сразу — нужно не забыть запросить соответствующее разрешение. Ну и самое весёлое: mail.ru и google будут отдавать именно свою почту. Т.е. у пользователя НЕ БУДЕТ одинаковой почты во всех соцсетях.
xxxTy3uKxxx
05.10.2015 16:57+1ВК отдает мыло при скоупе email
Envek
06.10.2015 18:08Возможно, что это появилось недавно — год или два назад я такого не находил. Рад, что они исправляются :-)
nazarpc
05.10.2015 14:59+13Если в базе находится пользователь с такой эл. почтой, просим ввести пароль
Утечка информации, без перехода ко второму шагу позволяет узнать, зарегистрировался ли определённый человек уже или нет.
По нормальному в современных браузерах есть менеджеры паролей, так что вход сокращается до одного единстевеного клика.
Klimentij
05.10.2015 17:14+1Такая «утечка» итак есть почти на всех сервисах, взять тот же хабр: yadi.sk/i/x8aYR6YrjXYbo
Именно с этой точки зрения предложенный подход не лучше и не хуже.
kingpin
05.10.2015 17:39А не проще ли традиционную связку имя-пароль разместить и не заморачиваться? Если пользователь ввёл имя и/или пароль неправильно, код проверки подлинности просто сообщит что-то наподобие.
Вы ввели неправильное имя пользователя или пароль.
И никакие данные не утекут. Единственное, может быть использована форма регистрации для проверки, зарегистрирована ли уже почта, но как-то можно снизить эту угрозу, думаю, с помощью капчи, например.
Invision70
05.10.2015 14:59+18Меня пошаговые формы больше отпугивают.
1. Какой объем информации мне предстоит заполнить?
2. По привычке пользуюсь табом (не все под него будут затачивать шаги)
На вашем примере
3. Как вернуться на предыдущий шаг?
4. Подсказка вне формы. Большая часть клиентов не будет обращать внимание
5. >>> Если в базе находится пользователь с такой эл. почтой, просим ввести пароль
Название «Пожалуйста, вспомните пароль» никак не навеивает на мысль, что у меня уже есть аккаунт на этом сайте
6. Где сравнение с кол-вом отказов классического подхода и пошаговой упрощенной формой? (А/Б тесты?)
amureki
05.10.2015 15:37У меня еще была идея — когда в форме логина юзер вводит email, которого нет в системе, не говорить ему об этом, а тут же регистрировать его и сообщать об этом.
xaizek
05.10.2015 15:41+2И когда пользователь попробует 5 разных адресов в попытках вспомнить, какой именно он использовал на этом сайте, в качестве бонуса будут 4 новых аккаунта, а то и все 5.
amureki
05.10.2015 16:44+1Если немного подумать, а не воспринимать мою идею как указание к действию, то эти моменты можно решить. Речь об интересных подходах к вариантам решения проблем с формами авторизации.
Dm4k
05.10.2015 16:41+1Надеюсь в этой схеме, при регистрации, пароль не отправляется plain-текстом на почту…
ncix
05.10.2015 18:07Можно вообще упразднить пароль, отправлять каждый раз одноразовую ссылку для входа в письме.
Dm4k
05.10.2015 18:56спорное решение… вместо того что бы заполнить два поля и нажать кнопку войти, пользователю нужно будет еще открывать другое приложение (сайт/вкладку), искать там письмо (возможно в спаме, а если используется сборщик писем с ящика на которое должна прийти ссылка то дождаться письма), открыть авторизационную ссылку и только потом начать пользоваться сервисом.
Вообще считаю подтверждающие письма не должны блокировать доступ к использованию сайта до подтверждения (сайты которые не дают пользователю войти после регистрации пока тот не перейдет по подтверждающей ссылке из письма), а вы предлагаете на каждый вход — такую ссылку.ncix
05.10.2015 22:50Если это сайт из тех которые посещаются изредка, и пользователь чаще восстанавливает пароль чем вводит его правильно — почему бы и нет? У меня такой сценарий случается время от времени.
aalebedev
05.10.2015 15:48Зачем при авторизации через соц. сети вводить email?
Если есть email, то можно авторизовать через ВК или через ФБ.
UksusoFF
05.10.2015 17:52Чтобы слать вам «Интересное предложение». Плюс это техническое ограничение некоторых CMS где из коробки не может быть пользователя без email.
aalebedev
05.10.2015 18:21+3Я не про это.
Допустим делаем так:
1) получаем email из соц сети, которую выбрал пользователь.
2) находим в БД пользователя с этим email
3) предоставляем доступ.
Т.е. если пользователь сначала зашел через ВК, то потом может зайти в тот же аккаунт через ФБ или ОК.UksusoFF
05.10.2015 19:28Логично, но может быть кейс когда одна соцсеть регнута на мыло, а другая на сотовый.
grossws
06.10.2015 18:10Обычно так и делают. Тогда выбор из нескольких соцсетей не мешает жить.
В нормальном варианте ещё добавляется возможность слияния аккаунтов (например, если email'ы различаются): пользователь явно логинится через login+passwd и аккаунт соцсети. Или подключает дополнительные аккаунты в настройках.
evnuh
05.10.2015 15:57+1Много много разных менеджеров паролей существует. Но у всех у них большая беда с двухшаговыми формами авторизации, т.к. эвристика определения формы входа часто строится на предположении что «есть два инпута, на одном текст открытый, на другом пароль закрытый».
david_mz
05.10.2015 22:56Мне кажется, это можно решить, добавив в форму на первом шаге скрытое (через CSS) поле «пароль». Менеджер его заполнит, а на втором шаге это поле просто покажется, уже заполненное.
istui
05.10.2015 15:59+1как мне кажется, отсутствие кнопки «регистрация» будет ставить уже привыкших к ее наличию пользователей в тупик. Попробуйте сами А/В тестированием :)
monah_tuk
05.10.2015 16:02+7Одному мне кажется, что это неприятно, когда просто по вводу электропочты можно идентифицировать — пользуется ли пользователь данным ресурсом или нет? Ещё, кажется, вполне возможно паразитировать на подобных сайтах, натравляя робота и перебирая почту — выдалась форма с приглашением вспомнить пароль — почту в копилку спамера.
Klimentij
05.10.2015 17:11Этим моментом предложенный подход не отличается от существующих. Взять тот же хабр: yadi.sk/i/x8aYR6YrjXYbo
kentastik
05.10.2015 16:15Если вы дергаете из соц.сети почту, то после ввода разве нельзя понять через что зареган юзер и вывести ему только одну кнопку? А в обычном режиме не показывать соц.сеть вовсе? Ну это так, размышления…
monah_tuk
05.10.2015 16:26Что бы дёрнуть данные соцсети, нужно сначала, спросить разрешения на это у сети, для чего пользователь будет туда редиректнут, где он должен авторизироваться (если куки протухли), после чего вас вернут назад, где вы уже окажетесь авторизированным или не авторизированным. Дальше к следующей… и так далее, пока не достигните нужной сети. Да за такое…
kentastik
05.10.2015 16:27Зачем спрашивать каждый раз соц.сеть, если можно себе 1 раз в базу положить через какую соц.сеть регнулся юзер?
monah_tuk
05.10.2015 16:30Я для случая первоначальной авторизации. А для последующей и кнопку выводить не нужно — уже всё знаем. Точнее нужно только тогда, когда привязано более одной сети (если сервис такое предоставляет).
kentastik
05.10.2015 16:33На странице с регистрацией ничего перебирать не нужно. Обычная форма для ввода пароля или выбора соц.сети.
BupycNet
05.10.2015 16:50-1Наша форма авторизации выглядит так
Мы даже провели небольшое исследование — аккаунт Google есть практически у всех, путаницы не возникает. Никакой регистрации нет.Invision70
05.10.2015 17:01+7У меня нет.
BupycNet
05.10.2015 17:19+1Обычно если у человека нет Google аккаунта это значит
1. Он не сидит на ютубе.
2. Он не использует гугл почту.
3. У него нет Android устройства
4. Скорее всего у него нет хрома
5. Скорее всего у него вообще нет аккаунтов соц сетей исходя их пунтов выше.
6. Исходя их всего что выше — он вообще врядли будет пользоваться нашим сервисом. Хотя есть случаи, когда для людей наш сервис идет как переломный момент в создании гугл аккаунта.
Darthman
05.10.2015 17:42+2У меня нет андроид-устройства, я не пользуюсь хромом и почти никакими соцсетями (где я есть, связки с гуглом нету). Но вот гуглопочта у меня есть, хотя при всём, сказанном выше, она могла бы быть на маил.ру или яндексе, например. Тогда такая авторизация была бы для меня фейлом.
Обычно для меня фейл, когда надо авторизоваться через фейсбук.BupycNet
05.10.2015 18:09Вот видите. У вас нет соц сетей, но есть гугл почта. Если бы её у вас не было, что лучше сделать универсальный гугл аккаунт или не универсальный аккаунт на очередном сайте?
Скажем так, этим мы ещё больше поддерживаем идеологию универсальности нашего сервиса.Darthman
05.10.2015 19:25Лично у меня есть, а вот у друзей многих нету. И также нету андроид-аппаратов. Мне, как владельцу люмии, вообще можно было бы пользоваться почтой от M$.
BupycNet
05.10.2015 19:39-1Это как пример выше. Вроде не знаешь что есть гугл акк, а если копнуть глубже, оказывается человек заходит на ютуб или у него есть запасная почта на Gmail.
ad1Dima
07.10.2015 10:53как человек, заходящий на ютуб, у меня g+ с ютубом не ассоциируется. Да и вроде нет g+ акка, только ютубовский. И почта там не гмыло.
Aingis
05.10.2015 17:07+1А у меня есть, но не дам. Для чего-либо связанным с кодингом логичнее входить через Гитхаб. А так обычно через помоечный Фейсбук.
Klimentij
05.10.2015 17:18+1А вы не сравнивали в режиме А/Б-теста с вариантом, когда кроме этой кнопки есть еще и регистрация через почту? Или у вас на этой форме итак 0% отказов?
BupycNet
05.10.2015 17:21У нас конверсия была 80% по ссылке подписки на канал. Т.е. люди, которым целенаправлено нужны уведомления просто жмут вход.
У нас вообще сложно понять, что значит отказ. У нас пользователи заходят. подписываются на канал и их может вообще больше не быть на сайте. Они скачают клиент и будут получать уведомления. На сайте они находятся меньше 1 минуты.
У нас все завязано на гугл акк, аватарки, ссылки на гугл+, гугл авторизация в приложении. Мы не можем просто так сделать АБ тестирование с регистрацией на почту, но даже если бы и сделали 99% там была бы конверсия в разы меньше. Многие, как выше описал, просто делают себе Google аккаунт. Та же самая регистрация на почту, только не нашими силами, а гугла.
ad1Dima
05.10.2015 19:08Для вашей ЦА этот вариант более чем подходит. Любой другой бы сервис потерял бы меня как пользователя. Чаще всего я логинюсь либо через твиттер, где нет никакой ценной инфы и я сразу увижу, если приложение/сайт начало шалить. Либо через ФБ, где есть настройки публикаций такие, что приложение постит сообщения видные только мне (на самом деле даже я их не увижу).
vshemarov
05.10.2015 16:57Чтобы перейти на форму с одним полем, надо сначала принципиально отказаться от капчи, приняв на вооружение иной способ борьбы с ботами
Klimentij
05.10.2015 17:21Я один не понимаю, зачем вообще бороться с ботами? И как тогда выживают все сервисы, в которых при регистрации нет капчи?
vshemarov
05.10.2015 19:19зачем вообще бороться с ботами?
На одном из моих проектов я как-то было нашествие ботов — до 100 попыток регистрации в час. И в такой ситуации вопрос «зачем?» как-то не возникает.
И как тогда выживают все сервисы..?
Видимо, как я писал выше, принимают на вооружение иные способы. Хотя, разумеется, это актуально только для тех сервисов, которые представляют какой-то интерес для спамеров
Darthman
05.10.2015 17:44+1Я вот считаю что капчу надо спрашивать 1 раз. Если уж так хочется. А не в общей форме. А то пароль сбрасывается, капча сбрасывается. Сиди и вбивай раз за разом. При регистрации особенно. Такой ник занят, сбрасывают оба поля с паролем и капчу (хорошо если емейл остается), потом пароль слишком короткий или не содержит чего-то…
vshemarov
05.10.2015 19:20Я вот считаю что капчу надо спрашивать 1 раз
А вот это да, разумное предложение
Fuco
05.10.2015 19:37+2Вход в Гугл-аккаунт именно так и происходит: сначала вводишь почту, а потом вводишь пароль.
Если почта не зарегистрирована, то пишет, что не удалось распознать адрес.
Так что Климентий на верном пути (по идеологии Гугл).
121212121
06.10.2015 01:16Гугл своим новшестваом сильно усложняет. Использовать автонабор в keepass затруднительно стало. И уж совсем никуда не годится то, что закрепить вкладку с почтой теперь нельзя.
vintage
05.10.2015 20:04+6Меня больше угнетает, что кнопка «забыли пароль?» такая маленькая, неприметная и фиг знает где находится… это же мой основной способ входа, а не эти ваши социалочки :-)
Реально, куда проще тыкнуть на неё, получить на почту ссылку и войти через неё, чем вспоминать какой же пароль я вводил на этом сайте при регистрации. Поэтому на последнем проекте мы сделали без паролей — есть только две графы — почта и телефон, плюс россыпь социальных кнопок, для ленивых. При этом по мере ввода все данные сохраняются в базу в уже созданный профиль пользователя, так что ничего не теряется. На почту приходит ссылка. На телефон — код и ссылка.
dbagaev
06.10.2015 13:15Одна соц-сеть — это очень мало. У меня, например, нет ВК, а ФБ я не люблю использовать для авторизации.
Интересный момент: а почему бы в случае создания нового аккаунта пользователя из социалки не дать ему возможность, поняв ошибку, дать возможность пересвязать акаунт с другой социалкой и слить два профиля? На многих сервисах можно привязываться ко многим сетям, это будет логичный шаг еще дальше.
lightman
06.10.2015 14:22+1Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо?
Нет. Вижу форму авторизации -> ALT-TAB в открытый Keepass, CTRL+F -> название сайта -> ENTER. Если регистировался, то без проблем залогинюсь с первого раза, ибо можно удобно скопипастить логин-пароль хоть вместе с автоподстановкой, хоть по отдельности.
Самое главное моё пожелание к формам, чтобы форма регистрации была такой же как авторизации — 1 поле email'а и 1 поле пароля.
gluck59
06.10.2015 17:16+2Думаю, что сегодня большинство пользуется софтинками типа 1Password (и подобными под виндами) и поэтому категорически нельзя разделять поля логина и пароля на два шага. Это будет настоящее злостное анти-юзабилити :)
Klimentij
08.10.2015 10:10Я сам не разработчик, но есть ощущение, что это можно обойти. Например, на первом экране можно сделать скрытое от глаза человека поле ввода пароля, но так чтобы 1Password это поле видела. Тогда следующий клик уже приведет к успешной авторизации, можно даже не показывать следующий экран с видимым полем ввода пароля.
gluck59
08.10.2015 10:42В этом случае живой человек не сможет пройти первый экран — система будет требовать заполнения обоих полей.
trikadin
Чисто моё имхо: всё-таки, одна соцсеть — мало. Пример: у меня есть контакт, и через него я предпочитаю логиниться на большинстве сайтов. Но англоязычные сайты его предоставляют крайне редко (на этот случай у меня есть аккаунт в FB, авторизация через который есть везде). Но я бы хотел, чтобы у меня был выбор, потому что мне удобно, когда все аккаунты привязаны к основной соц. сети, а не к акку FB, которым я пользуюсь крайне редко.
Так что сценарий с соцсетью я предлагаю к доработке: во-первых, можно прямо спросить пользователя «Уже авторизовались здесь, но не помните, через какую соцсеть? Попробуйте несколько, а мы скажем вам, на которую есть учётка». А те соцсети, что он перепробует, потом привязать к успешно найденной оригинальной — и не забыть сказать об этом пользователю, мол, в следующий раз авторизуйтесь через любую.
А вот с логином и паролем схема мне нравится.