Как создать лендинг, который КОНВЕРТИРУЕТ

Итак, у вас есть маркетинговая стратегия. Контекстная реклама настроена и запущена, страницы сайта оптимизированы и генерируют хороший поток людей с органического поиска, реклама в Facebook* работает, и вы получаете много трафика. Я понимаю, что вероятно, ударяюсь в фантазии, но пока что пусть будет так. Люди заходят к вам на сайт, но по какой-то причине вы не видите, чтобы другие цифры куда-либо сдвинулись с мёртвой точки. Стоит ли опустить руки и решить, что ваша маркетинговая стратегия не работает? Пока что нет. Первое, на что нужно взглянуть – что же делают люди после того, как кликнут по вашей рекламе. Если у вас нет хорошего лендинга, это то же самое, что идти на рыбалку без сети: вы можете поймать большую рыбину на крючок, но не сумеете затащить её в лодку. Вы не хотите, чтобы люди просто посещали вашу страницу. Вы хотите, чтобы они предприняли действие, как только они там оказались. Так что сделайте это действие для людей настолько простым и притягательным, насколько это возможно, включив эти элементы, которые помогут добиться КОНВЕРСИИ:

• К = Кристально понятный призыв к действию
• О = Оффер
• Н = Направленное внимание
• В = Важные факторы
• Е = Естественно, эффективный заголовок
• Р = Разрешение и удобная для чтения разметка страницы
• С = Соответствующая графика
• ИЯ = Идеальное и Ясное социальное доказательство

Кристально понятный призыв к действию

В знаменитой сцене из фильма «Гленгарри Глен Росс» («Американцы») человек, которого послали обучать неудачливых менеджеров по продажам, кратко излагает мантру продавца – «Всегда закрывай сделку». Эти слова станут и мантрой вашего лендинга. И вы закроете сделку, фокусируясь на призыве к действию. Призыв к действию (CTA – call to action) – это то, что вы хотите от посетителей:

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

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

Рекомендации по стратегии

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

Рекомендации по дизайну

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

Поучительная история

Forrester Research. Реально непонятно, что на этой странице нужно сделать. Выполнить расширенный поиск? Это единственный элемент, который выделяется визуально, и имеет симпатичную стрелку, указывающую на него. Не уверен, что это помогает компании продавать организацию мероприятий.

Как правильно

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

Оффер

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

Рекомендации по стратегии

Лучшие предложения толкают пользователей глубже в воронку конверсии:

• Веб-сайт с оплатой по счёту может предложить посетителям 10$ на оплату первого счета, что будет означать подписку на сервис и связь с аккаунтами пользователей.
• Консалтинговое агентство может предложить бесплатную 60-минутную консультацию, что в действительности означает встречу, на которой вам расскажут, какое потрясающее это агентство.
• Что бы вы ни предлагали, попытайтесь обозначить крайний срок действия предложения, чтобы создать ощущение срочности и подстегнуть вторую сторону с ответом.

Рекомендации по дизайну

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

Поучительная история

ААА. Здесь много чего сделано неправильно. Большинство сайтов страховых компаний предлагает к заполнению пустые поля с минимумом информации, в основном только просят ввести почтовый индекс. Компания ААА выбирает путь больше «требовательный», нежели «предлагающий», блокируя дальнейший просмотр страницы, пока они не получат то, что просят. Разглядывая затемнённую страницу, вы видите, что даже после того, как они получат ваш почтовый индекс, вы ничего не получите взамен, а просто вобьёте данные, чтобы кто-то из компании позвонил вам. То, чего все они хотят!

Как правильно

Оффер на фото: Получите 30000 бонусных миль, если потратите 1000$ за первые 3 месяца. Бесплатное годовое обслуживание карты в первый год, затем 95$.

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

Направленное внимание

Известный как KISS-принцип (Keep It Simple, Stupid или Сделай это проще, дурачина) показал, что чем больше выбора вы даёте людям, тем дольше они принимают решение. Так что чем более ясной и простой вы сделаете страницу, тем более вероятно, что вам удастся склонить кого-то к действию, которое вы задумали.

