Структура лендинга в виде схемы: Правильная структура лендинга 2021: список блоков

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

Ниже приведены некоторые эффективные способы использования триггеров кликов:

• Гарантия возврата денег
• Легко отписаться
• Цитата успешного или счастливого клиента
• Вставка на тему «Чего ожидать»
• Снижение цен
• Политика конфиденциальности
• Другой творческий метод

Источник

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

A / B Тестирование вашей целевой страницы

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

Вы это тестируете. Вот как. Сплит-тестирование (или A / B-тестирование), вероятно, не новость для вас как маркетолога, а сплит-тестирование вашей целевой страницы — всего лишь еще один эксперимент, который нужно добавить в свой список.

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

Что такое A / B-тестирование?

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

Основными компонентами A / B-теста являются вариантов , или две версии страницы, чемпион , или исходная страница, и претендент , или страница, которую вы изменили для проверки на соответствие оригиналу. .

Как пройти A / B-тест

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

Что тестировать?

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

• Заголовок копия
• Изображение
• CTA цвет
• Триггеры нажатия
• Копия на стр.
• Длина формы интереса и поля

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

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

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

просмотров страниц

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

Источник трафика

Зная, откуда идет ваш трафик, вы узнаете, где вам следует удвоить или отказаться от своих усилий.

Скорость отправки

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

Контакты

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

Тепловая карта

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

Показатель отказов

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

Отказ от формы

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

Тесты

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

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

Как сделать ваши целевые страницы более эффективными

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

Оптимизируйте свою целевую страницу.

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

Подарите

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

Вот несколько вопросов, чтобы определить, есть ли у вас интересное предложение:

• Решает ли мое предложение проблему моей целевой аудитории?
• Есть ли явная выгода, которую потенциальный клиент может получить от этого предложения?
• Может ли мое предложение конкурировать с конкурентами?

Уменьшить время загрузки страницы.

Задержка загрузки страницы в одну секунду означает на 7% меньше конверсий и на 11% меньше просмотров.Медленное время загрузки страницы также может вызвать недовольство и разочарование клиентов.

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

Помните о пути покупателя.

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

Создайте безупречный опыт.

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

Создайте четкий путь к конверсии.

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

Вот несколько способов привлечь посетителя к конверсии:

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

Добавьте дефицит вашего предложения.

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

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

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

Использовать видео.

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

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

Видео …

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

Если вы все же планируете использовать эту тактику, у VidYard есть несколько полезных видео-рекомендаций по целевым страницам, которым нужно следовать.

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

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

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

Оптимизируйте страницу благодарности.

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

Ваша страница благодарности должна:

• Поблагодарите вашего нового лидера (иди рисунок)
• Предоставьте ссылки на релевантное содержание вашего сайта
• Пригласите своего лидера подписаться на вас в социальных сетях
• Попросите своего лидера подписаться на ваш блог
• Автоматизируйте повторное электронное письмо с предложением

Проведите их по пути покупателя.

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

Завязать отношения.

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

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

Развивайтесь лучше с целевыми страницами

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

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

Примечание редактора: этот пост был первоначально опубликован в августе 2019 года и был обновлен для полноты.

5 типов целевых страниц для конверсии потенциальных клиентов

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

Целевые страницы этапа осведомленности (верхняя часть воронки)

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

Контрольный список Скачать

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

Скачать электронную книгу

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

Целевые страницы этапа рассмотрения (середина воронки)

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

Регистрация на вебинар

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

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

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

Целевые страницы этапа принятия решения (нижняя часть последовательности)

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

Демонстрации и диагностика клиентов

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

Запись на консультацию

Целевые страницы для записи на консультацию — также хрупкий процесс, с которым я рекомендую много раз тестировать. Как и в случае с целевыми страницами веб-семинаров, я предлагаю вам четко изложить свои планы дальнейшего взаимодействия.Кроме того, иногда можно запросить несколько форм контактной информации. Возможно, вы даже захотите узнать о предпочтительном способе связи. Не забывайте обслуживать потенциальных клиентов настолько, насколько это возможно. Встретьтесь с ними в наиболее удобном для вас месте во время вашего последующего процесса, будь то телефон, электронная почта и т. Д. Я бы даже спросил оптимальное время для вас, чтобы связаться с ними, и попросил их подробно информация об их борьбе. Эта информация может быть обязательной или нет; решать вам (подсказка: это было бы отличным полем для A / B-теста).Задание этих сложных вопросов может иметь неоценимое значение в ваших будущих беседах, поэтому будьте осторожны, но также осознайте ценность этого типа информации в будущем.

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

Фото Остина Дистела на Unsplash

Рекомендации по дизайну целевой страницы

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

Увеличьте количество конверсий.

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

Вопрос в том, не слишком ли много для одной страницы?

