Vsv-fin.ru

Финансовая грамотность
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Лендинг с корзиной

Как сделать товарный лендинг, который продает?

Попав на ваш сайт eCommerce, потенциальный клиент может взять курс на совершение покупки, а может незамедлительно ретироваться. Если с ресурсом или товарным лендингом что-то не так, вы рискуете потерять значительную часть покупателей раньше, чем те успеют попасть в воронку продаж.

Подобный сценарий вас не устраивает? В таком случае вам стоит провести «диагностику» сайта, и при необходимости «отремонтировать механизмы», отвечающие за уровень конверсии.

Согласно модели поведения Фогга, вероятность совершения человеком того или иного действия определяется как:

мотивация * сложность действия * триггер

А вот как это выглядит в графической форме:

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

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

Безусловным преимуществом Staples является простота оформления заказа. Для того, чтобы совершить покупку, нужно знать только пароль. Пара кликов — и товар уже в пути.

Как сделать интернет-магазин дружелюбнее к пользователям?

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

Кнопка «добавить в корзину»

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

Взгляните на product page компании Threadless:

А теперь посмотрите, что происходит после того, как в корзину добавляется тот или иной товар:

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

В интернет-магазине Ralph Lauren появляющееся после добавления товара окно исчезает спустя несколько секунд:

«Но почему бы не оставить окно корзины открытым?» — спросите вы.

Все дело в том, что в большинстве случаев посетитель интернет-магазина намеревается сделать только одну покупку. Таким образом, «положив» продукт в корзину, он не собирается изучать остальной ассортимент. Все, что ему нужно — как можно скорее оформить заказ.

Итак, пользователь добавил товар в корзину. Что должно произойти дальше?

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

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

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

Amazon переправляет пользователя, добавившего продукт в корзину, на соответствующую страницу, которая помимо необходимой информации содержит также несколько upsell-предложений:

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

Чего люди хотят от сайта eCommerce?

Если вы стремитесь к тому, чтобы пользователи чувствовали себя комфортно, дайте им две вещи:

1. Необходимую информацию

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

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

Корзина компании US Auto Parts полностью соответствует этим требованиям:

Страница содержит название, изображение и цену товара. Клиент без труда может добавить продукт в корзину или удалить его оттуда. Возможные способы оплаты указаны, внешний вид кнопки призыва к действию также не вызывает нареканий. Словом, у этой страницы есть все, чтобы генерировать прибыль.

В Gilt решили сделать ставку на простоту:

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

Визуальная иерархия

Хотите быть уверены в том, что покупателю не составит труда отыскать кнопку перехода к оформлению заказа? Возможно, вам стоит снабдить страницу сразу двумя такими кнопками (расположив одну из них выше корзины, а другую — ниже). Фирма 1800 Flowers поступила именно так:

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

Поле для ввода бонусного кода

Представьте ситуацию: посетитель интернет-магазина видит на своем экране довольно крупное поле, в которое можно ввести код для получения скидки:

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

Разочаровать покупателя — самый надежный способ спровоцировать его на то, чтобы «бросить» корзину, так и не совершив покупку.

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

Не скрывайте своих достоинств

Ваш интернет-магазин может похвастаться уникальной системой скидок, молниеносной доставкой и отзывчивой службой поддержки? Было бы странно с вашей стороны не напомнить об этом посетителям. Компания Asos, к примеру, заявляет о своих достоинствах без ложной скромности:

Не трогайте «брошенные корзины»

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

Человек ушел, так и не оформив заказ? Отправьте ему email с напоминанием и убедитесь в том, что корзина ждет своего хозяина в том виде, в каком он ее оставил.

Не заставляйте пользователей подписываться на вашу рассылку

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

Признанный специалист в области проектирования пользовательского опыта Джаред Спул (Jared Spool) приводит пример:

«Одна из компаний, работающих в сфере eCommerce, теряла огромные деньги из-за неудачной формы оформления заказа. Форма была предельно проста, и включала в себя два поля (для адреса электронной почты и пароля), две кнопки («вход в систему» и «регистрация»), а также одну ссылку (служившую для восстановления пароля). В чем же была проблема?

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

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

