Product University

Лендинг

Инструкция по созданию эффективных целевых страниц
Выпуски 14, 15
Перевод статьи Julian Shapiro

Постарайтесь следовать шаблону

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

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

Я объясню, как структурировать информацию на странице, написать текст, сделать оформление и максимально увеличить конверсию продаж. Здесь собрано всё, что вам необходимо знать.

Почему это важно

Качественная главная страница — это не просто приятная мелочь. Это первое впечатление, которые производит ваш сайт. Чем лучше первое впечатление, тем выше ваши показатели привлечения клиентов.

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

Представьте, что 75% трафика пользователей, пришедших на ваш сайт, уходят с него, посмотрев лишь главную страницу.

Вот что значит «первое впечатление». Не стоит его недооценивать.

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

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

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

Не нужно им мешать.

Разновидности целевых страниц

Для начала определим три типа целевых страниц:
  • Главная страница — ваш основной инструмент для привлечения внимания самых разнообразных посетителей.

  • Целевая страница для персоны — страница, где вы подгоняете ваш посыл под определённую целевую аудиторию.

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

Я сосредоточусь на том, какой должна быть главная страница. Это то, с чего всё начинается.

Подход к созданию главной страницы

При создании целевой страницы всегда учитывайте потенциальную конверсию посетителя. (Конверсия в данном случае — это переход к следующему этапу воронки роста.)

Конверсию можно представить в виде уравнения:
Коэффициент конверсии = Желание — Энергозатраты — Замешательство
Иными словами, чтобы увеличить коэффициент конверсии, мы увеличиваем желание посетителя и понижаем его или её энергозатраты и замешательство.

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

  • Снижение энергозатрат — Понижаем объём работы, которую нужно сделать посетителям, чтобы они не почувствовали усталость или раздражение и не ушли с сайта раньше времени. Как? Будьте кратки, пускай каждое слово и элемент дизайна будут наполнены смыслом.

  • Уменьшение замешательства — Не сбиваем посетителей с толку пространным или невразумительным посылом. Каждое предложение должно быть понятным. Посетителю должно быть очевидно, какое действие нужно предпринять следующим (например, зарегистрироваться или совершить покупку). Убедитесь, что элементы дизайна, которые отвечают за действие (например, кнопки), невозможно не заметить.
Дело в том, что создание целевой страницы начинается совсем не с её дизайна. Первым делом нужно довести до совершенства ваш посыл. Вы решаете, что необходимо сообщить посетителям, и только потом придумываете, как всё это будет выглядеть.

Иначе говоря, в вопросах роста дизайн уходит на второй план. Почти всегда в приоритете именно посыл.

Придумывание целевой страницы

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

  • Затем важно придумать текст и найти мультимедиа, которые смогут чётко и ясно рассказать об этих преимуществах.

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

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

Ценностное предложение

Разработка ценностного предложения

Ценностное предложение — это качество вашего продукта, которое сопровождается выгодой.

Например, ваш продукт может обладать такими качествами, как быстрый и безопасный. Ниже я приведу три примера выгоды, которая сопровождается качество «быстрый», чтобы создать отдельные ценностные предложения:
  • Качество: Быстрый, Выгода: Быстрый результат, Ценностное предложение: Работайте быстрее.

  • Качество: Быстрый, Выгода: Больший результат, Ценностное предложение: Успевайте сделать больше.

  • Качество: Быстрый, Выгода: Большая эффективность, Ценностное предложение: Сэкономьте своё время.
Все три варианта основаны на одном качестве — скорости, но каждое из них отражает уникальный результат скорости. Иными словами, презентует уникальную выгоду.

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

Вот ещё один пример, чтобы закрепить эту информацию в голове. В этот раз разберём такое качество, как «безопасный». Допустим, мы рекламируем приложение для обмена сообщениями.
  • Качество: Безопасное, Выгода: Конфиденциальность, Ценностное предложение: Ваши сообщения видят только друзья.

  • Качество: Безопасное, Выгода: Защита, Ценностное предложение: Если ваш телефон украдут, своровать данные будет невозможно.
