Компания
40,64
рейтинг
17 октября 2014 в 14:21

Дизайн → Мы проанализировали 20 лэндингов крутых стартапов и вот чему мы научились перевод

main

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

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

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

В первую очередь вашa главная страница должна объяснять о чем ваш продукт или сервис.  И это еще не все — она должна делать гораздо больше:
  • Она должна убеждать ваших посетителей, что вам можно верить, что вы надежны и действительно существуете.
  • Она должна говорить вашим посетителям, куда идти дальше.
  • Она должна предоставлять достаточное количество информации для того, чтобы не дать посетителям нажать на кнопку «назад».

И все это она должна делать в очень короткое время.

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

Первый шаг: Найдем 20 SaaS стартапов


Мы хотели проанализировать комбинацию старых и новых стартапов для определения элементов на их страницах, из которых можно будет увидеть какую-то модель/шаблон создания «идеальной» страницы. И так начнем с нескольких «топовых стартапов» и «наиболее успешных стартапов»:
  1. ZenDesk
  2. Basecamp
  3. Boostable
  4. Intercom
  5. Optimizely
  6. Contently
  7. NextBigSound
  8. CampaignMonitor
  9. KISSmetrics
  10. BrowserStack
  11. Trello
  12. NewRelic
  13. MixPanel
  14. Wistia
  15. Recurly
  16. Geckoboard
  17. Sqwiggle
  18. Hootsuite
  19. UserVoice
  20. Pingdom

 

Следующий шаг: Анализ каждой главной страницы


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

ZenDesk


Сервис для поддержки  клиентов от Zendesk.

Элементы на странице: Фиксированный хедер, слоган + призыв к действию + скриншот, список функций, список клиентов, призыв к действию и футер.
002

Basecamp


Basecamp — это любимые всеми приложения для управления проектами. 

Элементы на странице: Хедер, Слоган (использующий социальные доказательства) + призыв к действию / соц. доказательства, скриншоты, FAQ, еще больше соц. доказательств, ссылки на дальнейшую информацию и футер.

Boostable


Повысьте свою видимость в маркетплейсах с помощью рекламы с Boostable.

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

Intercom


Сервис по сбору информации о пользователях и коммуникации с клиентами.

Элементы на странице: Фиксированный хедер, Слоган + поле для емейла + призыв к действию, сравнение функций, список клиентов, функции + скриншоты, отзывы и футер.
005

Optimizely


Сервис для А/Б тестов, который вы действительно используете.

Элементы на странице: Хедер, Слоган + поле для емейла + призыв к действию и футер

Contently


Contently дает возможность журналистам и брендам привлекать аудиторию более интересным содержанием.

Элементы на странице: Хедер, слоган + список клиентов + призыв к действию, как это работает, список клиентов, соц. доказательство и футер

NextBigSound


Аналитика и инсайты для музыкальной индустрии.

Элементы на странице: Хедер, Слоган + поиск, главные функции,  отчет, кейсы, отзывы и футер

CampaignMonitor


Посылайте красивые емейлы рассылки с Campaign Monitor.

Элементы на странице: Фиксированный хедер, слоган + призыв к действию, список клиентов, функции и футер.
009

KISSmetrics


Информация о клиентах и веб аналитика.

Элементы на странице: Слоган + после для веб сайта + призыв к действию и футер.
010

BrowserStack


Проверяйте свой сайт на поддержку кроссбраузерности на реальных браузерах.

Элементы на странице: Хедер, Слоган + Видео + форма подписки, список клиентов, отзывы, функции и футер.
011

Trello


Trello следит за всем, от общей картины до маленьких деталей.

Элементы на странице: Слоган + призыв к действию, функции + скриншоты, список клиентов, призыв к действию и футер.
012

NewRelic


Слежение и управление за производительностью приложения.

Элементы на странице: Хедер, слоган + призыв к действию, список клиентов, отзывы, функции + видео и футер.
013

MixPanel


Наиболее продвинутая аналитическая платформа для мобильного и веб рынка.

Элементы на странице: Хедер, Слоган + призыв к действию, список клинтов, кейсы, отзывы и футер.
014

Wistia


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

Элементы на странице: Хедер, слоган, функции + видео, отзывы и футер.
015

Recurly


Эксперты по оплате подписок и повторяемым оплатам.

Элементы на странице: Хедер, Слоган + призыв к действию, список клиентов, выгода + отзывы, функции и футер.
016

Geckoboard


Информационные доски для бизнеса.

Элементы на странице: Хедер, слоган + призыв к действию + видео на фоне, список клиентов, выгода, как это работает, отзывы и футер.
017

Sqwiggle


ПО для совместной работы онлайн для удаленных и виртуальных команд.

Элементы на странице: Хедер, слоган _ призыв к действию + скриншоты, проблемы, отзывы, выгода, отзывы, форма для регистрации и футер. 
018

Hootsuite


Доска для управления соц. медиа.

Элементы на странице: Фиксированный хедер, слоган + призыв к действию, планы, функции, целевой рынок и футер.
019

UserVoice


ПО для онлайн помощи и получение обратной связи от пользователей.

