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

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

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

Функционал формы

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

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

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

top_positioned.png

Как можно позиционировать описание полей

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

Подсказки реализуют несколькими способами:

· заполняя поле примером, который исчезает при переводе фокуса на него;

· лаконичная информация рядом с полем, которую нельзя спутать с описанием;

· краткие инструкции, появляющиеся в виде аккуратного всплывающего окна рядом с активным полем.

Оформленные в соответствии с этими стандартами формы повышают доверие пользователя и уменьшают степень его неуверенности в вашем сайте.

zareg.png

Подсказки в виде пояснения поля и всплывающего окна.

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

validation.png

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

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

list.png

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

Оптимизация типичной формы заказа в коммерческом проекте

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

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

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

new-lay.png

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

Следите за формами

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

Самые популярные системы веб-аналитики Google Analytics и "Яндекс.Метрика" поддерживают работу с формами "из коробки" - используйте их! Высокая гибкость позволит внедрить эти системы на проект любой сложности.

Заключение

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

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

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

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
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 мб