![image](https://habrastorage.org/getpro/habr/post_images/028/988/2d9/0289882d9b444a088c0e2511e89a3304.jpg)
Лендинг — продающая страница, на которую приходит пользователь. Структура посадочной напрямую влияет на продажи. Мы собрали правила по созданию хорошего лендинга и примеры успешных редизайнов, которые помогли увеличить конверсию страниц.
Ключевые элементы классического лендинга:
- Цепляющий заголовок
- Призыв к действию (Call to Action или сокращенно – CTA)
- Описание товара и его преимуществ
- Отзывы счастливых покупателей
- Гарантии продавцов
Рассказываем, как заставить эти элементы работать.
4 правила хорошего лендинга
Одна страница – одна цель
Attention ratio — это соотношение между количеством гиперссылок на странице и целями страницы. У хорошего лендинга attention ratio составляет 1:1.
Это означает, что лендинг и все его элементы – от заголовка до дизайнерских решений — должны быть сосредоточены на достижении одной конкретной цели — побудить пользователя к действию: купить, скачать, подписаться.
Компания Unbounce, специализирующаяся на создании «продающих страниц», провела сплит-тестирование и выяснила: сокращение количества гиперссылок на посадочной с 10 до 1-й увеличивает CTR на 31%.
Формула «одна страница – одна цель» подталкивает пользователя в нужном направлении. Если лендинг предлагает несколько различных вариантов действия, посетителю сложно сделать выбор.
Напротив, если вы предлагаете конкретное решение проблемы, вы помогаете своим потенциальным клиентам принять это решение.
Вот яркий пример лендинга, который нарушает эту заповедь. Не надо так:
![1](https://habrastorage.org/getpro/habr/post_images/d31/f9d/83f/d31f9d83f0b376d4b057a27926318c36.jpg)
Покажите товар
Используйте в лендинге крупные изображения товара высокого разрешения. В тех случаях, где это уместно, добавьте функцию приближения (zoom), чтобы посетители могли детально рассмотреть товар.
Компания Mall.cz провела сплит-тестирование двух посадочных страниц. Лендинг с более крупными изображениями товара увеличивает продажи на 9,46%.
![2](https://habrastorage.org/getpro/habr/post_images/152/8eb/0ed/1528eb0ed45396e00307700af511b216.jpg)
Версия 2 увеличила конверсию на 9,46%
Видео также может улучшить конверсию. При этом известный онлайн-маркетолог Нил Патель советует ограничить длительность ролика максимум 5-ю минутами – на большее пользователя все равно не хватит.
Завоюйте доверие пользователей
По данным Dimensional Research, 90% потребителей решают купить товар после прочтения отзывов в интернете.
Пользователи доверяют мнению людей, уже попробовавших услугу. Не тратьте время посетителей на поиски отзывов в сети, а разместите их на своем лендинге.
Британская компания Express Watches включила в посадочную отзывы “счастливых покупателей”. Конверсия продаж на лендинге увеличилась на 58,29%.
Другой пример — ContentVerve. Перед компанией стояла задача побудить посетителей скачать бесплатную книгу. Они протестировали два варианта лендинга.
Изначальный вариант страницы выглядел так:
![3](https://habrastorage.org/getpro/habr/post_images/2e2/095/a51/2e2095a51255ff83aec2f3f5bf29babf.png)
Так выглядел лендинг после изменений:
![4](https://habrastorage.org/getpro/habr/post_images/b25/522/76d/b2552276de38f6334ba9ce102a59afc5.png)
Два из четырех отзывов поднялись на «первый экран». Это почти косметическое изменение привело к увеличению количества скачиваний на 64,53%.
Повысить доверие покупателей к компании поможет размещение на продающей странице информации о наградах, выдержек из публикаций в прессе, мнений экспертов.
Важно также убедить посетителя в аутентичности продаваемого товара. Express Watches, торгующей часами японской марки Seiko, провела тест, который помог увеличить конверсию на 107%.
Контрольная страница выглядела так:
![5](https://habrastorage.org/getpro/habr/post_images/6aa/e7f/90a/6aae7f90a5e09171ac87e3428bd67b67.jpg)
Эта же часть страница, после изменений:
![6](https://habrastorage.org/getpro/habr/post_images/63b/88c/56c/63b88c56c145b2c0c80d1fc64ce4ebd4.jpg)
Единственное, что они сделали: справа от изображения продукта плашку с обещанием лучшей цены заменили на сине-черную с текстом «Авторизованный дилер Seiko».
В результате компания получила фантастический рост конверсии.
Call to action
Элемент лендинга, к которому можно применить правило «чем больше – тем лучше» – кнопка с призывом к действию (CTA). Она должна выделяться на странице и содержать ясный и понятный посетителю призыв.
В идеале CTA должен соответствовать рекламному объявлению или ключевым словам в поисковой выдаче, по которым посетитель пришел на посадочную.
Автор курса по созданию лендингов Оли Гарднер из Unbounce разбирает ошибку с кнопкой CTA на примере сайта по доставке цветов.
Рекламное объявление сайта в Adwords:
![7](https://habrastorage.org/getpro/habr/post_images/819/d90/c22/819d90c22002807b7ae13803a5bbc6b3.jpg)
При этом лендинг выглядит так:
![8](https://habrastorage.org/getpro/habr/post_images/124/8d7/924/1248d7924fe35eb1c7d1bdc4cbbb08e5.jpg)
Оли Гарднер обращает внимание на «три магических слова», которые можно обнаружить в рекламном объявлении компании: «next», «day», «delivery» («доставка на следующий день»). При этом на лендинге этих слов нет. Вместо них, мы видим «Flowers, Plants and Gifts» («Цветы, растения и подарки»).
Месседж из рекламного объявления никак не соответствует месседжу лендинга. А значит посетитель, пришедший из поисковика, потратит много времени, чтобы найти то, что хочет. Скорее всего, он просто уйдет с сайта.
Вот как должен выглядеть правильный лендинг этой компании:
![9](https://habrastorage.org/getpro/habr/post_images/304/b44/e6f/304b44e6f229b951a76f36c08e36900d.png)
Главный месседж теперь занимает доминирующее положение на странице. Кроме того, появились кнопки заказа и отзывы покупателей.
Как редизайн увеличил конверсию на 77%
Еще один пример от Оли Гарднера – редизайн посадочной по продаже курса об искусстве лендинга.
Изначально страница выглядела так:
![10](https://habrastorage.org/getpro/habr/post_images/0ab/e66/e71/0abe66e71ce39571ab457c03243f1366.png)
После редизайна:
![11](https://habrastorage.org/getpro/habr/post_images/fd6/b5c/55e/fd6b5c55ea5f3b36ec7d04e8be052d43.jpg)
Что изменилось:
- Верх страницы стал мультибрендовым, что повышает доверие пользователей
- Заголовок обращается непосредственно к посетителю с вопросом, на который ниже дается ответ
- Появилось персональное обращение к клиентам от автора курса
В результате этих изменений конверсия страницы увеличилась на 77%.