19 лучших примеров дизайна целевой страницы в 2019 году

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

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

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

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

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

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

Примеры целевых страниц, представленных в статье:

1. Shopify
2. Muzzle
3. TransferWise
4. Airbnb
5. Teambit
6. Wistia
7. Webflow
8. Nauto
9. Industrial Strength Marketing
10. Inbound Emotion
11. Velaro Live Chat
12. IMPACT Branding & Design
13. Unbounce
14. com
15. Trulia
16. Landbot
17. Webprofits
18. BLOOM
19. Conversion Lab

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

1. Shopify

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

2. Muzzle

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

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

3. TransferWise

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

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

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

4. Airbnb

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

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

5. Teambit

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

6. Wistia

Прежде всего, это целевая страница Wistia для бесплатной учетной записи. Сразу же видна форма с одним полем для создания учетной записи – голубой фон с минималистичным рисунком прекрасно контрастирует с ярко-белым полем формы.

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

7. Webflow

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

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

8. Nauto

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

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

9. Industrial Strength Marketing

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

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

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

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

10. Inbound Emotion

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

11. VelaroLiveChat

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

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

12. IMPACT Branding & Design

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

13. Unbounce

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

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

14. Bills.com

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

Возьмем, например, Bills.com. Чтобы узнать, полезна ли будет их консультация, ответьте на три вопроса, прежде чем вам будет показана форма. Она начинается так:

Затем вы отвечаете еще на два вопроса:

И последняя форма целевой страницы, где вы заполняете свою информацию:

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

15. Trulia

Trulia сделала нечто очень похожее на Bills.com со своей целевой страницей. Она начинается с простой формы, запрашивающей «адрес». Под этим полем формы находится ярко-оранжевая кнопка, которая хорошо контрастирует с изображением героя за формой и подчеркивает, что оценка будет персонализирована для вашего дома.

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

16. Landbot

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

17. Webprofits

Целевая страница Webprofits при помощи нескольких секретов сделает даже самую длинную целевую страницу – короткой.

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

Они также позволяют вам понять, что на самом деле делает Webprofits . На остальной части страницы представлена ​​подробная информация о том, что вы получите, когда передадите свою информацию. Кроме того, он включает в себя стратегические CTA, которые помогут вернуться наверх, чтобы заполнить форму, например «Let'sTalk».

18. H.BLOOM

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

Помимо своей красоты, на странице есть несколько замечательных элементов конверсии: форма над головой, четкое и краткое описание того, что произойдет при заполнении формы, и даже ярко-оранжевая кнопка «Отправить».

19. Conversion Lab

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

Когда вы нажимаете «Получить справку по целевым страницам», весь сайт перемещается, чтобы освободить место для формы. Вот как это выглядит, до нажатия:

И, когда вы нажимаете активную кнопку, форма меняется:

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

Идеи для целевой страницы

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

Вот несколько вещей, которые следует учитывать при создании целевых страниц:

• Привлекательный внешний вид: хорошо может помочь цвет целевой страницы и чистый пользовательский интерфейс. Посетители захотят узнать больше о ваших продуктах и увидеть доказательства ценности, которую вы предлагаете. №10 в нашем списке - InboundEmotion -отличный пример потрясающей веб-страницы.
• Меньше значит больше: пусть предложение или изображения делают большую часть разговоров, но обязательно включите в них любые и все описательные заголовки и вспомогательный текст, чтобы сделать целевую страницу понятной и убедительной. Это касается практически всех компонентов на странице: пробелы, простое копирование и более короткие формы.
• Держите посетителя на странице: При удалении главной навигации или любых отвлекающих обратных ссылок, менее вероятно ,что посетитель откажется от вашей страницы.
• Обмен в социальных сетях. Простой способ привлечения посетителей к вашей целевой странице - это использование кнопок общего доступа в социальных сетях, чтобы они могли распространять контент среди своих подписчиков в социальных сетях. Не забывайте, клиенты являются центром вашего маркетингового механизма.
• A / B-тестирование: целевые страницы важны для правильной работы, и, поскольку психология потребителей иногда может удивлять, всегда лучше экспериментировать с различными версиями ваших страниц, чтобы увидеть, какая из них имеет самый высокий коэффициент конверсии (CVR). Проверьте позиционирование предложения, виды CTA и даже цветовую схему.
• Call-To-Action: CTA могут попросить посетителей подписаться, загрузить, заполнить форму, поделиться в социальных сетях и т. Д., Но в целом CTA необходимы для более активного вовлечения аудитории в ваше предложение. Для генерации лидов CTA должны быть смелыми и привлекательными, но самое главное, они должны эффективно передавать ценность.

Примером креативного CTA является Landbot - его можно увидеть здесь на № 16.

Заключение

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