Создание правильных форм регистрации: 8 советов

На подавляющем большинстве сайтов и приложений есть форма регистрации или запроса, а иногда и не одна. И если целью создания сайта как раз является захват данных пользователя и склонение его к регистрации, то эта форма должна быть грамотно сделана.

Каждый из нас хотя бы раз уходил с сайта, если форма казалась слишком сложной/длинной/подозрительной – нужное подчеркнуть. И вроде бы продукт интересен, и воронка продаж сработала верно, раз уж ты дошел до регистрации. Но что-то останавливает. Мы сегодня рассмотрим несколько основных аспектов, которые помогут сделать форму регистрации удобной и рабочей. Речь пойдет как о заявке на продукт/услугу, так и про страницы Sign-In/Sign-Up.

1. Ничего лишнего

Главное правило хорошей формы – в ней есть только те поля, которые действительно необходимы. Чем короче, тем лучше. Если это Sign-Up, то от первичной регистрации зависит, останется ли посетитель на этом сервисе. И позже будет ли заходить, если для авторизации нужно снова вводить данные. Если заполнение надоедает, то без крайней необходимости никто не будет возвращаться. Так что подумай, как свести к минимуму затраты времени и сил пользователя.

Если можно подключить авторизацию через Google или Facebook – это оптимальное решение. Во-первых, это быстро и удобно. Всего в два клика происходит регистрация. Такой шаг вовсе не запоминается, он происходит сам собой, как та галочка о прочтении пользовательского соглашения. Во-вторых, пользователю не придется запоминать логин и пароль. А это значит, что у него не будет никаких проблем с возвратом на сайт.

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

Даже если у тебя задуман квиз с выбором модели/расчетом цены и прочими деталями, то правило “Ничего лишнего” остается в силе. Оставляй только те вопросы, которые действительно существенно влияют на ответ менеджера. Все, что можно уточнить в процессе уже при созвоне, не должно присутствовать в первичной заявке.

2. Упрощай процесс выбора

В некоторых случаях требуется указание города, нужной услуги, выбор желаемой даты и прочие подробности. В таких ситуациях постарайся не использовать пустые поля для ввода, а дать готовые варианты ответа. В виде выпадающего списка с решениями, например. Или дай 4-6 картинок с подписями и возможностью отметить галочкой нужные.

Чем меньше посетителю придется печатать вручную – тем лучше. Но на всякий случай можно оставить поле для комментариев, если часто возникают какие-то дополнительные вопросы и пожелания.

Предусмотри выбор нескольких вариантов сразу. Добавь кнопку “еще один” или типа того. Например, человек находится на сайте аренды водного инвентаря. Он бронирует катамаран. Пишет имя, выбирает плавсредство, нажимает в календаре на дату и нужный промежуток времени. А если он сразу после этого хочет еще и на лодке покататься? Сделай так, чтобы он просто добавил еще одно плавсредство и время его аренды. Та же история с заказом еды, консультациями разных специалистов.

Это практически необходимая функция для многофункциональных центров. Ведь гораздо удобнее сразу запланировать несколько услуг в один день и в удобное время, чем делать это по-отдельности. Такая форма не просто удобна, но и подталкивает к заказу большего количества услуг, чем изначально планировалось. Записываетесь на маникюр? Вот окошки. А после них есть еще окошки у мастеров депиляции и наращивания ресниц. Может быть заодно и к ним сходите? Даем скидку на комплекс услуг, ага.

3. Покажи обязательные и необязательные поля

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

4. Сразу говори об ошибке

Начнем с того, что стоит постараться исключить ошибки при заполнении. Для этого внутри поля дай пример. Или пояснение возле поля. Но если пользователь начал заполнять неверно, то сразу подсвети это все красным и сообщи об ошибке! Не нужно ждать заполнения всех полей. Иначе выйдет так, что посетитель потратил время и нажал “ОК”, а ему снова выдается та же страница и все нужно делать заново. Это жутко бесит. Показывай ошибку сразу.

Длина пароля – одна из частых проблем. Мы рекомендуем предупреждать о слабом пароле, но все равно принимать его. Иначе есть риск, что пользователь выдумает пароль на ходу ради увеличения его длины, а потом при повторном входе просто забудет. А нам нужно, чтобы он вернулся без проблем.

5. Предлагай альтернативу

Несколько вариантов входа – это отлично. При первом посещении придется взять их все, но зато потом это облегчит задачу. Та же история с заявками. Ты можешь предложить письмо на почту, а еще обратный звонок, смс, сообщение в мессенджере. По сути нужен все равно номер телефона. Но человек выберет удобный для него канал общения. А значит, не потеряется.

С регистрацией может быть еще проще. Кроме стандартных вариантов входа по почте, логину и паролю есть еще новшества – вход при помощи сканера отпечатка пальца или faceID. Это касается приложений для смартфонов. Если такая возможность есть – стоит воспользоваться ею. Очень удобно не ждать подтверждений или всяких вводов, а одним жестом получить доступ к сервису.

6. Не изобретай велосипед

У пользователей уже есть некий опыт взаимодействия с формами заявок и регистраций. И твоя задача соответствовать. Старайся делать более-менее стандартные решения. Улучшай их, делай понятно и удобно. Но не придумывай новые концепции, иначе они могут запутать.

Если нужно выделиться – сделай это при помощи дизайна. Пусть он будет выполнен в фирменном стиле. Ты можешь сделать задний план с иллюстрациями. Или добавить мелкие интерактивные элементы. Это работает хорошо, кстати. Милые детали запоминаются и повышают доверие. Такой сайт запомнится, его порекомендуют друзьям или поделятся в соцсетях. Очеловечивание стандартных элементов скрасит скучное заполнение полей. Регистрация будет не сухой формальностью, а приятным моментом. Так что танцующие котики и ховер-эффект не будут лишними, если не отвлекают от главной задачи.

7. Давай подсказки

Как уже было сказано выше – подсказки помогут избежать ошибок. Но есть и другая польза. С наличием подсказок формы заполнять будет легче и быстрее. Один из самых простых и эффективных инструментов в этой задаче это иконки. Прямо на полях размести значки: трубка телефона, письмо для имейла, замочек для пароля. Человеку даже не придется читать, чтобы понимать, что от него хотят. И это обязательное требование для мультиязычных сайтов! Если хочешь сделать уникальные иконки для всего проекта и для форм регистрации – посмотри онлайн-премьеру о том, как создать сет иконок в едином стиле.

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

Пример: услуга по разработке дизайнов интерьера. Мы предлагаем сразу выслать примеры нескольких решений по разной стоимости для определенной планировки. Для этого нужно присоединить файл с планом дома.

Ты делаешь стандартный значок добавления файла, подписываешь кнопку. А при наведении на нее даешь всплывающую подсказку, в которой будет объясняться, зачем это нужно, обязательно ли и какие файлы вообще подойдут.

Всплывающие подсказки помогут облегчить регистрацию и отправку заявок, они повышают эффективность UX. Это очень полезная вещь, особенно если применяются нестандартные, незнакомые кнопки и иконки, если действие новое и непривычное для юзера. Если возле них не будет пояснения, то не факт, что пользователь будет сам копаться и пробовать вникнуть. Есть шанс, что он просто покинет сайт. Не заставляй посетителя думать – сразу дай все инструкции.

Та же история с полями, которые могут вызвать недоверие. Объясни, зачем сайту данные платежной карты или прочая личная информация. Дай понять, что это безопасно и не несет никаких рисков для пользователя.

8. Делай страницу Success

Всегда нужна соответствующая Thank you page или всплывающее уведомление про успех – в зависимости от ситуации. Но в любом случае дай знать юзеру, что он все сделал верно и его форма заполнена и получена. Это важно.

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

Конечно, непосредственно стиль тоже важен. Как и умение оформить свою задумку, используя современные тренды и инструменты. Всему этому можно научиться.

Материал подготовлен командой образовательной платформы WAYUP