Создание эффективных веб-форм. Часть 1

14.06.2014 Аналитика и юзабилити
Создание эффективных веб-форм. Часть 1

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

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

Дизайн всему голова

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

Оформление

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

Обратите внимание на контрастность - поля ввода, их содержимое и фон страницы должны быть легко различимы друг от друга. Если контраста нет, то ориентироваться на странице становится в разы сложнее. Подобрать цвета можно при помощи инструмента Colour Contrast Check, а проверить уже используемые - на сайте CheckMyColours.

Создание эффективных веб-форм. Часть 2.jpg

Не у всех получается найти действительно хорошее сочетание.

Шрифты. Для текста в форме лучше использовать шрифты из стандартного набора, имеющиеся на любой системе - Arial, Verdana и т.п. Не стоит экономить на спичках, уменьшая размер букв для соответствия возможной длины ответа размеру поля. Если форма получается объемная, то лучше разбить её на независимые секции, чем пытаться ужать, теряя простоту восприятия.

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

Структура

Количество полей. Известно, что чем меньше объем запрашиваемой информации, тем выше вероятность получить её, но как соотносится количество полей с конверсией? Маркетинговое агентство HubSpot выяснило в 2010 году, что отказ от одного поля из четырех может увеличить конверсию сразу на 50%. Отсюда простой вывод - спрашивайте только самое необходимое. Для подписки на рассылку не нужно отдавать сайту свои инициалы и номер телефона - хватит одного email. В электронной коммерции пользователь предпочтет поделиться только той информацией, которая необходима для получения товара. Любые другие вопросы начнут существенно сказываться на конверсии, притом не в лучшую сторону.

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

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

Создание эффективных веб-форм. Часть 2 - 1.png

Вторая кнопка не является необходимой и может запутать пользователя.

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

Captcha нужна далеко не каждой форме, и при малейшей возможности откажитесь от неё. Если же она единственное, что стоит между вами и спамерами, постарайтесь подключить максимально простую версию капчи - сложные "загадки" легко сведут конверсию к нулю.

Создание эффективных веб-форм. Часть 2 - 2.png

Капчу, которую разгадывать не будут.

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

Создание эффективных веб-форм. Часть 2 - 3.png

Лента прогресса делает форму привлекательнее, да и воспринимать её становится намного легче.

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

Итоги

Если форма является камнем преткновения вашей конверсии, нужно не избавляться от неё, а лишь работать над ней! Проведите комплексный анализ формы - насколько продумана структура? Как относятся пользователи к её оформлению? Насколько удобно им работать с нею? Какой вопрос провоцирует наибольшее количество отказов? Тестируйте изменения в форме до тех пор, пока не выйдете на нужный уровень конверсии.

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

 
Больше интересных статей

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

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
9:00 9:15 9:30 9:45 10:00 10:15 10:30 10:45 11:00 11:15 11:30 11:45 12:00 12:15 12:30 12:45 13:00 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 15:30 15:45 16:00 16:15 16:30 16:45 17:00 17:15 17:30 17:45
Виды услуг
ОбзорМаксимальный размер файла - 10 мб