11-шаговый процесс макета целевой страницы для еще большего количества конверсий [2022]

Средний коэффициент конверсии целевой страницы колеблется около 10%.

Неплохо, учитывая, что средний коэффициент конверсии веб-сайта колеблется в районе 3%.

Все еще… 10%?

Мы можем сделать лучше.

И все начинается с улучшения макетов целевых страниц.

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

Как?

Демистифицируя дизайн целевой страницы раз и навсегда и сводя макеты целевой страницы к 11 простым шагам.

Мы также собираемся поделиться 15 нашими любимыми полноразмерными макетами целевых страниц для вашего вдохновения (и файлом).

Давайте начнем.

После многих лет практики, более 10 000 экспериментов по оптимизации коэффициента конверсии и бесчисленных побед и поражений мы обнаружили, что каждый макет целевой страницы с высокой конверсией включает как минимум следующие 11 шагов:

1. Начните с творческого задания
2. Соберите копию
3. Определите свою информационную архитектуру (структуру)
4. Установите визуальную иерархию
5. Соотношение внимания должно быть как можно ближе к 1:1.
6. Произведите неизгладимое первое впечатление (в верхней части страницы)
7. Включите различные активы в свой дизайн
8. Добавьте контекст с помощью наглядных пособий
9. Поддержите преимущества функциями
10. Подтвердите претензии с помощью социального доказательства
11. Скажи еще раз, но по-другому (внизу страницы)

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

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

Введите: творческий бриф.

Большинство агентств и компаний портят творческий бриф или вообще исключают его.

Большая ошибка.

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

Что должно включать в себя ваше творческое задание?

Get/Who/To/By (комплименты Джулиана Коула):

Большинство используют шаблон краткого описания Get/Who/To/By для рекламного объявления. Но он отлично работает и для веб-страницы или для целевой страницы.

• Получите: опишите целевую аудиторию, которая увидит вашу целевую страницу.
• Кто: опишите основную проблему, с которой сталкивается ваша целевая аудитория (не предположения или интуиция, а реальные проблемы потребителей, выявленные в ходе исследования).
• Чтобы: описать, как вы хотите, чтобы ваша целевая аудитория реагировала, когда они увидят вашу целевую страницу (т. е. что она заставит их чувствовать? И какова ваша цель конверсии? Бесплатные пробные версии? Лидогенерация? Мгновенные продажи? Больше загрузок?)
• Кем: опишите сообщение, которое вы хотите передать, и ценностное предложение, которое будет мотивировать к действию.

Вот и все.

Например, мы хотим…

• получить малый и средний бизнес SaaS с годовым маркетинговым бюджетом не более 300 000 долларов…
• которые не смогли масштабировать свой перфоманс-маркетинг из-за бюджетных ограничений и доступа к талантам…
• записаться на бесплатную консультацию…
• показывая им , что наше агентство может увеличить конверсию на 25 %, снизить цену за конверсию (CPA) на 25 % и сократить штат сотрудников на 18 %.

Бум .

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

Теперь пора приступить к проектированию. Ну, почти…

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

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

Почему?

Ну, помните, как мы говорили о создании коробки для творчества?

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

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

Дизайнеру намного проще (и разумнее) манипулировать размером или размещением текста, чем копирайтеру манипулировать вашим сообщением, чтобы оно соответствовало дизайну. Вот почему бесплатные шаблоны целевых страниц от разработчиков целевых страниц, таких как Unbounce или LeadPages, более подвержены неэффективности.

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

Когда дело доходит до организации информации на вашей странице, у вас есть два основных варианта:

• F-образный
• Z-образный

F-образный паттерн — самая популярная информационная иерархия в Интернете.

И не зря.

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

Используйте F-образную иерархию для текстовых целевых страниц.

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

Используйте Z-образную иерархию для визуально насыщенных целевых страниц.

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

Как?

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

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

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

Коэффициент внимания относится к количеству ссылок на странице по сравнению с количеством целей конверсии.

Например, если ваша целевая страница имеет только одну цель конверсии (например, бесплатную пробную версию) и одну ссылку (кнопку CTA), это соотношение внимания 1:1.

Почему 1:1 оптимален?

Никаких отвлекающих факторов.