Абсолютно нет.

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

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

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

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

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

Однако все целевые страницы после клика должны иметь только одну цель конверсии.

Почему целевые страницы после клика должны иметь единую цель

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

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

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

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

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

Если вы хотите продемонстрировать программное обеспечение Kissmetrics, какая страница, по вашему мнению, лучше всего подходит для увеличения числа регистраций?

Да, второй.

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

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

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

Это также известно как психология обращения.

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

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

Как создавать убедительные целевые страницы после клика

Что должно делать ваша целевая страница после клика?

Убедите посетителей достаточно, чтобы они совершили конверсию в вашей форме.

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

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

• Заголовок должен включать ваш UVP, чтобы посетители точно знали, как вы собираетесь решить их проблему.
• Изображение должно быть актуальным и сопереживающим, чтобы объяснять, что делает ваш продукт, а также эмоционально связывать с вашими посетителями.
• В вашем экземпляре должна быть исчерпывающая информация о ваших предложениях, преимуществах и возможностях.
• Индикаторы доверия, такие как значки клиентов, значки доверия, ссылка на политику конфиденциальности и отзывы клиентов, помогают вселить уверенность в конверсию в вашей форме.
• В форме сбора потенциальных клиентов не следует просить посетителей предоставлять информацию, которая не является необходимой для предложения. Кроме того, поля формы должны быть правильно расположены.
• Ваша кнопка CTA должна четко представлять ценность. Он должен вызывать чувство срочности, быть оформлен в контрастном цвете и написан с использованием персонализированной копии.

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

1. Принципы воздействия
2. Когнитивные искажения

6 принципов влияния Чалдини

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

1.Принцип симпатии

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

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

Чтобы продемонстрировать, когда Signal v.Компания Noise протестировала «человеческую» страницу по сравнению с исходным дизайном, и они увидели увеличение конверсии на 102,5%:

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

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

2.Принцип взаимности

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

Хотите информацию о ваших посетителях? Предложите им что-нибудь взамен — для этого и создается типичная сжатая страница.

Copy Hackers просит посетителей ввести свой адрес электронной почты в обмен на код купона со 100% скидкой на одну из их оригинальных книг:

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

Если вы хотите увеличить количество подписчиков на вашу услугу, попробуйте сначала предложить им бесплатную пробную версию — это то, что делает Autopilot на своей целевой странице после клика:

3. Принцип социального доказательства

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

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

4. Принцип согласованности

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

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

Это реклама Facebook для руководства Vidyard по персонализации вашего маркетинга с помощью видео:

Это целевая страница после клика, связанная с объявлением:

Страница и объявление имеют отличное сообщение, потому что:

• Заголовки объявления и страницы содержат одно и то же сообщение.
• Изображение в объявлении соответствует изображению на странице.
• Цвет кнопки CTA одинаков как на целевой странице объявления, так и на целевой странице после клика.

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

5. Принцип авторитета

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

Crazy Egg следует этому принципу на своей целевой странице после клика:

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

6.Принцип дефицита

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

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

Вот как Instapage использует таймер обратного отсчета, чтобы стимулировать регистрацию на веб-семинары:

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

Это то, что делает целевая страница Animoto после клика:

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

Merlin’s Pest Control делает с их копией кнопки CTA:

Копия кнопки CTA делает предложение срочным.

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

Когнитивные предубеждения

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

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

Эффект фон Ресторфа

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

Это то, что делает целевая страница после клика AWeber:

Зеленый цвет выделяется на сером фоне, заставляя посетителей запоминать кнопку перед тем, как покинуть страницу.

The Deictic Gaze

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

Postcard Mania использует указатель направления, чтобы указать на кнопку CTA, привлекая больше внимания посетителей к «приступить к работе»:

Эффект превосходства изображения

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

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

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

Эффект фокусировки

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

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

Это то, что Avast делает со своей целевой страницей после клика, добавляя их UVP в заголовок:

Конечно, на странице упоминаются и другие преимущества:

Но, сосредотачивая внимание на своей UVP в заголовке, они позволяют своим посетителям закрепиться и сосредоточиться на этом конкретном преимуществе.

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

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

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

Модель F

F-шаблон (он же «быстрый» шаблон) назван из-за направления, в котором движется глаз пользователя при сканировании страницы, которое выглядит примерно так:

Исследование с отслеживанием взглядов, проведенное Nielson Norman Group с участием 232 пользователей, показало, что основное поведение участников при чтении оставалось довольно постоянным на разных веб-сайтах.Этот метод чтения напоминал букву F и имел следующие компоненты:

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

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

Что это означает для вашей целевой страницы после клика

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

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

Так посетители будут видеть страницу Fleetmatics:

