Стратегия первого экрана, или жизнь выше «линии сгиба»

Posted on by riasevastopol

Источник изображения

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

Сейчас у читателей отечественного блога имеется хорошая возможность взять очередную порцию бесплатных советов от одного из топовых копирайтеров, трудящихся в сфере прямых продаж (direct response): Scott Martin делится своим опытом создания above the fold-лендингов. Наслаждайтесь!

Истоки Above-The-Fold маркетинга: что такое первый экран
Линия сгиба в газетах и на сайтах
Что именно направляться разместить до линии сгиба
Первые экраны лендингов: комментарии и примеры
Вместо заключения

Истоки Above-The-Fold маркетинга: что такое первый экран

При подготовке дизайна лендинга направляться поместить ответственные (с реализовывающей точки зрения) элементы на первый экран сайта либо, иными словами, часть страницы «выше линии сгиба» (above the fold).

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

Эта аналогия честна, по причине того, что визитёров лендинга возможно смело сравнить с торопливыми прохожими, проходящими мимо газетных киосков. Эти две категории людей объединяет необыкновенная краткосрочность внимания: лишь в случае если газетный заголовок и/либо иллюстрация, расположенные до линии сгиба, приглянутся бегущему человеку, он, быть может, остановится, дабы приобрести газету и взглянуть на то, что расположено ниже линии сгиба; для визитёра лендинга «линией сгиба» будет нижняя граница экрана устройства, с которого он просматривает веб-ресурс.

Исходя из этого маркетологу необходимо разместить на «первом экране» данные, которая:

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

Как это сделать? Разглядим пара примеров представления настоящей и электронной линии сгиба в газетах и в сети.

  • 3 принципа оптимизации конверсии через визуализацию

Линия сгиба в газетах и на сайтах

Вот что расположили в видимой части (до линии сгиба) в собственной газете редакторы The Charlotte Observer:

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

А вот как выглядит электронная линия и первый экран сгиба online версии газеты The Los Angeles Times: та же самая тактика.

А вот что заметит читатель электронной версии английской газеты The Daily Telegraph: на стандартном мониторе без применения прокрутки покажутся все хорошие элементы, призывающие читателя листать дальше.

В частности, на первом экране (не считая всего другого) расположены заголовки в стиле «тизер» (дразнилка). Один из них, к примеру (на скриншоте на него показывает красная стрелка), предлагает определить «11 черт iPhone, каковые скрыла Apple на протяжении релиза iOS».

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

Итак, мораль всего написанного выше: то, что размещено до линии сгиба (на первом экране), крайне важно — и в газете, и на сайте, и на лендинге.

Исходя из этого следующий по значимости вопрос — что разместить до линии сгиба.

  • Как расширить ROI от рекламы? — Элементарно!

Что именно направляться разместить до линии сгиба

Scott Martin предлагает следующие 10 способов выяснить, что именно должно быть на первом экране высококонверсионной целевой страницы.

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

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

В первом случае до линии сгиба необходимо разместить прекрасно заметную CTA-кнопку с верным призывом, во втором — обеспечить наличие лид-формы на первом экране.

3. Придумайте заголовок, начинающийся со слова «Как». Бессчётные маркетинговые тесты показывают на достаточно действенную конвертацию заголовков, созданных по данной концепции. К примеру, компания, реализовывающая средство от подростковых угрей на лице, может на своем лендинге разместить заголовок «Как избавиться от угрей всего за 12 дней».

Ясно, что каждые заголовки нуждаются в тестировании, но из-за чего бы не начать с хорошего апробированного варианта?

4. Сформулируйте предельно понятное универсальное торговое предложение (оффер). Как показывает опыт, это вправду непростая задача. Но пользователь обязан четко осознать сокровище вашего коммерческого предложения, и для этого должно быть достаточно беглого взора на первый экран.

ясность и Простота — два показателя успешной реализовывающей страницы.

5. Не перегружайте лендинг графическими элементами. Данный принцип был выведен на основании анализа многих успешных целевых страниц: на большинстве из них нет лишних дизайнерских «шумовых эффектов». Пускай внешний вид первого экрана лендинга не «кричит» на визитёра, а содействует конверсии.

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