Это довольно незатейливый процесс. Тем не менее, почему-то некоторые этим пренебрегают. Почти все клиенты, с которыми доводилось работать моему агентству, сочиняют свой рекламный текст на ходу.

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

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

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

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

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

  • В третьей колонке перечислите самых ценных целевых потребителей (покупательских персон). Работа с этой колонкой не связана с двумя первыми. (Самые ценные — это те, кто больше всего платят.) Третья колонка послужит вам напоминанием о том, какой аудитории вы презентуете свой продукт. К каждому типу целевого потребителя припишите по два преимущества вашего продукта, которые имеют для такого потребителя наибольшее значение.

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

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

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

Посетители уходят с сайта
  • Упущенная возможность сбыта
Посетители читают раздел ЧАВО
  • Это долго и скучно
Поддержка пользователей по эл. почте.
  • Большинство предпочитает не тратить на это время

Что у вас лучше

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

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

Лучшие клиенты

Руководитель отдела маркетинга
  • Коэффициент конверсии
  • Объём трафика
Директор по прибыли
  • Уменьшение оттока клиентов
  • Увеличение среднего дохода на пользователя/пожизненной ценности клиента
Руководитель отдела продаж
  • Увеличение количества перспективных контактов
  • Точное определение перспективных контактов
Главная хитрость этой системы заключается в том, что вы придумываете ценностное предложение на основе сравнения вашего товара с плохими альтернативами, которыми пользователям пришлось бы довольствоваться, если бы у них не было вас. Это позволит вам сосредоточиться на преимуществах, которые действительно имеют значение для потребителя.

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

Где применять ценностные предложения

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

Короче говоря, ценностные предложения — это преимущества продукта, которые подталкивают посетителя сайта к конверсии.

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

Презентация ценностных предложений

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

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

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

  • Избавляйтесь от лишних слов — Присутствие каждого слова на вашей странице должно быть обусловлено необходимостью. Если вы можете избавиться от слова, не навредив привлекательности, ясности и функциональности предложения, сделайте это. (Чрезмерная многословность потребует от посетителей больших усилий, а значит, они скорее прочитают текст по диагонали.) Совет: избегайте клише, вроде «инновационный», «мощный», «лучший» и т. д. Эти слова слишком часто используются для описания других товаров, а это значит, что посетители вашего сайта их проигнорируют. Лучше всего конкретно описать, чем ваш продукт отличается от остальных.

  • Не нужно включать в вашу презентацию всё подряд — чем больше посетителям сайта приходится читать, тем меньше они в итоге читают. Постарайтесь не дать посетителям повод читать ваш текст по диагонали. Лучше примените подход 80/20: Всегда работайте с двумя-тремя подпунктами, в которых передаётся основная ценность.
Всегда держите доведённые до идеала ценностные предложения под рукой. Скоро они понадобятся вам при работе со страницей.
Вопреки очевидному, «лаконичный» — не значит «краткий»
Все клиенты, с которыми я работал, раньше или позже спрашивали меня, почему созданная мной целевая страница такая длинная. Вот мой ответ: Если каждое слово отражает уникальную и убедительную ценность, о длине не стоит беспокоиться. Длина даёт больше пространства для привлечения внимания разных типов клиентов.

Я не занимаю это пространство повторениями и лишними словами. Я использую его для создания целостной картины.
«Ёмкий» — не значит «краткий». Это означает хорошее соотношение идей и слов.
— Пол Грэм

Шаблон целевой страницы

Наконец, настало время разобрать шаблон целевой страницы. Простите, что мы до него так долго добирались.

Начните работу со следующего шаблона и отклоняйтесь от него, только если у вас уже получилось его реализовать, и теперь вы хотите провести A/B-тестирование его вариантов:
  • Панель навигации (Navbar): Вверху страницы, где значатся ваш логотип и навигационные ссылки.

  • Hero: Основной раздел вверху страницы, куда входят текст вашего заголовка и подзаголовка, а также привлекательное изображение.

  • Социальное доказательство (Social proof): Логотипы заметок в СМИ или известных компаний, ставших вашими клиентами.

  • «Призыв к действию» (Call-to-action, CTA): Кнопка регистрации и лаконичный призыв на неё нажать.

  • Характеристики и возражения (Features): Расписанные ключевые ценностные предложения.

  • Повторный «призыв к действию»

  • Нижний колонтитул (Footer): Менее значимые ссылки.
