Как мы увеличили процент регистраций на 68% с помощью дизайна форм



    Советы и примеры в дизайне форм логина и регистрации.
    Казалось бы, что может быть проще формы регистрации и, уж тем более, входа на сайт? Пара полей и кнопка. Но в нюансах этой простоты кроется успешность выполненной работы и количество пользователей вашего сервиса. Как сделать формы проще, процесс приятнее и тем самым снизить количество уходов? Расскажу какими правилами мы руководствовались при разработке нашего сообщества предпринимателей 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%.

    И это не предел. Еще предстоит реализовать моментальную проверку на правильность заполнения полей и свободность никнейма.
    Share post

    Similar posts

    Comments 41

      +1

      Я бы еще добавил генерацию вариантов свободных никнеймов.

        0
        Да, спасибо. Отличное предложение
          +3
          Мне, как пользователю, кажется эта генерация нужна только на «одноразовых ресурсах».
          Генерируемые ники настолько убоги (поскольку составляются из введеного значения и года, обычно), что реально их не используешь, а для того, чтобы зарегистрироваться и получить доступ к какому-нибудь закрытому разделу — самое то.

          Ну либо делать нормальный генератор, а не comerc2016 comerc.2016 comerc-2016 comer.c come.rc
            0
            Краем уха слышал, что для WoT сделали нечто эпичное в этом плане. Погуглите. =)
              0

              В docker используется интересная схема, которую можно взять за основу:
              happy_perlman
              lonely_lalande


              Вначале прилагательное, затем имя известного ученого. В зависимости от контекста можно подобрать большое количество префиксов или постфиксов и добавлять их к имени.

            +3
            «Можно вообще оставить для входа только соцсети» – это ужасно (представитель молодой аудитории).
              0
              Я стараюсь везде где можно регаться через соцсети. Это быстро и безопасно, потому что в настройках самой соцсети всегда можно отключать все сайты на которые заходил.
                +1
                Вход через соцсети — классно, но *только* через них — действительно ужасно. Ни на одном из ресурсов, приведенных в пример на фото в статье, я не зареган. Если что — мне 27, и я НЕ параноик. Просто не нужно было пока что.
                  +2
                  А если я не использую соцсети? Мне убиться теперь, но не пользоваться вашим сервисом?
                    0
                    Не внимательно прочитали статью. Это как за основу взята регистрация через соц-сети, но так же есть вариант *Через email*. Вы ничего не теряете :)
                      0
                      Я, как раз-таки, внимательно читал. Я о самой идее сделать вход ТОЛЬКО через соцсеть.
                        0
                        Если ЦА в основном 90% крутится в соцсетях либо выходит на продукт через соц-сеть, то регистрация только через cоц-сеть оправдана. Но согласен, fallback с регистрацией через e-mail должен быть всегда.
                          0
                          Вот хороший пример есть. Зарегистрировался я на banki.ru через соцсеть. Через гмейл аккаунт. А он (банки.ру) очень хочет права на ! управление списком контактов. Вот зачем ему это? А зайти под емейлом после регистрации через соцсеть уже никак нельзя. Мне вот не нравится что сайт решил менять мои контакты и ковыряться в моих данных. А фейковый мусорный аккаунт еще заводить под это уже маразм и геморрой.
                  0

                  Заведите мусорный акк на фейсбуке только для регистраций и будет вам счастье.

                    0
                    Завести мусорный акк ради заведения мусорного акка. Чем это упрощает что-то? Если для регистрации на сайте мне нужно будет завести себе еще и мусорный акк фейсбука… пффф, я сразу закрою сайт.
                      +1

                      Это работает так:
                      1) Заводите мусорный акк на фейсбуке и поддерживаете там логин
                      2) Регистрируетесь на всех мусорных сайтах под этим акком в несколько кликов. То есть вместо десятка мусорных акков у вас будет один, централизация-с. (Люди иногда даже пароли хранят в программе с одним мастер паролем)
                      3)…
                      4) PROFIT

                        0
                        Предлагаете еще под мусорный аккаунт завести мусорный мобильник?
                      0
                      Это уже вопрос доверия к ресурсу и необходимости в нем. Если доверяете, регистрируетесь, если нет, то нет. А мусорные ящики, это путаница и геморрой.
                    0
                    … думаю, на вашем сайте не табы, а две отдельные страницы с дизайном «a-la табы». Зачем тогда они нужны, если грузится новая страница?
                      0
                      вот что значит «открыли для себя user centered design»…
                        +2
                        А зачем имя и псевдоним сразу делать обязательными?

                        Знаете ИМХО какая регистрация самая лучшая из виденных мной? Одно поле. Емейл. Всё-равно все сайты требуют подтверждения. Заходишь на емейл, кликаешь по ссылке и ты уже залогинен в системе и она предлагает сразу установить пароль. Чем больше надо вводить о себе всякой информации тем меньше шанс, что я буду регистрироваться.
                          0
                          Имя и никнейм это наша собственная хотелка.
                          Во-первых, у нас соцсеть, а не сервис, и имя имеет значение. Чтобы нормально отображались комменты и можно было присвоить человеку аватарку в зависимости от пола (у нас 18 стандартных аватарок разного пола и одна обезличенная)
                          Во-вторых, мы хотели подчеркнуть ответственность и серьезность намерения, присваивая человеку поддомен. Чтобы он сразу понимал что это его персональный бизнес-сайт.
                          +2
                          Захожу на сайт. Кнопки «регистрация» нет. Туплю, ездию по сайту вверх-вниз ищу где же регистрация. Окей, предполагаю, что за кнопкой «войти». Жму на «войти». Вижу тонну кнопок «войти через соцсеть», регистрация, но а если у меня уже есть аккаунт, то надо нажать снизу на надпись «Уже зарегистрированы? Войти». Что за бред? Я уже нажал на «войти» на предыдущей странице, а получил страницу регистрации вместо этого.
                          Зачем звёздочки в каждом поле? Где расшифровка что такое звёздочка? Вы сетуете чтобы не скрывать пароль при наборе, но он у вас скрыт при наборе.
                          Почему псевдоним «Должнен содержать только английские буквы, цифры или дефис»? Если у меня подчеркивание, амперсанд или знак доллара там? А может мой псевдоним «Пушкин»? Бесполезное, ничем не обоснованное ограничение. Искуственное.
                          Я понимаю что лучше любая проверка, чем никакая. Но почему система считает валидным емейл адрес вида «1@1.1», но при этом шлёт к черту меня с емейлом вида «ivan@москва.рф»?

                          Вот по моей практике такая регистрация уже не проходит самого фигового тестировщика. Неуд.
                            0
                            Мы изначально делали упор на соцсети и классическую регистрацию оставляли на второй план. То есть если человек впервые заходит на первую страницу, то вероятнее всего он зарегается через соцсеть и в следующий раз так и будет делать. И кнопка войти ему никогда не понадобится.

                            Пароль я советовал иметь возможность посмотреть, а не держать его на виду постоянно. Для этого в поле пароля с права мы сделали иконку глаза.

                            Никнейм у нас выступает в качестве поддомена, поэтому такие ограничения.

                            За подсказку валидности эмаила, спасибо. Учтем
                              0
                              По поводу пароля. Поставьте в браузер LastPass. Он добавляет там же справа свои иконки и получается мешанина.
                              Попробуйте отслеживать этот его финт ушами и сдвигать свою иконку, будет лучше, я думаю.
                                0
                                Разного рода надстройки всегда ведут себя непредсказуемо. И их владельцы должны рассчитывать, что они могут что-то ломать или искажать. Например, недавно из-за Adblockа у меня что-то не работало и я долго не мог понять в чем проблема. Но спасибо за подсказку, возможно, мы что-то придумаем.
                                  0
                                  никто не гарантирует что у вас не стоят сторонние расширения в браузере, а если у меня их будет 10? И все будут работать с полями ввода, и будут добавлять свои кнопки. ИМХО это ерунда какая-то
                                    0
                                    Если у вас стоит 10 расширений и каждое будет как-то изменять поле ввода или добавлять что-то свое в него, то все формы всех сайтов будут выглядеть плохо. И с этим ничего не поделаешь, это уже ваша прерогатива.
                                      0
                                      Я про это и говорю. Поэтому пытаться устранить дефекты сторонних расширений, это бред
                                0
                                Ограничение по вводу на псевдоним стоит потому, что потом он используется как поддомен: alex.boss.zone
                                  0
                                  Так значит это не псевдоним, а поддомен. Надо чётко разграничить понятия. Если бы там было написано что мне надо выбрать поддомен для своего аккаунта, это не вызывало бы вопросов. А псевдоним это нечто иное, всё же.
                                    0
                                    в строке ввода псевдонима стоит ".boss.zone" справа
                                      0
                                      В разрезе того, что меня просят ввести псевдоним это не очевидно, уж простите. Путаница какая-то. Мало ли почему они там босс.зоне написали, я откуда знаю. У них и звездочки во всех полях стоят без объяснений. Телепаты в отпуске.
                                        0
                                        Косяк небольшой, согласен. Надо будет переименовать поле в «Адрес страницы» или что то вроде того.
                                0
                                Какую-то информацию можно определить автоматически, например, пол или город.

                                Город понятно, а вот насчет пола можно поподробнее?
                                  0
                                  По имени можно определять с достаточно высокой точностью
                                    0
                                    Есть у меня один форум, каких только имен там не указывают, от «Нету» до «Даздраперма» и «Qwerty») Наверное аудиторию тоже нужно учитывать применяя такой подход.
                                      0
                                      Не могли бы вы рассказать примерный алгоритм определения пола по имени? Первая мысль была определять пол по окончанию (гласная, согласная буквы), но есть женские имена, которые заканчиваются на согласную.
                                        0
                                        Пол определяется при регистрации через морфер. Easy way.
                                    0
                                    Как относитесь к созданию пароля для учетной записи в форме где спрашиваем дополнительную информацию после нажатия регистрация, например, через фейсбук? Т.е. это дает нам возможность создать не просто аккаунт для логина по кнопке соцсеть, а полноценный аккаунт почта+пароль + возможность быстро залогиниться через соц сеть. В мобильном продукте, который сейчас разрабатываем, у нас максимум регистраций через веб, а логинов через мобильное приложение. Гипотеза: всвязи с тем, что не всегда на компьютере и мобильном устройстве логины или наличие логинов в соц сети совпадает, не плохо было бы дать возможность альтернативного доступа сразу («под шумок», в тот момент когда спрашиваем дополнительную информацию).
                                      +1
                                      Курсор должен автоматически вставать в первое поле формы.

                                      Полезное замечание, но на сайте в основных формах регистрации, входа и восстановления пароля нет автофокуса на первом поле.

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