• Вам действительно нужна эта навигационная панель? Уберите её или визуально минимизируйте, либо уберите элементы, на которые пользователь может кликнуть и которые не являются призывом к действию.
• Действительно ли нужно рассказывать о философии вашей компании? Перенесите этот текст в раздел «О компании» и ограничьте контент, который не служит цели продвинуть людей в глубь воронки.
• Вам действительно нужно собирать всю эту информацию? Если у вас есть форма для введения данных, пусть она будет короткой. Исследование за исследованием показывают, что чем больше полей в форме сбора контактов, тем меньше отклик, так что просите у ваших пользователей голый минимум информации.

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

Рекомендации по стратегии

• Убедитесь в том, что всё, что вы размещаете на странице, изложено коротко и ясно и служит достижению поставленной цели.
• Хотя многие люди прокрутят мимо главную страницу сайта, вам не нужно направлять их туда. Создавайте узкоспециализированные лендинги для маркетинговых программ. Это поможет вам остаться сфокусированным.
• Длина формы подписки – это ещё одно большое поле для тестов.

Рекомендации по дизайну

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

Поучительная история

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

Как правильно

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

Важные факторы

Мы все слышали истории о компаниях, которые покупали легко запоминающийся URL, не размещали на странице никакой информации о том, зачем нужен этот сайт, и пожинали урожай в 1 миллион имейл-адресов даже ещё до того, как сайт был запущен. Вы должны понимать, что это не произойдёт с вашей компанией. Напротив, вы должны дать посетителям причины, почему они должны сделать то, что вы от них хотите. Эти причины и являются очень ВАЖНЫМИ ФАКТОРАМИ. Факторы должны быть очень важными – не стоит создавать огромную портянку. Посетитель бегло знакомится с сайтом, он не хочет читать руководство по применению вашего продукта на главной странице. Выделите от двух до пяти фактов о вашем продукте или сервисе, которые, как вы думаете, будут самыми важными для ваших посетителей, и подчеркните их.

Рекомендации по стратегии

Обычно считается, что вы должны описывать то, что продаёте, с точки зрения покупателя. Другими словами, объяснить, какие проблемы ваш продукт или сервис поможет решить. Подойдёт вам это или нет, но это огромное поле для тестирования. В общем, вы можете описать важные факторы как:

• Особенности – список характеристик вашего продукта или сервиса.
• Выгоды – как эти характеристики помогут вашему посетителю.
• Болевые точки – как характеристики помогут вашему посетителю избежать проблем.

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

Рекомендации по дизайну

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

Поучительная история

Yammer. Итак, теперь, когда компания Microsoft купила Yammer, они больше не пытаются зарегистрировать людей в своей сети? Потому что, боже мой, Yammer, да когда же ты откроешь личико? Не только эта страница целиком представляет собой страницу подписки. Если вы зайдёте на yammer.com – это тоже всего лишь страница входа в сеть. Вам нужно кликнуть, чтобы найти эту вкусняшку.

Как правильно

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

Эффективный заголовок

Заголовок, составленный специально для печатной или контекстной рекламы, обычно продуманный, забавный или эксцентричный. Ему необходимо быть таким, потому что подобная реклама пытается махать руками перед вашим лицом и отвлекать вас от дел, чтобы вы только посмотрели на объявление. На вашей веб-странице вы не боретесь за внимание. Вы уже что-то сделали, чтобы посетители оказались здесь. Теперь вам просто нужно убедить их придвинуть стулья и остаться какое-то время. Люди, приходящие на ваш сайт, в течение доли секунды решат, хотят ли они вернуться к своей игре в «Слова с друзьями» или остаться и посмотреть, что вы предлагаете. Лучший способ оставить их здесь – это сказать им в понятной форме, о чём ваш сайт.

• Продаёте покрывала с рукавами? «Дом Slanket – знаменитого покрывала с рукавами»
• Продаёте консультации по маркетингу? «Как продавать лучше?»
• Продаёте передовое приложение, отслеживающее местоположение? «Найдите ваших друзей немедленно!»

Рекомендации по стратегии

Люди, которые заняты мыслью: «Какого чёрта эти ребята делают?» менее расположены прочитать ваш буклет (белую книгу), выложить свой адрес, купить ваш виджет, записаться на вебинар или скачать ваше приложение. Так что, когда вы составляете заголовок, предпочтите ясность и пояснения, а не скромность и остроумие.

Рекомендации по дизайну

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

