Результаты анализа 40+ лендингов облачных компаний

Posted on by riasevastopol

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

В данной статей мы предлагаем вам ознакомиться с результатами анализа более 40 целевых страниц SaaS-компаний, их других характеристик и элементов.

1. Навигация лендинга
Пример: SendGrid
Пример: Vend
2. Основное изображение
Пример: Contentful
Пример: Гугл Apps для бизнеса
3. УТП вашего продукта
Пример: Huddle
Пример: Intercom
4. Преимущества продукта
Пример: Geckoboard
Пример: Dropbox
5. Призыв к действию (CTA)
Пример: Freshbooks
Пример: Zenpayroll
6. Социальное подтверждение
Пример: Docusign
Пример: ChartMogul
7. Коэффициент внимания (attention ratio)
8. Протяженность страницы
Пример: Mailchimp
9. Анимация и фоновое видео

1. Навигация лендинга

Навигация разрешает пользователям перемещаться по вашему ресурсу. Вот что вы должны учитывать:

  • Как заметной она должна быть? Визитёры лендинга должны иметь возможность отыскать и воспользоваться элементами меню в любую секунду, но если вы сделаете их через чур заметными, это будет отвлекать их от чтения контента.
  • Простота правит балом! Через чур сложная навигация собьет ваших пользователей с толку, и вероятнее, вынудит их покинуть лендинг.
  • Неизменно ли она должна быть видимой? Вы имеете возможность скрывать ее в тот момент, в то время, когда визитёры будут просматривать ваш контент.

Результаты анализа 40+ лендингов облачных компанийpПример: SendGrid

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

Пример: Vend

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

Какой вывод?

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

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

2. Основное изображение

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

Пример: Contentful

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

Пример: Гугл Apps для бизнеса

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

За изображениями, размещаемыми на лендингах, и тем, какое влияние на пользователей оказывают цвета, лица и различные стили, стоит огромное количество психотерапевтических приемов. Один из front-end специалистов из ChartMogul выразил собственный вывод по поводу Hero images и людей, присутствующих на них:

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

Какой вывод?

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

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

3. УТП вашего продукта

УТП — это неповторимое торговое предложение. Оно обрисовывает ваш продукт в максимально сжатой и дешёвой форме — и убеждает ваших визитёров продолжить просмотр лендинга.

Пример: Huddle

«Хорошие команды ютятся совместно. Надёжные рабочие пространства для совместного применения файлов, сотрудничества и курирования проектов для команд в Облаке»

УТП на сайте Huddle передает сущность оффера своим клиентам в понятной и краткой форме.

Пример: Intercom

«Несложный подход к связи с клиентами. Intercom — это единое пространство для всего вашего бизнеса, где вы имеете возможность заметить клиентов и поболтать с ними. Ведите живые диалоги и отправляйте таргетированные сообщения пользователям и посетителям сайта вашего приложения».

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

Какой вывод?

  • Большая часть компаний применяют однострочные УТП и подзаголовки на 1-2 предложения.
  • Если вы не имеете возможность свести ваш оффер к несложному «однострочнику», поразмыслите о том, какие конкретно неприятности решает ваш продукт. Представленное выше УТП от Intercom послужит для вас красивым примером.
  • Избегайте сложных прилагательных и наречий. Не забывайте, что вы не просто работаете над реализовывающим предложением, а пробуете заинтересовать визитёров.

Нехороший пример: «Критически ответственная коммуникация с клиентами, отличающаяся высокой эффективностью и простотой».

Хороший пример: «Несложной подход к связи с клиентами»

  • Визитёры уходят с лендинга, поскольку не знают ваше УТП

4. Преимущества продукта

Что пользователи возьмут, согласившись на ваше ответ? В этом случае перечень преимуществ сработает очень прекрасно.

Примечание: не пробуйте перечислять функции, каковые предлагает ваш продукт. К примеру, словосочетание «облачное хранилище на 20 Гб» не есть преимуществом и звучит неубедительно. А как по поводу фразы «Получите доступ ко всем вашим файлам в любой точке мира»?

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

Как выразился Самуэль Хулик (Samuel Hulick) из User Onboarding: «Люди не берут продукты — они берут улучшенные предположения самих себя».

Пример: Geckoboard

Geckoboard весьма четко обрисовывает преимущества. Фразы наподобие «Принимайте более действенные ответы» (слева) звучат намного убедительнее, чем особенности ПО.

Пример: Dropbox

Сверху вниз: «Берите ваши файлы с собой куда угодно», «Отправляйте видео скоро», «Обезопасьте ваши снимки», «Трудитесь над слайдами совместно», «Ни при каких обстоятельствах больше не теряйте файлы».

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

Какой вывод?

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

5. Призыв к действию (CTA)

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

Чем меньше вариантов вы предоставите пользователям, тем выше будет конверсия.

Пример: Freshbooks

«Попытайтесь безвозмездно в течение 30 дней»

Freshbooks отображают несложной, ясный CTA. Обратите внимание, как совершенно верно они обрисовывают, что пользователь возьмёт, кликнув по кнопке — free-trial подписку на 30 дней. Это сводит к минимуму любую неопределенность.

Чем больше уверенность, тем выше кликабельность, либо CTR (click through rate).

Пример: Zenpayroll

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

Какой вывод?

  • Будьте предельно правильны в вашем копирайтинге. Убедитесь, что визитёр знает, к чему приведет его нажатие на кнопку, дабы уменьшить количество «случайных» кликов. Пользователи должны кликать по CTA-элементам с осознанным намерением.
  • Разместите призыв к действию в том месте, где пользователь будет этого ожидать. В отечественном блоге вы отыщете множество управлений по данной тематике, и вторых советов по оптимизации CTA.
  • Большинство CTA-кнопок на рассмотренных лендингах было зеленым.

Цвета СTA-кнопок

  • 6 изюминок высококонверсионных СТА-элементов на лендинге

6. Социальное подтверждение

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

Пример: Docusign

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

Пример: ChartMogul

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

Какой вывод?

  • Демонстрация настоящих людей с настоящими профилями стала главным причиной в мире, где кое-какие компании создают фальшивые социальные доказательства.
  • Размещение социального доказательства в той секции страницы, где пользователь принимает ответ о покупке (либо регистрации), — хорошая тактика, которая дает последний толчок к совершению конверсионного действия.
  • Свяжите ваши отзывы с большими тематическими изучениями либо видео. Это будет содействовать предстоящему росту доверия пользователей к продукту.
  • Как отзывы клиентов воздействуют на коэффициент конверсии?

7. Коэффициент внимания (attention ratio)

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

Коэффициент внимания — это отношение интерактивных элементов страницы к числу дешёвых на ней целевых действий.

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

  • Желаете поднять конверсию лендинга? Уберите отвлекающие факторы

8. Протяженность страницы

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

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

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

Пример: Mailchimp

Лендинг сервиса почтовых рассылок Mailchimp практически не испытывает недостаток в скроллинге и предлагает уровень простоты, которым может похвалиться редкая SaaS-компания:

«Отправляйте лучшие email ы»

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

  • Как долгим должен быть действенный лендинг?

9. Анимация и фоновое видео

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

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

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

По данным: medium.comimage source daisyduck2007

Случайные статьи:

Как раскрутить лендинг за 1 месяц?


Подборка похожих статей:

riasevastopol

More Posts