Что делает лендинг эффективным? Анализ 20 домашних страниц SaaS-бизнесов

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

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

Чтобы раскрыть секрет высококонверсионных home pages, глава отдела технологий Hotjar (облачное решение веб-аналитики) Марк фон Брокдорф (Marc Von Brockdorff) проанализировал 20 домашних страниц наиболее успешных западных SaaS-бизнесов.

1. Zen Desk (облачное решение для технической поддержки)

Элементы страницы:

• статичный хедер;
• комбинация из заголовка + CTA + скриншота;
• список функций;
• список клиентов;
• призыв к действию;
• футер.

2. Basecamp (онлайн-инструмент для управления проектами)

Элементы страницы:

• хедер;
• заголовок с социальным доказательством + СТА;
• описание функций + социальные доказательства;
• FAQ;
• социальные доказательства;
• ссылки на дополнительную информацию;
• футер.

3. Boostable (рекламная площадка)

Элементы страницы:

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

4. Intercom (решение для коммуникации с клиентами)

Элементы страницы:

• статичный хедер;
• заголовок + поле для ввода email + CTA;
• описание пакетов функционала;
• список клиентов;
• описание функций + скриншоты;
• отзывы;
• футер.

5. Optimizely (сервис для А/Б-тестирования)

Элементы страницы:

• хедер;
• заголовок + поле для ввода email + CTA;
• футер.

6. Contently (площадка, соединяющая профессиональных создателей контента с корпоративными заказчиками)

Элементы страницы:

• хедер;
• заголовок + список клиентов + CTA;
• описание принципов работы;
• список клиентов;
• социальные доказательства;
• футер.

7. Next Big Sound (аналитика и инсайты музыкальной индустрии)

Элементы страницы:

• хедер;
• заголовок + поле поиска;
• описание топового функционала;
• отчеты;
• кейсы;
• отзывы;
• футер.

8. Campaign Monitor (сервис email-маркетинга)

Элементы страницы:

• статичный хедер;
• заголовок + СТА;
• список клиентов;
• описание функционала;
• футер.

9. KISSmetrics (решение веб-аналитики)

Элементы страницы:

• заголовок + поле для ввода URL + СТА;
• описание функционала;
• футер.

10. BrowserStack (облачный симулятор ОС и браузеров)

Элементы страницы:

• хедер;
• заголовок + видео + форма подписки;
• список клиентов;
• отзывы;
• описание функционала;
• футер.

11. Trello (веб-сервис для управления проектами)

Элементы страницы:

• заголовок + СТА;
• описание функционала + скриншоты интерфейса;
• список клиентов;
• призыв к действию;
• футер.

12. New Relic (сервис для мониторинга мобильных и веб-приложений)

Элементы страницы:

• хедер;
• заголовок + СТА;
• список клиентов;
• отзывы;
• описание функционала + видео;
• футер.

13. Mixpanel (облачная площадка веб и мобильной аналитики)

Элементы страницы:

• хедер;
• заголовок + СТА;
• список клиентов;
• кейсы;
• отзывы;
• футер.

14. Wistia (профессиональный видео-хостинг)

Элементы страницы:

• хедер;
• заголовок;
• список клиентов;
• описание функционала + видеоролик;
• отзывы;
• футер.

15. Recurly (биллинг-система)

Элементы страницы:

• хедер;
• заголовок + СТА;
• список клиентов;
• текст о выгодах сервиса + отзывы;
• описание функционала;
• футер.

16. Geckoboard (панели управления данными для бизнесов)

Элементы страницы:

• хедер;
• заголовок + СТА + фоновое видео;
• список клиентов;
• текст о выгодах сервиса;
• описание принципов работы площадки;
• отзывы;
• футер.

17. Sqwiggle (платформа для удаленной совместной работы)

Элементы страницы:

• хедер;
• заголовок + СТА + скриншот;
• описание клиентских проблем;
• отзывы;
• текст о выгодах;
• подписная форма;
• футер.

18. Hootsuite (панель управления социальными медиа)

Элементы страницы:

• статичный хедер;
• заголовок + СТА;
• тарифы;
• описание функционала;
• описание ЦА, которой подходит решение;
• футер.

19. UserVoice (площадка для технической поддержки и обратной связи)

Элементы страницы:

• статичный хедер;
• заголовок + СТА;
• описание функционала + скриншоты;
• кейсы;
• видеоролик;
• список клиентов;
• футер.

20. Pingdom (решение для мониторинга веб-ресурсов)

Элементы страницы:

• статичный хедер;
• заголовок + СТА + скриншот;
• список клиентов;
• отзывы;
• текст о выгодах сервиса;
• социальные доказательства;
• описание функционала;
• тарифные планы;
• список ресурсов, на которых был упомянут сервис;
• футер.

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

Заголовок — размещен на 100% главных страниц.
Поле подписки, размещенное под заголовком — 75%.
Призыв к действию, размещенный до линии сгиба — 95%.
СТА с полем для ввода информации — 20%.
Слово «бесплатно» в призыве к действию — 50%.
Подписная (регистрационная) форма — 10%.
Информация о ценовой политике — 5%.
Описание выгод использования продукта — 20%.
Описание функционала сервиса — 65%.

Мультимедиа

Видеоролики — 20%.
Скриншоты — 35%.

Хедеры и футеры

Хедер — 85%.
Статичный хедер — 30%.
Футер — 100%.

Социальные доказательства

Любая форма социального доказательства — 80%.
Список клиентов — 60%.
Отзывы — 50%.
Кейсы — 15%.

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

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

1. Заголовок: возможность выделиться

Хедлайн (присутствовал на всех изученных домашних страницах, а на 75% из них также был размещен подзаголовок) является одной из ключевых элементов лендинга/домашней страницы. Задача заголовка заключается в донесении сути и ключевых выгод оффера в течение первых 5 секунд пребывания посетителя на сайте.

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

• Создайте и протестируйте новый заголовок.
• Добавьте к текущему подзаголовок.

Изучим хедлайны 20 успешных SaaS-бизнесов:

Заголовок: «Простой мониторинг доступности и производительности веб-сайта».
Подзаголовок: «Все, что нужно для мониторинга веб-сайта. Используя Pingdom, вы всегда узнаете о неисправности сайта первыми и будете располагать точными данными о его производительности. Мониторинг вашего ресурса является правильным решением».

Заголовок: «Хотите наблюдать за клиентами с высоты птичьего полета?».
Подзаголовок: «Присоединяйтесь к 160 000+ организаций из 170 стран, которые нашли лучший способ слышать своих пользователей».

Заголовок: «Начните заниматься социальными медиа серьезно».
Подзаголовок: «Присоединитесь к 9 000 000+ профессионалов, использующих Hootsuite. Начните бесплатно».

Заголовок: «Увеличьте результативность совместной работы».
Подзаголовок: «Ощущайте более тесную связь со своей командой и работайте так, будто вы находитесь в одной комнате».

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

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

Заголовок: «Добавьте видео на свой ресурс с легкостью и по своим условиям».

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

Заголовок: «Данные помогают нам продолжать работу».
Подзаголовок: «Мы все являемся поклонниками статистики. New Relic дает вам мгновенную видимость на уровне кода для разработки более быстрого ПО, создания лучших продуктов и удовлетворения ваших пользователей».

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

Заголовок: «Тестирование на совместимость с браузером в веб-интерфейсе в режиме реального времени».
Подзаголовок: «Мгновенный доступ ко всем десктопным и мобильным браузерам. Попрощайтесь с установкой виртуальных девайсов».

Заголовок: «Google Analytics показывает, что происходит. KISSmetrics показывает, кто это делает».

Заголовок: «Отправляйте красивые emails и вы получите лучшие результаты».
Подзаголовок: «Campaign Monitor позволяет с легкостью создавать, отправлять и оптимизировать email-кампании. Для начала работы потребуется всего пару минут».

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

Заголовок: «Рассказывайте исключительные истории».

Заголовок: «Решение для А/Б-тестирования, которым вы на самом деле будете пользоваться».

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

Заголовок: «Легкий способ настроить рекламу для продавцов в магазинах приложений».

Заголовок: «Только за прошлый год более 285 000 компаний закончили свыше 2 000 000 проектов при помощи Basecamp».

Заголовок: «Прекрасно простой».
Подзаголовок: «Zendesk — решение для предоставления более качественного клиентского сервиса».

• AARRR — «пиратские» метрики для облачных стартапов

2. Призыв к действию: вовлечение пользователей до линии сгиба

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

Говоря о тексте СТА-кнопок, одним из слов, оказывающих наиболее сильное влияние на посетителей, является слово «бесплатно» — более половины бизнесов, предоставляющих как бесплатные, так и платные тарифы, использовали вышеупомянутое слово в своих call to action.

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

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

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

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

Призыв к действию «Начните сейчас» и текст «Установка не требуется».

Призыв к действию «Начните сейчас бесплатно» и текст «30 дней бесплатно. Кредитная карта не требуется».

В данном случае используются кнопки для авторизации через социальные сети: «Войти с аккаунта (название социальной сети)» и ссылка на форму регистрации.

«Подпишитесь бесплатно!»

«Начните бесплатный пробный период».

«Подпишитесь бесплатно».

«Узнайте больше» и «Попробуйте бесплатно».

«Создать бесплатный аккаунт».

«Подпишитесь — это бесплатно».

«Подписаться бесплатно».

Поле для ввода URL-адреса и кнопка для авторизации с аккаунта Google.

«Создать бесплатный аккаунт».

Поисковое поле с текстом «Найти любую группу или исполнителя».

«Запросить демо-версию».

Поле «Введите URL, чтобы протестировать сервис» и кнопка «Протестировать».

Поле для ввода электронного адреса и СТА «Начать».

Поле для email и призыв «Начать рекламировать».

«Дайте Basecamp шанс — бесплатно в течение 60 дней».

«Посмотреть демо».

• Как создать эффективную CTA-кнопку, опираясь на данные физиологии мозга

3. Социальные доказательства: вовлечение и завоевание доверия

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

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

• Список клиентов (60%).
• Отзывы (50%).
• Кейсы (15%).

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

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

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

Изучим примеры:

«В течение последнего часа наш сервис обнаружил 18 363 (динамичный счетчик) отключений серверов по всему миру».

«Мы завоевали доверие 50 000+ пользователей, включая следующие компании: (логотипы известных брендов)».

Текст «Не верьте нам на слово. Мы делаем наших клиентов (и их пользователей) счастливыми на более чем 43 языках», внизу которого отображаются названия компаний клиентов и ссылки на их кейсы.

Отзыв: «Sqwiggle невероятно полезен и значительно увеличил эффективность нашего рабочего процесса».

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

Логотипы клиентских компаний и ссылка на кейсы.

«Вы в хорошей компании. Точнее, в 2 433 хороших компаниях».

Текст «Миллионы людей и компаний всех масштабов любят использовать Trello» и логотипы брендов, использующих сервис.

Заголовок «Сервис, которому доверяют более 23 000 клиентов по всему миру», логотипы именитых компаний и отзыв в видео формате.

Число клиентов (свыше 100 000) и логотипы клиентских компаний.

Положительные отзывы о сервисе из материалов именитых источников.

Заголовок «Наиболее крупная сеть талантливых журналистов в мире», текст «Работайте с топовыми фрилансерами в нашей сети из 40 000 профессиональных журналистов, дизайнеров, видео-продюсеров и фотографов» и список брендов, пользующихся услугами сервиса.

Текст «Ежедневно помогаем тысячам web и mobile бизнесов найти миллионы клиентов» и список клиентов.

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

На ресурсе Basecamp отображаются логотипы брендов, использующих их сервис.

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

• 36 аналитических прогнозов на 2017 год. Часть 2

4. Свойства: объясните, как работает ваш продукт

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

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

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

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

Примеры:

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

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

Короткое описание ключевых функций решения.

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

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

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

Перечисление функций решения и короткие объяснения их предназначения.

Идентично примеру выше.

Текстовое описание заменено скриншотом.

Сервис Campaign Monitor использует видеоролик, в котором показывается процесс оформления электронного письма.

Описывается ценность и функции оффера.

Скриншот интерфейса.

Скриншоты интерфейса с описанием полезных функций.

Короткое описание ключевого функционала.

Свойства продукта описываются с точки зрения выгод для клиента.

• Свойства говорят, а выгоды продают!

5. Дополнительная информация: для тех, кто хочет знать больше

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

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

• Добавьте СТА, ведущий на раздел с презентацией (детальным описанием) продукта.
• Создайте FAQ.
• Разместите ссылки на блог или базу знаний в футере.

Приступим к изучению примеров:

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

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

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

Пример дополнительного СТА: «Ознакомиться с продуктом».

«Ознакомиться с возможностями».

«Узнать больше».

Пользователю предложено задать вопросы по электронной почте.

Призыв к действию, вызывающий форму обратной связи.

Разделы «Детали продукта», «Аудитории» (информация для основных сегментов пользователей) и «Zendesk» (контент о компании).

Заключение

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

Прежде чем приступать к А/Б-тестам, проведите анализ домашней страницы/лендинга при помощи следующих практик:

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

Высоких вам конверсий!

По материалам outside.hotjar.com