Вот как это выглядит:
Я расскажу подробно о каждом разделе. Откройте в соседней вкладке PersistIQ.com и поглядывайте туда по мере чтения, чтобы понимать, что к чему. Этот сайт оформило моё агентство, приблизительно следуя данному шаблону целевой страницы.

Элемент — панель навигации

Элемент — панель навигации
В панели навигации должны быть лишь:
  • Логотип
  • По желанию: Ссылки на основные разделы главной страницы
  • Ссылки на другие страницы сайта
  • Кнопка призыва к действию (например, «Зарегистрироваться»)
Чем меньше ссылок, тем лучше заметен первый призыв к действию. Будьте избирательны.

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

Элемент — Hero

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

Он состоит из текста заголовка и подзаголовка, а также зачастую изображения.

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

Но для начала давайте разберёмся с изображением этого раздела.
Hero — изображение
Начнём с разбора изображения этого раздела.
Назначение изображения — наглядно представить ценностное предложение, изложенное в заголовке и подзаголовке.

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

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

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

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

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

Заметьте, что это не просто мой субъективный взгляд на оформление веб-страниц. Обширные опыты показывают, что конверсия увеличивается, когда посетители мгновенно понимают, что вы им продаёте, благодаря изображению. Это ведь логично, так?

Делайте то, что логично, а не копируйте вредные дизайнерские привычки других.

Это основной совет данного руководства: всё должно быть буквальным, конкретным и ясным. В интернете столько шума, что вы сможете выделиться, просто сразу перейдя к делу.
Основное достижение любой рекламы — это убедительность, и нет ничего убедительнее, чем сам продукт.
— Лео Бёрнетт
Hero — заголовок
В этом разделе есть два текста: заголовок (основной текст) и подзаголовок.

Начнём с заголовка.

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

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

Вот как понять, достаточно ли полно ваш заголовок описывает вашу работу/продукт: Если посетитель прочитает только этот текст на странице, поймёт ли он, что именно вы продаёте?

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

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

«Как?» — это именно то, что люди хотят знать, причём немедленно.

Как выглядит хороший заголовок-описание? Например, так:
  • Для инструмента веб-дизайна: «Наглядно создавайте и оформляйте сайты с нуля. Без работы с кодом.»

  • Для сервиса доставки продуктов: «Доставка продуктов в течение часа. Попрощайтесь с пробками, парковкой и длинными очередями.»

  • Для сервиса аренды домов: «Арендуйте чужие дома. Узнайте город изнутри, будто вы с ним давно на „ты“.»
Ах, вот оно что! Эти заголовки помогают понять, что продаётся на сайте. Мне не нужно искать никакую дополнительную информацию.

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

Но нельзя просто выставить ценностное предложение и всё. Я расскажу вам об особом способе написания отличных заголовков.

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

Вот несколько примеров ценностных предложений приложения для видеозвонков:
  • ‍Быстрое общение с кем угодно

  • Общайтесь при помощи телефона, планшета или ПК

  • Автоперевод разговоров в реальном времени с любого языка

  • Отправка расшифровки каждого разговора на вашу почту
Большинство этих ценностных предложений типичны для многих приложений с видеозвонками. Заголовок слишком ценен, чтобы писать в нём что-то общее и заурядное. Лучше найти преимущество, которое будет самым убедительным, при этом честно отражая основную ценность продукта.

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

Это ценностное предложение можно переделать в заголовок следующим образом: «Автоматический перевод ваших видеозвонков с человеком из любой точки мира.»

А вот «Отправка расшифровки на вашу почту» — это ценностное предложение, которое, напротив, не отражает основное назначение продукта. Это сервис расшифровки аудио? Нет, это приложение для видеозвонков. Следовательно, этому ценностному предложению не место в заголовке.

Вот ещё один пример неправильного ценностного предложения в заголовке: «Быстрое общение с кем угодно.» Заголовок с этим ценностным предложением мог бы выглядеть следующим образом: «Найдите собеседника для видеозвонка меньше чем за 30 секунд.»

