Проектирование посадочных страниц на сайте (landing page)

Что такое посадочная страница?

С точки зрения бизнеса — это страница, которая подталкивает пользователя совершить требуемое действие (покупка или подписка).

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

С технической точки зрения landing page – это страница, которая состоит из таких же элементов, как и обычная веб-страница (HTML, CSS, текст, картинки, видео и т.д.)

Три наиболее частых причины создания landing page:

  • заставить пользователя зарегистрироваться или подписаться на рассылку
  • продать конкретный продукт/услугу в конкретной ситуации (распродажа или промо-акция, набор на курсы)
  • заставить пользователя скачать или установить софт

Советы по структуре страницы:

  • Текст:
    • Очень важно использовать в посадочной странице УТП (уникальное торговое предложение) и демонстрацию посетителю (потенциальному клиенту) его прямой выгоды. И подкрепить все это отзывами, рекомендациями, успешными решениями.
    • Выражайтесь четко. Конкретно говорите пользователю, что именно он должен сделать и что будет потом.
    • Текст должен быть максимально понятным, небольшим и привлекательным для пользователя. Не пишите огромные простыни, здесь они ни к чему, в первую очередь думайте о факторе живого посетителя, а не поисковой машины. Потенциальный покупатель не должен углубляться в технические дебри или рассуждения о качествах товара, он должен бегло просмотреть текст и скорее перейти к оформлению покупки.
    • Правильно сформулированный продающий текст, который должен вызвать у посетителя порыв к действию.
  • Призыв к действию:
    • Регистрация, заявка и покупка в 1 клик.
    • Не злоупотребляйте призывами к действию. Если на сайте их немного, то можно сфокусироваться на том, чтобы пользователь предпринял желаемое действие как можно скорее.
    • Используйте кнопки. Кнопки — это понятный посыл и любой пользователь поймет, что по нему можно кликнуть. Хороший дизайн кнопки еще раз обращает внимание на call to action.
    • Ссылка (кнопка) для перехода к целевому действию должна располагаться на видном месте, пользователь не должен ее искать.
  • Картинки:
    • Типовая страница должна содержать привлекательное изображение, но не очаровательной полуобнаженной девушки, а релевантное.

Какой выбрать цвет?

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

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

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

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

Где разместить призыв к действию?

Что стоит делать:
  • Провести A/B-тестирование, чтобы определить лучшее место для размещения CTA.
  • Использовать несколько призывов к действию на длинной странице, чтобы разбить ее на несколько мини-секций.
  • Использовать направляющие подсказки (визуальные или текстовые), если CTA расположен под фолдом, в нижней половине страницы.
  • Создать грамотную маркетинговую историю, чтобы вести пользователя к вашему призыву к действию, где бы он ни был.
  • С помощью грамотно проработанного дизайна сделать CTA броским (контраст, пустое пространство вокруг).

Чего не стоит делать:
  • Не нужно бояться размещать CTA под фолдом, в нижней половине страницы.
  • Не стоит размещать CTA в и так заполненной различными кнопками области.
  • Лучше не использовать несколько призывов к действию, кроме случая, когда они служат одной и той же цели.

Примеры продающей страницы:

Что такое посадочная страница?

Что такое посадочная страница?


Что же делает посадочную страницу хорошей?

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

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

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

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

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

CTA-кнопки

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

Важнейшими элементами страницы являются:

  • заголовок;
  • изображение клиента вашей компании с коротким текстовым описанием — такая картинка усиливает ваш оффер, помогая посетителям представить себя на месте человека, который успешно пользуется вашим продуктом и получает от него максимальные выгоды;
  • подзаголовки и продающий текст, описывающие суть и выгоды вашего УТП;
  • отзывы, рекомендации и другие социальные доказательства;
  • призыв к действию;
  • белое пространство (white space).

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

Для людей важны 2 качества отзыва: 
  • его реалистичность,
  • содержательность.

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

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

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

Что делает страницу плохой?


  • Частой ошибкой является наличие альтернативных путей для пользователя, которая выражается в том, что человек, готовый совершить покупку, отвлекается на другие товары. Конверсионный путь не должен иметь «развилок»
  • Усложненное оформление покупки может оттолкнуть потенциального покупателя. Не требуйте от него введения множества данных, не заставляйте переходить по куче ссылок – покупка должна делаться легко.
  • Чрезмерно агрессивный призыв к совершению покупки или отсутствие какой-либо мотивации. Надо мягко без навязчивости предлагать сделать целевое действие, но и нельзя просто давать сухую информацию – покупатель может просто потерять интерес.
  • Продвижение посадочной страницы по большому числу запросов не приносит успеха, а наоборот лишь повышает количество отказов. Не следует использовать как можно большее количество слов, надо сосредоточиться на одной ветке запросов (а если запрос высококонкурентный – только на одном), только так на страницу можно привести не случайных посетителей, а целевую аудиторию.
  • Помните, что на привлечение внимания человека к офферу у вас есть всего 2.6 (всего год назад это цифра была 8) секунды. Если пользователь проведет этот промежуток времени просто ожидая пока загрузится сайт, будьте уверены — лид потерян. Лучше легкая простая страница (ее точно увидят), чем тяжелая с супер дизайном (его не увидят многие).
  • Для улучшения скорости загрузки страниц: новый тренд 2014 года — плоский дизайн — прекрасно справляется с функцией несложных и легких для загрузки элементов. Избавьтесь от параллаксов и прочих суперхитрых скроллинг-эффектов.

Итог:

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

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

Высоких вам конверсий!



Источники:
http://www.e-kontur.ru/blog/13523
http://habrahabr.ru/company/witget/blog/236513/
http://witget.com/blog/xoroshie-i-ploxie-lendingi-kak-sozdat-stranicu-kotoraya-dejstvitelno-povysit-konversiyu-chast-1/?utm_source=habr&utm_medium=article&utm_campaign=15-09
http://habrahabr.ru/company/witget/blog/228979/
http://habrahabr.ru/post/143923/
http://seopult.tv/programs/sites/sozdanie_posadochnyh_stranic/text/
http://www.cossa.ru/articles/155/20893/
http://xn----7sblfbprziktjd4gsb0b.xn--p1ai/oformlenie-teksta-dlya-posadochnyh-stranits/
http://lpgenerator.ru/blog/2014/08/11/kak-optimizirovat-posadochnuyu-stranicu-dlya-posetitelej-razlichnyh-etapov-voronki-prodazh/
https://seopult.ru/subscribe.html?id=104
http://www.websvit.com.ua/chto-takoe-posadochnaya-stranica/