Элементы на странице: Фиксированный хедер, слоган + призыв к действию, функции + скриншоты, кейсы, видео, список клиентов и футер.
020

Pingdom


Простой мониторинг производительности и времени готовности к работе.

Элементы на странице: Фиксированный хедер, слоган + призыв к действию + скриншоты, список клиентов, отзывы, выгода, соц. доказательства, функции, планы и цены, клиенты  и футер

 

Следующий шаг: Анализируем каждый используемый элемент


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

Вот несколько интересных статистических фактов об этих 20-ти стартапах:

100% - содержат слоган 75% -  содержат описание после слогана

95% -  содержат призыв к действию на первом экране 20% -  содержат призыв к действию с полем ввода (емейл или веб сайт) перед ним

50% -  содержат слово «бесплатно» в их призывах к действию

10% -  содержат полную форму регистрации

5% -   содержат информацию о ценах 20% -  указывают выгоду от пользования их продуктом 65% -  указывают список функций их продукта

Мультимедия

20% - содержат видео

35% - содержат скриншоты

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

85% - содержат хедер

30% - содержат фиксированный хедер, который остается на экране при прокручивании

100% - содержат футер

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

80% - содержат какую-то форму соц. доказательств (список клиентов, отзывы или кейсы)

60% - содержат список клиентов

50% - содержат отзывы

15% - содержат кейсы

 

Что же эти цифры говорят нам?

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

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

 

1. Ваш слоган: Ваш шанс выделиться


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

Все стартапы содержали слоган — и 75%  из них писали описание сразу под ним. Старайтесь использовать как можно более короткие фразы, произнесите их пару раз вслух. Представьте, что у вас есть 5 секунд чтобы объяснить о чем ваш продукт или сервис другу… чтобы вы сказали?

 

Тестируем идеи:
  • Тестируйте новые слоганы
  • Добавляйте или меняйте описание после слогана

Вот несколько примеров от стартапов:

036 037 038 039 040

021

022 023 024 025 026 027 028 029 030 031 032 033 034 035

 

2. Ваш призыв к действию: Увлеките ваших клиентов на первом экране


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

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

Тестируем идеи:
  • Тестируйте новые фразы для призывов к действию — попробуйте  слово «бесплатно»
  • Попробуйте разные цвета и форматы
  • Добавьте поле для ввода перед призывом, чтобы зацепить посетителя
  • Если ваша форма для регистрации не большая, попробуйте вставить её в главную страницу

 

Вот несколько примеров от стартапов:

057 058 059 041 042 043 044 046 047 048 049 050 051 052 053 054 055 056 045

 

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


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

Три основных формы социальных доказательств:
  1. Список клиентов или количество клиентов (60%)
  2. Отзывы (50%)
  3. Кейсы (15%)

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

 

Тестируем идеи:
  • Добавьте список клиентов — даже небольшой список сможет помочь.
  • Используйте сервис www.userstats.com чтобы быстро добавить соц. доказательства на ваш сайт.
  • Попросите ваших клиентов  написать отзыв.
  • Если вы знаете клиента, который доволен вашим продуктом, попробуйте построить кейс на основе  его примера.

 

Вот несколько примеров от стартапов:

072 073 074 075 060 061 062 063 064 065 066 067 068 069 070 071

 

4. Функции: Объясните как работает ваш продукт


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

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

 

Тестируем идеи:
  • Добавьте скриншоты, чтобы визуально объяснить что делает ваш продукт.
  • Если возможно, создайте короткое видео, описывающее какие выгоды принесет ваш продукт.
  • Постарайтесь получить отзыв на каждую функцию в вашем продукте, это поможет показать выгоды от них словами клиентов
  • Делайте ваши функции более ориентированными на выгоду. Просто отвечайте: Как эта функция поможет моим клиентам?

 

Вот несколько примеров от стартапов:

090 076 077 078 079 080 081 082 083 084 085 086 087 088 089

 

5. Больше информации: Для посетителей, которые хотят узнать больше


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

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

 

Тестируем идеи:
  • Добавьте второй призыв к действию, ведущий на дополнительную информацию.
  • Добавляйте FAQ секцию на страницу с ответами на основные вопросы.
  • Вставьте ссылки на блок или базу ответов в футер.

 

Вот несколько примеров от стартапов:

096 097 098 099 091 092 093 094 095

 

И так финальный список: идея для проверки