В итоге, компания отказалась от обязательной регистрации, и ее продажи выросли на $300 000 000 в год».

Как правильно организовать процесс регистрации?

  1. Укажите пользователю на преимущества, которые он получит в случае регистрации
  2. Предложите клиенту «создать новый аккаунт», вместо того чтобы предлагать ему «зарегистрироваться»
  3. Дайте посетителю возможность пройти регистрацию после совершения покупки, когда в вашем распоряжении уже будет иметься определенная информация о нем
  4. Позвольте пользователям приобретать ваши товары без прохождения процедуры регистрация
Читать еще:  Лендинг шаблон бесплатно

Работа с вернувшимися и новыми клиентами

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

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

Nana Macs предлагает за регистрацию скидку в 5%:

Этап оформления заказа

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

Начните с простых вопросов

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

Пример страницы, созданной в соответствии с данным принципом:

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

Заключение

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

Скрипт корзины для лендинга

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

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

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

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

Демонстрация работы скрипта

Как подключить корзину

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

Так как скрипт использует jQuery, то убедитесь, что он у вас подключен.

После подключения jQuery (обычно перед закрывающим тегом body) подключаем и инициализируем скрипт, там же добавим div, в котором и будет располагаться основная корзина.

Не забываем подключить и таблицу стилей:

Настройки корзины

С подключением закончили, теперь давайте займемся настройкой.

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

Итак, первое что мы сделаем — это укажем нашему скрипту обертку вашей карточки товара.

Для этого, в месте, где инициализировали скрипт указываем класс обертки карточки в параметре ‘productElement‘:

product__element — и есть класс моего блока с карточкой.

На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:

product__add-to-cart-button — класс моей кнопки.

У кнопки есть несколько обязательных атрибутов, в которых и хранятся основные данные о товаре.

  • data-sb-id-or-vendor-code — артикул или id товара;
  • data-sb-product-name — название товара;
  • data-sb-product-price — цена, разделенная точкой, если есть копейки;
  • data-sb-product-quantity — количество, по умолчанию укажите 1;
  • data-sb-product-img — полный путь к картинке;

Не обязательные атрибуты:

  • data-sb-product-size — размер. Задается, если вы используете опцию вывода размера в карточке товара. Подробнее о том, как это сделать в инструкции ниже.

Пример кнопки

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

Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами ‘+38‘, но вы можете поставить, ‘+7‘ или любые другие цифры.

Пока можно менять только их, но, если вы хотите иметь полный контроль над всеми цифрами, напишите мне и я сделаю.

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

Выбор количества

Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре ‘productQuantityWrapper‘. Например, я хочу, чтобы выбор количества располагался в теге div с классом ‘product__quantity’.

После добавления параметра ‘productQuantityWrapper’ cо значением ‘product__quantity’, кнопки выбора количества автоматически появятся на сайте в указанном блоке.

Выбор размера в карточке

Недавно появилась возможность добавлять размер, который в свою очередь, может влиять и на цену. Например, в интернет-магазине продают 3 размера пиццы — 32 см, 26 см или 16 см. От радиуса зависит и цена. Вы хотите, чтобы в карточке пользователь мог выбрать нужный размер.

Давайте я немного поясню суть работы. Вот так выглядит верстка блока с выбором размера у меня:

Для работы скрипта здесь важны атрибуты «data-sb-curent-price» и «data-sb-curent-size» и «data-sb-curent-id-or-vendor-code» так как в них содержаться параметры для подстановки цены, размера и артикула. То есть при размере 32 см, цена пиццы 320 рублей, при размере 22 см — цена пиццы 220 рублей и т.д. Если цена при любом размере остается одинаковой, просто укажите везде одну и туже стоимость. Аналогичная ситуация и с артикулом. Или укажите везде одинаковый, или вообще не используйте атрибут «data-sb-curent-id-or-vendor-code», если не планируете давать возможность добавлять один и тот же товар с разными характеристиками.

Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, span, со своим классом. У меня это выглядит так:

Теперь класс обертки «product__size» для блока с размерами и класс обертки цены «product__price-number» нужно передать в настройки скрипта:

