calc-mockup

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

Дорогие друзья!

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

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

Постановка задачи

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

calc-interacadem-before

Решение задачи

Интерфейс

Для привлечения внимания посетителей и мотивации заполнения формы, сервис разделяем на две составляющие: форма и результаты расчета.

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

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

Логика заполнения

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

Обязательные поля. В нашем случае – для получения результатов важно заполнить все поля. Предложено оптимизировать форму.

calc-sxema

Текст

Следующий этап: редактирование текста.

Посчитайте стоимость обучения самостоятельно! Оставьте электронную почту и получите полный расчет 3-х вариантов обучения, включая самый бюджетный. Внимание! Вы получите адекватный расчет, если заполните в калькуляторе необходимые поля.

Целевое действие

После расчета следует мотивировать пользователя совершить целевое действие. Под расчетом в правой части размещаем кнопку «Заказать» с ограничением действия скидки по времени.

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

calc-after

Результат

Обновленный и Отзывчивый калькулятор запущен в производство. Оценка работы заказчиком — отзыв.

Отзыв Интеракадем

Креативно. Продуктивно. Адаптивно.

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

calc-thanks

Написать