Но это плохой заголовок, так как скорость — скорее всего, не то качество продукта, из-за которого пользователи предпочитают одно приложение для обмена сообщения другому. Значит, такой заголовок не звучит убедительно.

Давайте ещё раз обратимся к примерам хороших заголовков, перечисленным ранее. Обратите внимание на то, что основное качество продукта отражено в первом предложении каждого заголовка:
  • Для инструмента веб-дизайна: «Наглядно создавайте и оформляйте сайты с нуля. Без работы с кодом.»

  • Для сервиса доставки продуктов: «Доставка продуктов в течение часа. Попрощайтесь с пробками, парковкой и длинными очередями.»

  • Для сервиса аренды домов: «Арендуйте чужие дома. Узнайте город изнутри, будто вы с ним давно на „ты“.»
Итак: Выделите ценностное предложение продукта, о котором можно рассказать в заголовке, чтобы отразить 1) что делает вас уникальными, 2) что именно вы предлагаете.

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

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

Вот как можно закончить заголовок, отвечая на вопрос «почему?»:

«Riley напишет вашим лидам в области недвижимости за вас, чтобы провести их автоматическую оценку

«Автоперевод ваших разговоров с иностранцами — это гарантия того, что учить любой язык будет весело

Ещё раз обратимся к предыдущим примерам. Заметьте, что второе предложение всегда указывает на то, почему первое предложение имеет ценность.
  • Для инструмента веб-дизайна: «Наглядно создавайте и оформляйте сайты с нуля. Без работы с кодом.»

  • Для сервиса доставки продуктов: «Доставка продуктов в течение часа. Попрощайтесь с пробками, парковкой и длинными очередями.»

  • Для сервиса аренды домов: «Арендуйте чужие дома. Узнайте город изнутри, будто вы с ним давно на „ты“.»
Наконец, вот несколько примеров неудачных заголовков:
Плохой: «Приложение Forest: будьте сосредоточены, живите в моменте.» Слишком похоже на слоган.
Лучше: «Forest — это приложение, которое убережёт вас от телефонной зависимости. Будьте сосредоточены на том, что действительно важно.»

Плохой: «Платежи без лишних хлопот.» Сейчас существует бесконечное множество сервисов обработки платежей. Этот текст никак не объясняет, чем данный сервис лучше других и для кого он создан — для компаний, фрилансеров, покупателей, сайтов онлайн-торговли?

Лучше: «Принимайте платежи в один клик. Уметь программировать не обязательно.»

Плохой: «Увеличьте свою команду разработчиков.»
Лучше: «Пригласите удалённых старших разработчиков в свою команду. Лучшее качество работы за меньшую цену.»
Совет: лучше всего составить заголовок из 6−12 слов, чтобы его можно было быстро прочитать.
Когда я пишу рекламный текст, мне не нужно, чтобы он казался вам «изобретательным». Мне нужно, чтобы он заинтересовал вас настолько, чтобы вы купили продукт.
— Дэвид Огилви
Hero — подзаголовок
Если в заголовке объясняется, чем вы занимаетесь, то в подзаголовке нужно описать, как вы это делаете. Людям важно это знать. (Не просто так миллионы людей читают Википедию.)

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

Кроме того, когда посетители узнают ответ на этот вопрос, ваше решение начинает интересовать их ещё больше.

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

  • Подзаголовок приложения для видеозвонков: «Наша команда расшифрует и переведёт ваш звонок на более чем 20 языков в реальном времени.»
У этого правила «ответьте на вопрос „как?“» есть два исключения:
  • Самоочевидные товары: если ответ на вопрос «как?» относительно вашего продукта очевиден (например, если в заголовке значится «Фотоагентство» или «Продажа матрасов»), используйте подзаголовок, чтобы разобраться с основными опасениями посетителей или объяснить им, чем вы отличаетесь от конкурентов. Это нужно сделать одним ёмким предложением.‍

  • Новые, нишевые товары: если люди ещё почти ничего не знают о вашей категории товара, используйте подзаголовок, чтобы объяснить, почему-то, что вы продаёте, имеет ценность.
