Регистрация на сайтах

Регистрация — это способ предоставления сайту информации о себе с целью получения привилегий, таких как добавление элементов в список избранного, создание индивидуальных подборок или доступ к ресурсам, которые недоступны для посетителей без регистрации.

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

Большинство цифровых сервисов предлагают регистрацию на сайте. Как правило, это связано с продажей товаров, услуг, цифровых продуктов:

• интернет-магазины,
• образовательные платформы,
• онлайн-кинотеатры,
• SaaS сервисы (социальные сети, текстовые и графические редакторы, видео- и аудиохостинги),
• стриминговые сервисы.

Регистрация может быть полезна как компании, так и клиенту:

Регистрация на сайте дает пользователям ряд привилегий:

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

Создание аккаунта через email или номер телефона

При регистрации пользователь получает SMS с кодом подтверждения или электронное письмо с просьбой пройти по ссылке для активации аккаунта.

Регистрация через аккаунты соцсетей и других сервисов

Наиболее распространенный вид регистрации в современном цифровом пространстве. Пользователь регистрируется через уже имеющийся аккаунт в социальных сетях (ВКонтакте, Одноклассники, Facebook) или при помощи учетной записи поисковых систем (Google, Яндекс). Данные из уже созданных аккаунтов автоматически переносятся и заполняются, что экономит время пользователя. Этот тип регистрации делает всю процедуру максимально удобной и легкой.

Регистрация с заполнением дополнительных полей

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

Заголовок

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

Структура

Минимум полей

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

Группировка

Если у вас получается много полей, лучше сгруппировать их в блоки. Принято считать, что при решении одной задачи людям сложно воспринимать более 7 объектов одновременно, поэтому стоит подумать о их объединении.

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

Разбейте на шаги

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

Частая ошибка при оформлении структуры формы, особенно когда предполагается несколько шагов, — это не указывать статус заполнения регистрации. Если ваша регистрация не разделена на шаги, вы можете использовать индикатор прогресса.

Поля

Автозаполнение

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

Длина

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

Шрифт

Главное качество шрифта — читабельность. Рекомендуется использовать достаточно крупный шрифт, чтобы обеспечить легкое чтение текста. Безопасным вариантом для основного текста является размер 16 px. Однако размер шрифта может изменяться в зависимости от контента и других элементов на странице. Если вы сомневаетесь, то смело выбирайте более крупный вариант.

Автофокус

Создайте дополнительный акцент на активном поле. Для этого часто используются яркие цвета и увеличение толщины линии границ. Автофокус на первом элементе формы позволяет пользователю сразу начать ее заполнять, что экономит время и сокращает количество нажатий.

Плейсхолдер

Текст-плейсхолдер предоставляет дополнительную информацию о необходимых данных (формат ввода, ограничение символов, язык). Рекомендуется размещать подсказки сбоку от поля или под ним.

Лучший вариант — отображение подсказки тогда, когда пользователь сфокусирован на соответствующем поле.

Ошибкой является использование плейсхолдеров в качестве масок внутри поля и подписей. Часто дизайнеры так делают из-за экономии пространства. Это крайне неудобно для пользователей: может их запутать, затруднить ввод данных. К тому же плейсхолдер, находящийся внутри поля, исчезает при заполнении.

Подписи

Метка или подпись говорит пользователю о том, к чему относится поле. Лучше размещать ее вне поля — по верхнему краю или сделать ее плавающей. Плавающая подпись (floating label) — когда плейсхолдер внутри поля автоматически превращается в метку сверху при фокусировке. С точки зрения дизайна плавающая метка считается лучшим решением на данный момент.

Помните: подписи следует размещать возле соответствующего поля, а пары подпись-поле должны быть отделены от соседних пар, чтобы избежать путаницы.

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

Текст подписи должен быть кратким, лаконичным для более легкого и быстрого считывания. В идеале — одно/два слова.

Распространенная ошибка — использование прописных букв. Текст, написанный заглавными буквами, сложно читаем.

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

Пароль

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

Ошибка: Не стоит придумывать сложные требования к паролю. Ограничьтесь общепринятыми правилами, но если пользователь захочет использовать стандартный пароль, не мешайте ему. Хорошей идеей будет показывать прогресс усложнения пароля при помощи индикатора.

Цвет

Для создания иконок и в качестве визуальных акцентов используйте цвета, соответствующие вашему бренду. Также рекомендуется использовать общепринятые цвета для обозначения ошибок (красный), для подтверждения и успешного заполнения (зеленый).  Однако не полагайтесь только на цвет, когда хотите выделить что-то, так как некоторые люди не могут различать цвета. Для подписей и плейсхолдеров в большинстве случаев используется черный и оттенки серого.

Ошибка: Не стоит все поля выделять акцентными цветами. Помните: главное — удобство пользователя, а при обилии ярких цветов снижается читабельность.

Кнопка

Кнопки могут быть первичного действия и вторичного. Для предотвращения путаницы у пользователя они должны визуально отличаться: второстепенные кнопки должны выглядеть менее значимыми. Выделите основное действие, используя более яркие цвета. Сделайте кнопки призыва к действию информативными, указывая намерение или выполняемое действие. Пользователи хотят знать, что произойдет при нажатии на кнопку. К тому же это увеличивает доверие. В названиях кнопок используйте глаголы действия, например, «Войти» «Зарегистрироваться» «Забронировать». Избегайте общих и недостаточно информативных названий, таких как «Подтвердить» или «Далее».

Подумайте о возможности неактивности кнопки призыва к действию до тех пор, пока вся информация, вводимая пользователем, не будет предоставлена в правильном формате (обратная связь должна указывать, в каком поле используется неправильный формат).

Информирование об ошибках

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

Не используйте проверку на каждое нажатие клавиши — это ошибка! В большинстве случаев вы не можете быть уверены, что пользователь закончил набирать ответ. Это может помешать при заполнении формы.

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