Благодаря анализу сайтов можно подчеркнуть 17 идей которые стоит попробовать на вашей странице. Важно помнить, что идея которая работает на одном сайте может не подходить к вашему.  Подробное А/Б тестирование необходимо для проверки, как влияет тот или иной элемент на конверсию. И помните: иногда удаление контента с вашей страницы может оказаться самым эффективным решением. И так финальный список:
  1. Тестируйте новые слоганы.
  2. Добавляйте или меняйте описание после слогана.
  3. Тестируйте новые фразы для призывов к действию — попробуйте  слово «бесплатно».
  4. Попробуйте разные цвета и форматы.
  5. Добавьте поле для ввода перед призывом, чтобы зацепить посетителя.
  6. Если ваша форма для регистрации небольшая, попробуйте вставить её в главную страницу.
  7. Добавьте список клиентов — даже небольшой список сможет помочь.
  8. Используйте сервис www.userstats.com чтобы быстро добавить соц. доказательства на ваш сайт.
  9. Попросите ваших клиентов написать отзыв.
  10. Если вы знаете клиента, который доволен вашим продуктом, попробуйте построить кейс на основе его примера.
  11. Добавьте скриншоты, чтобы визуально объяснить что делает ваш продукт.
  12. Если возможно, создайте короткое видео, описывающее какие выгоды принесет ваш продукт.
  13. Постарайтесь получить отзыв на каждую функцию в вашем продукте, это поможет показать выгоды от них словами клиентов.
  14. Делайте ваши функции более ориентированными на выгоду. Просто отвечайте: Как эта функция поможет моим клиентам?
  15. Добавьте второй призыв к действию, ведущий на дополнительную информацию.
  16. Добавляйте FAQ секцию на страницу с ответами на основные вопросы.
  17. Вставьте ссылки на блок или базу ответов в футер.

 

Список выше должен дать вам несколько идей, что попробовать на вашем сайте, чтобы на ваш сервис подписалось еще больше людей. Но перед началом каких-либо изменений проанализируйте ваш текущий сайт, чтобы знать с чем сравнивать ваши успехи.
Автор: @dmitry_iv Marc Von Brockdorff
Carrot quest
рейтинг 40,64
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (17)

  • +10
    Не забываем про парадокс выжившего — разновидности систематической ошибки отбора, когда по одной группе («выжившим») есть много данных, а по другой («погибшим») — практически нет. Так что исследователи пытаются искать общие черты среди «выживших», забывая о том, что не менее важная информация скрывается среди «погибших».

    ru.wikipedia.org/wiki/%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0_%D0%B2%D1%8B%D0%B6%D0%B8%D0%B2%D1%88%D0%B5%D0%B3%D0%BE
    • +4
      Было бы хорошо вторую статью добавить про ошибки, которые допустили эти стартапы. Например, что у них было месяц назад и что они переделали.
    • +8
      Более того, лично я уверен, что и у погибших были хидеры, футеры, слоганы, скриншоты, призывы к действию и всё прочее, перечисленное в этой статье. Вот только не взлетело, поскольку делали какую-то хрень. Ну и соответственно делаем выводы, насколько полезна статья.
      • +3
        2/3 перечисленных выше тоже делают что-то совершенно непонятное…
      • 0
        Мы не читали статью как руководство к действию. Скорее как возможность посмотреть и разобрать что делают другие. Какие-то приемчики подглядеть, Понятно, что надо делать АБ тесты и убивать не выжившие варианты. Но чтобы подготовить АБ тест надо знать из чего готовить.
  • +2
    Большую работу провели — это видно.
    А какие выводы?
    • 0
      Чтобы делать выводы нужно проводить AB тестирование и смотреть статистику. Важно не какой лэндинг вы сделаете в начале, а как сможете его модифицировать для увеличения конверсии.
      • 0
        Да, мы переделываем главную страницу уже 4-й раз.
        Сделали, провели АБ тест, увидили что вариант А лучше. Думаем дальше.
        Хотя пару раз приходилось полностью менять, т.к. изменилось видение проекта. И понеслась по новой.

        НО!!! Самый крутой АБ тест — это когда вы берете свой дизайн лэндинга, распечатываете или на айпад скидываете. И идете ножками по целевой аудитории. Да и по друзьям тоже. И тупо спрашиваете — «что поняли?».

        Еще методика: «включи внутреннего дибила». Представляем, что мы ничего не знает про свой продукт. И вообще в интернете 3-й раз. И вперед штудировать страничку. Тоже многое открывается.

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

        • 0
          Отличный вы тест предложили в своем комментарии. Иногда тааааааааааакое выясняется, что никакими А\В тестированиями и изучением показателей Метрики и Аналитикса не узнать))) Но это не отменяет необходимости во всем том, что описано в статье.
      • 0
        Пока проведем АВ-тестирование данные устареют. И все с начала.
  • 0
    Будет вообще отлично, если добавишь ссылки на лэндинги.
  • 0
    Отличное исследование, если бы не одна проблема — слишком большая выборка по времени. Если выбирать срезы не более 1 года — получится эффективный материал.

    Длительность 1 год актуальна для IT. Реклама, пожалуй — 2-4 года.
  • –3
    Вы думаете лендинг сделал стартап популярным?
    Все равно что считать, что мерседес обязан успеху своему логотипу.
  • +1
    Три пункта для оценки посадочной страницы
    1. Открываем лендинг.
    2. Смотрим продукт.
    3. Закрываем лендинг.

    Бонус (кому не помогло): смотрим на свой продукт и делаем вывод о поиске новой работы.
  • 0
    А среди нет случайно страницы длиной в 20 экранов и с текстами длиной в «Войну и мир», как любят делать для наших местечковых «лендингов»?

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

Самое читаемое Дизайн