что нужно для создания лендинга
Пошаговый курс по созданию продающего Landing Page c нуля. Часть 1: Посадочные страницы и трафик
Запускаем первый обучающий цикл статей по одностраничникам, трафику и построению системы продаж через интерент. В первую очередь курс предназначен для новичков и тех, кто только запускает продажи в онлайне, хочет протестировать идеи бизнеса и маркетинга или хочет получить новый поток клиентов в свой бизнес. Надеемся, что опытным специалистам курс даст интересные идеи.
Посадочные страницы и трафик
Система продаж в интернете проста. На начальном этапе у вас есть 2 основных инструмента, это посадочные страницы (или как их ещё называют одностраничники или Landing Page) и трафик. Всё! Больше ничего не нужно. Нужно разобраться, как работают эти инструменты и немножко подумать. Главная цель — создать работающую систему, и здесь я расскажу, как это сделать.
Зачем нужен одностраничник?
Одностраничник, в привычном понимании, это сайт, который состоит из одной страницы и предлагает какой-то один конкретный товар, услугу, приложение или сервис. Это может быть физически ощущаемый товар, как кирпичи и цветы, или цифровой товар – курсы, диски, тренинги. Любые услуги, начиная от сантехников, фотографов, образования, курсов, и заканчивая кейтерингом и промышленным строительством. Либо сайт, который используется для сбора подписчиков. Это может быть сайт, на который приземляется трафик с email-рассылки. Применений огромное количество, в идеальном случае Вы можете использовать систему одностраничников для решения своих бизнес задач. С одной стороны не важно, что на сайте, но важно, что это одна реальная проблема, которая есть у клиента и Вы можете её решить. Чтобы было удобнее, будем называть товары (физические и цифровые), услуги и все остальное – просто продуктом.
Почему одностраничники работают в разы лучше, чем обычные сайты?
У одностраничника есть одна конкретная, четко определенная цель. Решить одну проблему клиента, которая хорошо упакована визуально. Поэтому и работает он лучше, так как пользователю предлагается одно конкретное действие. Он может либо сделать его, либо нет. Одностраничник упрощает восприятие информации, так как Вы сами даёте посетителю ответы на все интересующие его вопросы. Ему не нужно прилагать усилий, ничего искать. Вы просто приносите ему все готовое на блюдечке. Вы полностью концентрируете внимание человека на продукте/услуге, показываете выгоды, которые он получит и решении его проблемы. Вместе с этим Вы закрываете большую часть его возражений и рассказываете, почему он «хочет» купить здесь, сейчас и у Вас.
У одностраничника нет таких проблем, как у больших сайтов, когда пользователь забывает куда и зачем он пришел, полностью теряя концентрацию на продукте. На больших сайтах огромный выбор ссылок, кнопок и действий, которые можно сделать. Пользователи теряются в вариантах выбора и количестве возможных действий. Большой процент продаж теряется на этапе корзины и многошагового оформления заявки.
Используя Landing Page мы изначально уже в выиграшной ситуации. Если средняя конверсия (процент купивших посетителей) интернет-магазина менее 1%, то у Landing Page она от 1% до 50%. Но если Вы не сделаете правильную структуру, тексты и дизайн, то магии не будет, волшебных продаж из воздуха не бывает.
Посмотрите на примере ниже. Думаю понятно, почему на одностраничнике очевидно, что требуется от пользователя и куда ему нужно нажимать.
Одностраничник решает задачу выполнения целевого действия в разы лучше
Почему сайт + трафик ≠ деньги?
К концу курса Вы получите такой инструмент для конвертации пользователей в клиентов, как одностраничник. Да это круто! Но если у Вас нет посетителей на сайте — трафика, то и не будет пользователей, а значит превращать в клиентов будет некого.
Важно понимать, что Ваш продукт будет продаваться только в связке: хороший, качественный продукт + хороший, качественный лендинг + хорошие, качественные каналы трафика. Конечно, что-то может хромать, но не всё. Поэтому нужно тестировать каналы трафика и варианты гипотез для сайта, чтобы найти такую пару: канал/трафик + гипотеза/сайт = максимальный результат. Одни пары будут прибыльны, другие рентабельны, третьи убыточны. Это нормально.
Продажи всегда состоят из лендинг пейджа и канала трафика.
Гипотеза. Это то, как Вы думаете, почему у Вас будут покупать, ключевая фраза здесь «Вы думаете», потому что окружающая реальность бывает не согласна.
Гипотезы нужно проверять на жизнеспособность. И способ только один — сделать сайт с гипотезой и пустить реальный трафик.
Landing Page и трафик приносят прибыль, когда настроены два инструмента. При системном подходе можно найти, что и где не работает, затем заменить. Поэтому в любом случае Вы создадите работающую систему. Единственное, что не известно, так это за какое количество шагов: за 1 или за 10? Но при правильном подходе, которому Вы научитесь в этом руководстве – результат неизбежен.
Качество vs. скорость?
Сайт – это инструмент для конвертации Ваших посетителей в Ваших клиентов. Что тут важнее? Сделать быстрее сайт и протестировать? Или подойти основательно и сделать качественно, а потом протестировать?
Представим, что есть 4 сайта разных по качеству. Один будет изначально убыточен, второй — на грани, третий и четвертый будут зарабатывать. Аналогичный пример можно привести и для настройки и выбора каналов трафика. Одни рекламные каналы и объявления будут убыточны, другие прибыльны. Нужно искать то, что сработает для Вашего бизнеса.
Результат вложения денег в рекламу может быть совершенно разным. Можно не окупать канал рекламы, а можно в разы увеличивать вложенные деньги.
Ах да, скажите, что нам нужно быстро протестировать и понять работает ли ниша/продукт или нет. Если у Вас нет опыта в десятках продающих страниц, написании текстов, доскональном знании своего клиента и настройке рекламных каналов, то в 99% случаев получится сайт, который изначально уже не работает. И на нем Вы хотите тестировать спрос? Хотите максимально быстро и бесплатно сделать неработающий сайт, чтобы потом потратить 5 000 — 10 000 рублей на рекламу для теста? Непродуманный сайт и непродуманная реклама – 100% путь “просто потерять деньги”. Так зачем тратить время, силы и деньги, если результат изначально известен?
Это как продавать разбитую машину. Доказывать с умным видом покупателю, что она целая, а потом удивляться, почему её не покупают.
Я не говорю, что надо месяцы потратить на вылизывание страницы перед запуском. Нужен все же баланс между временем и качеством. Лучше делать чуть дольше и получить результат и прибыль, чем быстро доказать обратное. Не играйте в бизнеc… Он точно выиграет.
Чтобы правильно создать сайт, нужно потратить прилично сил и времени, и ещё обязательно приправить “сделано с душой” или “сделано с любовью”. Зато результат, в виде заказов и прибыли, окупит все труды. Давайте делать сразу WOW-эффект!
Почему у 70% Landing Page не работают?
Задача одностраничника не продать сразу в лоб, как многие думают, а заинтересовать и сконвертировать посетителя в какое-то определенное действие, на определенном этапе в воронке продаж. Обычно, одно из самых простых, это получение заявки. Получив контакт будующего клиента, вы уже продаете ему по телефону или через email-маркетинг, что гораздо проще, чем продать на сайте. Воронка продаж – это этапы через которые должен пройти клиент, от момента, когда у человека возникло осозание проблемы — “проблема клиента” и до получения денег — “продажа”.
Каждый этап воронки продаж продает следующий этап воронки. Важно не пропускать этапы.
Часто вижу, как выкидывают больше половины этапов воронки продаж, а потом удивляются, почему это не работает. Почему же нет продаж. Это то же самое, как научиться ездить на машине. Нужна теория – практические занятия на площадке – практические занятия в городе – и уже потом права и умение ездить на машине. А теперь представьте, что Вы сели первый раз за руль и едете на МКАДе. Неизбежно будет авария. Так же и продажах. Клиент должен последовательно пройти через все этапы воронки продаж, иначе продаж не будет.
Сейчас во многих бизнесах исчез этап встречи для простых и понятных продуктов. Всё зависит от специфики бизнеса и сложности продукта. В некоторых бизнесах нужны 5 или 10 встреч. Иногда время от первого контакта с клиентом до продажи может составлять месяцы и годы, а иногда 5 минут.
В любом случае воронка продаж на 70% — это понимание клиента. Как он мыслит, его шаги от проблемы до желания покупки, а потом уже продажи. Не нужно продавать в лоб. Сейчас это уже не работает. Ваш бизнес должен быть построен на решении проблемы клиента.
Воронка продаж – это такая логическая цепочка касаний с клиентом, которая на каждом этапе убеждает в «хорошести» продукта, получения ценности и вызывает желание купить.
Оцениваем бюджет и заряжаемся позитивом.
Перед запуском любого бизнеса, сначала нужно прикинуть сколько денег нужно потратить, чтобы что-то протестировать и какая будет возможная прибыль.
Нужно хорошо понимать, как посчитать затраты на рекламные каналы, чтобы знать чего ждать и ставить реальные цели, а не разочаровываться потом. Всегда опирайтесь в своих выводах на цифры. Цифры в отличии от мнений не врут.
Некоторые определения, на которые мы будем опираться в дальнейшем, чтобы говорить на одном языке:
Посетитель – человек, который попал к Вам на сайт.
Лид (Lead) – потенциальный покупатель, который с Вами связался, оформил заявку на покупку, консультацию, заказал звонок или нажал кнопку купить.
Конверсия (CTR) – количество совершенных действий/деленное на общее число потенциально посетителей, которые могли совершить такое действие. Например на сайт зашло 100 человек, заказал 1, то CTR = 1%, заказало 10 человек, купил 1 CTR = 10%.
Клиент – тот, кто у Вас что-то купил.
Средний чек – сумма, которую приносит один заказ. Не путать с прибылью и маржой на продукт. Если один заказ на 1 руб, а второй на 9 руб. Средний чек – 5 руб.
Выручка – сколько денег Вы всего заработали.
Валовая прибыль – сколько чистыми Вы заработали и можете положить себе в карман или потратить на отпуск, хобби, мечту.
Эффективность бизнеса (ROI) – если больше 100%, то прибыльный, меньше 100% – убыточный. Рассчитывается, как отношение выручки к затратам.
Стоимость лида определяется конверсией Landing Page, вот почему за этот показатель все ни на шутку бьются. Чем выше CTR страницы, тем ниже стоимость лида, следовательно получается больше маржа и прибыль, при тех же затратах на рекламу.
Чтобы примерно оценить стоимость лида, нужно оценить стоимость одного клика и прикинуть конверсию для страницы. Это всё очень приблизительно, но хоть как-то даёт понять будущую картину. Возьмите среднюю цену за клик в вашей тематике (например 30 рублей) и значение конверсии (например 2%). Потому что, если пройти эти жесткие условия, и цена за клик будет меньше, а конверсия больше, то дальше будет радость и много денег.
Посчитайте, сколько будет стоить лид.
Например 30 р./0.02 = 1 500 руб. Это значит, чтобы получить одну заявку, нужно потратить 1 500 руб. Отсюда посчитайте сколько Вы должны зарабатывать с одной продажи, чтобы получать прибыль. Если Вы продаете мёд по 500 рублей, то конечно данная схема совсем не выгодна. А если Вы занимаетесь проектной документаций, где с одного заказа можно зарабатывать больше 1 000 000 рублей, то это совсем другое дело. Все зависит от конкретного бизнеса.
Чтобы снизить цену за лида, можно увеличить конверсию или найти более дешевый источник трафика. Или добавить вирусности и рекомендации.
Как работает воронка продаж или цифры, которые меняют всё.
Воронка продаж имеет два огромных плюса. Во-первых, можно находить проблемные места в своем бизнесе. Посмотреть, на каком этапе низкая конверсия и там подлечить свой бизнес. Во-вторых, можно посмотреть потенциал для масштабирования продаж. А эти цифры меняют восприятие мира.
Показатели | Начальные | x2 трафик | х2 конверсия (CTR) | x2 CTR и трафик |
Бюджет на рекламу (руб.) | 50 000 | 100 000 | 50 000 | 100 000 |
Цена клика (руб.) | 50 | 50 | 50 | 50 |
Посетители (шт.) | 1 000 | 2 000 | 1 000 | 2 000 |
Конверсия страницы | 10% | 20% | 10% | 20% |
Лиды (шт.) | 100 | 200 | 200 | 400 |
Конверсия в оплаты | 70% | 70% | 70% | 70% |
Покупателей | 70 | 140 | 140 | 280 |
Средний чек | 5 000 | 5 000 | 5 000 | 5 000 |
Выручка | 350 000 | 700 000 | 700 000 | 1 400 000 |
Валовая прибыль | 300 000 | 600 000 | 650 000 | 1 300 000 |
Эффективность ROI | 600% | 600% | 1300% | 1300% |
Рост прибыли | 300 000 | 350 000 | 1 000 000 |
Расчет бюджета для товаров (средние цифры, для ориентировочных оценок)
Показатель | Товары | Услуги | Опт | Инфобизнес |
Цена лида (руб.) | 500-5000 | 500-5000 | 300-1500 | 10-100 |
Количество лидов/день (шт.) | 1-10 | 1-20 | 35-50 | 30-400 |
Конверсия страницы (%) | 1-5 | 2-18 | 5-35 | 10-20 |
Конверсия в оплаты (%) | 50-75 | 10-40 | 5-35 | 1-5 |
Минимально 3 этапа, но может быть и 5, и 10, и 20.
Например, Вы хотите 2 заказа в день. Из 3 лидов, оплачивают 2.
Тогда 30 дней х 3 лида, то есть 90 лидов в месяц по цене к примеру 500 рублей. Чтобы привлечь 90 лидов х 500 руб./лид нужно 45 000 руб. на рекламу. Это принесет 30 дней х 2 заказа = 60 заказов. Дальше все понятно, 1 заказ стоит 750 рублей (45 000 руб./ 60 заказов). Прибавляете расходы и понимаете, сколько Вы можете заработать. Если получается, что не зарабатываете, то нужно искать другой канал рекламы или менять цены. Так Вы изначально уберете и так излишние риски.
Поэтому сразу трезво и честно оцените: сколько Вы можете потратить на рекламу и что можете заработать, чтобы потом не разочаровываться.
Ставьте адекватную цель, к которой мы вместе будем идти. Да, если не ставите на данном моменте себе цель, то с курса ничего не вынесете, кроме букв. А они Вам ничего не дадут. Хотите результат? Ставьте цель и мы будем к ней идти. Это единственный вариант получить результат.
Что хотите получить после изучения курса?
Напишите на бумаге и повесьте на холодильник
Я хочу получить ____ лидов по _____ рублей и оформить _____ заявок к ___.___.201__.
Текст vs. Дизайн? Кто кого?
Это просто факт, успех продаж одностраничника на 80% определяет текст, а дизайн только помогает продавать. Если у Вас будет супер дизайн, а тексты будут ни о чём, то просто дизайн ничего не продаст.
Тому подтверждение – огромное количество сайтов в сети, у которых какой-то дизайн есть, а продаж нет.
Текст – это очень важно! Нужно написать такой текст, чтобы просто читая его на листке А4 Вы уже захотели купить то, что предлагают! Тогда на сайте от такого товара ну никак нельзя будет отказаться. А это как раз то, что нам нужно!
Продаёт в первую очередь текст, а дизайн только помогает.
Как сделать классный текст, который каждым словом будет приносить продажи и круглосуточно на Вас работать? Как сделать так, чтобы посетитель пришедший к Вам уже не мог уйти и гарантированно покупал? Об этом в следующей части.
Полный путеводитель по созданию лендингов, которые продают
Мы продолжаем знакомить вас с лучшими статьями по веб-дизайну. Сегодня мы перевели свежую статью на Medium о создании эффективных посадочных страниц. Перевод выполнен «Я люблю ИП».
Лендинги — это посадочные страницы, которые созданы специально для достижения определённых целей конверсии. Иногда в качестве лендинга выступает главная страница (хотя многие считают, что она не может быть настоящим лендингом). Но чаще всего создаются специальные посадочные страницы для определённых маркетинговых кампаний.
Цели конверсии могут включать всё, что угодно, начиная с оформления покупки и заканчивая заказом бесплатной информации. Как только у вас есть конкретная цель и вы понимаете ваш рынок, вы можете создавать, тестировать и оптимизировать лендинги, которые помогут вам лучше всего достигнуть поставленных целей.
Зачем нужен лендинг?
Самой большой ошибкой маркетолога будет направить траффик с любой рекламы или PR кампании на главную страницу сайта. Скорее всего, ваша главная страница не имеет ничего общего с этой кампанией. И это только запутает ваших посетителей.
Посадочная страница, наоборот, имеет непосредственное отношение к рекламной кампании. Она может повторять её язык и использовать те же изображения. И когда посетитель попадает на эту страницу, вы можете направлять его именно так, как вы хотите. Такой опыт является для пользователя более целостным, комфортным и понятным.
Лендинги существуют для того, чтобы захватить и удержать внимание посетителей так, как это не умеет делать обычная главная страница. Они привлекают внимание именно к той информации, к которой вы хотите, вместо того, чтобы оставить посетителя наедине с кучей информации на главной странице.
Узнайте вашу целевую аудиторию
Поймите, как работает текст лендинга
Есть два основных подхода к тому, как должны работать лендинги.
Представители «старой школы» считают, что лучше всего работают длинные лендинги. Они являются своего рода эквивалентом длинных, многостраничных писем времён прямой почтовой рассылки. Мы все видели такие лендинги: вы просто бесконечно скроллите через информацию и призывы к действию на странице без особого дизайна. (Это классические посадочные страницы с белым фоном, выделениями светло-жёлтого цвета, красными заголовками и призывами к действию, с которыми мы все давно знакомы.)
PickEvent — отличный пример длинного лендинга.
Другие считают, что короткие лендинги, возможно, разбитые на несколько страниц и образующие воронку продаж, работают гораздо лучше, чем длинные. У каждого подхода есть свои плюсы и минусы, и каждый из них лучше подходит для разных целей.
Короткие лендинги лучше использовать, если призыв к действию не требует больших затрат или обязательств со стороны пользователя и не несёт в себе очевидных рисков (например, подписка на рассылку или пробная версия). Также короткие лендинги лучше подходят для целей, основанных на импульсах. Или когда ваша компания или продукт уже хорошо известны и не требуют длинных пояснений.
Длинные лендинги лучше работают для целей, основанных на нужде, и при более высоких рисках (пользователю требуется больше уверенности, чтобы совершить действие). Также они лучше походят для новых или сложных товаров. Иными словами:
Чем больше времени, энергии, нервов или денег нужно потратить человеку, тем длиннее должен быть лендинг.
Длинный лендинг отвечает на большее количество потенциальных вопросов, тем самым уменьшая беспокойство. Также он может убедить большее количество потенциальных клиентов совершить покупку без необходимости связаться с вами для получения дополнительной информации, ускоряя процесс и снижая затраты. Во многих ситуациях длинный лендинг может привести к большему числу конверсий, чем короткий. Вот лишь один из примеров, компании Crazy Egg удалось увеличить конверсию на 363 %, сделав главную страницу длиннее в 20 раз.
Если же ваш потенциальный клиент уже знает, что он ищет, то короткий лендинг, наоборот, может повысить конверсию. Вот другой пример, когда сокращение страницы примерно на треть привело к увеличению конверсии на 11 %.
Если вы, как дизайнер, не будете писать непосредственно текст, то можете направить того, кто будет это делать, написать либо длинный, либо короткий текст в зависимости от вашей целевой аудитории (особенно, если этот кто-то не является профессиональный копирайтером).
Разбейте текст на части
Независимо от того, какой длины у вас текст, важно разбить его на части, чтобы его легче читать (или сканировать).
Чтобы разбить текст, также можно использовать элементы дизайна. Изображения, линии, области с другим форматированием и т. д. помогут разбить контент и сделать его одновременно более красивым и читабельным.
Ещё один момент по поводу разбивки текста: добавьте несколько призывов к действию в определённых интервалах по всей странице. Когда ваш пользователь будет готов совершить действие, ему не придётся скроллить наверх или вниз, чтобы найти кнопку. В идеале, призыв к действию должен быть в каждом разделе на странице.
У вас может быть только одна цель
У каждого лендинга должна быть только одна цель. Эта цель может быть запросить информацию, совершить покупку, подписать на пробную версию или что-то ещё.
Если целей больше, то внимание будет разделяться между ними, размывая эффект. Поэтому решите, какая цель самая важная, и сосредоточьтесь только на ней. Вы можете добавить дополнительную цель (например, подписать на рассылку) на странице подтверждения после того, как будет достигнута основная.
Коэффициент внимания
Коэффициент внимания вашего лендинга равен тому, сколько у вас на странице ссылок на число целей конверсии (которое всегда должно быть равно 1). Поэтому чем больше на странице ссылок, которые не ведут непосредственно к цели, тем выше коэффициент внимания. В идеале, он должен быть равен 1:1.
Именно поэтому нужны лендинги, вместо того чтобы отправлять людей просто на главную страницу. На главной странице коэффициент внимания может быть равен 10:1, 25:1 или даже 100:1. Это значит, что, помимо вашей основной цели, за внимание пользователя будут бороться слишком много вещей.
Запомните: у вашего лендинга должен быть только одна цель. Если у вас несколько целей, у вас должно быть несколько лендингов и несколько рекламных кампаний.
Изучите конкурентов
Прежде чем приступить к созданию лендинга, изучите ваших конкурентов. Какие лендинги они используют, длинные с кучей текста или короткие, на несколько страниц, в виде воронки продаж? Есть ли у них лендинги вообще?
После этого вы можете решить, насколько вы хотите отличаться от нормы в индустрии. Или несильно, или вы можете сделать что-то совершенно другое.
Откуда идёт траффик?
Траффик на посадочную страницу обычно идёт с одного из двух источников. Это оплачиваемая реклама или PR/ маркетинговая кампания.
Текст должен совпадать
Если ваши пользователи приходят с рекламной кампании, убедитесь, что текст лендинга совпадает с текстом рекламного объявления. Например, если реклама предлагает бесплатную пробную версию, то лендинг тоже должен предлагать бесплатную пробную версию, а не подписку на рассылку.
Если вы используете баннеры или видео рекламу, убедитесь, что лендинг совпадает с ними по стилю. Используйте ту же самую цветовую схему, фотографии и другие элементы для всей кампании.
Если это просто текстовое объявление, убедитесь, что его заголовок полностью совпадает с заголовком вашего лендинга.
У вас есть такой же контроль, если вы отправляете пользователей на ваш сайт из своих социальных сетей или с корпоративного блога (или с платных постов в других блогах). Убедитесь, что ваше сообщение совпадает во всех этих источниках.
Если пользователи приходят из других источников, которые вы не можете контролировать, то в этом случае необходимо, чтобы заголовок лендинга чётко дал понять, почему они здесь и что они здесь найдут. Вы можете попытаться повторить сообщение из пресс-релиза, но имейте в виду, что его могут изменить в зависимости от источника.
Первое впечатление важнее всего
Первое впечатление, которое производит ваш лендинг, играет важную роль. Если оно плохое, то посетитель покинет сайт до того, как он успеет на нём что-нибудь сделать. Если — хорошее, то всё будет с точностью наоборот.
Например, главная страница Ghost. Это отличный пример хорошего первого впечатления, в котором есть все упомянутые элементы.
Призыв к действию
Вся цель лендинга заключается в том, чтобы побудить пользователей к определённому действию. Поэтому призыв к действию — это самый важный элемент на странице. Чаще всего это кнопка, иногда — ссылка или форма. Оптимизируя только один этот элемент, вы можете значительно увеличить конверсию. На призыв к действию влияют несколько факторов. Это дизайн (кнопки, формы или ссылки), расположение на странице, текст призыва и окружающий контент.
Простой способ повысить конверсию — это заменить притяжательные местоимения. Вместо «твой» или «ваш» используйте «мой». Многие исследования показывают, что это простое изменение может увеличить конверсию почти в два раза. Это персонализирует призыв к действию и очень тонко выражает установившиеся отношения.
Цвет кнопки вашего призыва к действию также может коренным образом повлиять на поведение людей. Нет какого-то одного цвета, который лучше всего работает для каждого лендинга. Но безусловно верно то, что призыв к действию должен быть контрастным и отличаться от всего остального на странице.
Ваша цветовая палитра состоит в основном из синих или зелёных оттенков? Сделайте кнопку красной или оранжевой. Используете нейтральные цвета? То любой яркий цвет подойдёт вам больше, чем ещё один серый.
Ballpark хороший пример того, как призыв к действию выделяется и контрастирует с остальными элементами на странице.
Считается, что красный цвет означает «опасность» и заставляет пользователя остановится. Но исследования показали, что в некоторых ситуациях красный цвет может превзойти зелёный. Сайту Performable удалось увеличить конверсию на 21 %, изменив цвет кнопки с призывом к действию с зелёного на красный. Одно из возможных объяснений кроется в том, что на всей странице активно используется зелёный цвет, поэтому зелёная кнопка не была такой контрастной, как красная.
Вы не хотите, чтобы вокруг вашего призыва к действию было много другого контента. Отделите его достаточным количеством белого пространства, чтобы он выделялся и привлекал к себе внимание.
То, где вы расположите призыв к действию, также играет важную роль. В идеале, призыв к действию должен появляться в определённых интервалах в зависимости от длины вашей страницы. Если лендинг короткий, то одного призыва к действию будет достаточно. Если длинный, то стоит сделать несколько призывов к действию и расположить их равномерно на странице (или один и зафиксировать его), чтобы посетитель сразу мог перейти к действию.
Уделите время на то, чтобы протестировать и оптимизировать ваш призыв к действию. Это поможет вам максимально увеличить конверсию. Потратив всего неделю (или месяц) на тест лендинга, можно получить совсем другие результаты за всё время кампании.
Ещё один вид призыва к действию — это форма на странице. Здесь действуют те же самые принципы: цвет, текст и контрастность призыва к действию. Но для успеха важен ещё один момент — в форме должно быть как можно меньше информации, чтобы снизить обязательства со стороны пользователя.
Если для выполнения их целей вам достаточно адреса электронной почты, то попросите указать только его. Если вам нужно больше информации (например, для выполнения платежа), попробуйте разбить форму на две части или даже перенести её на следующую страницу, оставив на главной только кнопку.
Несмотря на то, что написанием текстов для лендинга занимаются копирайтеры, а не дизайнеры, вам будет полезно узнать, каким должен быть заголовок. Хороший заголовок для лендинга должен учитывать целевую аудиторию и то, что они ищут. Вы должны подчеркнуть в заголовке основную пользу, которую принесёт для них ваш продукт.
Ваш заголовок также должен быть направлен на совершение действия и динамичным. Он должен быть ясным и позитивным. Не концентрируйте в заголовке на негативе. Заголовок может быть настолько длинным, насколько вам это нужно, но не слишком. Сокращайте его до тех пор, пока он не станет наиболее эффективен.
Хороший пример — сайт Dropmark. Заголовок «Все ваши вещи в одном простом, визуальном, личном месте» (“All your stuff in one simple, visual, private place”) передаёт основные преимущества сервиса и при этом остаётся ясным и понятным.
Изображения, которые вы используете на странице, должны подтверждать ваше основное сообщение. Они должны совпадать с текстом по восприятию.
Помните, что человеческое лицо (даже если это просто герой из мультика) с большей вероятностью привлечёт к себе внимание, чем любой другой элемент на странице. Это означает, что иногда человеческое лицо может отвлекать от заголовка. Необязательно, что это плохо. Но в таких случаях, вам нужно дополнительно убедиться, что изображение человека, которое вы используете, поддерживает ваше сообщение.
Фотографии людей — это один из вариантов, но есть и другие. Если вы делаете лендинг для приложения или онлайн-сервиса, то используйте скриншоты. С их помощью вы сможете показать то, что получат ваши пользователи. То же самое касается и обычного продукта: покажите его фотографии.
Основная мысль заключается в том, что изображения должны подтверждать ваше сообщение, снижать возможные риски и мотивировать пользователей совершить действие.
Стоковые фотографии против обычных
В зависимости от вашего продукта и цели конверсии, использование в лендинге видео высокого качества — это отличный способ повысить конверсию. Видео увеличивает время, которое пользователи проводят на сайте, и может лучше передать сообщение для тех, кто не готов читать много текста. Видео также может лучше передать информацию о более сложных продуктах или услугах, чем текст.
Groove хорошо использует видео для того, чтобы передать своё предложение.
Видео, которое показывает вас или ваших сотрудников, также может увеличить доверие среди ваших посетителей. Люди доверяют другим людям, а не сайтам.
Единственное, что я не рекомендую делать с видео, это включать его автоматически, когда кто-то заходит на сайт. На каждую конверсию, которую вы получите таким способом, найдутся минимум трое, которым это не понравится и которые покинут ваш сайт.
Если вы записываете скринкаст, то добавьте голос после того, как будет готово видео. Это сделает запись более профессиональной, так как вам не придётся концентрироваться сразу на двух вещах.
Ещё один способ использовать видео — это поместить его в качестве фона за призывом к действию. Если это сделано хорошо, то вы сможете привлечь внимание к призыву к действию, одновременно рассказывая о своём продукте. Отличный пример такого использования можно посмотреть на сайте Dragdis:
Несмотря на то, что видео может стать приятным дополнением для вашего лендинга, использовать его не обязательно. Вы можете создать профессиональный, эффективный лендинг без видео. Но в некоторых случаях видео может быть оказаться очень полезным.
Социальные доказательства
Социальное одобрение — это большой мотиватор. Знание того, что вашим продуктом или сервисом пользуются другие, может помочь убедить самого нерешительного.
Именно поэтому лучше включить на страницу отзывы ваших пользователей. Но сделайте так, чтобы они отделялись от основного контента. Отзывы возле призыва к действию могут быть ещё более убедительными.
Если у вас нет отзывов, подумайте, как ещё вы можете продемонстрировать социальное одобрение. Это могут лайки вашей страницы или перепосты (от нескольких сотен до нескольких тысяч, в зависимости от сферы вашей деятельности).
A/B тестирование
A/B тестирование помогает значительно увеличить эффективность страницы. На конверсию влияет очень много факторов, и без тестирования вы не сможете понять, что действительно работает, а что нет.
В идеале, за раз нужно проверять только один элемент. Например, вы можете протестировать два разных заголовка, или два разных цвета для кнопки, или два макета. Но не тестируйте сразу все три вещи одновременно.
Установите аналитику важнейшей информации
На этом этапе вам также нужно установить аналитику важнейшей информации, чтобы отслеживать не только результаты тестов, но и вообще эффективность страницы в долгосрочной перспективе.
Инструменты для создания более эффективных лендингов
Есть много инструментов, которые вы можете использовать для быстрого и простого создания, тестирования и оптимизации лендингов, чтобы не начинать с нуля.
Unbounce
Unbounce даёт инструменты для создания, публикации и A/B тестирование лендингов без необходимости писать код. Стоимость тарифных планов начинается от 49$ в месяц и включает бесплатную пробную версию в течение 30 дней.
Convert
Convert — это приложение для проведения A/B тестов. Тесты можно создавать с помощью визуального редактора, а также с доступом к HTML и CSS. Для использования тестов на сайте нужно вставить небольшой кусок кода. Приложение незаметно интегрируется с Google Analytics. Цены начинаются от 125$ в месяц, есть 15-дневная пробная версия.
Optimizely
Optimizely предлагает инструменты для оптимизации с лёгкой установкой. С его помощью лендинг можно оптимизировать для каждого конкретного пользователя, что в свою очередь может привести к повышению конверсии. У них также есть бесплатная версия.
Visual Website Optimizer
Visual Website Optimizer — ещё одно приложение, которое помогает оптимизировать и персонализировать лендинги. Оно включает такие функции, как A/B тестирование, раздельное тестирование URL, многовариантные тесты, обратная связь, анализатор лендинга, тепловые карты и многое другое. Тарифы начинаются от 49$ в месяц, есть бесплатная пробная версия.
Instapage
Instapage помогает создавать адаптивные лендинги всего за несколько минут, без каких-либо навыков дизайна. Страницы интегрируются с большим количеством популярных маркетинговых инструментов. Вы даже можете опубликовать их на WordPress или GoDaddy. У них есть бесплатный план для сайтов с сотней посетителей в месяц, платные тарифы начинаются от 29$ в месяц.
Lander
Lander помогает создавать лендинги специально для малого бизнеса. В приложении есть простой редактор, функция A/B тестирования и интеграция с Facebook Pages. Цены начинаются от 22$ в месяц, сервис можно попробовать бесплатно в течение 30 дней.
HubSpot Landing Pages
HubSpot Landing Pages позволяет создавать лендинги за секунды и тестировать их часто и рано. В приложении есть редактор drag & drop, умные формы, адаптивные страницы, умный контент и многое другое. Это часть приложения HubSpot Marketing, стоимость которого начинается от 200$ в месяц.
Эксперименты Google Analytics
Эксперименты Google Analytics позволяют протестировать различные варианты страницы в зависимости от ваших пользователей. Они входят в аккаунт Google Analytics.
Usability Hub
Usability Hub — это сайт, где вы можете протестировать ваш дизайн или макет на реальных людях. Загрузите ваш дизайн, выберите тип теста (5-ти секундный тест, клик тест, тест предпочтения или навигации), они покажут его своим пользователям, и вы получите детальный отчёт о результатах. У них есть бесплатный план (чтобы провести тесты, вам сначала нужно самим в них поучаствовать) или платный от 99$ в месяц.
10 примеров отличных лендингов
Basecamp
У Basecamp всегда были отличные лендинги. У них низкий коэффициент внимания на странице, и почти все ссылки имеют непосредственное отношение к призыву к действию. А сама кнопка контрастная к остальной странице.
Benchmark
Главная страница Benchmark — ещё один пример отличного лендинга. Несмотря на то, что навигация вверху увеличивает коэффициент внимания, вся остальная страница ясно рассказывает о продукте и о его преимуществах. Текст кнопки («Начните бесплатную версию») также является достаточно убедительным.
Manpacks
Manpacks использует для кнопки яркий зелёный цвет и надпись, которая привлекает к ней внимание. В качестве социального доказательства они приводят публикации о них в прессе.
WebDAM
Лендинг WebDAM о том, как выбрать систему для хранения информации, — это отличный пример использования формы. На странице минимум изображений, всё внимание сосредоточено на призыве к действию, который является контрастным. Они дают достаточно информации, чтобы ответить на все потенциальные вопросы, а в качестве социального доказательства приводят отзывы клиентов.
Shopify
Лендинг Shopify для бесплатной пробной версии — это ещё один прекрасный пример простой формы на простой посадочной странице. Там представлена только самая необходимая информация в виде списка. Но так как это лендинг бесплатной версии, для которой достаточно указать только адрес электронной почты, то это стратегия работает.
Invision
Invision использует видео на заднем фоне, чтобы привлечь внимание к призыву к действию.
Stripe
На главной странице Stripe есть чёткий и ясный призыв к действию, красивые визуальные элементы и достаточно контента, чтобы ответить на потенциальные вопросы. И вместо того, чтобы сконцентрироваться на подписках, они увлекают пользователя дополнительной информацией.
Evernote
Лендинг Evernote для функции Work Chat использует очень ясный призыв к действию: «Попробовать Work Chat» на кнопке, которая выделяется на странице. Все изображения подходящие и призваны поддержать цели конверсии.
SuperTasker
SuperTasker использует на своей странице анимированный баннер, который предлагает дополнительную информацию, но остаётся при этом минималистичным и чистым. Призыв к действию очень чёткий, с хорошим контрастом.
Acorns
Acorns также имеет хорошо заметный призыв к действию на своей странице, с хорошим контрастом по отношению к фону. Заголовок чёткий и понятный, а графика поддерживает само сообщение и цели конверсии.
Посадочная страница против главной
Как уже было сказано выше, некоторые считают, что главная страница не может быть такой же эффективной как лендинг. Но здесь можно возразить, что многие главные страницы сейчас функционируют как универсальные лендинги с одной единственной целью конверсии.
До тех пор, пока всё внимание на главной странице сосредоточено на цели, которая совпадает с целью вашей рекламной кампании, она может функционировать как лендинг.
Очень хороший пример — главная страница Flow. Она выглядит как обычный лендинг, с чётким призывом к действию и длинным текстом в поддержку конкретной цели конверсии. За исключением нескольких ссылок в шапке (Pricing, Features, Blog и Log In) коэффициент внимания остаётся равным 1:1.
Лучшие практики по созданию лендингов
В заключение вот краткое содержание того, о чём мы говорили. Используйте этот список в качестве проверки при создании лендинга в следующий раз.
Хороший лендинг может увеличить вашу конверсию в геометрической прогрессии. Навыки по созданию таких лендингов пригодятся вам как дизайнеру, особенно если это будет хорошо влиять на бизнес ваших клиентов.
Сделать дизайн лендинга не сложнее, чем любой другой страницы, но для этого нужно обладать дополнительной информацией и знать лучшие практики.