Совет: старайтесь уложить подзаголовок в 10−13 слов, иначе они с заголовком будут смотреться, как два абзаца текста.
Элемент — социальное доказательство
Мы лаконично описали, что делаем и почему, и теперь настало время придать нашим словам убедительности при помощи социальных доказательств.
Раздел социальных доказательств — это коллаж из логотипов, отражающих упоминания в СМИ и/или самых известных клиентов вашей компании. А если ваша компания работает в сфере онлайн-торговли, можно указать, сколько у вас клиентов (если это действительно впечатляющая цифра).

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

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

Элемент — призыв к действию

Ваш раздел призыва к действию (Call-to-action, CTA) побуждает посетителей перейти на следующий этап вашей воронки — зарегистрироваться или добавить товар в корзину.

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

Нужно чётко объяснить, что пользователь получит, нажав на эту вашу кнопку. Например, «Получите новый логотип всего за 24 часа.»

Не нужно использовать популярные фразы вроде «Получить бесплатную пробную версию». Все уже столько раз видели этот текст, что теперь его просто игнорируют. А ещё он не напоминает посетителям, почему им стоит зарегистрироваться.

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

Примеры глагольных словосочетаний:
Перейти к панели управления →
Начать пробный период →
Загрузить объявления →
Воздержитесь от кликбейтных текстов вроде «Получить руководство бесплатно!» По крайней мере, если не держите своих пользователей за дураков. (Некоторые компании, особенно те, которые проводят семинары, именно таким подходом и руководствуются.)
Визуальный контраст
Текст кнопки призыва к действию отвечает за то, чтобы посетитель совершил это самое действие, а её дизайн обращает внимание пользователя на то, что у него вообще есть возможность что-то сделать.

При создании кнопки призыва к действию нужно придерживаться двух правил:
  • Она должна выделяться — кнопка ни в коем случае не должна сливаться с остальной частью страницы. Используйте в качестве её фона цвет, контрастный основным цветам страницы. По размеру кнопку сделайте чуть больше, чем вам хотелось бы.

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

Элемент — характеристики и возражения

Если один только раздел «hero» не приносит достаточной конверсии (а так часто бывает), полноценно презентовать продукт должен раздел характеристики.

Именно эту часть шаблона мы будем сейчас разбирать.

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

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

Каждый подраздел характеристики состоит из трёх элементов:
  • Заголовка, в котором заявлено ценностное предложение

  • Абзаца, который разъясняет ценностное предложение и разбирается с претензиями

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

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

Вы когда-нибудь писали по учёбе сочинения из пяти абзацев? В его план входят:
  • Введение

  • Абзац с обоснованием № 1

  • Абзац с обоснованием № 2

  • Абзац с обоснованием № 3

  • Заключение
В введении указывается утверждение. Затем необходимо привести три аргумента, которые обосновывают это утверждение. В заключении нужно подвести итог сказанному.

Целевая страница должна следовать той же логике:
  • Введение — заголовок и подзаголовок. Здесь вы приводите своё утверждение.

  • Абзацы с обоснованием — характеристика/претензии. Каждый абзац должен обосновывать первоначальное утверждение.

  • Заключение#nbsp;— последний раздел с призывом к действию.
Посмотреть, как излагать маркетинговые материалы в ключе повествования, можно здесь.
Итак, вернёмся к разделу характеристики и рассмотрим три его составные части поподробнее.
Характеристика — заголовок ценностного предложения
Напишите заголовок из 3−5 слов, описывающих ценностное предложение. Избегайте размытых формулировок вроде «Улучшите продажи» или «Преобразите ваш рабочий процесс». Нет, лучше прямо опишите ценностное предложение, чтобы посетители могли быстро решить, интересует ли оно их, и стоит ли им читать дальше этот абзац.

Вот заголовки раздела характеристики для презентации переносного гриля:
  • Пеките и жарьте
  • Без подготовки и чистки
  • Готовьте не только мясо
Характеристика — абзац
Напишите абзац из трёх ёмких предложений или составьте список из нескольких ключевых пунктов.

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

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

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

Когда стоит углубиться в детали?

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

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

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

