Что делает лендинг эффективным? Анализ 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 — решение для предоставления более качественного клиентского сервиса».
Заголовки: власть, воздействие, влияние
2. Призыв к действию: вовлечение пользователей до линии сгиба
Призыв к действию может иметь критичное влияние на коэффициент преобразования, посему оптимизация его составляющих (в частности, текста) является обязательной.
Говоря о тексте СТА-кнопок, одним из слов, оказывающих наиболее сильное влияние на посетителей, является слово «бесплатно» — более половины бизнесов, предоставляющих как бесплатные, так и платные тарифы, использовали вышеупомянутое слово в своих call to action.
Анализ Брокдорфа также показал, что на первом экране 20% домашних страниц расположено поле для ввода URL или email-адреса. В большинстве случаев это используется, чтобы увеличить готовность к конверсии — сделав некий вклад (в данном случае предоставив информацию), посетитель более расположен к выполнению целевого действия.
Идеи для тестирования
- Тестируйте текст СТА (в частности, с использованием слова «бесплатно»).
- Поработайте над эффективностью кнопки за счет тестирования различных цветов и форматов.
- Добавьте к СТА поле для ввода информации.
- Если регистрационная форма короткая, протестируйте ее размещение на домашней странице.
Ознакомимся с призывами к действию на проанализированных страницах:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Посмотреть демо».
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+ компаний доверяют нам своих клиентов» и логотипы клиентских бизнесов.
4. Свойства: объясните, как работает ваш продукт
Описание свойств продукта не требуется только в том случае, если он и его предназначение хорошо известны широкой аудитории. Если же высокая степень общественной осведомленности не достигнута, рассказать о принципах работы решения следует обязательно, используя для этого скриншоты, видеоролики, буллеты или текст.
К слову, на домашней странице SaaS-бизнеса под каждым буллетом с описанием функционала можно разместить клиентский отзыв — это отличный вариант донесения выгоды.
Идеи для тестирования
- Добавьте скриншоты, чтобы объяснить принципы работы сервиса визуально.
- Создайте небольшое видео, в котором показываются ключевые свойства и выгоды сервиса.
- Постарайтесь получить отзывы о каждой функции продукта, чтобы донести их ценность словами клиентов.
- Описывайте свойства с точки зрения выгоды для клиента.
Примеры:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свойства продукта описываются с точки зрения выгод для клиента.
5. Дополнительная информация: для тех, кто хочет знать больше
Некоторым посетителям будет недостаточно информации на главной странице — таковые рассмотрят возможность заключения сделки только после того, как изучат оффер максимально детально. Чтобы удовлетворить информационные потребности этого типа покупателей, следует создавать разделы с дополнительной информацией, на которые они смогут перейти с домашней страницы.
Идеи для тестирования
- Добавьте СТА, ведущий на раздел с презентацией (детальным описанием) продукта.
- Создайте FAQ.
- Разместите ссылки на блог или базу знаний в футере.
Приступим к изучению примеров:

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

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

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

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

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

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

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

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

Разделы «Детали продукта», «Аудитории» (информация для основных сегментов пользователей) и «Zendesk» (контент о компании).
Заключение
Тестируя идеи, представленные в данной статье, помните, что элемент, эффективный на одном сайте, может показать негативный результат на другом — лишь качественное сплит-тестирование позволяет определить целесообразность той или иной гипотезы. Кроме того, не забывайте, что устранение ненужных элементов также является одной из практик оптимизации конверсии.
Прежде чем приступать к А/Б-тестам, проведите анализ домашней страницы/лендинга при помощи следующих практик:
- Тепловые карты. Таковые позволят определить важнейшие части страницы.
- Пользовательское тестирование. На основе результатов этого исследования устраняются источники конверсионного трения.
- Опрос. Простой способ узнать мнения посетителей о домашней странице.
- Анализ подписных форм. Проводится с целью определения потребности в оптимизации форм регистрации или подписки.
Высоких вам конверсий!