Поучительная история

Надпись на картинке:

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

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

Как правильно

Заголовок: Платформа для больших массивов данных Найдите невероятные решения для вашего предприятия

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

Разрешение и удобная для чтения разметка страницы

А знаете ли вы, что до сих пор некоторые люди бродят по интернету, сидя за мониторами с разрешением 800х600? И что самый популярный размер экрана в США до сих пор 1024х768? Это означает, что общая визуальная картинка, которую вы видите на вашем мониторе с высоким разрешением может сильно отличаться от того, что видит ваш клиент. Размещайте самые важные части вашего сообщения – логотип, заголовок, призыв к действию, вспомогательные изображения – наверху в центре экрана, а чуть ниже размещайте вспомогательный текст.

Рекомендации по стратегии

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

Рекомендации по дизайну

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

Поучительная история

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

Как правильно

А так отображается страница Visual Website Optimizer на экране с разрешением 1024. Ах! Здесь всё есть – хороший заголовок, прекрасный призыв к действию, социальное доказательство и несколько характеристик. Даже при более низком разрешении самые важные элементы будут отображаться.

Соответствующая графика

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

• Ясный, простой дизайн с доминированием белого пространства, приучает людей реагировать на призыв к действию.
• Крупный шрифт притягивает взгляд, облегчает чтение и улучшает понимание того, о чём ваш сайт.
• Маркерный список больших блоков текста легко просматривать мимолётом.
• Видеоролики вмещают в маленьком пространстве большой объем информации и могут увеличить конверсию до 80%.

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

Рекомендации по стратегии

Это ещё одно хорошее поле для экспериментов. Ваша аудитория реагирует больше на фотографии или картинки? Людей или предметов? Помогает ли это показать продукт в действии?

Рекомендации по дизайну

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

Поучительная история

My Health Insurance. Процитирую Уитни Хьюстон: «Ну уж нет!» Среди остальных ужасов у нас здесь есть банальнейшие из банальных стоковые фотографии, одна из которых искажена, грубая стрелка, указывающая на кнопку, которая даже не является кнопкой, зернистый текст, некто, говорящий: «Выбери свой тарифный план», не дающий никакого выбора, и конечно же, огромная клоунская кнопка «Кликните здесь», которая не говорит вам, что произойдёт, когда вы на неё нажмёте. Я подозреваю, что ваш компьютер взорвётся.

Как правильно

Ribbon. Здесь цвет приковывает ваш взгляд к призыву к действию. Элементы навигации приглушены. Дизайн лаконичный и простой, а продукт показан в действии на видео.

Идеальное и ясное социальное доказательство

Однажды летом я занималась волонтёрством и собирала деньги, ходя от одной двери к другой. Однажды мне повезло: мне дали денег и ещё несколько людей из ближайших домов тоже дали. Спустя какое-то время мне не нужно было даже идти на своё постоянное место. Я просто держала лист бумаги, показывая людям, что всех их соседи сделали пожертвование, и они делали то же самое. Люди, как социальные создания, обычно выше оценивают те вещи, которые другие люди уже оценили. Поэтому большинство сайтов пытаются показать очевидность такого социального одобрения:

• Список клиентов.
• Упоминание в прессе.
• Статистика использования.
• Отзывы.

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

Рекомендации по стратегии

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

Рекомендации по дизайну

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

Поучительная история

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

Как правильно

Optimizely. 4 социальных доказательства на одном экране: заметка о появлении в новостях CNN в самом верху страницы, утверждение «№1» в заголовке, «3000 довольных клиентов» и визуально лаконичное отображение известных брендов.

Заключение

Все эти рекомендации можно подытожить довольно просто: вам должно быть ясно, какое действие вы ждёте от посетителя. Сделайте так, чтобы ему было легко и просто сделать это. Вскоре у вас будет лендинг, который КОНВЕРТИРУЕТ! Ох, и P.S. – Не забывайте всё тестировать! Об авторе: Бет Морган – консультант по маркетингу и советник по стартапам на первоначальных этапах. Больше статей вы найдёте на её сайте Marketing Nerdistry или можете подписаться на нее в Twitter. Оригинал статьи: https://blog.kissmetrics.com/c-o-n-v-e-r-t-s/ Перевела Татьяна Пушкина