1. Пользователь начинает читать страницу по горизонтальной строке; здесь они увидят логотип компании и контактный номер.
2. Затем они будут читать во второй горизонтальной строке; в этой области отображается основной заголовок и изображение.
3. Наконец, они будут сканировать страницу в вертикальном движении; здесь они увидят кнопку CTA.

Z-образный узор

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

Метод чтения Z-шаблона имеет следующий порядок:

1. Пользователь начинает с левого верхнего угла страницы и быстро просматривает ее.
2. Затем пользователь одновременно смотрит влево и вниз по диагонали.
3. В конце концов, поле зрения пользователя снова перемещается по горизонтальной линии слева направо.

Давайте посмотрим на страницу Offerpop в качестве примера:

Вот как будет выглядеть Z-образ на этой странице:

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

Фальцовка страницы и ее значение для дизайна целевой страницы после клика

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

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

Для демонстрации: если разрешение экрана составляет 1366 X 768, то область, выделенная красным ниже, — это место, где будет складываться страница:

По мнению большинства веб-дизайнеров, средняя линия сгиба составляет примерно 1000 пикселей в ширину и 600 пикселей в высоту — это в основном верно для распространенных типов комбинаций монитора / браузера размером 1024 X 786 пикселей.Однако с ростом количества просмотров на мобильных устройствах наиболее распространенным размером сгиба страницы является либо 320 X 568, либо 360 X 640.

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

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

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

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

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

На самом деле, согласно отчету Google «Важность быть увиденным»: верхняя часть страницы не всегда доступна для просмотра, тогда как нижняя часть страницы обычно:

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

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

Как уменьшить трение на целевых страницах после клика

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

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

Из-за этого трения конверсии посетители не решаются совершить конверсию на целевой странице после клика.

По сути, есть два способа устранить трение с целевых страниц после клика:

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

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

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

Вот как выглядит начальный экран на одной из целевых страниц после клика Instapage:

Когда пользователь нажимает синий CTA «Покажи мне методы», появляется двухэтапная форма согласия:

У вашей целевой страницы после клика должна быть только одна точка выхода

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

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

Эта ссылка для выхода представляет собой кнопку призыва к действию на целевой странице после щелчка.

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

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

В качестве примера возьмем целевую страницу Act-On после клика:

Панель навигации вверху портит эту прекрасную страницу, потому что эти ссылки служат точками выхода и отвлекают от цели конверсии демонстрационного продукта Act-On.

Теперь давайте посмотрим на эту целевую страницу автопилота после клика:

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

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

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

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

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

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

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

Это то, что делает целевая страница SharpSpring после клика. Страница не только просит посетителей запланировать демонстрацию, как это делает страница сжатия OptinMonster, но и подробно объясняет преимущества услуги с помощью копии и отзыва клиентов.

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

Следуйте примеру AdFicient и как они отображают свой основной текст:

Сделайте вашу копию ориентированной на клиента

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

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

Заголовок целевой страницы сервиса HubSpot Leadin после клика подчеркивает проблему, с которой сталкиваются пользователи: «Вы действительно знаете, кто посещает ваш сайт?» Затем второй заголовок объясняет, как Leadin находит решение их проблемы:

Использование ориентированной на клиента копии на кнопке CTA также помогает побудить посетителей совершать конверсию с помощью кнопки CTA.

См., Например, копию кнопки с призывом к действию «Я готов к загрузке» на этой целевой странице после клика:

Стиль шрифта:

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

Вы можете выбрать один из двух основных типов шрифта:

1. Шрифт с засечками
2. Шрифт без засечек

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

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

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

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

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

Вот несколько примеров двух типов шрифтов:

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

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

1. Изображения
2. Видео
3. Gif-анимации

А медиа помогают получать конверсии, потому что это:

1. Помогает сопереживать посетителям
2. Помогает объяснить, что делает ваш продукт
3. Делает вашу страницу более привлекательной

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

Давайте обсудим три различных формата мультимедиа отдельно:

Изображений

Вы можете использовать изображения на своих целевых страницах после клика в следующих целях:

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

Вот что делает один из вариантов целевой страницы Wrike после клика:

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

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

Это то, что делает Ной Каган на своей целевой странице после клика:

Включение изображения докладчика и / или ведущего является важным элементом на целевых страницах вебинаров после кликов. Kissmetrics делает именно это на своей целевой странице вебинара после клика:

На странице представлены снимки ведущего и ведущего вебинара.

Другой пример — Kapost, в котором есть главный снимок приглашенного оратора:

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

Целевая страница VWO после клика делает именно это:

Видео

Статистика показывает, что 95% зрителей сохраняют сообщения в видео, поэтому мы настоятельно рекомендуем вам подумать о добавлении видео, чтобы повысить коэффициент конверсии целевой страницы после клика. Фактически, согласно EyeView Digital, доказано, что видео увеличивает конверсию на целых 80%.

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

