Как не отпугнуть посетителя от заявки или юзабилити современных веб-форм для повышения конверсии

Alexey Kandinsky
Sep 3, 2018 · 6 min read

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

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

Введение

Об одном из моих проектов на фриланс: Средний подсчет статистики проекта, до моего редизайна составлял примерно 10 к 1. То есть из 10 посетителей начавших заполнять форму, до конечного заполнения и отправки данных дошел только 1, выходит конверсия с начала заполнения до отправки составляет 10%. Что в свою очередь несет огромные убытки и не дееспособность сайта. Подсчеты после внесения моих исправлений показали результат 75% конверсии в рамках заполнения формы. В данной статье мы разберемся как избежать данной проблемы с большей вероятности, без применения сбора данных статистики с конкретного пользовательского опыта на целевом сайте. И что учитывал я при создании концепции.

Ошибки построения форм

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

  1. Большое количество форм для заполнения. Что означает: У каждого определенного сегмента есть свое оптимальное количество форм и объем информации которая будет более оптимальна. Например: Когда вы хотите подписаться на рассылку новостей, вы не хотите увидеть поля вида “Ваше имя”, “Фамилия”, “E-mail”, “Запасной E-mail”, “Год рождения” — В идеале посетитель хочет видеть одно поле под названием “E-mail адрес”, не более того.
  2. Большей объем заполняемой информации. Потенциального клиента могут отпугнуть формы, предполагающие собой написание грамоских текстов с умозаключениями и лаконичным повествованием, вроде “Опишите какие цели и ценообразование должен иметь ваш будущий сайт”, “Опишите род деятельности и достижения вашей компании”, не дай бог вы сделаете их обязательными.
  3. Проблемы с соотношениями типа формы(lable) к полю и проблемы восприятия типов. Одна из самых распространенных ошибок и проблем просадки конверсии. В свою очередь означает что дизайнеры часто хотят креативить с формами, что конечно хорошо в роли концепции, но плохо для конечного продукта. Примеры:

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

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

После ознакомления со статистиков показателей формы, оказалось данная структура форм ввода имеет лучшие показатели конверсии и удобства, на что есть вполне логичное объяснение — это максимально простое распределение внимания, которое проходит четко вертикальную линию, от lable(имя поля) до поля ввода с соответствующей подсказкой, без нагрузки внимания, отвлечься или запутаться в данной ситуации довольно сложно. Так что данную структуру смело можно назвать самой успешной и лучшим структурированным решением. Показатели данной структуры в моей проекте показали прирост конверсии формы в 65%(не путать с конверсией сайты).

Распределение внимания в дизайн концепте

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

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

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

В данном концепте мы отчетливо прослеживаем мысль, обратить фокус внимания на кнопку “Далее”, подразумевающее переход к следующему этапу регистрации. Второстепенными элементами являются ввод e-mail и иные способы регистрации. По сути вся страница регистрации в OneDrive созданная для одного элемента, и обыграна вокруг него, для его подчеркивания и максимально быстрого ответа на запрос пользователя.

Технические способы упрощения ввода веб-форм

  1. Используйте автозаполнение. Используйте атрибут autocomplete в ваших Input для автозаполнения формы из ранее введенных данных на других сайтах. Сейчас практически каждый браузер поддерживает данную функцию и ее использование приводит к упрощению и легкости заполнения формы, что нам в данному случае очень важно, поскольку пользователю не приходится вводить данные вовсе. Пример формы с атрибутом autocomplete:<input type=”text” name=”customerEmail” autocomplete=”email”/>
  2. Шаблоны ввода данных. Мы все когда то заполняли такое текстовое поле как номер телефона, и наверняка замечали что где то это сделано удобнее а где то нет. Шаблоны ввода данных созданные на js+jquery облегчают эту задачу в несколько раз, яркий пример когда у вас в форме уже имеется динамически добавленный +7, и вам остается ввести еще 10 цифр, введя несколько из них, остальные не введенные цифры будут отображаться неактивными, и в случае неверного ввода ошибка сразу будет видна, так же приведение номера к виду +7 (967) 656–87–98 самое удобное и лаконичное решение, не приводящее к частым ошибкам при заполнении.
  3. Динамическая проверка форм. Большим плюсом будет отображение корректности введенных данных динамически, соответствующими маркированными элементами по мере заполнения поля. Например: когда вы нажимаете и вводите поле E-mail, оно имеет красную окантовку и предупреждает о некорректности данных, но после введения заветных @gmail.com Мы наблюдаем что наша форма стала иметь зеленую окантовку и приемлемый вид. Данная функция является не только техническим аспектом, а еще психологическим фактором, после введения правильных данных пользователь чувствует удовлетворенность и завершенность своего действия, в нашем случае мы назовем это одной из интерпретаций системы поощрения или геймификации.
  4. Пагинация страниц с формами. Если вам все же пришлось использовать множество полей для сбора данных, размешать их на одной странице не самое целесообразное решение, исследования статистики показали что пользователи заполняют чаще большую информацию в полях, которые разброшены на несколько страниц, каждая из которых имеет смысловую группу полей, и сменяется по мере заполнения предыдущей. Таким приемом часто пользуется интернет банкинг, пример: Пользователь который хочет заказать банковскую карту онлайн, перейдя на сайт может увидеть большое количество форм длинною в пару экранов, что в свою очередь возможно не отпугнет от заказа, но скорее всего заставит заняться этим потом, а мы знаем как легко найти другой банк, который может показаться более удобным. В идеале пользователь должен увидеть логичную структуру форм, первая страница могла содержать группу полей “Ваши данные”, после “Данные вашего паспорта”, последняя группа “Выберите пункт выдачи”. И в данном случае пагинация формы это не просто совет, а необходимость которая достаточно сильно меняется процент конверсии. В данном примере как и выше играет роль геймификация, нам нравится достигать успехов(Которые подразумевает правильное введения каждой страницы одной формы) пусть даже маленьких но не маловажных.

Заключение

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

Образно выражаясь в реальном мире происходит практически такая картина
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade