/ Четыре шага к повышению конверсии

Посадочная страница (landing page) создается, чтобы помочь потенциальному покупателю «дойти до финиша» - из потенциального превратиться в реального клиента компании. Современный веб-дизайн использует разнообразные приемы, делающие удобным, понятным пользование сайтом. Далеко не всегда красивый дизайн приводит к желаемым результатам продаж.

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

Этап первый: готовимся!

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

Если хочется – значит, можно. Поэтому нужен анализ юзабилити сайта. Как его провести:

• открываем Google Analytics или Яндекс.Метрика;
• проводим анализ аудитории, поведения посетителей, их активность на сайте: что привлекает и вызывает трудности, на что обращает внимание посетитель страницы;
• составляем для себя список вероятных гипотез – чем вызвана низкая активность посетителей, высокий процент отказов.

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

Правка 1. Размещаем триггеры на первый экран

Даже если у вас:

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

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

За счет этого сократится длина лендинга, время обработки клиента – все важное он получит в первые минуты пребывания на странице.

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

Правка 2. Убираем отзывы под кат

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

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

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

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

Оставьте пользователю возможность удовлетворить любопытство: узнать о товаре максимум. Для этого используйте волшебную кнопочку: «Показать больше». Расскажите о том, что продаете, так вкусно, чтобы потенциальному покупателю захотелось получить больше информации. А тут вот она - вышеупомянутая кнопка, на которую хочется нажать: словно увлекательный фильм или книга, которая завлекает и хочется узнать – что дальше.
 

Правка 3. Делаем вкладки с локальной навигацией

Товар товару рознь – некоторые виды имеют разные варианты или критериев выбора достаточно много. Чтобы показать преимущества каждого варианта, потребуется подробное описание, которое покажет товар во всей красе. Теперь представьте, как будет выглядеть лендинг с длинными, «портяночными» описаниями каждого продукта.

Есть два варианта:

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

Что это даст? В первую очередь, удобство восприятия информации пользователем сайта (о нем мы уже говорили ранее). Лендинг станет короче, следовательно, загружаться сайт будет быстрее. Увеличится конверсия – локальное меню позволит насытить и перенасытить посетителя сайта информацией, которая вряд ли уложится у него в голове за один раз. А вот кнопочка наша волшебная, позволяющая получить более подробную консультацию специалиста. Цель достигнута – захват пользователя произошел.
 

Правка 4. Используйте на изображениях слайдеры pop-up

Грамотный веб-дизайн – это использование всплывающих окон (pop-up) практически везде, где есть на что кликнуть. Этот прием учитывает психологию пользователя: есть изображение небольшого формата – хочется на него кликнуть, увеличить.

Когда это крайне необходимо:

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

Выход один – использовать слайдер или, что еще лучше, - поп-ап слайдер. Он даст возможность представить покупателю товар во всей красе.

Что это даст? Сокращение длины лендинга – раз, облегчение восприятия пользователем информации – два. И возможность дать максимально подробное визуальное представление о товаре.
 

Практика. Создаем «правильный веб-дизайн»

Профессиональный специалист по веб-дизайну ошибки при создании сайта увидит сразу и на вопрос, почему сайт «не работает», даст совет.

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

Было:

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

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

Стало:

• сделан акцент на кнопки;
• уменьшено количество текста;
• изменена последовательность блоков: на первый экран была вынесена важная информация о деятельности проектной организации.

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

Изменено:

• Блок «Наши проекты» был поднят выше, изменен его формат. По клику открывается окно с фото, кратким описанием проекта, кнопкой – «У меня аналогичный проект».
• Блок «Направления деятельности»: слева даются ссылки, правая часть открывает подробные описания.
• Калькулятор сделан в формате теста (модная современная «фишка», которая хорошо работает. Пользователь не отвлекается при заполнении формы – он отвечает только на 1 вопрос.
• Блок «Почему стоит обратиться к нам» - выделены акценты, добавлена цена.
• Блок «Наши клиенты» - отзыв клиента открывается при клике.

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

Вывод:

Каким бы идеальным ни был веб-дизайн сайта – его всегда можно сделать лучше, чтобы добиться большего результата. Запустив сайт после «реконструкции», стоит через определенное время сделать новый анализ юзабилити, используя сервисы Google Analytics, Яндекс.Метрика и думать о том, как достичь еще больших вершин.