Веб-страницы с видео более интересны по сравнению со страницами с текстом и изображениями. В среднем пользователь остается на странице с текстом и изображениями всего 43 секунды, тогда как посещение страницы с видео длится около 5 минут 50 секунд.

видеоролика о целевой странице после клика объясняют, как работает услуга / продукт.

Целевая страница после нажатия кнопки Salesforce делает именно это:

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

Размещение видео — это вопрос суждения. Чтобы узнать, правильно ли вы разместили видео на своей странице, потратьте некоторое время на A / B-тестирование различных мест размещения видео.

Однако не все видео с целевой страницы после клика эффективны. Чтобы ваше видео увеличивало ценность предложения, убедитесь, что видео:

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

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

Gif-анимации

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

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

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

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

То, как кто-то воспринимает определенный цвет, зависит от личного опыта и культурных контекстов. Например, белый цвет на Западе символизирует невест и чистоту, тогда как в Индии белый цвет носят специально на похоронах.

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

Типы цветов:

Есть три основных типа цветов:

Основные цвета: все остальные цвета составляют три основных цвета: красный, синий и желтый.

Вспомогательные цвета: Фиолетовый, зеленый и оранжевый — второстепенные цвета.

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

Этот цветовой круг представляет первичный, вторичный и третичный цвета:

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

Например, все они считаются синим цветом:

Они выглядят по-разному, потому что согласно системе Манселла все цвета содержат три компонента:

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

2. Значение: это уровень яркости — насколько светлый или темный является определенный цвет.Цвета с низким значением более темными (также называемые «оттенки»), цвета с высоким значением яркости (также называемые «оттенки»):

3. Цветность: это уровень насыщенности (т.е. насколько «яркий» цвет). Другими словами, цвета с высоким уровнем насыщенности яркие, а цвета с низким уровнем насыщенности выглядят размытыми:

Ник Коленда описывает, как выбрать три цветовых компонента в большинстве графических программ:

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

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

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

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

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

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

Выбор цветовых комбинаций

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

1. Аналогичные цвета :

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

2. Монохромные цвета :

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

3. Цвета треугольника, прямоугольника и квадрата:

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

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

Цветовые и словесные ассоциации

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

CoSchedule отображает цвета с концепциями, которые они символизируют:

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

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

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

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

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

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

1. Фон
2. База
3. Акцент

По словам Джареда Кристоферсона из Yellowhammer, если вы выбираете три цвета для своей страницы, лучше всего следовать правилу 60-30-10.Это означает, что 60% цвета должно быть фоном, 30% — основой (форма или другой раздел страницы) и 10% цвета — акцентами (кнопка CTA).

Давайте посмотрим, как это правило применяется к целевой странице Shopify после клика:

Цвет фона — темно-серый, который составляет большую часть страницы. Базовый цвет — черный (раздел с формой и кнопкой CTA). И, наконец, цвет кнопки CTA (акцент) зеленый, что хорошо контрастирует с темно-синим и черным.

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

Используйте эту информацию на целевых страницах после клика

На 92,6% решений о покупке влияют визуальные факторы, причем до 90% этого влияния основывается исключительно на цвете.

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

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

Белое пространство не обязательно является «белым» пространством — это просто отрицательное пространство, поэтому оно может быть любого цвета, если оно выполняет свои функции.

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

1.Улучшает понимание

Пустое пространство помогает уменьшить беспорядок в дизайне страницы. Доказано, что использование пробелов на левом и правом полях улучшает понимание до 20%. Когда вы окружаете элемент (например, ваш CTA) пустым пространством, он позволяет ему «дышать» и повышает удобочитаемость.

2. Выяснение отношений

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

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

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

Рисунок, сделанный Nielson Norman Group, демонстрирует разницу между двумя формами, сгруппировав связанные поля вместе и добавив достаточное количество пробелов:

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

3. Сосредоточьте внимание

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

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

Для сравнения, посмотрите на целевую страницу Trumpia после клика, где использование белого пространства не идеально:

Давайте посмотрим на страницу Intacct, негативное пространство вокруг элементов страницы не белое, но оно отделяет элементы друг от друга и уменьшает беспорядок:

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

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

Однако в вашей форме вы просите посетителей доверять вам свою информацию.

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

Форма Длина

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

Вот почему у многих бесплатных пробных посадочных страниц после клика нет длинных форм. В качестве примера рассмотрим форму целевой страницы WalkMe после клика:

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

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

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

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

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

Это приводит нас к многоступенчатым формам.

Многоступенчатые формы

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

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

Это второй шаг:

Вот третий шаг:

И это последний шаг и форма на целевой странице после клика:

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

Таким образом, форма появляется только для посетителей, которые намерены ее заполнить. Еще одно преимущество двухэтапной формы состоит в том, что она не вызывает трения конверсии, потому что ее увидят только мотивированные посетители.

Целевая страница после клика Instapage использует двухэтапную форму согласия:

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

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

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

Вы можете создавать формы намерения выхода для своих целевых страниц после щелчка, используя такие инструменты, как OptinMonster, Sumo List Builder, Bounce Exchange, Optimonk и даже с Instapage, используя параметр настраиваемого кода.

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

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

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

Чтобы правильно разработать CTA, примите во внимание следующие факторы:

Позиция

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

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

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

Если у вас есть бесплатная электронная книга, вы можете разместить кнопку CTA рядом с основным заголовком, как это делает UserVoice с этой целевой страницей после щелчка:

Размещение меняется, когда посетитель должен заплатить за предложение.

Кнопка с призывом к действию «Купить сейчас» на целевой странице электронной книги Суджана Пателя и Роба Уормли привлекает к себе внимание, потому что она представлена ​​после описания предложения и изолирована от всего остального на странице:

Оба приведенных выше примера демонстрируют кнопки CTA, расположенные над сгибом страницы.Разница заключается в количестве копий перед каждой кнопкой. UserVoice считает, что для бесплатного предложения достаточно только заголовка и подзаголовка, чтобы убедить посетителей рассмотреть возможность нажатия кнопки CTA, тогда как 100 Days of Growth требует полного текста, объясняющего, почему покупка электронной книги — хорошая идея.

Размер

Здравый смысл подсказывает, что чем крупнее объект, тем заметнее это будет. Таким образом, имеет смысл сделать кнопку с призывом к действию относительно большой.

Закон Фитта гласит, что «чем крупнее и ближе цель, тем быстрее и легче ее выбрать». Для CTA это, по сути, означает, что чем больше кнопка, тем легче на нее указать и щелкнуть.

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

Синяя кнопка «Посмотреть демонстрацию продукта» на странице Infusionsoft немного меньше окружающих элементов и не привлекает к себе внимания.

Убедитесь, что кнопка больше, чем окружающие ее элементы, чтобы выделяться. Сделайте то, что делает Рэйчил Кук на своей целевой странице после клика:

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

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

Цвет

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

Целевая страница после клика Elite Marketing Pro имеет хорошо контрастирующую кнопку CTA:

Несколько кнопок

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

Для более длинных страниц продаж можно иметь 5-6 кнопок и не иметь ни одной дополнительной кнопки.

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

Копия

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

Например, копия кнопки «Начать бесплатную пробную версию» на целевой странице Desk.com после клика побуждает к действию:

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

Копия кнопки целевой страницы Instapage после нажатия кнопки держит в памяти посетителя и делает еще один шаг вперед, персонализируя ее с помощью «I:»

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

Это то, что CoSchedule делает со своей бесплатной пробной страницей:

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

Что происходит после того, как посетители заполняют форму захвата лидов и нажимают кнопку CTA?

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

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

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

Целевая страница веб-семинара Upwork после клика делает именно это после того, как вы конвертируете:

После отправки вы будете перенаправлены на их страницу с благодарностью:

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

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

Upwork делает и то и другое в своем электронном письме с благодарностью:

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

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

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

7 лучших рекомендаций по использованию форм целевой страницы (+ примеры)

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

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

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

Создайте форму целевой страницы прямо сейчас

Что делает хорошую целевую страницу?

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

Например, форма вашей целевой страницы может быть рассчитана на получение:

• Подписчики списка рассылки
• Выводов
• Продажа
• Регистрация на вебинары

Для каждого из этих событий требуется немного другой тип формы.

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

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

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

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

Рекомендации по форме целевой страницы

Мы рассмотрим различные способы создания форм целевой страницы для максимального количества конверсий.

1. Продавайте преимущества рядом с вашей формой
2. Успокойте своего посетителя
3. Удалить лишние поля
4. Создайте убедительный призыв к действию
5. Используйте силу FOMO
6. Используйте подсказки и заполнители
7. Сделайте формы адаптивными для мобильных устройств

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

1. Продайте пособие рядом с вашей формой

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

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

Вы заметили, что слово «без ограничений» встречается более одного раза?

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

Посмотрите и этот замечательный пример от WPBeginner:

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

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

Хотите узнать, как использовать Asana с другими инструментами? Ознакомьтесь с нашим списком лучших интеграций Asana.

Как продавать пособия по вашей форме

Это один из самых простых способов внедрения.

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

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

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

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

2. Успокойте посетителя

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

Например, большинство из нас не хотели бы, чтобы нас обманули:

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

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

Вот отличный пример формы целевой страницы от WP Rocket, которая вселяет уверенность в посетителя:

В этой форме есть 3 отдельные области, которые заставляют посетителя чувствовать себя лучше при совершении покупки:

• Отзыв клиента — это добавляет в форму социальное доказательство.Использование фотографии и настоящего имени помогает добавить аутентичности и показывает, что другие клиенты уже заполнили форму и довольны результатом. Ознакомьтесь с этими замечательными примерами социального доказательства для ваших форм.
• Гарантия возврата денег — Предоставление какой-либо гарантии важно, особенно если у покупателя нет возможности опробовать продукт до того, как он заплатит. Эта область целевой страницы позволяет клиенту знать, что он может вернуть свои деньги, если он недоволен, поэтому они не могут ошибиться, попробовав это.
• Безопасное напоминание о платеже — Если покупатель посещает вас впервые, это помогает напомнить ему, что у вас настроена правильная защита при приеме платежей.

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

Как добавить уверенности в вашу форму

WPForms позволяет легко добавлять дополнительную информацию в вашу форму с помощью поля HTML или разделителя разделов.

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

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

3. Удалить лишние поля

ECommerce показывает, что вы получите больше конверсий, если у вас 3 поля или меньше.

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

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

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

Было бы заманчиво собрать тонны информации об их компании или предполагаемом сценарии использования. Но Пардо понимает это правильно и просто имеет 1 поле:

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

Вот еще один отличный пример от Elementor. Это многоэтапная форма с 1 вопросом с несколькими вариантами ответов на каждой странице. Опять же, эта форма идеальна, потому что вы можете предоставить всю информацию, не вводя ее.

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

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

Как сделать длинные формы короче

WPForms позволяет сделать форму короче тремя способами.

Во-первых, наш фаворит: многоступенчатая форма.

Этот формат делает форму менее устрашающей, скрывая некоторые поля за индикатором выполнения. Страница регистрации Drip использует эту тактику, и это выглядит потрясающе.

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

Наконец, посмотрите этот пример из Zoho CRM.

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

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

Просто включите его, и надстройка сохранит местоположение ваших посетителей в панели управления WordPress.

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

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

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

4. Создайте убедительный призыв к действию

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

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

Эта форма от IsItWP сочетает контрастный цвет на кнопке с настраиваемым текстом на кнопке «Отправить».

Слова «Загрузить сейчас» — это мощное средство. Это подчеркивает тот факт, что вы получаете мгновенный доступ к контрольному списку WordPress, который вам нужен.

Фактически, эта форма является прекрасным примером большого лид-магнита в действии.

Как настроить призыв к действию

С помощью WPForms вы можете легко изменить текст на кнопке отправки в настройках формы.

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

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

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

Вот документ о настройке кнопки отправки в WPForms.

5. Используйте всю мощь FOMO

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

Знакомьтесь, FOMO.

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

Эксклюзивы — отличная тактика FOMO.Нам всем нравится быть первыми, верно?

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

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

Вот отличный пример от SeedProd. Проверьте сейчас и сэкономьте 60%, или оставьте и потеряйте скидку. Что бы вы выбрали?

Как добавить FOMO в форму целевой страницы

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

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

Используя аддон Form Locker, вы можете:

Хотите повысить FOMO? Вы можете использовать обе эти функции вместе.

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

Хотите визуально показать дату истечения срока действия формы? Нам нравятся таймеры обратного отсчета в SeedProd.Вы можете использовать простой конструктор перетаскивания, чтобы добавить таймер в любое место и автоматически отсчитывать время до крайнего срока.

Хотите узнать больше об использовании SeedProd для FOMO? Посмотрите этот обзор SeedProd.

6. Добавьте подсказки и заполнители

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

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

Затем посмотрите этот пример для PushEngage. Заполнить эту форму целевой страницы очень легко, потому что все четко объяснено.

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

Как использовать заполнители в формах целевой страницы

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

WPForms позволяет легко добавлять текст-заполнитель, чтобы направлять посетителей при заполнении формы. Здесь мы добавили адрес электронной почты в качестве заполнителя, чтобы посетитель точно знал, что вводить.

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

7. Сделайте формы адаптивными для мобильных устройств

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

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

Вот отличный пример четкой формы целевой страницы из ActiveCampaign.

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

Как создать мобильную адаптивную форму

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

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

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

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

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

Обратите внимание на разницу между сложенным и обычным макетом на этой форме целевой страницы.

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

Создайте форму целевой страницы прямо сейчас

Следующий шаг: создайте целевую страницу в WordPress

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

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

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

Готовы создать свою форму? Начните сегодня с самого простого плагина для создания форм WordPress.WPForms Pro включает множество бесплатных шаблонов и предлагает 14-дневную гарантию возврата денег.

Если эта статья вам помогла, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств и руководств по WordPress.

Рекомендации по форме целевой страницы

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

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

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

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

Вот схема с основами хорошего дизайна.

Заголовок формы:

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

Подзаголовок:

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

Поля формы:

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

Никогда не используйте встроенные метки (где имя поля находится в поле, но исчезает при нажатии на него). Это плохой пользовательский опыт.

A / B-тест, чтобы выяснить, какие поля и сколько подходят вам лучше всего.

Призыв к действию (CTA):

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

Один из способов найти хороший призыв к действию — ответить на этот вопрос с точки зрения пользователя: «Я хочу…». Например, «Запросить информацию», «Зарегистрироваться на День открытых дверей» и т. Д.

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

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

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

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

Дополнительную информацию можно найти в серии «Целевые страницы 101»:

У вас есть вопросы или примеры, которыми вы хотите поделиться? Дайте нам знать об этом в комментариях.Вы также можете подписаться на меня в Twitter @seo_george.

23 эффективных примера дизайна целевой страницы, которые конвертируют

Нил Патель стал соучредителем Crazy Egg в 2005 году. 300 000 веб-сайтов используют Crazy Egg, чтобы понять, что работает на их веб-сайтах (с такими функциями, как тепловые карты, карты прокрутки, реферальные карты и пользовательские записи), исправить то, что не работает (с помощью редактора WYSIWYG ) и проверить новые идеи (с помощью надежного инструмента A / B-тестирования).

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

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

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

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

23 примера дизайна посадочных страниц, которые вы захотите украсть в 2018 году

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

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

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

Давайте копнем.

1. Moz Pro

Мне нравится целевая страница Moz Pro, потому что на ней быстро указывается УТП продукта. Клиенты могут рассчитывать на более высокие рейтинги, качественный трафик и измеримые результаты.Затем у вас есть призыв к действию — «Начни мою бесплатную пробную версию», который отображается на панели навигации и на изображении героя одним и тем же ярким цветом.

2. Twago Enterprise

Почему бы не стать большим, смелым и ярким? Целевая страница Twago Enterprise одновременно проста и энергоэффективна. У вас есть USP крупным шрифтом, за которым следует краткое описание продукта.

CTA — Запросить демонстрацию — имеет цвет, который не отображается в другом месте на странице.

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

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

3. 180fusion Даллас

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

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

4. Flickr

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

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

5.Unbounce для агентств

Целевая страница услуг Unbounce на уровне агентств действительно популярна. Яркие синие акценты в сочетании с ярко-оранжевыми CTA работают визуально, чтобы передать последовательное сообщение.

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

Конкурирующих призывов к действию могут сработать против вас, если вы не будете осторожны. Ниже я объясню, как Crazy Egg Recordings может помочь вам понять, нужно ли вам удалить призыв к действию или создать более визуальное разделение на странице.

6. Писатели Upwork

Upwork объединяет предприятия и профессионалов во многих сферах обслуживания. Целевая страница для писателей-фрилансеров хорошо продумана и прекрасно использует социальное доказательство.

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

7. Codecademy Pro

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

Мне также нравится использование слова «разблокировать» в начале основного текста. Это необычное слово в этом контексте и поэтому привлекает внимание.

8. Веснушка

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

9. Площадь

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

Прокрутив вниз, вы увидите, как Square работает с POS-системами. Это хороший способ познакомить потенциальных клиентов с продуктом.

10.BuildFire

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

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

11. Hello Bar

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

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

12. Полоса

Дизайн целевой страницы платежей для Stripe красивый и функциональный.Это отличный пример удачной работы двойных призывов к действию. Очевидный CTA имеет темный фон с белым текстом. Он предлагает вам создать учетную запись. Гораздо труднее увидеть конкурирующий призыв к действию.

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

13. Образовательный центр Нойгауза

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

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

14. Air Canada

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

15. Революция в дрессировке собак Зака ​​Джорджа

Это целевая страница книги Зака ​​Джорджа «Революция в дрессировке собак». Это бестселлер и всего лишь один из ее продуктов. Вы получаете логотипы мест, где можно купить книгу, и заголовок, пробуждающий любопытство. Симпатичная обложка тоже не повредит.

16. Costco

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

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

17. Асана

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

18. HostGator

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

19. Веганское общество

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

20. Dropbox

Dropbox известен тем, что создает потрясающие целевые страницы.Сегодня я хотел выделить их относительно новую целевую страницу Dropbox для Android. Он просто и убедительно выделяет приложение и дает вам возможность опробовать его.

21. Дракон, говорящий естественным образом

Nuance, создатель Dragon Naturally Speaking, предлагает отличный пример дизайна целевой страницы на своей странице Dragon для ПК. Он включает в себя приятное изображение главного героя, простой заголовок и список УТП в основном тексте.

22. Инвестопедия

Investopedia предлагает разновидность бумажной торговой игры, которую инвесторы могут использовать, чтобы замочить ноги.Целевая страница регистрации работает очень хорошо, особенно с лентой Free to Play в правом верхнем углу. Форма короткая, и цвета прекрасно сочетаются друг с другом.

