Советы и примеры в дизайне форм логина и регистрации.
Казалось бы, что может быть проще формы регистрации и, уж тем более, входа на сайт? Пара полей и кнопка. Но в нюансах этой простоты кроется успешность выполненной работы и количество пользователей вашего сервиса. Как сделать формы проще, процесс приятнее и тем самым снизить количество уходов? Расскажу какими правилами мы руководствовались при разработке нашего сообщества предпринимателей BOSS.ZONE.
Из чего состоит механизм регистрации и входа пользователя в систему?
- Форма входа
- Форма регистрации
- Форма напоминания или сброса пароля
- Сообщение после напоминания или сброса пароля
- Регистрация через соцсети
Это необходимый минимум. Его надо как-то скомпоновать и получить единый и понятный механизм вхождения пользователя.
Способы реализации
Конечно, можно комбинировать разные способы. Например, табы в попапах или расширенные табы с подробностями как на отдельных страницах. Так же есть специфические регистрации, которые требуют особого подхода, например, интернет-банки.
Как сделать регистрацию более эффективной
Человечность. Будьте людьми, не заставляйте делать то, что можете сами. Какую-то информацию можно определить автоматически, например, пол или город. Если этого сделать нельзя, то уже после регистрации можно уточнить недостающую информацию. Чем меньше полей, тем лучше.
Потраченное время. Покажите в секундах насколько регистрация быстрая, если это действительно так. Никто не хочет тратить свое драгоценное время. Курсор должен автоматически вставать в первое поле формы.
Подписи. Писать названия полей лучше над ними, а не рядом. Так взгляд человека скользит сверху вниз, а не «перевернутой ёлочкой».
Если Вы не подписываете названия полей рядом с ними, а используете плэйсхолдер, убирайте его только после того, как человек начнет что-то вводить. Иначе он может забыть, что тут нужно было писать. Особенно если переключаешься между полями клавишей «Tab». Еще плэйсхолдер можно не убирать, а уменьшать и сдвигать вверх.
Корректность. Сообщения об ошибках нужно писать понятным для простого человека языком, а не оперируя техническими терминами. Они должны появляться рядом с каждым полем по отдельности, а не кучей где-то в одном месте. Кроме текста нужно подсвечивать сами поля. И по возможности писать подсказки. Идеально было бы проверять правильность введенных данных сразу, без перезагрузки страницы. Например, это очень удобно, когда придумываешь себе ник. Помечайте правильно заполненные поля, например, галочками. Это радует в процессе заполнения всей формы.
Безопасность. Должно быть согласие пользователя с политикой конфиденциальности и ссылка на пользовательское соглашение. Для эффекта безопасности вводимых данных расскажите о том, что Вы не передаете их третьим лицам.
Пароль. Спрашивайте пароль максимум один раз. Если человек опечатался и не смог войти, он восстановит пароль. Или вообще не спрашивайте пароль, а генерируйте его и высылайте на почту. Если Вы все-таки его спрашиваете, то дайте возможность видеть его при вводе. Нечасто у нас кто-то стоит за спиной.
Соцсети. Давайте возможность входить через соцсети. Сразу. Это быстро и удобно. Можно вообще оставить для входа только соцсети. Этот вариант лишает возможности совершить кучу ошибок, но он для молодой аудитории. Можно «отгрести» если ваша целевая аудитория старше 40.
Чекбоксы. Чаще всего мы обычно пользуемся своим устройством, а не чужим. Поэтому, чтобы не заставлять пользоваться постоянно логиниться, нужна галочка «Чужой компьютер». И если человек её нажимает, то при закрытии Вашего сайта его автоматически разлогинивает. Формулировка может быть разная, например, «Оставаться в системе» с активной галочкой. Мне лично более логичным кажется первый вариант. Не подписывайте на рассылки по умолчанию.
Визуальные образы. Фотографии людей притягивают взгляд и “оживляют” страницу. Но тут надо быть осторожным. Не используйте стоковые картинки — они отталкивают и создают эффект очередной ненужной регистрации. Используйте фотографии своих клиентов или своих сотрудников (это зависит от специфики портала). Не нанимайте фотомоделей. Люди должны видеть себе подобных.
Тестирование. Открывайте в разных браузерах, устройствах. Эмуляторы не всегда работают так, как реальное устройство. Пользуйтесь сами и давайте другим людям пробовать. Количество багов уменьшится.
Как это сделали мы
Людей, которые сидят в интернете, но при этом не пользуются социальными сетями единицы. Поэтому, мы решили сделать упор на вход с помощью соцсетей и оставить возможность классической регистрации через e-mail.
Первое окно — это выбор способа регистрации: Вконтакте, Facebook, Google+, E-mail
Регистрация с помощью соцсетей ничего от дизайнера не требует, если не нужна дополнительная информация. Например, в нашем случае нужно было дополнительно запросить никнейм пользователя. Он выступал в качестве поддомена его страницы. Так выглядит окно классической регистрации через e-mail (дополнительно продублируем соцкнопки, на случай если человек, все таки, выберет способ побыстрее).
Окно логина — это почта (или никнейм) и пароль. Ставим галочку «чужой компьютер» и ссылку на напоминание пароля. В случае нескольких неудачных попыток входа подряд появляется капча.
И, в заключении, окно напоминания пароля. Здесь ничего нового, главное выдержать общую стилистику с остальными формами.
Результаты
Процент уходов
Первое окно минус 19,27% уходов. Стало 23,92%
E-mail регистрация минус 30,09% уходов. Стало 16,10%
Авторизация минус 25,26% уходов. Стало 7,81%
Количество регистраций увеличилось на 68%.
И это не предел. Еще предстоит реализовать моментальную проверку на правильность заполнения полей и свободность никнейма.
Комментарии (41)
JTG
10.06.2016 10:44+3«Можно вообще оставить для входа только соцсети» – это ужасно (представитель молодой аудитории).
aimh
10.06.2016 10:46Я стараюсь везде где можно регаться через соцсети. Это быстро и безопасно, потому что в настройках самой соцсети всегда можно отключать все сайты на которые заходил.
VioletGiraffe
10.06.2016 12:34+1Вход через соцсети — классно, но *только* через них — действительно ужасно. Ни на одном из ресурсов, приведенных в пример на фото в статье, я не зареган. Если что — мне 27, и я НЕ параноик. Просто не нужно было пока что.
Darthman
10.06.2016 13:35+2А если я не использую соцсети? Мне убиться теперь, но не пользоваться вашим сервисом?
bustEXZ
10.06.2016 14:27Не внимательно прочитали статью. Это как за основу взята регистрация через соц-сети, но так же есть вариант *Через email*. Вы ничего не теряете :)
Darthman
10.06.2016 14:48Я, как раз-таки, внимательно читал. Я о самой идее сделать вход ТОЛЬКО через соцсеть.
jMas
10.06.2016 15:59Если ЦА в основном 90% крутится в соцсетях либо выходит на продукт через соц-сеть, то регистрация только через cоц-сеть оправдана. Но согласен, fallback с регистрацией через e-mail должен быть всегда.
Darthman
10.06.2016 17:16Вот хороший пример есть. Зарегистрировался я на banki.ru через соцсеть. Через гмейл аккаунт. А он (банки.ру) очень хочет права на ! управление списком контактов. Вот зачем ему это? А зайти под емейлом после регистрации через соцсеть уже никак нельзя. Мне вот не нравится что сайт решил менять мои контакты и ковыряться в моих данных. А фейковый мусорный аккаунт еще заводить под это уже маразм и геморрой.
Fen1kz
10.06.2016 12:50Заведите мусорный акк на фейсбуке только для регистраций и будет вам счастье.
Darthman
10.06.2016 13:36Завести мусорный акк ради заведения мусорного акка. Чем это упрощает что-то? Если для регистрации на сайте мне нужно будет завести себе еще и мусорный акк фейсбука… пффф, я сразу закрою сайт.
Fen1kz
10.06.2016 13:45+1Это работает так:
1) Заводите мусорный акк на фейсбуке и поддерживаете там логин
2) Регистрируетесь на всех мусорных сайтах под этим акком в несколько кликов. То есть вместо десятка мусорных акков у вас будет один, централизация-с. (Люди иногда даже пароли хранят в программе с одним мастер паролем)
3)…
4) PROFIT
aimh
10.06.2016 14:59Это уже вопрос доверия к ресурсу и необходимости в нем. Если доверяете, регистрируетесь, если нет, то нет. А мусорные ящики, это путаница и геморрой.
lifecom
10.06.2016 11:28… думаю, на вашем сайте не табы, а две отдельные страницы с дизайном «a-la табы». Зачем тогда они нужны, если грузится новая страница?
Darthman
10.06.2016 13:39+2А зачем имя и псевдоним сразу делать обязательными?
Знаете ИМХО какая регистрация самая лучшая из виденных мной? Одно поле. Емейл. Всё-равно все сайты требуют подтверждения. Заходишь на емейл, кликаешь по ссылке и ты уже залогинен в системе и она предлагает сразу установить пароль. Чем больше надо вводить о себе всякой информации тем меньше шанс, что я буду регистрироваться.aimh
10.06.2016 13:59Имя и никнейм это наша собственная хотелка.
Во-первых, у нас соцсеть, а не сервис, и имя имеет значение. Чтобы нормально отображались комменты и можно было присвоить человеку аватарку в зависимости от пола (у нас 18 стандартных аватарок разного пола и одна обезличенная)
Во-вторых, мы хотели подчеркнуть ответственность и серьезность намерения, присваивая человеку поддомен. Чтобы он сразу понимал что это его персональный бизнес-сайт.
Darthman
10.06.2016 13:48+2Захожу на сайт. Кнопки «регистрация» нет. Туплю, ездию по сайту вверх-вниз ищу где же регистрация. Окей, предполагаю, что за кнопкой «войти». Жму на «войти». Вижу тонну кнопок «войти через соцсеть», регистрация, но а если у меня уже есть аккаунт, то надо нажать снизу на надпись «Уже зарегистрированы? Войти». Что за бред? Я уже нажал на «войти» на предыдущей странице, а получил страницу регистрации вместо этого.
Зачем звёздочки в каждом поле? Где расшифровка что такое звёздочка? Вы сетуете чтобы не скрывать пароль при наборе, но он у вас скрыт при наборе.
Почему псевдоним «Должнен содержать только английские буквы, цифры или дефис»? Если у меня подчеркивание, амперсанд или знак доллара там? А может мой псевдоним «Пушкин»? Бесполезное, ничем не обоснованное ограничение. Искуственное.
Я понимаю что лучше любая проверка, чем никакая. Но почему система считает валидным емейл адрес вида «1@1.1», но при этом шлёт к черту меня с емейлом вида «ivan@москва.рф»?
Вот по моей практике такая регистрация уже не проходит самого фигового тестировщика. Неуд.aimh
10.06.2016 14:07Мы изначально делали упор на соцсети и классическую регистрацию оставляли на второй план. То есть если человек впервые заходит на первую страницу, то вероятнее всего он зарегается через соцсеть и в следующий раз так и будет делать. И кнопка войти ему никогда не понадобится.
Пароль я советовал иметь возможность посмотреть, а не держать его на виду постоянно. Для этого в поле пароля с права мы сделали иконку глаза.
Никнейм у нас выступает в качестве поддомена, поэтому такие ограничения.
За подсказку валидности эмаила, спасибо. Учтем
Akuma
10.06.2016 14:14По поводу пароля. Поставьте в браузер LastPass. Он добавляет там же справа свои иконки и получается мешанина.
Попробуйте отслеживать этот его финт ушами и сдвигать свою иконку, будет лучше, я думаю.aimh
10.06.2016 14:27Разного рода надстройки всегда ведут себя непредсказуемо. И их владельцы должны рассчитывать, что они могут что-то ломать или искажать. Например, недавно из-за Adblockа у меня что-то не работало и я долго не мог понять в чем проблема. Но спасибо за подсказку, возможно, мы что-то придумаем.
bustEXZ
10.06.2016 14:34никто не гарантирует что у вас не стоят сторонние расширения в браузере, а если у меня их будет 10? И все будут работать с полями ввода, и будут добавлять свои кнопки. ИМХО это ерунда какая-то
aimh
10.06.2016 14:56Если у вас стоит 10 расширений и каждое будет как-то изменять поле ввода или добавлять что-то свое в него, то все формы всех сайтов будут выглядеть плохо. И с этим ничего не поделаешь, это уже ваша прерогатива.
bustEXZ
10.06.2016 15:05Я про это и говорю. Поэтому пытаться устранить дефекты сторонних расширений, это бред
shamyyl
10.06.2016 14:18Ограничение по вводу на псевдоним стоит потому, что потом он используется как поддомен: alex.boss.zone
Darthman
10.06.2016 14:50Так значит это не псевдоним, а поддомен. Надо чётко разграничить понятия. Если бы там было написано что мне надо выбрать поддомен для своего аккаунта, это не вызывало бы вопросов. А псевдоним это нечто иное, всё же.
shamyyl
10.06.2016 14:54в строке ввода псевдонима стоит ".boss.zone" справа
Darthman
10.06.2016 15:31В разрезе того, что меня просят ввести псевдоним это не очевидно, уж простите. Путаница какая-то. Мало ли почему они там босс.зоне написали, я откуда знаю. У них и звездочки во всех полях стоят без объяснений. Телепаты в отпуске.
aimh
10.06.2016 15:58Косяк небольшой, согласен. Надо будет переименовать поле в «Адрес страницы» или что то вроде того.
Extremum
10.06.2016 17:49Какую-то информацию можно определить автоматически, например, пол или город.
Город понятно, а вот насчет пола можно поподробнее?aimh
11.06.2016 11:18По имени можно определять с достаточно высокой точностью
Extremum
11.06.2016 11:22Есть у меня один форум, каких только имен там не указывают, от «Нету» до «Даздраперма» и «Qwerty») Наверное аудиторию тоже нужно учитывать применяя такой подход.
chuvashin
11.06.2016 23:14Не могли бы вы рассказать примерный алгоритм определения пола по имени? Первая мысль была определять пол по окончанию (гласная, согласная буквы), но есть женские имена, которые заканчиваются на согласную.
uncurrent
11.06.2016 01:22Как относитесь к созданию пароля для учетной записи в форме где спрашиваем дополнительную информацию после нажатия регистрация, например, через фейсбук? Т.е. это дает нам возможность создать не просто аккаунт для логина по кнопке соцсеть, а полноценный аккаунт почта+пароль + возможность быстро залогиниться через соц сеть. В мобильном продукте, который сейчас разрабатываем, у нас максимум регистраций через веб, а логинов через мобильное приложение. Гипотеза: всвязи с тем, что не всегда на компьютере и мобильном устройстве логины или наличие логинов в соц сети совпадает, не плохо было бы дать возможность альтернативного доступа сразу («под шумок», в тот момент когда спрашиваем дополнительную информацию).
chuvashin
12.06.2016 10:32+1Курсор должен автоматически вставать в первое поле формы.
Полезное замечание, но на сайте в основных формах регистрации, входа и восстановления пароля нет автофокуса на первом поле.
comerc
Я бы еще добавил генерацию вариантов свободных никнеймов.
aimh
Да, спасибо. Отличное предложение
Akuma
Мне, как пользователю, кажется эта генерация нужна только на «одноразовых ресурсах».
Генерируемые ники настолько убоги (поскольку составляются из введеного значения и года, обычно), что реально их не используешь, а для того, чтобы зарегистрироваться и получить доступ к какому-нибудь закрытому разделу — самое то.
Ну либо делать нормальный генератор, а не comerc2016 comerc.2016 comerc-2016 comer.c come.rc
Mikhael1979
Краем уха слышал, что для WoT сделали нечто эпичное в этом плане. Погуглите. =)
rumkin
В docker используется интересная схема, которую можно взять за основу:
happy_perlman
lonely_lalande
Вначале прилагательное, затем имя известного ученого. В зависимости от контекста можно подобрать большое количество префиксов или постфиксов и добавлять их к имени.