Формы — это инструмент, который побуждает посетителей вашего сайта действовать.

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

Если форма создаёт плохой пользовательский опыт, люди просто уйдут, не оставив данных. А это значит, что они покинут ваш сайт и никогда не станут клиентами — всего из-за неудачного оформления полей!

Поэтому важно знать, как создать эффективную форму.

Какие типы форм выигрывают от хорошего дизайна?

• Формы лидогенерации — для подписки на рассылку или скачивания бесплатного материала
• Формы обратной связи — чтобы клиенты могли связаться с вами
• Регистрационные формы — для записи на мероприятие или подключения к сервису
• Формы входа — чтобы пользователи могли быстро авторизоваться
• Формы оформления заказа — чтобы снизить количество брошенных корзин
• Универсальные формы сбора email — для любых других случаев, когда нужен адрес пользователя

К сожалению, в сети полно плохо спроектированных форм.

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

Как сделать хорошую форму?

Принципы дизайна форм, которым стоит следовать (4 «С» эффективного дизайна форм)

Когда нужно создать эффективную форму, требуется два ключевых элемента:

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

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

Но иногда приходится создавать форму для задач, которые ещё не проходили проверку.

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

Понимание принципов дизайна форм даёт вам инструменты для создания эффективной формы в любой ситуации.

Вот конкретные и проверенные советы, которые помогут избежать типичных ошибок в UX форм:

• Размещайте подписи над полями, а не внутри них в виде исчезающего текста. Иначе пользователь начнёт вводить данные и забудет, какую именно информацию вы просили.
• Если полей больше двух, располагайте их вертикально. Вертикальные поля проще сканировать, чем горизонтальные.
• Пометьте обязательные поля. Обычно используют звёздочки (*) или отдельно указывают необязательные.
• Если вариантов выбора больше 6, используйте выпадающий список. Знаете правило Миллера? Человек комфортно воспринимает около 7 элементов — если их больше, не перегружайте экран радиокнопками.
• Разбейте форму на несколько шагов, если полей много — это снизит отказы.
• Делайте поля разной длины в зависимости от ожидаемого ответа. Например, поле для индекса должно быть короче, чем для телефона.
• Если есть ошибки, добавьте валидацию в реальном времени — это удобнее, чем сообщения после отправки.
• Не пишите на кнопке «Отправить». Сделайте её заметной и добавьте убедительный микротекст.

А затем — принципы создания эффективных форм. Четыре «К» успешного дизайна форм:

• Краткость (Четкость)
• Компактность
• Креативность
• Кооперация (Взаимодействие)

(Примечание: Благодарность команде Formulate за разработку модели «4К»).

1. Четкие формы проще в использовании

Четкие формы не заставляют пользователей думать (а это хорошо).

Не зря эту книгу называют библией веб-дизайна (Amazon)

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

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

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

Ясность в формах критически важна. Любая путаница в форме ведёт к потере конверсий!

Имеется в виду любая часть формы, включая:

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

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

И сама форма должна быть максимально простой и удобной для заполнения.

При проектировании формы задайте себе вопросы:

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

2. Лаконичные формы конвертируют лучше

Лаконичность не равно краткость! Это значит не длиннее, чем необходимо.

Да, короткая форма обычно конвертирует лучше длинной. Но:

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

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

Но нет. Конверсия упала на 14%.

“Результат? Падение конверсии на 14%. Я убрал все поля, с которыми людям действительно хочется взаимодействовать, и оставил только те, которые им неинтересны. Довольно глупо.” – Майкл Аагаард, ConversionXL

Некоторые поля формы изначально создают больше сопротивления (например, «номер телефона»), чем другие (например, «имя»).

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

С другой стороны, есть две веские причины сделать форму длиннее:

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

Длинные формы чаще встречаются при продаже дорогостоящих услуг, особенно в сегменте B2B.

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

И помните: длинную форму можно разбить на несколько этапов, чтобы пользователям было проще её заполнить.

3. Умные формы облегчают задачу

«Умные» не означает, что форма должна пестреть каламбурами. Как мы писали ранее, ясность важнее остроумия – особенно если под «остроумием» понимается юмор.

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

Какие это могут быть шаги?

• Автозаполнение полей – чтобы пользователи быстрее вводили данные
• Скрытие полей с информацией, которая у вас уже есть
• Показ дополнительных полей только после заполнения обязательных
• Ограничение форматов ввода для определённых полей (например, email должен содержать @)

Яндекс позволяет автоматически заполнять ваши данные. Этот пример (с сайта developers.yandex.ru) показывает, насколько быстрее работает автозаполнение.

Умные формы облегчают пользователям процесс их заполнения.

4. Сотрудничающие формы не вызывают раздражения

Принцип «сотрудничества» более универсален, чем три предыдущих. Если форма сотрудничает с пользователем, значит, она помогает ему быстрее и проще её заполнить.

Этот принцип включает ряд лучших практик. Например, сотрудничающие формы:

• Учитывают логику мышления пользователя при заполнении
• Дают пояснения и контекст, когда это необходимо
• Используют термины, знакомые целевой аудитории
• Понятно указывают на ошибки и подсказывают, как их исправить
• Допускают незначительные ошибки ввода (опечатки, разные форматы)
• Гарантируют, что для каждого поля есть корректный и точный вариант ответа
• Задают вопросы, на которые есть однозначные ответы, исключая «наиболее подходящие» варианты, не отражающие реальную информацию пользователя
• Чётко объясняют, чего ожидать от заполнения формы и что получит пользователь в результате

Неопределённость вызывает раздражение. Раздражённые пользователи не заполняют формы и не становятся клиентами.

Недавний метаанализ о влиянии неопределённости на принятие решений содержит следующее утверждение:

«Неопределённость — неизбежная часть повседневной жизни, она может быть как стрессовой, так и захватывающей… Современные исследования показывают, что живые организмы стремятся разрешать и минимизировать неопределённость, чтобы оптимизировать выводы и прогнозы о внешнем мире и в конечном счёте повысить шансы на выживание.»

Когда вы сталкиваетесь с запутанной формой, какой самый быстрый способ «разрешить и минимизировать неопределённость»?

Не заполнять её!

Поэтому сотрудничающие формы так важны — они предотвращают раздражение пользователей.

И помогают увеличить количество заполненных форм.

Заключение: Что делать после создания эффективной формы?

Хорошо оформленная форма — это только начало взаимодействия ваших посетителей с бизнесом.

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

Вот несколько способов удержать внимание аудитории:

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

Узнайте, как создать эффективную форму. Сделайте её. А затем — работайте с лидами. Развивайте бизнес, превращая больше посетителей в клиентов.