Отличным вариантом будет использование автопроигрывающейся анимации в GIF или SVG. Проще показать, чем объяснить.
Совет: если вы решите показать скриншот панели управления вашего SaaS-продукта, и текст окажется слишком мелким для чтения, переделайте изображение в Sketch, исключив все маловажные элементы пользовательского интерфейса и текста.

Стоит ли вставлять видео?

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

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

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

Это значит, что в большинстве случаев лучше обойтись без видео.

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

Если ваш продукт входит в эту категорию, руководствуйтесь следующими правилами:
  • Переходите сразу к делу — опишите ваш продукт за 5 секунд. Не тратьтесь на введение.

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

  • Похвастайтесь привлекательными свойствами вашего продукта — покажите его в действии от начала до конца. Дайте полную картину, но ускорьте все неинтересные разделы видео.

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

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

  • Завершите видео призывом к действию — в конце ролика постарайтесь смотивировать пользователя предпринять необходимое действие. Объясните, почему такой поступок будет для них выгодным.
Вставить видео можно куда угодно на страницу. Например, оно может висеть отдельно или в разделе «hero», а также может стать дополнением абзаца с описанием свойства вместо изображения (я предпочитают именно этот вариант).
Совет: посмотрите рекламные ролики самых популярных краудфандинговых кампаний на Kickstarter или Indiegogo, чтобы найти идеи для видео, которые можно украсть.
Диаграммы вместо видео
Если у вас нет веской причины делать видео, но вам нужно что-то наглядно показать, отличной альтернативой послужат диаграммы. Качественная диаграмма может за 5 секунд объяснить то, на что пришлось бы потратить 2 минуты видео.

Получение обратной связи по поводу страницы

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

  • Тем, кто специализируется на вашем рынке — узнайте, достаточно ли уникален и информативен ваш посыл, чтобы убедить людей с серьёзными намерениями выбрать вас, а не ваших конкурентов.
Попросите представителей обеих аудиторий оценить вашу целевую страницу по следующим шести критериям:
  • Конверсия: Готовы ли вы ввести данные вашей банковской карты или зарегистрироваться прямо сейчас? Если нет, чего вам не хватило для этого, что ещё вы бы хотели увидеть?

  • Интерес: Оцените по шкале от 1 до 10, удалось ли странице стабильно удерживать ваше внимание и интерес. Что бы вы посоветовали переписать или переделать в оформлении, чтобы вам было всё время интересно?

  • Ясность: Что было непонятно? Какие вопросы остались неотвеченными?

  • Продолжение: Нашли ли вы на странице что-то классное, о чём вам захотелось узнать ещё больше?

  • Краткость: Если бы вам нужно было удалить половину изображений и текста со страницы, какие из них вы бы убрали?

  • Недоверие: Что вызвало у вас следующую реакцию: «Бред! Это просто маркетинговая разводка!»?
Скопируйте и вставьте перечисленные выше критерии в электронное письмо и попросите как можно больше человек ответить на эти вопросы.
Совет: эти вопросы пригодятся, чтобы запросить обратную связь на любой ваш текст, включая публикации в блоге.

Оформление целевой страницы

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

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

  • Дизайн казался продуманным.

  • Каждый раздел был чётко структурирован и отделён от других.

  • Он отражал индивидуальность вашего бренда.

Как оформить сайт

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

Хоть я и программист, сам предпочитаю работать на Webflow, а не писать код для сайтов самостоятельно. Это пустая трата времени. У целевой страницы довольно статичная функция.

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

Работа с дизайнером

Чтобы найти дизайнера, зайдите на Dribbble и поищите специалиста, чья эстетика подходит вашему бренду. Свяжитесь с теми, кто вам больше всего приглянулись, и:
  • Расскажите, для чего нужен ваш продукт и почему с ним будет классно работать. (Зажгите в них интерес к работе!)

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

  • Дайте ссылки на другие сайты, оформление которых вас вдохновило.

  • Спросите о ценах и наличии свободного времени. (Хорошие фрилансеры обычно просят от 700 до 3000 долларов за страницу в зависимости от страны проживания. Работать с агентством стоит, только если у вас большой бюджет и вы хотите оформлять всё в стиле вашего бренда.)

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

