Какими должны быть формы на сайте?

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

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

В этой статье мы разберемся, какие формы использовать для сайта и как сказать клиенту: «Мы тебя любим».

Какие бывают веб-формы на сайте

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

1. Форма консультации. Если клиент не нашел нужной информации на сайте или у него возникли дополнительные вопросы, он захочет пообщаться с консультантом. Для этого используют форму консультации: диалоговое окно, всплывающее окно «перезвоним через пять минут» или поле «напишите номер телефона и мы свяжемся с вами, чтобы уточнить детали». Вариаций множество. Главное — помочь клиенту.
2. Форма заказа услуг. Представим, клиент прочитал о вас, его всё устраивает и он решил заказать услугу у вас. Для этого на сайте предлагают форму заказа услуг, где просят указать имя, телефон, вид услуги или тарифа. Бизнесу, который получает большинство заказов с сайта, без такой формы не обойтись.
3. Форма заказа товара. Встречается в интернет-магазинах. Обычно включает в себя карточку товара, имя, телефон, предпочитаемый способ оплаты. Такая форма полезна уже после того, как пользователь наполнил корзину и теперь готов оплатить товары.
4. Форма регистрации. Если раньше для регистрации нужно было заполнять тысячу полей, то теперь достаточно ввести имя, адрес электронной почты или просто кликнуть на иконку социальной сети, чтобы связать личный аккаунт с внутренней системой сайта.
5. Форма авторизации. Сейчас всё большей популярности набирает авторизация через социальные сети. Поэтому такая форма включает стандартные поля «адрес электронной почты — пароль» и иконки социальных сетей.
6. Форма подписки на рассылку. Обычно включает в себя адрес электронной почты и сопроводительный текст, который объясняет, зачем нужна подписка и какую пользу от нее получит потенциальный читатель.

Как сделать форму на сайте удобной для пользователя

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

• Краткость — сестра таланта. В начале двухтысячных формы на сайте были похожи на подробные анкеты в секретную организацию. Сейчас же дизайнеры пытаются сокращать количество полей в форме, чтобы удержать клиента и повысить конверсию. Подумайте, какая информация не обязательна, а какую — можно получить другим путем, и сократите количество полей для удобства пользователей вашего сайта.
• Логика содержания — превыше всего. Сокращая форму, не забывайте о структуре и логике изложения. Помните о стандартной последовательности для полей и выбора значений. Если не уверены, что пользователю удобнее выбрать сначала, тестируйте несколько форм и анализируйте результаты.
• Ошибки, текст и обязательные поля. Не допускайте ошибок в тексте. Даже незначительная мелочь (неправильная форма глагола или пропущенная буква) может повлиять на решение клиента. Также замените двусмысленные фразы или слова на более четкие и понятные формулировки. Так вы избежите недопониманий с клиентом. И не забудьте — все обязательные поля отмечайте маркером (звездочкой или цветом).
• Внешний вид формы. Не перегружайте форму лишними элементами. Лучше сделать её максимально простой и понятной для пользователя. Для этого поместите все поля в одну колонку, придерживайтесь нерушимого принципа про внешнее и внутреннее и визуально сгруппируйте похожие поля и отметки.
• Минимум анимированных элементов. Если возможно, вообще избавьтесь от анимированной формы. Не нужно, чтобы она прыгала, мигала, завлекала музыкой или всплывала на середину экрана, перекрывая всё свободное пространство. Это мешает клиенту разобраться с требованиями, а при долгом просмотре — раздражает.

Промежуточный вывод

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

9 правил идеальной формы

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

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

1. Краткость

Нередко попадаются формы, в которых 5 и более строк. Мало кто из посетителей сайта решается заполнить их – жалко тратить время, просто лень.

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

Сократив количество полей, удается тут же повысить объемы продаж. Достаточно оставить 2-3 строки с наиболее важной и необходимой информацией. Потенциальные клиенты быстро заполнят их, даже не задумываясь.

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

Возникают вопросы, как именно определить лишние строки? Следует избавиться от строк, если информацию:

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

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

В таблице приведен пример правильной и неправильной формы заявки.

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

2. Капча

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

Капча оправдана в единственном случае – когда сайт атакуют спамеры. Если спама нет – уберите капчу. Поставить ее несложно, если в этом будет необходимость.

3. Тип и размер

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

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

4. Обязательные строки для заполнения

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

Кстати! Еще один вариант отметки – сделать такие поля другим цветом.

Это упростит жизнь пользователям. Если они не захотят заполнять все строки, они введут только важную информацию.

5. Помощь

Предусмотрены сложные, непонятные с первого взгляда поля? Конечно, их следует, по возможности, избегать. Пользователь должен моментально понимать, что именно от него нужно и зачем.

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

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

6. Проверка правильности заполнения

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

Как именно оформить сообщение – на выбор «конструкторов» сайта. Хотя достаточно просто всплывающей надписи «Неправильно». Или символов напротив каждой строки:

• зеленая галочка – верно;
• красный крестик – неверно.

7. Защита от отправки ошибочной информации

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

Но нужно предусмотреть возврат к неправильно заполненному полю после клика пользователя по кнопке. Если таких полей несколько – возврат осуществляется к первой некорректно заполненной строке.

8. Кнопке «Очистить» — правильное оформление

Если она находится рядом с кнопкой «Отправить», возрастает риск, что пользователь промахнется. Он либо вообще не захочет повторно заполнять форму, либо не обратит внимания, на какую кнопку кликнул и решит, что данные отправлены.

Есть два варианта:

• убрать кнопку «Очистить»;
• сделать для нее другое оформление – не такое яркое, меньший размер и поместить дальше от кнопки «Отправить».

9. Правильное размещение Label

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

Еще одна проблема – пользователь не может проверить, правильно ли он заполнил поле. Перечитывая форму, он не видит, что именно нужно было ввести в строки. Как результат – возникает непонимание правильности передаваемых данных.

Следующая ошибка – подсказку, размещенную внутри строки, приходится удалять вручную. Это создает дополнительную нагрузку на пользователя. На заполнение строки требуется больше времени. Не все хотят его терять.

Вывод — Label важно размещать рядом со строкой, а не в самой форме!

Какими должны быть формы на сайте: подводя итог

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

• тип предлагаемого товара;
• особенности поведения целевой аудитории.

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

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

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