Юзабилити формы регистрации — 1-ая партия советов

Опубликовано 25.01.2017 · в Юзабилити

Мы продолжаем цикл статей об удобности форм на сайте.

В прошлой статье мы поговорили об Общих требованиях к формам на сайте.

А сегодня хотели бы затронуть такую тему как «Юзабилити формы регистрации/авторизации на сайте».

Эта тема важна по двум причинам:

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

Сегодня мы начнем рассматривать именно первый тип взаимодействия пользователя с формами —  регистрация/авторизация на сайте для получения товара или услуги.

Решите, а нужна ли вашим пользователям регистрация на сайте.

Зачастую, пользуясь некоторыми сайтами, возникает вопрос: «Почему я должен регистрироваться здесь ради того, чтобы разово воспользоваться определенным товаром/услугой?». И хотя подобных сайтов, обязывающих регистрироваться при отсутствии на то весомых причин, становится все меньше, все же встречаются такие интернет-магазины, требующие регистрации даже для разового приобретения какой-то сущей мелочи.

Вы все же решили, что такая форма на сайте нужна, перейдем к структуре формы.

Пользователю нужна «до жути простая» форма

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

create_account

Создание аккаунта требуется слишком много затрат

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

slojnaya_forma_egistracii

Очень большая форма регистрации, много ненужных полей

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

Хороший пример: при регистрации требуется минимум данных:

prostaia_forme_registracii

Простая и удобная регистрация на сайте

При этом, после совершения регистрации собирают дополнительную информацию:

reqiest_information

Заполнение профиля уже после процесса регистрации пользователя

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

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

Account login

Нарушены визуальные линии, форма сложна для восприятия

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

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

Конечно, в любой рекомендации есть свои нюансы, например, «как сделать краткой и с малым количеством полей для заполнения форму для банковской или финансовой сферы?»

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

Не забывайте об иерархии

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

Правильная CTA кнопка

1. Не должно быть переизбытка таких кнопок на странице, чтобы не рассеивать внимание от основной кнопки;

Customer_Login

Переизбыток CTA кнопок в одном экране

2. Кнопка должна иметь «очеловеченное» название. Регистрация/ Авторизация — это понятия, близкие работникам IT сферы, никак не обычным пользователям. Используйте приближенные к реальности названия «Присоединиться», «Войти в мир», «Стать участником».

Так с помощью этой неофициальности, уменьшается дистанция между посетителем и владельцем компании(или владельцем интернет-магазина), который говорит: «Это сайт, созданный специально для тебя, поэтому располагайся, смотри, изучай вокруг»;

3. Кнопка должна визуально выделяться на фоне остального содержимого страницы.

Простой и понятный переход между формами регистрации и авторизации

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

no_signup_form

Плохой пример-нет возможности переключиться на форму авторизации, если случайно кликнул по «Sign up»

Проверок много не бывает.

Что касается проверки полей формы-мы уже рассматривали этот вопрос ранее, однако и здесь существуют нюансы. Когда  форма проста и состоит из полей имя, email и телефон, лучше применять, как раз таки, встроенную валидацию с помощью Java Script. Однако иногда стоит ориентироваться на проверку на сервере, например в случае, когда форма содержит персональные данные: «ФИО», паспортные данные, ИНН и т.д.

Разрешайте менеджерам паролей помочь

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

Вернем заполнение =)

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

Необходимость заново заполнять все поля формы заставляет пользователя покинуть ресурс.

Добавьте возможность регистрации через соцсети.

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

Хотя и здесь есть подводные камни. Опишем сценарий действия пользователя (User Case) при последующей авторизации.

Увидев форму авторизации, которая также содержит иконки соцсетей, возникает вопрос: «Я уже точно регистрировался на данном сервисе, и теперь хочу войти в свой аккаунт. Если память не изменяет, я входил тогда с помощью соцсети. Но с помощью какой именно? Тут их несколько на выбор…

many_networks

Очень большой выбор соцсетей для регистрации

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

Что же тогда делать? Выберите и остановитесь на 2-3 соцсетях, которые наиболее популярны для целевой аудитории. Вы упросите жизнь своим пользователям.

Покажите все «плюшки» регистрации

Для наибольшей мотивации к регистрации на сайте стоит показать все плюсы,  которые пользователь получит в результате. Тем самым отбрасывая вопрос — «а стоит ли регистрироваться на сайте, или я смогу пользоваться им без нее».

plus1

При регистрации показаны все плюсы

Еще вариант:

plus2

Плюсы от регистрации на сайте

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