http://e-planet.ru/company/blog/polnoe-rukovodstvo-po-dizajnu-posadochnyh-stranits-dlja-konversii.html

Полное руководство по дизайну посадочных страниц для конверсии (Часть1)

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

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

Зачем вам посадочная страница

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

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

Поймите целевой рынок

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

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

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

Поймите, как работает посадочная страница

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

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

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

Длинная версия отвечает на большее количество вопросов потенциальных покупателей, снижая уровень раздражения. Это также может убедить большее количество покупателей совершить покупку без необходимости сначала связываться с вами за дополнительной информацией, делая процесс более прямолинейным и сокращая ваши затраты. Длинная версия определенно может привести к более высокому коэффициенту конверсии, чем короткая, в большинстве ситуаций. Для примера, Conversion Rate Experts увеличили коэффициент конверсии Crazy Egg на 363%, просто сделав домашнюю страницу примерно в 20 раз длиннее контрольной версии.

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

Разбейте страницу

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

• заголовок;
• подзаголовок;
• информация, которую необходимо знать;
• информация, которую желательно знать.

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

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

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

Цель конверсии может быть только одна

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

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

Учитывайте коэффициент внимания

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

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

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

Поймите конкурентов

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

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

Откуда приходит трафик?

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

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

Убедитесь, что ваше сообщение соответствует ожиданиям

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

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

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

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

Первые впечатления - наиболее важные

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

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

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

31 Июля

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

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

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

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

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

Вам может казаться, что красный цвет будет означать для пользователей стоп-сигнал. Но исследования показали, в некоторых случаях красный может быть эффективнее зеленого. Это исследование о сайте Performable показывает, что при изменении кнопки призыва к действию с зеленой на красную привело к увеличению конверсии на 21%; наиболее логичным объяснением этому является то, что на самой странице используется большое количество зеленого цвета, поэтому зеленая кнопка не выделялась на фоне остальной страницы, как это было с красной кнопкой. Подробнее о роли цвета в конверсии вы можете прочитать в нашей статье «Битва за конверсию: цвет vs контраст».

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

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

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

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

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

Изображения

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

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

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

Стоковые и оригинальные фотографии

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

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

Включение видео

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

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

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

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

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

Подчеркните социальную значимость

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

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

A/B тестирование это крайне важно

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

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

• Где появляется ваша форма;
• Длина текста;
• Заголовок;
• Цвет кнопки призыва к действию;
• Текст на кнопке призыва к действию;
• Изображения, используемые на странице;
• Общая цветовая гамма страницы;
• Определенный текст призыва к действию;
• Подзаголовки.

Установите действенную аналитику

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

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

Инструменты для создания оптимальных посадочных страниц

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

Unbounce

Unbounce предлагает инструменты для построения, публикации и A/B тестирования ваших посадочных страниц без кодинга. Просто постройте и опубликуйте страницу, после чего протестируйте и оптимизируйте ее. Они предлагают планы от $49 в месяц, и каждый план включает 30-дневную пробную версию.

Convert

Convert предлагает услуги A/B-тестирования. Он позволяет создавать тесты визуально с помощью редактора WYSIWYG, а также имеет доступ к редакторам HTML и CSS. Он требует немного кода, и безупречно интегрируется с Google Analytics. Стоимость начинается от $125 в месяц, а также они предлагают пробную версию на 15 дней.

Optimizely

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

Visual Website Optimizer

Visual Website Optimizer позволяет оптимизировать и персонализировать посадочные страницы, включая такие функции, как A/B-тестирование, сплит-тестирование URL, многомерные тестирования, сбор отзывов пользователей, анализатор посадочной страницы, тепловые карты и прочее. Они предлагают бесплатную пробную версию, а планы стоят от $49 в месяц.

Instapage

Instapage позволяет создавать посадочные страницы всего за несколько минут без необходимости иметь опыт в дизайне. Он позволяет строить полностью отзывчивые страницы, которые интегрируются с более 12 популярными маркетинговыми инструментами. Он даже позволяет публиковать страницы на WordPress, GoDaddy и пр. Бесплатный план включает до 100 посетителей в месяц, стоимость платных планов начинается от $29 в месяц.

Lander

Lander позволяет довольно просто создавать посадочные страницы, особенно для небольших компаний. Он предлагает простой в использовании редактор, A/B-тестирование и даже интеграцию вкладки страницы Facebook. Планы начинаются от $22 в месяц с 30-дневной пробной версией.

HubSpot Landing Pages

HubSpot Landing Pages позволяет за секунды создавать посадочные страницы, которые можно сразу же тестировать. Он предлагает редактор с функцией перетаскивания, умные формы, адаптивные посадочные страницы, умный контент и многое другое. Это часть маркетингового программного обеспечения HubSpot, стоимость которого начинается от $200 в месяц.

Google Analytics Content Experiments

Google Analytics Content Experiments предлагает возможность тестировать различные варианты вашей страницы с помощью произвольного образца вашего посетителя. Он входит в учетную запись Google Analytics.

Usability Hub

Usability Hub позволяет тестировать дизайн и макеты на реальных людях. Просто загрузите свой дизайн, выберите нужный вам тест (пятисекундный тест, клик-тест, тест на предпочтение или тестирование навигации), они покажут его пользователям, и вы получите подробный отчет о результатах. Здесь есть бесплатный общественный план (напишите отзыв, чтобы получить отзыв) или план Pro за $99 в месяц.

Итоги

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