Все об интернет-продажах

Гид по дизайну лендингов

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

Во-первых, посмотрите на эту инфографику, чтобы получить представление о том, о чем пойдет речь: final-data-driven-landing-page-infographic

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

  1. Откажитесь от панели навигации
  2. Используйте обучающее видео
  3. Пробуйте разные варианты размещения призыва к действию
  4. Таймер обратного отсчета
  5. Используйте маркированный список
  6. Реальные фото = больше посетителей
  7.  Социальное одобрение = доверие
  8. Используйте заглавные буквы в заголовке
  9.  Подчеркните ваши преимущества
  10. Форма заказа должна состоять максимум из 4 полей
  11. Автофокус лид-формы
  12. Используйте подписку на рассылку в 2 этапа
  13. Будьте более конкретными
  14. Оптимизируйте свой лендинг под мобильные устройства

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

Использование заглавных букв в заголовке

 Небольшие изменения в заголовке вашего лендинга могут иметь большое значение для увеличения конверсии. Исследование, проведенное Conductor, показало, что почти две трети людей предпочитают, чтобы каждое слово в заголовке было написано с заглавной буквы. conductor-tweet-headline2-2

Ниже представлен пример метода заглавных букв:

screenshot-corp-wishpond-com-2015-08-27-10-50-48

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

Использование маркированных списков

1dd-2

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

Доктор Якоб Нильсен (Nielsen Norman Group) провели тест, где он удалил ненужную информацию и резюмировал ее в виде маркированного списка. Он увеличил удобство использования веб-страницы на 124%. Более того тестирование Unionen показало, что использование маркированного списка привело к увеличению конверсии на 15,9%.

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

Использование реальных фотографий

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

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

screenshot-localhost-2015-08-20-15-26-29

В результате замены одной фотографии посещаемость сайта повысилось на 161%, а коэффициент конверсии повысился на 38,4%.

Но не в коем случае не стоит размещать такого рода фотографии:

rsz_1rsz_istock-unfinished-business-5_2

Вместо этого, сфотографируйте сотрудников своей компании за работой, как здесь:

screenshot-corp-wishpond-com-2015-09-08-11-41-15

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

Используйте обучающее видео

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

На самом деле, некоторые сайты утверждают, что их коэффициент конверсии увеличился на целых 144% с добавлением обучающего видео на их веб-страницы.

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

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

Если вы заполняете форму на целевой странице, вы хотите точно знать, что произойдет, когда вы нажмете на кнопку. Кнопки CTA, которые точно описывают, что вы предлагаете, конвертируют лучше. Компания HubSpot проанализировала 93000 CTA-кнопок, в течение года, и обнаружила, что таргетированные призывы к действию (СТА), увеличивают коэффициент конверсии на 42%.

Таргетированный CTA звучит более конкретно, чем просто «Подтвердить». Например, посмотрите на эти CTA кнопки. Компания CanaDream (пункт проката автомобилей и продаж) увеличили свои коэффициенты конверсии 106%. Они изменили кнопку CTA  «Подтвердить» на «Получить прайс-лист и список фургонов в наличии».

screenshot-www-canva_-com-2015-08-20-14-53-16

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

Ниже представлено несколько примеров эффективных CTA-кнопок:

Создать аккаунт бесплатно
Создать аккаунт бесплатно
Получить бесплатную тестовую версию на 30 дней
Получить бесплатную тестовую версию
screenshot-www-google-ca-2015-08-20-18-40-52
Получить бесплатный образец прямо сейчас

Оптимизация размещения кнопки призыва к действию

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

Компания Nature Air увеличила коэффициент конверсии на 591% путем изменения размещения кнопки призыва к действию.

Изначально кнопка CTA располагалась рядом с их изображением:

rsz_websiteoptimizertest-before

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

websiteoptimizertest-variationcloseup-after

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

Как насчет линии сгиба?

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

Ограничьте количество полей в форме

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

Почему?

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

Взгляните на эту целевую страницу Imaginary Landscape:

screenshot-www-imagescape-com-2015-08-25-12-31-10

Пугающая форма, не правда ли? К счастью, владельцы этого сайта решили сократить количество строк в форме с 11 до 4:

screenshot-www-imagescape-com-2015-08-25-13-55-33

Изменение с уменьшенным количеством полей в форме увеличило коэффициент конверсии на 120%!

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

Тестирование подписки на рассылку в два этапа

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

Проверьте этот пример, Thrive Themes:

screenshot-www-canva_-com-2015-08-27-11-22-19

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

Существуют тонны тематических исследований, которые проповедуют процесс выбора в 2 этапа. Это один из методов оптимизации конверсии, которая работает для различных целевых страниц. Например, InvestorCarrot увеличили конверсию на 46% в первый раз, реализовав эту тактику.

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

screenshot-corp-wishpond-com-2015-08-27-12-46-12

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

screenshot-blog-wishpond-com-2015-08-27-12-57-29

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

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

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

screenshot-ceblog-s3-amazonaws-com-2015-08-27-10-14-02

Это изменение принесло компании Wishpond  увеличение конверсии  на 56%. И помните, что это было на странице регистрации! Форма автоматической фокусировки поля привлекает внимание посетителя.

Кстати, если вы хотите использовать эту функцию самостоятельно, вот (очень простой) код: $('input[type="email"]').focus();

Используйте социальное доказательство для повышения доверия

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

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

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

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

Продавайте преимущества, а не особенности

Почему преимущества? Почему не особенности?

Преимущества сообщают пользователям, что ваши возможности могут сделать для них. Чтобы лучше понять, о чем мы говорим, взгляните на эту цитату из первого абзаца текста Help Scout’s:

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

Владельцы норвежского круизного лайнера Hurtigruten увеличили онлайн бронирование на 193% с добавлением списка выгод (это заняло у них 5 минут).

Ваш список выгод не должен быть огромным 3-5 преимуществ. И это не требует сложных изменений в дизайне вашего лендинга.

Посмотрите, как Crazy Egg делает это:

crazy-egg-benefit-list

Оптимизация дизайна лендинга для мобильных устройств

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

Сара Анджелес из Business News Daily  объяснила:

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

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

landingpage-complete-wmobile_1-0

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

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

Не используйте панель навигации

Эту стратегию дизайна для лендинга, безусловно, легче всего реализовать.

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

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

screenshot-www-canva_-com-2015-08-27-10-59-10

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

Создать таймер обратного отсчета для специальных предложений

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

Вот пример целевой страницы с таймером обратного отсчета:

countdown-timer-webinar

Маркус Тейлор провел сплит-тест, основанный на создании срочности на лендинге. Первая страница содержала только кнопку призыва к действию «Скачать контракт». На втором варианте было внесено изменение таймер обратного отсчета и добавление слова «Сейчас» в текст кнопки CTA. Оказывается, изменение  привело к увеличению конверсии на 147%.

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

Источник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: