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

Что происходит, когда вы бросаете якорь в воду?

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

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

Маркетологи любят эту технику веб-дизайна, потому что она позволяет им выделять определенные точки интереса, особенно на целевых страницах после клика, цель которых - побудить к действию. Для этого вам нужно создать убедительную целевую страницу после клика с правильными оптимизированными элементами. В нашей новой электронной книге The Ultimate Guide to Building a Persuasive Post-Click Landing Page более подробно рассказывается об этом:

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

Что такое якорный тег?

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

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

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

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

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

Важная копия

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

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

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

Истории успеха клиентов

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

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

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

Случаи применения

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

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

Дополнения к продукту

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

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

Форма захвата лида

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

Обратите внимание на кнопку CTA еще раз. Его ярко-оранжевый цвет привлекает внимание и использует привлекательный текст («бесплатный»), что, вероятно, приведет к увеличению количества кликов. Когда посетители нажимают на нее (или на любую из совместных кнопок CTA), они отправляются обратно в верхнюю часть страницы, чтобы запустить бесплатную пробную версию Salesgenie.

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

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

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

Кнопка CTA

Есть много способов оптимизировать вашу кнопку CTA, но вы также можете создавать якорные ссылки, которые направляют посетителей прямо на них. В приведенном ниже примере QuickBase компания создала навигацию по целевой странице после щелчка (три раздела внизу изображения), в которой все три ссылки являются тегами привязки. Когда потенциальные клиенты нажимают «История успеха» и «Что такое QuickBase», они перенаправляются в два разных раздела ниже по странице, в каждом из которых есть кнопка с призывом к действию:

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

Как вы используете якорные теги?

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

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