Теперь при клике на элемент с размером из «data-sb-curent-price» подставится цена в «product__price-number». Если не совсем понятно, напишите мне, попробую разъяснить.

Последняя настройка, которая сейчас доступна это вывод мини-корзины. То есть кнопки, которая отображает статус корзины (показывает текущее количество товара в корзине) и вызывает, при нажатии на нее, модальное окно с основной корзиной.

Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре ‘smartBasketMinArea‘.

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

Для настройки отступов и внешнего вида, иконка и текст обернуты в теги с классами «smart-basket__min-icon» и «smart-basket__min-text».

Настройка почты для отправки

Для настройки отправки почты, нужно открыть файл config.php, который находится в папке /smartbasket/php/

Читать еще:  Как увеличить конверсию лендинга

Здесь нас интересуют 2 строки:

  • const SENDER = ‘sender@yandex.ru’;
  • const CATCHER = ‘catcher@list.ru’;

SENDER — это адрес, с которого будет отправляться письмо. CATCHER — адрес на который будет приходить письмо. Обратите внимание, что адрес отправителя должен быть реальными, чтобы не возникало проблем с доставкой.

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

Раскомментируйте эти строки и заполните в соответствии с вашим почтовым сервисом. Возникнут вопросы — пишите.

Обязательность полей для заполнения пользователем

В новом обновлении, как вы и просили, добавил еще одно поле для связи (email), теперь, если кому-то накладно звонить в другие регионы, они могут сделать обязательным поле для заполнения почты.
По умолчанию обязательным оставил только телефон, но вы можете это исправить в настройках. Для этого предусмотрено 2 параметра:

Чтобы сделать обязательным поле, поставьте ему значение «true». Чтобы сделать необязательным, укажите «false». Все это выглядеть может так:

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

Пользовательское соглашение

В последнем обновлении, как вы и просили, добавил чекбокс с принятием пользовательского соглашения. Настраивается аналогично другим параметрам:

  • isRequired — включает или отключает поле;
  • isChecked — автоматически делает отмеченным поле;
  • isLink — ссылка на соглашение.

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

Надеюсь, что ничего не упустил, если что — пишите!

Если нужна видео-инструкция с описанием процесса установки настройки, напишите в комментариях, я попробую сделать.

Некстайп: МиниМаркет – лендинг с корзиной и онлайн-оплатой

  • Готовое решение «Некстайп: МиниМаркет»
  • Редакция 1С-Битрикс «Старт», «Стандарт», «Малый бизнес», «Бизнес»или «Интернет-магазин + CRM»
  • Зарегистрировать домен

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

Ответы на все вопросы

Программа для парнеров 1С‑Битрикс

Главные преимущества

Настройка дизайна. Мы сделали удобную панель в публичной части сайта, где есть: настройка цвета, положение блоков на сайте, их отключение или включение, настройки отображение карточки товара;

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

Адаптивная верстка. Корректное и правильное отображение на любом мобильном устройстве. Сайт работает быстро как на планшете, так и на телефоне, что подтверждается тестами Google Mobile Friendly;

Возможность доработки. В основу мы заложили лучшие практики создания сайтов на 1С-Битрикс. Вносить изменения может даже начинающий программист;

Онлайн-оплата. Готовое решение включает в себя подключенный платежный сервис Яндекс.Касса. Все настройки доступны из административной панели;

SEO без ограничений. Разделы в каталоге, как и отдельные товары имеют свой URL адрес. Лендинг легко продвигается в поисковиках не теряя конверсии;

Полноценный модуль обработки заказов на редакции 1С-Битрикс: Старт;

Простое дублирование блоков лендинга и создание внутренних страниц.

Для каких сфер бизнеса решение подходит:

Рестораны доставки готовой еды;

Магазины мебели, фурнитуры;

Ритейлеры гаджетов, запчастей и комплектующих;

Магазин по продаже кофейного оборудования и сопутствующих товаров для кофейни (пример);

И многим другим, кто желает увеличить продажи или начать продавать в интернете в кратчайшие сроки.

Продвигайте лендинг без ограничений

