Ответ
Как построить удобную форму регистрации Опции темы
Старый 03.10.2015, 18:53
  #1
Nataly
 
Регистрация: 30.07.2014
Сообщений: 474

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

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

1. Ваша цель

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





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

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





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

2. Построение формы

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

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

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

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





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

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





3. Пользовательский интерфейс

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

При создании форм с нуля важно придерживаться модулей. Использование модульных элементов позволяет сохранять те же пропорции, ширину, высоту и интервалы между столбцами текста, что сделает формы одинаковыми по всему сайту. Это удобно, ведь можно применить интервалы 5, 10, 15, 20 px, когда это возможно. Это позволит сделать изменение размеров форм и кнопок более быстрым и простым. Помните также, что чем менее техническим будет дизайн, тем лучше.





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

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

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





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

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





4. Пользовательский опыт

Теперь пора убедиться, что форма читабельна, проста в использовании и все действия, требуемые от пользователя, описаны простым и понятным языком.

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





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

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

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





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

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

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

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





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

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





5. Распространенные ошибки

Ошибка № 1 — запутанный макет

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





Ошибка № 2 — отсутствие правильной иерархии

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

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

Ошибка № 3 — слишком много CTA

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

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




Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как построить авторитетные обратные ссылки на блог Nataly Статьи 0 11.04.2015 09:31
Как создать форму обратной связи для сайта? dangerous Статьи 1 18.06.2013 20:28
Скачиваем с tonightsgirlfriend.com без регистрации Bilrel Рынок 2 17.08.2012 10:56
Личные данные при регистрации домена Webnoob Вопросы 8 21.05.2012 22:59
Вопрос по регистрации домена brutha Файлообмен 8 05.05.2011 01:47

Метки
веб-форма, конверсия, лиды, регистрация, трафик


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 02:03. Часовой пояс GMT +3.