К примеру, если вы завлекаете визитёров на целевую страницу при помощи контекстной рекламы Yandex.Direct, опубликовав объявление с заголовком «14 дней, и у вас нет прыщей», то на посадочной странице выше линии изгиба не нужно размещать заголовок «Лишь натуральные средства от прыщей», так запутывая потенциального клиента: так как он ожидал выяснить, как за 2 семь дней избавиться от неприятности, а тут, выясняется, что-то про натуральность говорится.

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

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

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

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

  • Как дизайн CTA-кнопки может расширить конверсию?

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

10. И самое ответственное. Первый экран лендинга обязан сходу дать человеку сходу заметить ответ на вопрос: «Что мне это даст?». Как вариант, ответ на данный вопрос может находиться в форме одной из основных польз, помещенных в заголовке страницы, и практически воображающих собой ваше УТП (неповторимое торговое предложение).

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

А сейчас посмотрим, как эти приемы употребляются на реально существующих целевых страницах.

Первые экраны лендингов: комментарии и примеры

Итак, первым под «маркетинговый микроскоп» поместим лендинг, целевой аудиторией которого являются обитатели австралийского города Брисбен, имеющие агентов, каковые оказывают помощь им в управлении собственностью. Компания-клиент данной страницы предлагает отказаться от одолжений действующего консультанта в пользу новых менеджеров в обмен на 3 месяца бесплатного обслуживания.

Первое, что кидается в глаза, это простота дизайна и оформления. Заголовок «А понимаете ли вы, что недочёт хорошего сотрудничества с денежным менеджером ведет к денежным потерям и стрессу?» представляет собой риторический вопрос, ответ на что уже знает целевая аудитория. Это хороший прием для вовлечения в предстоящее чтение.

Оффер несложен и понятен: возможность взять 3 месяца бесплатного обслуживания.

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

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

Следующий пример — целевая страница, на которой представлено средство от акне:

  • предельно светло представлена цель страницы: продажа. На это конкретно показывают две СТА-кнопки: первая — в центре, вторая — в верхнем правом углу (обе с надписью «Order Now», другими словами «Заказать на данный момент»);
  • заголовок «Справьтесь с акне в один ход» составлен в духе «КАК-заголовка». Копирайтер слово «как» — это хорошая альтернатива для тех, кому надоели заголовки аналогичного типа;
  • страница имеет несложную и понятную структуру;
  • один из графических элементов — фото радующегося, довольного клиента;
  • на первом экране представлены социальные доказательства: возможно взглянуть видеоотзыв (первая кнопка в нижней части страницы); содержательно составлены подзаголовки на этих кнопках;
  • понятен ответ на вопрос: «что мне это даст»: ответ — легкий метод не допустить акне.
  • Муха на писсуаре, либо 5 правил убеждающего веб-дизайна

Вот еще один пример — страница оператора, предлагающего помощь и экономию на оформлении перелетов первым и бизнес-классами. На что возможно обратить внимание на этом лендинге:

  • в подзаголовке указана одна из польз (текст «Your one-stop Travel…»): нужно совершить всего одно воздействие, для получения результата.
  • размещено изображение мило радующейся стюардессы;
  • в нижнем левом углу приведены логотипы авиакомпаний и туроператоров в качестве социальных доказательств;
  • в заголовке четко обозначена еще одна польза: «Сэкономь до 70% на путешествии первым и бизнес-классами». Опять-таки, это «КАК-заголовок» с опущенной частицей «как» (Как сэкономить до 70% на путешествии первым и бизнес классами);
  • пункты 1, 2, 3 наглядно демонстрируют целый процесс;
  • целевая страница не перегружена элементами дизайна;
  • визитёру предоставлены на выбор два варианта связи: позвонить по телефону либо заполнить форму, размещенную в левой части страницы;
  • понятен ответ на основной вопрос «что мне это даст»: ответ — экономию времени и денег на организации путешествий первым и бизнес классами.
  • Действенные целевые страницы – 10 советов для повышения конверсии

Вместо заключения

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

Желаете собственный лендинг? Оформите заказ неповторимого дизайна целевой страницы от команды LPgenerator

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

По данным unbounce.com

Случайные статьи:

Проблема первого экрана лендинга на примере


Подборка похожих статей:

riasevastopol

More Posts