Некстайп: Минимаркет первый готовый лендинг, который позволит выполнять все работы по SEO, как с полноценным сайтом. Каждый раздел с товаром и любая позиция имеет свой URL адрес. Оптимизируйте целый раздел каталога для поисковой системы или продвигайте каждую позицию, ограничений нет.

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

Все требования для работы по SEO в одном продукте:

Проведена Shema-разметка товаров и контактной информации;

Внедрен Open Graph для красивого постинга в социальных сетях;

Установка мета-тегов для отдельных URL адресов внутри сайта через стандартный функционал битрикса;

Простое внедрение счетчиков Яндекс.Метрики и Google Analytics

Настраивайте цели за 2 минуты. События для счетчиков вынесены в отдельные настройки.

Дизайн

В готовом лендинге Некстайп: Минимаркет применены лучшие практики UXUI.

Создайте свой неповторимый минимаркет, используя:

Базовые темы оформления с возможностью задать фирменные цвета;

2 варианта отображения шапки;

Отключение слайдера в шапке, если используете один рекламный баннер;

На баннере в слайдере добавляйте кнопки, которые позволят перейти пользователю в каталог или заказать звонок;

Перемещение блоков между собой, дизайн подстраивается автоматически;

Все иконки отлично отображаются на экранах с высоким разрешением и на дисплеях Retina;

Каталог товаров

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

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

Закрепляйте на товарах метки, привлекайте клиентов акционными предложениями, различными новинками.

Популярные товары

Выставляйте на первые позиции наиболее популярные товары из каталога. На таком месте продажи будут заметно выше.

Корзина

В Некстайп: Минимаркет предусмотрена корзина, где пользователь увидит количество товаров, общую сумму или сможет очистить ее при неправильном выборе.

Форма заказа

В новом готовом решении появился сервис, в котором вы можете сами создавать определенные свойства к оформлению заказа. Помимо стандартных свойств (ФИО, телефон и способ оплаты) можно добавить, например, время или способ доставки.

Все формы адаптированы под изменения в ФЗ-152.

Новости

Размещайте полезную информацию для пользователей.

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

Технологии

В готовом решении Некстайп: Минимаркет используются передовые технологии от 1С-Битрикс:

Полная поддержка ядра D7

Композит и автокомпозит

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

Продавайте больше, чем конкурент. При покупке готового лендинга Некстайп: Минимаркет получите скидку 40% на первый год хостинга от компании N-Space, на любом тарифном плане.

Как сделать лендинг продающим с помощью конверсионных элементов

Время чтения: 10 минут Нет времени читать? Нет времени?

Лендинги – это не романы, которые читают вдумчиво, не пропуская ни одного абзаца. Посетители посадочных страниц какие-то блоки скроллят по-быстрому, а другие изучают более внимательно. В этом можно легко убедиться с помощью карты скроллинга из «Яндекс.Метрики».

От элементов, которые внимательно просматривают, и зависит конверсия. Именно они определяют, совершит ли посетитель целевое действие или закроет ваш сайт и навсегда о нем забудет. Для удобства будем называть их конверсионными элементами (КЭ).

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

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

Оффер

Если вы смотрели вторую часть «Крепкого орешка», то наверняка помните сцену, где герой Брюса Уиллиса машет факелами перед идущим на посадку самолетом, пытаясь сориентировать пилота (спойлер: у него ничего не получилось, увы). Так вот, оффер – это ваши факелы. Если посетитель их не заметит, самолет пролетит мимо взлетной полосы.

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

Читать еще:  Как сделать красивый лендинг

Как составить конверсионный оффер

Предполагается, что вы уже провели маркетинговый анализ и знаете сильные стороны вашего предложения. Разделите лист бумаги или текстового редактора (кому как удобнее) на 3 столбика: «Удивление», «Боли», «Выгоды» и раскидайте по ним характеристики продукта.

Например, для очередного чудо-крема для похудения получится как-то так:

Выпускается в лимитированном количестве

Эффективен даже против выраженного целлюлита

Содержит экстракт горных эдельвейсов

Результат виден через 3 недели применения

Два по цене одного

Массажная варежка в подарок

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

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