Каждая кампания, направляющая трафик на вашу целевую страницу, должна иметь одну цель, точно так же, как ваша целевая страница должна иметь одну цель. Вот и все.

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

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

Сосредоточьте внимание посетителей на одной цели.

Например, обратите внимание, что у этого лендинга Spotify есть только одна основная ссылка: ссылка для конвертации на их CTA. Вот и все.

Качественный дизайн целевой страницы подчеркивает вступление: вверху страницы.

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

Например, загляните в верхнюю часть нашей домашней страницы:

Несмотря на то, что многие посетители не будут совершать конверсию только из приведенного выше раздела сгиба (им нужно будет прокрутить вниз, чтобы собрать больше информации), создайте его так, как если бы они могли , включив в него все основные элементы:

• Заголовок. Заголовок вашей целевой страницы должен объяснять ваше предложение, определять вашу нишу и привлекать посетителей.
• Подзаголовок: Подзаголовок вашей целевой страницы должен добавлять контекст и детали к вашему заголовку. Если ваш заголовок описывает , какую ценность вы намереваетесь создать, ваш подзаголовок должен объяснять , как вы собираетесь ее создать.
• Снимок героя: Снимок героя вашей целевой страницы (основной визуальный элемент) должен добавить контекст к вашему предложению. Не используйте абстрактные формы или дизайн для заполнения пространства; вместо этого покажите посетителям ваш продукт или услугу в реальной жизни (наш сервис — это наши люди, поэтому мы показываем уродливую рожу Митчелла над сгибом)
• CTA: CTA-копия вашей целевой страницы должна привлекать клики, дразня обещанную землю и обрабатывая любые возражения в последнюю минуту.
• Форма (если применимо): форма вашей целевой страницы должна делать многое с помощью малого (поэтому щелкните гиперссылку и прочитайте статью полностью). Просто знайте, что на каждой надежной странице захвата лидов форма должна располагаться спереди и по центру над сгибом, где каждый может легко ее заполнить.

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

Почему они так важны?

Давай сыграем в игру…

Какой бренд ниже?

Теперь, какой марки это ниже?

Бренд 1: Mailchimp.

Бренд 2: Работа в команде.

Даже без логотипа большинство из вас узнают Mailchimp по яркому желтому фону, визуальному стилю и дуэту шрифтов.

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

Одним словом, разные активы имеют значение, потому что они создают узнаваемость .

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

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

Слишком много макетов целевых страниц используют визуальные элементы в качестве заполнителей пространства.

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

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

Например, обратите внимание, как Webflow использует анимированный GIF, чтобы проиллюстрировать мысль, которую они делают в своей копии?

Или обратите внимание, как Buffer делает то же самое, но с полуанимированными снимками экрана:

Вы правильно прочитали: поддержка преимуществ с функциями. А не наоборот.

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

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

Например, обратите внимание, как Джаспер (ранее Джарвис) никогда не упоминает такие функции, как ИИ или машинное обучение, хотя они являются основными функциями, обеспечивающими каждое из их преимуществ:

Или ClickUp, который мастерски исследует свои преимущества, используя вкладки с названиями их функций:

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

Что считается социальным доказательством?

• отзывы
• обзоры
• звездные рейтинги
• логотипы клиентов
• значки доверия
• награды
• данные о клиентах или пользовательская статистика
• количество клиентов
• лет в бизнесе
• контент, создаваемый пользователями
• одобрения (знаменитость или влиятельный человек)

И многое другое.

Где разместить социальное доказательство?

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

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

Например, целевая страница Джаспер перц имеет социальное доказательство сверху донизу, но они также разработали собственный раздел в своем макете:

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

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

На этот раз еще раз сформулируйте ценность, которую вы намереваетесь предоставить, и то, как вы собираетесь ее предоставить, только другими словами.

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

Вот и все — 11 простых шагов для создания макета целевой страницы с высокой конверсией.

Теперь давайте рассмотрим реальные примеры и дизайны, которые делают это правильно.

Теперь самое интересное: примеры.

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

Например, страница захвата потенциальных клиентов включает форму, а страница перехода по клику — нет.

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

• свинцовый захват
• Пролистать
• SaaS
• B2C (электронная коммерция/DTC)
• мобильные приложения

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