23. Фитбит

Целевая страница «Что нового» для Fitbit уникальна и стильна, с несколькими категориями на выбор и элегантным сочетанием текста и иллюстраций.

Рекомендации по дизайну посадочных страниц

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

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

Создайте лендинг для вашей целевой аудитории

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

Это неправильное мышление.

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

Версия 1:

«Наши виджеты — самые быстрые, легкие и многофункциональные на рынке. Они завоевали награды во всем мире и являются продуктом более 20 прототипов. Мы потратили часы на создание прототипа, чтобы предложить вам лучший виджет за ваши деньги.Возьми в руки одну прямо сейчас! »

Версия 2:

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

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

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

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

Выделите предложение визуально

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

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

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

Определите конкретную цель дизайна целевой страницы

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

Допустим, вы продаете очень простой инструмент SaaS, который решает небольшую проблему. Он крошечный, но по-своему могущественный.

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

Выберите один из лучших инструментов для целевой страницы

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

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

Узнайте, как понять, что работает, а что нет.

Когда вы создаете свою целевую страницу, вы вздыхаете с облегчением. Работа сделана, да?

Это далеко не так.

После того, как вы построите лендинг, вам нужно следить за ним.Используйте такие инструменты, как Google Analytics и Crazy Egg, чтобы выяснить, насколько хорошо ваша целевая страница работает с вашей аудиторией. Куда переходят посетители? Как долго они остаются на странице? Они кажутся сбитыми с толку или расстроенными?

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

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

Заключение

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

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

Как создать посадочную страницу: пример использования Balsamiq Cloud | Академия каркасного моделирования

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

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

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

Как мы проектируем

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

Вот как обычно встряхивает.

1. Words — Соберите информацию и кратко изложите проект в тексте.
2. Sketches — Начните разработку с эскизов эскизов — абстрактных мини-эскизов страниц, которые выглядят как блоки и волнистые линии. Традиционно это можно сделать ручкой и бумагой, но я использую функцию быстрого рисования в Balsamiq.
3. Каркасы — Реализуйте идеи из наших эскизов, используя диаграммы зон для идентификации элементов.Начните создавать каркас, добавляя больше деталей и исследуя иерархию элементов на экране и описывая функции и поведение.
4. Визуальный дизайн — Начните компоновку дизайна с выделения макета в оттенках серого. Добавьте подробную информацию, укажите положение, вес и размер элементов. Начните итеративно добавлять цвет и уточнять элементы на экране. Я оставляю много времени для частых проверок и повторений на этапах каркасного и визуального проектирования.

Рассмотрим подробнее.

Сначала слов

Начните с текстового описания

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

Проясните свои пользовательские истории

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

Думайте об этом как о «кратком свете проекта». Это описание проекта, состоящее только из слов, которое используется для облегчения обсуждения, организации и планирования перед зарисовкой. Я не могу достаточно подчеркнуть, насколько важно попасть на ту же страницу на данном этапе. Итерации по основным идеям проекта сейчас сэкономят вам много времени и денег.

Проведите инвентаризацию

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

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

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

Просмотр и проверка

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

Эскизы миниатюр

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

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

Идентификация элементов

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

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

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

Каркасы

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

Работа снаружи внутрь: организация зон

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

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

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

Работа наизнанку: добавить деталь

Здесь эскиз превращается в каркас по мере добавления дополнительной информации и демонстрации потока.

На иллюстрации ниже показано, как этот вид с высоты птичьего полета становится более сфокусированным, когда мы увеличиваем масштаб для отображения фактического содержимого. В этом случае я использовал функцию Transform Control (CTRL + T или CMD + T), чтобы преобразовать эти прямоугольники в компоненты из библиотеки и превратить нарисованные объекты Line of Text в настоящий текст.

Когда мы будем готовы к проверке на этом уровне точности, мы вместе с командой проведем пошаговое руководство.

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

Визуальный дизайн

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

Итерационная копия

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

Начать изучение визуальных концепций

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

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

Обзор дизайна

Я поместил первую композицию в проект Balsamiq Cloud, чтобы мы могли рассмотреть концепции на ранней стадии. Мы делаем пошаговое руководство , а начинаем рассматривать как команду.

Вот скриншот компа в Balsamiq Cloud. Мы использовали функции комментариев в облаке, чтобы задавать вопросы и указывать на проблемы, и я повторил это обсуждение.

Итерации

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

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

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

Как вы можете видеть из реальной целевой страницы Cloud, мы продолжили итерацию по настоящему. Вы даже можете посмотреть видео Live Wireframing, показывающее, как мы работали над добавлением информации о ценах на страницу.

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

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

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

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