Вернемся к примеру с чудо-кремом. Если основная ЦА – женщины с невысоким доходом, у которых нет возможности посещать дорогие СПА-процедуры и покупать антицеллюлитную косметику за сотни баксов, то в оффер нужно вынести характеристики, связанные с выгодой. «Избавьтесь от выраженного целлюлита за 3 недели. Только до 1 февраля: 2 средства по цене одного» – вот пример хорошего рабочего оффера для товара в бюджетном ценовом сегменте. И не нужно изобретать велосипед.

Если бы это был дорогостоящий крем из премиум-сегмента, то для ЦА в приоритете совсем другие вещи: уникальность, престиж, экологичность. Это нужно отразить в оффере. («Антицеллюлитный крем с экстрактом горных эдельвейсов. Победите выраженный целлюлит через 2 недели»). А информацию о скидках или спецпредложениях есть смысл разместить ближе к концу лендинга – это будет последний козырь, который подтолкнет посетителя на целевое действие.

Хороший пример комбинации выгод представлен в оффере сервиса SmmBox:

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

Но как быть, если, как в том анекдоте, «все такое вкусное» и каждая характеристика продукта видится вам ключевой, а в оффер все не влезет? В таких случаях будет уместным провести сплит-тестирование. Оно поможет выявить самый конверсионный вариант предложения (а также любого другого КЭ на лендинге).

Второй и третий экраны

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

Как сделать второй и третий экраны конверсионными

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

Вот хороший пример того, как все это выглядит:

А теперь пару слов об ошибках, которые снижают конверсию в первой трети лендинга:

  • Размещение на первом и втором экранах информации из разряда «О нас». Посетитель еще не решил, нужен ли продукт, а ему уже выкатывают историю компании, цитаты руководителя и прочую бесполезную пока информацию.
  • Перечисление преимуществ без их раскрытия. При виде некоторых лендингов складывается впечатление, что их авторам платили за каждую букву при чудовищно ограниченном бюджете. В высококонкурентных нишах нужно не просто показать, чем хорош ваш продукт, а еще и объяснить, за счет чего.

Лид-магнит

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

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

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

Какой лид-магнит выбрать для лендинга

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

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

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

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

Размещать лид-магнит можно на любом экране. Главное, чтобы он органично «встал» между другими смысловыми блоками.

Призывы к действию

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

А что такое полезный контент в контексте лендинга? Это все, что помогает посетителю составить впечатление о вашем продукте: каталоги, презентации, видеообзоры. И лучше не просто вставлять их на экраны, а призывать посетителей к просмотру: «Посмотрите, какие крутые дома мы строим», «У нас есть оттенки самых модных цветов – посмотрите сами», «Заходите в наш Instagram – там мы выкладываем самые свежие примеры работ».

На первый взгляд, это настолько просто, что и объяснять как-то неловко. Но почему-то многие «лендоделы» забывают о таких призывах и теряют в конверсии. А некоторых пользователей нужно буквально подводить за ручку к CTA-кнопкам.

Что касается самих CTA-кнопок, то текст на них тоже очень важен. Многие пишут его «на отвали», лишая лендинг определенной доли конверсии. Текст CTA-кнопки должен отражать основное преимущество вашего предложения, прописанное в оффере: не «Купить», а «Купить со скидкой 30 %», не «Узнать цену», а «Узнать, сколько будет стоить ваш новый дом» и т. д.

Фото- и видеоотзывы

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

Картинка в примере – фейк с «Пикабу», но вы наверняка поняли о чем речь.

Пользователи склонны верить реальным людям, а не каким-то абстрактным Сергеям, Валентинам или Ангелинам. Поэтому фото- и видеоотзывы убеждают лучше, чем текстовые. Кроме того, с них можно получить дополнительный трафик в соцсети, просто прикрутив CTA-кнопку: «Полную версию отзыва смотрите в наших группах VK и FB», «Больше отзывов в нашем Instagram» и т. п.

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

И напоследок – мини-подборка наших статей по лендингам. Читайте, внедряйте и делайте эффективные лендинги с хорошей конверсией:

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

Ссылка на основную публикацию
Adblock
detector