Но мы представим три наших любимых примера (со ссылками на полные лендинги), а также расскажем, что делает каждый из них таким особенным.

Давайте исследовать.

1. Трубка
2. КлиентБуст
3. Оскар

Трубка

Что мы любим: раздел социальных доказательств

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

КлиентБуст

Что мы любим: Техника хлебных крошек (многоступенчатая форма)

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

Мы называем это «методом хлебных крошек», или разделением более длинных форм на несколько шагов, задавая сначала наименее опасные вопросы, а самые опасные — последними (электронная почта, номер телефона, имя).

Почему многоступенчатая планировка?

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

Оскар

Что мы любим: наглядное пособие + форма

Форма захвата потенциальных клиентов Оскара автоматически заполняет изображение карты льгот для здоровья. Блестящий.

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

Погрузитесь глубже: лучшие примеры страниц захвата лидов для копирования

1. Джаспер (ранее Джарвис)
2. Семруш
3. Редактор X

Джаспер

Что мы любим: четкие коды брендов

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

• Темный фон
• Отличительные фирменные цвета (синий/фиолетовый/розовый)
• Робот Джаспер (талисман)

В этом нет сомнений. Когда кто-то попадет на эту страницу, кто уже сталкивался с креативом Джаспера, он его запомнит.

Семруш

Что нам нравится: преимущества, подкрепленные функциями

Как и в предыдущем примере с ClickUp, Semrush также размещает функции и преимущества своих продуктов в разделе с вкладками. И опять же, как и ClickUp, они делают акцент на преимуществах (что на самом деле волнует посетителей) и мало на функциях.

Редактор X

Что мы любим: минимализм

Макету вашей целевой страницы не нужно много, чтобы оказать большое влияние. И Editor X доказывает это.

Простой. Сложный. Краткий. Эффективный.

Насколько минимально? Всего три раздела:

• раздел героя (в верхней части страницы)
• раздел преимуществ
• второй призыв к действию

*Хотя мы бы также предложили добавить раздел социальных доказательств.

См. другие макеты: Страницы перехода по клику: определение, примеры, рекомендации

1. Пзизз
2. CashApp
3. Нара Бэби

Пзизз

Что нам нравится: последний раздел призыва к действию

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

CashApp

Что мы любим: раздел CTA

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

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

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

Нара Бэби

Что нам нравится: неизгладимое первое впечатление (в верхней части страницы)

Раздел Nara Baby's над сгибом ставит все галочки:

• Заголовок
• подзаголовок
• герой выстрел
• призыв к действию

Погрузитесь глубже: лучшие примеры целевых страниц приложений

1. Держит
2. Клуб долларового бритья
3. Ее

Держит

Что мы любим: наглядные пособия

Это легко. Держит витрины реальных людей, использующих их продукты в реальной жизни. Сделать невидимое видимым, помните?

Клуб долларового бритья

Что нам нравится: Z-образная информационная иерархия

В Dollar Shave Club меньше текста, что делает Z-образное расположение информации оптимальным.

Ее

Что нам нравится: визуальная иерархия

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

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

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

1. кликап
2. Хотяр
3. Канва

кликап

Что мы любим: раздел социальных доказательств

Как и во многих макетах SaaS, часто можно найти сторонние значки отзывов в качестве социального доказательства. ClickUp ничем не отличается.

Но что нам нравится в том, как ClickUp вручает свои награды, так это то, что они берут свои 20+ значков и непрерывно транслируют их, так что на самом деле кажется, что их больше. Тонко, но эффективно.

Хотяр

Что мы любим: наглядное пособие

Кто сказал, что наглядное пособие должно быть изображением или фотографией?

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

Расскажите о том, как сделать невидимое видимым. Отличная работа.

Канва

Что мы любим: соотношение внимания

Canva знает, как сосредоточить своих потенциальных клиентов на одной цели конверсии.

Нет панели навигации.

Нет ссылок в футере.

Никаких других призывов к действию, кроме «Зарегистрироваться».

Узнайте больше о макетах: примеры целевых страниц SaaS с высокой конверсией

Легко переусердствовать с дизайном целевой страницы и A/B-тестированием различных макетов.

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

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

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

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

Удачной конвертации!