Смартфоны в приоритете

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

Типы целевых страниц

Как я уже упоминал ранее, существуют три типа целевых страниц: главные страницы, страницы товаров и страницы для персон.

Пока что мы говорили лишь о главных страницах.

Страницы товаров

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

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

  • Увеличьте раздел характеристики с 3−4 свойств до 5−6. Подробно расскажите о каждом из них, ведь теперь вы понимаете, какой товар или свойство представляет наибольший интерес для данного посетителя.

Страницы для персон ЦА

Страницы для персон (например, для компаний/специалистов по продажам) — это страницы, на которые вы направляете трафик с рекламных объявлений.

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

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

  • Идентифицируйте аудиторию — называйте своим именем аудиторию в заголовке, подзаголовке и характеристике. Убедите посетителей, что ваша продукция соответствует их интересам. Например, если ваша реклама была нацелена на специалистов по продажам, в заголовке раздела «hero» можно написать: «Приложение для работы с таблицами, созданное для специалистов по продажам».
Страницы для персон мне нравятся тем, что они выполняют двойную функцию и также являются рекламно-информационным материалом: вы можете ссылаться на эти страницы для презентации вашего продукта, когда таргетируете ту же самую аудиторию вне платных рекламных объявлений.

Оценка конверсии целевой страницы

Сейчас я кратко расскажу, как оценить показатели конверсии целевой страницы.

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

Измерить коэффициент конверсии за определённый период, казалось бы, можно следующим образом:

[количество посещений с совершенной конверсией] / [общее количество посещений]

Но всё не так просто.

Чтобы достоверно измерить конверсию, нужно считать лишь подходящих посетителей:
  • Посетителей из территории, которую вы обслуживаете — не включайте в статистику людей из-за рубежа, если они не могут у вас ничего купить, иначе вы исказите реальные показатели конверсии!

  • Уникальных посетителей, а не общее количество посещений — если включать вообще все посещения в уравнение, то повторные посещения тоже будут засчитаны. Это нелогично, если конверсия посетителя может произойти лишь однажды (например, в случае регистрации аккаунта). Посетители могут зайти на сайт несколько раз перед тем, как конвертироваться. Если это вероятно в вашем случае, не используйте это значение для подсчёта конверсии. Лучше считайте количество уникальных посетителей за определённый срок. В идеале этот срок не должен превышать среднее время, которое уходит у человека на то, чтобы конвертироваться после первого посещения вашего сайта.
Эти показатели можно отслеживать при помощи Google Analytics. Многие SaaS-приложения также дополнительно пользуются инструментами вроде Mixpanel для получения более подробных данных с упором на события.

И ещё кое-что. Отслеживайте конверсию в долгосрочной перспективе для каждого источника:
  • Поисковые запросы в Google (органический трафик)
  • Контент-маркетинг (публикации в блогах)
  • Реклама
  • Социальные сети
  • Сайты и СМИ с ссылками на ваш сайт
Если конверсию не отслеживать по источникам, то большой трафик из одного канала с низким коэффициентом конверсии негативно скажется на среднем показателе общей конверсии, и можно ошибочно решить, что у вашей компании дела идут хуже обычного. На самом деле, в этом случае всего лишь нужно оптимизировать данный канал.

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

Правильные тексты для лендинга

Структура лендинга, как мы поняли, важна. Но теперь поговорим о самом главном — о текстах. Именно тексты продают ваш продукт, а структура и оформление этому помогают. И тексты нужны не только для лендинга, но и для тех каналов, которые ведут на лендинг. А самый эффективный и дешевый из каналов — контент-маркетинг. Мы подробно изучаем контент-маркетинг со всех сторон, а не только тексты, на нашем курсе «Истории, которые продают». За 15 дней вы получите свои первые результаты. Присоединяйтесь.

Истории которые продают

Курс контент-маркетинга за 15 дней

Аудитория — главный актив бизнеса. Контент — самый эффективный и дешевый способ ее собрать. Собери свою аудиторию вместе с нами в онлайне всего за 15 дней

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

Полезные шаблоны
каждую среду
на ваш email