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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что стоит делать:

• Провести A/B-тестирование, чтобы определить лучшее место для размещения 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/