Добрый день, Дорогие Друзья!
80% продаж проходит именно на первом экране лендинга, поэтому именно первый экран очень важен и мы его разберём очень подробно в данной статье по пошаговой сборке первого экрана лендинга на конструкторе лендингов PlatformaLP.
Шаг №1: Регистрируемся в конструкторе PlatformaLP вот по этой ссылке: https://platformalp.ru/reg/OHJEITHA
После регистрации начинаем создавать свой первый лендинг. Чтобы сразу навести порядок на будущее начинаем с того, что создаём папку проекта. Если Вы планируете в будущем иметь всего 1 лендинг, то можете пропустить этот шаг и перейти сразу к шагу №3
Зачем нужны проекты и папки? В будущем у Вас будет много разных проектов и версий лендингов: под продукты, спецпредложения, марафоны, страницы спасибо и апселы, чтобы потом не теряться и случайно не редактировать или удалять другие лендинги или части других воронок — лучше сразу завести порядок.
Сначала создаём проект: вот допустим у нас это будет проект Академия (подразумеваю Академия Интернет-продаж), в проекте Академия у нас будет несколько папок разных продуктов, начнём с первого и самого важного нашего продукта Core Product — это будет Акселератор Интернет-маркетинга или наша знаменитая Школа Миллионеров
Если Вы еще не знаете про этот наш продукт, то про него можно прочитать здесь: Школа Миллионеров или Акселератор Интернет-маркетинга или на самом лендинге Акселератора Интернет-маркетинга http://domashenko.digital/1m, первую страницу которого мы и собираем в нашем пошаговом уроке ниже.
Если Вы не знаете, что такое Core Product, то про продуктовую линейку еще будут отдельные статьи — это очень важно, для того чтобы принять решение с лендинга какого продукта надо начинать запуск продаж.
Шаг №2: Создаём страницу
После того, как мы создали проект и зашли в него и создали папку первого продукта — создаём нашу первую страницу и сразу вписываем название страницы. Платформа предлагает сразу выбрать какой-то готовый шаблон и многие на это соглашаются. Я это категорически НЕ РЕКОМЕНДУЮ — у нас большой опыт разработки лендингов для себя, клиентов и учеников.
Чем плох готовый шаблон? Наш опыт говорит, что многим ученикам ОЧЕНЬ ХОЧЕТСЯ взять готовый шаблон и «просто поменять немного текстики» и у них быстро будет готов лендинг. Наши наблюдения говорят, что это ошибка и вот почему — готовый ШАБЛОН очень обуславливает, по 2-м причинам:
а) Вы вынуждены подстраиваться под чью-то модель и искажаете сильно этим свою продающую логику. А это ошибка — ведь ваш предыдущий опыт продаж определяющий для успеха ваших продаж.
б) Все готовые шаблоны всё равно не соответствуют той 10-ти экранной продающей модели, которую мы выработали в своём опыте продаж на 10 миллионов (А в рекорде и на 10 миллиардов). Поэтому мы рекомендуем создавать страницу с 0 — так вам проще будет пошагово построить классическую (ну по крайней мере «по модели Домашенко») 10-экранную модель по AIDA. Подробнее про 10-экранную модель можно почитать здесь: 10 экранная модель продающего лендинга
Поэтому нажимайте на кнопку «Создать страницу с нуля» и начинаем.
Шаг №3: Настраиваем адаптивность
В новой версии конструктора «по умолчанию» включены автоматическое адаптирование лендинга под ВСЕ типы экранов, раньше не была включена под мобильные экраны и пользователи, которые про это не знали — жаловались, что лендинги на платформе «не адаптивны», а это не так.
Поэтому обязательно убедитесь, что у вас включена адаптивность под все типы экранов.
Что такое «адаптивность» в данном случае? Под этим термином я подразумеваю «адаптивный дизайн» лендинга — это когда лендинг свёрстан таким образом, что автоматически подстраивается под разный размер и формат экранов: широкоэкранный монитор, экран ноутбука, экран планшета, экран мобильного телефона.
Так как мобильный трафик (посетители с мобильных телефонов) еще год назад превысил обычный десктопный (настольные компьютеры и ноутбуки), то нельзя не учитывать мобильный трафик и пользователей с мобильных экранов. Он, как правило, более конверсионный — я рассказывал об этом в кейсах ранее и скоро расскажу про наш большой опыт в mobile commerce и работу с экранами.
Пока: просто проверьте что все экраны включены, если нет — включите все экраны.
Шаг №4: Выбираем модуль первого экрана
Начинаем собирать непосредственно первый экран — для этого выбираем модуль первого экрана. Многие из тех, кто смотрели наши материалы по сборке лендингов, в том числе знаменитый видеоурок, где я собираю лендинг за 41 минуту и ещё и рассказываю что, зачем и почему для курса в Нетологии, не могут найти тот модуль первого экрана, который я использую в учебных материалах.
Дело в том, что после редизайна у PlatformaLP обновились модули, но найти старый модуль первого экрана и другие «недостающие модули» достаточно просто, внизу под блоком новых модулей есть ссылочка.
Но мы не будем надеяться на старые модули — вдруг их скоро уберут совсем и выберем модуль из нового набора. Так как почти все шаблоны, даже близко не очень похожи на нашу концепцию главного экрана, то просто выбираем первый похожий — потом всё равно его переделаем.
Сразу же, при выборе, выбираем и цветовую гамму, в которой будут второстепенные элементы лендинга — я лично выбрал любимую зелёную и меньше кнопок «купить» потом пришлось перекрашивать в правильный конверсионный зелёный цвет.
Шаг №5: Выбираем фоновое изображение для первого экрана
Самое главный блок первого экрана лендинга — это изображение. Изображение может быть отдельным блоком, но лучше просто фоном, он задаёт общую атмосферу первого экрана.
Почему изображение первого экрана настолько важно?
Многие вопросы глубин нашей психологии относятся к нашему детству. Давайте повспоминаем: когда мы были маленькие и не умели читать, но очень хотели, чтобы нам прочитали сказкe — как мы выбирали сказку, которую нам было интересно послушать? Вспомнили? Мы выбирали по картинке — вот какая картинка нам нравилась на обложке или иллюстрации перед сказкой, вот ту сказку мы и просили прочитать нашу маму, бабушку или отца.
Что сплошь и рядом происходит с взрослыми людьми? Мы выросли, но ничего не изменилось — реакции остались абсолютно детские очень часто. Что это обозначает? Если изображение на первом экране не нравится посетителю — он не будет даже начинать читать тексты на лендинге или сайте. 80% отказов — это когда посетитель открывает сайт и сразу же закрывает, связано именно с тем, что изображение не соответствует его ожиданиям.
В проектировании изображение порой называется Hero Of The Day — я не нашёл источника этого названия, думаю по аналогии с главным героем с обложки журнала или передовицы газеты. Что важно взять из этой идеи? Очень важно, чтобы на изображении были люди! Кроме этого, крайне важно чтобы люди смотрели не просто внутрь экрана, а именно на кнопку «КУПИТЬ». Мы автоматически следим за тем, куда смотрят люди на изображении, поэтому взгляд посетителя лендинга будет направлен в правильном направлении.
Я ранее уже формулировал несколько важных правил для имиджевого фонового изображения:
Первое правило, именно хорошее изображение привлекает внимание посетителя И ТОЛЬКО ЕСЛИ КАРТИНКА СООТВЕТСТВУЕТ представлению потенциального клиента — он будет всматриваться и в текст и читать дескриптор и изучать весь лендинг.
Второе правило, картинка должна передавать нужную вам эмоцию — как вариант, процесс, как Вы вместе с клиентом движтесь к результату, или образ, с которым ассоциирует себя целевая аудитория, когда он уже получил результат и счастлив. Если у вас в оффере, некий конректный товар или услуга, то можно процесс работы по оказанию этой услуги — т.е. некий «товар лицом».
Третье правило, образ на картинке должен смотреть в сторону формы захвата. Лучше указывать или смотреть прямо на CTA-button (кнопку заказа).
Четвёртое правило, фотография должна быть качественная. Если фото неудачное, то это оттолкнёт потребителя. У нас был пример, когда клиент предоставлял очень нужную и популярную услугу, но конверсия была крайне низкая. При анализе обратили внимание, что основные отказы были в тот момент, когда клиенты доходили до картинок с примерами работ, видели картинки плохого качества и закрывали сайт.
Пятое правило, если нет своих картинок хорошего качества и вы используете картинки из интернет, то постарайтесь не просто найти бесплатные картинки через поиск картинок в гугл или яндекс. А лучше купите хорошую картинку в фотобанке.
Шестое правило, люди на картинке должны быть, если уж не реальные ваши живые клиенты, то хотя бы похожи на целевую аудиторию. Фотографии из фотобанков, часто бывают американские или азиатские. Очень сложно поверить, что услугу в Химках оказывают афроамериканцы или японцы, причём ещё и небоскрёбы на фоне напоминают, не родную Москву, а в лучшем случае Дюссельдорф, а то и вообще Мельбурн.
Правил ещё много, но они достаточно очевидны. Не поленитесь, подберите картинку, которая будет нравится вашей целевой аудитории и вызывать у них исключительно позитивные ассоциации, которые создадут у них эмоцию, находясь в которой они с большой вероятностью купят Ваш продукт.
В нашем опыте параллельного (А/В тестов) тестирования изображений, говорит о том, что разница по конверсии одинакового трафика может отличаться до 5 раз. В нашем опыте достаточно легко замена изображения на более подходящее по смыслу и эмоциям целевой аудитории повышало конверсию с 0,75% до 3.85% — то есть как раз почти в 4-5 раз.
Как загрузить изображение для фона? Выбираем вкладочку «Настройки секции», там выбираем во вкладке пункт «изображение», где уже есть много готовых изображений по разным темам, которые можно выбирать во вкладке. Но лучше всего конечно же загрузить своё изображение.
Если фон слишком яркий, то можно в настройках секции сделать картинку потемнее или более размытой.
Шаг №5: Загружаем логотип
После загрузке фона начинаем собирать непосредственно содержимое первого экрана. Есть очень важное правило для продающих сайтов — на продающем сайте продают ВСЕ элементы. Лишних элементов быть не должно. При этом надо понимать, что 80% продаж проходит именно на первом экране лендинга. Поэтому именно первый экран очень важен и мы его разберём очень подробно.
Чтобы понять логику построения главной страницы, давайте вспомним опять про наше детство. Вспомните очень простой пример — вот рисует маленький ребёнок картинку и рисует на ней солнышко — где он рисует солнышко? В каком углу? Вспомнили? В правом верхнем углу. Как я угадал?
В проективной психологии солнце — это некое экзистенциональное счастье. У ребёнка счастье в будущем — поэтому и солнце в зоне эмоционального будущего. Что такое зоны эмоционального и рационального? Прошлого и будущего?
В теории считается, что любое изображение, особенно рекламное, делится пополам по вертикали и горизонтали.
Левая половина изображения — всегда зона прошлого, правая половина будущее, в центре настоящее. Кстати для культур, где читают справа-налево, насколько я знаю, эти зоны воспринимаются наоборот. Верхняя половина зона эмоционального восприятия, а через 2 секунды — когда подключается наш внутренний компьютер — мозг, начинается зона осмысленного, рационального восприятия.
Понятно почему солнце у ребёнка в правом верхнем углу? Любой ребёнок ожидает впереди большую и счастливую жизнь — поэтому и счастье как раз впереди. У меня достаточно большой опыт работы с проективными тестами, тысячи полторы наверное человек разбирал — и всегда убеждался, что это 100% точно работает. Так вот — если взрослый человек рисует солнце в левом верхнем углу — то это всегда повод поработать для психолога — это обозначает, что есть некая незавершённая ситуация в прошлом и человек очень сильно обращён в прошлое и это ему мешает двигаться вперёд. Проблема только в том, что взрослые солнце на своих рисунках вообще редко рисуют. Но об этом поговорим в других статьях.
Обратите внимание на любую политическую рекламу — там всегда все лидеры смотрят в правый верхний угол — взоры лидеров обращены в светлое будущее!
Но вернёмся к лендингам. К чему я сделал такое большое творческое отступление? Очень часто вижу ситуацию, когда логотип ставят в центре лендинга, и иногда, даже справа. Это достаточно грубая ошибка — вызывает неосознанную путаницу в голове посетителя. А первое правило юзабилити звучит: «Не заставляйте меня думать».
Мозг как любой компьютер стремиться максимально снизить свои энергозатраты и упростить процессы. Поэтому мозг склонен упрощать свою работу до чистых стереотипов, чем с большим удовольствием пользуются любые манипуляторы. Мы с вами манипулировать сознанием не будем, но и специально усложнять задачи по восприятию для посетителей точно не будем.
Как я уже говорил выше, на лендинге должно продавать ВСЁ, что на нём расположено, поэтому начинаем продавать прямо с шапки. Более того, мой опыт говорит, что именно здесь происходит первая продажа (посетитель может сделать звонок и стать лидом), а также первый отказ, когда посетитель не понял куда он попал, а также не узнал себя в дескрипторе.
Исходя из этого, я рекомендую создавать шапку по правилу «Пришёл — Увидел — Купил», по аналогии со знаменитым «Пришёл — Увидел — Победил» у Юлия Цезаря. Что это обозначает в категории сайтов и лендингом.
Это обозначает ответ на вопросы: Куда я попал? — Что я здесь получу? — Как это получить?
На вопрос «Куда я попал?» отвечает именно логотип, который мы размещаем в зоне эмоционального прошлого! Что нам даёт размещение логотипа в зоне эмоционального прошлого? Даже если наш посетитель первый раз видит наше лого, его мозг реагирует по принципу: «Ага что-то знакомое…» — но сама зона эмоционального прошлого такую реакцию рождает. Чем нам это помогает?
Напоминаю классическую ситуацию из своего личного опыта: приходишь ты в магазин, а жена поставила тебе задачу — купить моющее средство для сантехники ванной комнаты — приходишь в отдел моющих средств — а там целая полка: 15-20-50 бутылочек, спреев, порошков, гелей и еще не пойми чего: русское недорогое, американское разрекламированное, европейское экологичное, японско-корейское вообще не понятное и пр. И чёрт его знает — какое брать в такой ситуации?
Почему-то одно из самых страшных испытаний для нас — это выбор. Видимо страх ошибки для нас настолько силён, что выбор мучителен. Не уходя в дебри потребительского поведения, давайте вспомним как мы покупаем в такой ситуации? Берём то, которое нам КАЖЕТСЯ знакомым. Вот и логотип в зоне эмоционального прошлого — сразу создаёт необходимую нам иллюзию-эмоцию у потребителя, что он с нами уже давно знаком.
Важно и не забыть в этом месте ответить на вопрос «КУДА я попал?» Что это обозначает? Очень часто вижу следующую ошибку — стоит логотип некой компании «Инвикта» — а чем она занимается? — неизвестно! Может строители, может вебдизайн, может вообще безопасность и ЧОП? В условиях ограниченности времени и нежелания мозга думать — чаще всего посетитель обычно даже не начинает дальше особо вчитываться — не понятно? закрывает сайт/лендинг и всё. Поэтому если из вашего логотипа НЕ ПОНЯТНО, чем вы занимаетесь — ОБЯЗАТЕЛЬНО, не поленитесь и добавьте снизу подпись: строительная компания, интернет-магазин мягкой мебели, академия интернет-продаж и пр.
Переходим к практике: начинаем добавлять наш логотип на лендинг.
Если у Вас нет логотипа или есть какая-то картинка без расшифровки, то можно просто заменить картинку в текущем блоке — надо любую из готовых значков или загрузить свою, после этого расписать название и расшифровку.
Если у вас уже есть расшифровка в изображении лого, то просто удаляете старый блок и добавляете на его место блок картинка.
После того, как вы разместили блок картинки на место, где должно быть лого — то просто загружаете нужную картинку, желательно с прозрачным фоном (файл png или gif, а не jpg).
После того, как вы загрузили лого — вы можете подвигать немного вправо и влево этот блок, чтобы сделать логотип чуточку поменьше или побольше.
Шаг №6: Первый продающий триггер — дескриптор
Про продающие триггеры я уже рассказывал в ранних статьях на блоге, приведу цитату самого себя, чтобы Вам не бегать по разным статьям:
Начнём с того, что вообще такое «продающий триггер»? И как они используются на лендингах, для увеличения продаж.
Изначальный смысл слова «триггер» следующий, согласно Wikipedia:
Триггер (англ. trigger в значении существительного «собачка, защёлка, спусковой крючок — в общем смысле, приводящий нечто в действие элемент»; в значении глагола «приводить в действие»):
- в русском языке первоначально — термин из области радиосхем, позже электронной техники: пусковая схема, схема с несколькими устойчивыми состояниями, см. триггер (электроника);
- в гипнозе — это «кнопка», установленная в сеансе, включаемая изнутри или извне для мгновенного погружения клиента в состояние гипнотического сна с заранее обозначенными функциями для достижения определённых целей (А. Г. Пирогов).
- в советской прессе довольно часто триггером ошибочно именовали триер (машину, входящую в состав семяочистительных линий);
- урановый или плутониевый инициатор термоядерного взрыва;
- в последнее время заимствовались и другие значения английского оригинала:
- спусковой крючок пистолета, арбалета, аэрографа и т. п., кнопка на джойстике, находящаяся под указательным пальцем;
- в более широком смысле: некая причина возникновения события вообще;
- условия, при наступлении которых должно происходить предписанное действие (в банковском деле или в программировании, см. триггер (базы данных))
- Триггерная точка — фокус гиперраздражимости ткани, болезненный при сдавлении.
Т.е. по сути своей «триггер» — это некий раздражитель или стимулятор определённого действия.
Среди продающих триггеров есть 2 основных типа: те, которые вызывают доверие и те, которые стимулируют покупку прямо сейчас, некоторые из триггеров также относятся к обоим типам в той или иной мере.
К триггерам стимулирующим быструю покупку прямо сейчас относятся как правило триггеры, расположенные на первом экране.
Более того, мой последний опыт и размышления привели меня к осознанию, что идеальный лендинг в чистом виде и есть как раз последовательность триггеров, каждый из которых условно говоря добавляет +1 к желанию клиента купить, если последовательность построена правильно и потенциальный клиент достаточно тёплый — то сделка происходит моментально.
2 важных триггера: фоновое изображение и логотип с названием компании, мы уже прошли! Какой будет третий триггер? Третьим триггером является дескриптор, очень важный триггер, про который очень часто забывают.
Процитирую свои предыдущие статьи:
2.Дескриптор — важнейший из продающих триггеров. Если у Вас плохой дескриптор, то клиенты будут просто уходить, даже не начав просматривать Ваш лендинг или продающий сайт. Дескриптор размещается непосредственно под Вашим логотипом или справа от него между логотипом и блоком контактов.
В моей концепции: «Пришёл — Увидел — Купил» — Дестриптор работает в паре с логотипом именно в части — пришёл увидел — т.е. получил ответы на вопросы: Куда я попал и Что здесь дают? (Какую свою потребность я закрою с помощью этого сайта?).
В идеале дескриптор должен отвечать на вопросы: Куда попал? Что продают? Кому или где? Т.е. Мой дескриптор на данном блоге должен в идеале содержать следующую информацию: Валерий Домашенко — эксперт по продажам в интернет, консультации и услуги по запуску и удвоению продаж в интернет.
Здесь нет ограничения по целевой аудитории или географии. Если я буду запускать лендинг нишевого продукта, допустим тренинга по обучению коучей или бизнес-тренеров продажам своих услуг в интернет. То дескриптор так и будет звучать: Тренинг Валерия Домашенко по запуску и удвоению продаж услуг коучей в интернет.
Т.е. будет отвечать на вопросы: Кто? Что? Кому? иногда ограничение может быть не КОМУ, а ГДЕ? допустим «Доставка горячей пиццы в районе метро Коломенское» Я бы даже усилил его какими-то УТП, допустим «Доставка пиццы 28 сортов в течение 15 минут в районе Коломенское» или подобный.
Приводите примеры своих дескриптов в комментариях и мы их обсудим.
Возможно для более глубокого понимания сути дескриптора поможет его определение из wikipedia (мне лично помогло):
Дескриптор (от лат. descriptor — описывающий) — лексическая единица (слово, словосочетание) информационно-поискового языка, служащая для описания основного смыслового содержания документа или формулировки запроса при поиске документа (информации) в информационно-поисковой системе. Дескриптор однозначно ставится в соответствие группе ключевых слов естественного языка, отобранных из текста, относящегося к определённой области знаний.
Таким образом — дескриптор самый важный блок на вашем лендинге — он отвечает на вопрос «Что здесь?» и если ответ на вопрос клиента устраивает, то он будет изучать лендинг и делать заказ, а если нет — то сразу уйдёт. Обратите внимание на Ваш дескриптор — это очень важно.
Мои последние находки в области обучения продажам через лендинги, а также более чем референтный опыт продаж через лендинги силами нашего агентства привёл к следующему пониманию триггера: Дескриптор — первый и один из самых важных продающих триггеров на вашем лендинге/сайте — именно, пройдя/прочитав дескриптор, посетитель понимает, что он попал туда куда нужно и здесь всё именно для него. То есть — чем сильнее в дескрипторе посетитель узнает себя — тем больше шансов, что он внимательно изучит лендинг и, чем больше триггеров, он пройдёт — тем выше шанс на то, что решится на покупку.
Как я сейчас помогаю сделать дескриптор ученикам и клиентам — мы делаем очень простое упражнение:
- Сначала все пишут, то что у них в голове всплыло или уже используется в качестве дескриптора — чаще всего это заряженный энергией, но абсолютно непонятный лозунг, что-то типа «Just do it».
- Когда все это написали, я прошу написать второй вариант «Тупо как Домашенко просит» — то есть ответить на минимум 5 вопросов: Что? Кому? Где? Когда? Как? — тут все плюются и рождают, порой странноватые, но зато очень точные конструкции, что-то типа: Поставка корейских профессиональных лифтов двухэтажным ресторанам быстрого питания на северо-западе московской области со склада и под заказ с отсрочкой платежа до 90 дней.
- Чтобы не мучать нежизнеспособными моделями, я говорю теперь можете собрать из 2-3 дескрипторов один. Вот тут как раз получается-более менее точный и живой вариант, в котором есть энергия из первого варианта и ответ на 2-3 вопроса из второго.
Накидывайте свои дескрипторы в комментариях — буду давать обратную связь.
Как нам сделать дескриптор в нашем случае на конструкторе лендингов PlatformaLP?
- Удаляем тот блок, который есть в нашем шаблоне главной в качестве меню — так меню не делают на лендингах (Я в следующих постах расскажу вам как сделать правильное меню продающего лендинга)
- Вместо меню вставляем на это место простой блок «Текст»и в него уже вписываем наш дескриптор.
Шаг №7: Заканчиваем формирование шапки блоком контакты
Как мы уже говорили выше, закончить блок шапки/заголовка первого экрана нужно ответом на третий вопрос из правила «Пришёл — Увидел — Купил»:
- Если ответ на первый вопрос: «Куда я попал?» — это логотип с расшифровкой того, чем занимается компания
- Ответ на второй вопрос: «Что я получу?» — это текст дескриптора с ответом на вопросы «Что? Кому? Где? Как? Когда?»
- То ответ на третий вопрос «Как я это получу?» — это блок контакты в правом верхнем углу первого экрана лендинга.
Что важно и нужно знать про блок контакты?
Блок контакты — это вовсе не триггер информации как многие думают, а триггер доверия. Что это обозначает? Многие начинают писать здесь свой мобильный телефон и не пишут физического адреса, говоря: «Ну у нас пока ещё нет офиса, а квартиру я писать не могу» — вдруг они ко мне приедут.
Мой опыт говорит, что никто никогда не приезжает — сейчас вообще ушла мода ездить на встречи в офисы. Даже в наш офис в Москва-сити с красивым видом на город никто не поднимается — все просят: «Давайте просто посидим где-то в кафе, а то эти лифты, пропуска и пр.» А в последний год и вовсе встречи перешли в формат общения в Zoom-e
Zoom — это конференц и вебинарная платформа — очень удобная, гораздо симпатичнее и функциональнее скайпа и традиционных вебинарных комнат, да ещё и в зуме есть функция прямой трансляции вебинара в Facebook и YouTube, что делает его просто незаменимым для любого специалиста, который использует информационный маркетинг и экспертные продажи в своём продвижении. Подробнее о Zoom здесь: http://bit.ly/2FnoITD
К чему я это рассказал? По Вашему номеру телефона и адресу — у посетителей складывается определённое впечатление о вашей компании. Так наш мозг автоматически, чисто по привычке, считает компанию заслуживающей доверия, если у неё офис в хорошем месте в центре не очень далеко от метро, а также прямой номер городского телефона, то делаем следующим образом.
- В первой строке контактов пишем номер прямого городского телефона. Если у вас еще нет номера, то просто регистрируемся у провайдера IP-телефонии. Мы, например, очень любим Zadarma — за то, что у них:
- «Смешные совсем цены» — номер стоит меньше 200 рублей в месяц,
- Очень лёгкая настройка, буквально за пару минут,
- Удобно, что все звонки автоматически записываются.
- У них есть ещё много других фишечек, но нам хватает и этого. Вам для первых продаж их тоже должно хватить «за глаза». Регистрация в Задарма: https://zadarma.com/ru/
- Во второй строке пишем адрес вашего офиса. Если у вас ещё нет офиса, то можете просто написать адрес квартиры, вместо кв. написав сокращение «оф». Но, так как скорее всего адрес у вас не в центре, а в спальном районе и вы реально никого у себя в гостях принимать не собираетесь, то напишите просто адрес коворкинга в центре города, где обычно работаете или просто кафе где встречаетесь. Укажите просто адрес дома — про то, что это кафе или коворкинг писать не стоит. При случае расскажете что к чему клиенту, если спросит.
Как сделать блок адрес в нашем случае — обычно в шаблоне адрес уже предусмотрен, просто меняем номер телефона на свой и выкидываем все кнопки «Заказать обратный звонок и пр» — ими реально никто не пользуется. Вместо этого вписываем ваш адрес.
Что важно проверить на этом этапе, что все шрифты у вас в шапке одинаковые. Мы рекомедуем использовать для лендингов на платформе шрифт Open Sans 16-го размера. Для заголовков он будет крупнее, но об этом ниже.
Шаг №8: Самый главный призыв лендинга — ОФФЕР
Вот мы закончили шапку и ответили на все ключевые вопросы. Теперь надо перейти к самой главной части лендинга, куда падает взгляд посетителя — место чуть выше центра изображения. Здесь мы размещаем ключевое продающее предложение лендинга — оффер. Если дескриптор — это объяснение то, чем занимается компания вообще, то оффер — это то, что мы предлагаем купить именно сейчас именно на этом леднинге.
Есть много разных способов формулировать оффер по разным правилам. Я лично люблю модель 4U, она мне кажется наиболее точной и работоспособной.
Что за модель 4U? Она включает в себя 4 составляющие:
- Полезность (Usefulness) — Какую выгоду/пользу получит ваш клиент от вашего предложения? Какую проблему решит (как вариант)?
- Ультра-специфичность (Ultraspecificity) — насколько ваше предложение по достижению этой пользы выгоднее для клиента — очень важно именно в конкретных цифрах выразить эту мысль.
- Срочность (Urgency) — ну тут всплывают наши любимые приёмы из постановок цели по SMART и формулировании офферов по ODC (про это будет ниже) — первое правило тайм-менеджемента «Цель не ограниченная по времени — это мечта». Укажите точно за какой срок ваш клиент получит пользу.
- Уникальность (Uniqueness) — За счёт чего вы это сделаете? С помощью какой уникальной технологии/функции/еще чего-то вы это сделаете?
Иногда не получается точно следовать этой модели, но стремиться к ней несомненно нужно. Главный мой вывод из опыта гласит о том, что ЧЕМ КОНКРЕТНЕЕ ОФФЕР — ТЕМ ВЫШЕ ПРОДАЖИ!!!
Пример у нашего агентства: Повысим Ваши продажи в 3 раза за 12 недель при помощи сквозной аналитики. Может не очень идеален и не очень понятен, еще поправим в будущем, но зато — чисто классическая модель. А наши эксперименты гласят о том, что в среднем классика конвертирует в 4 раза выше, чем «творческие решения».
Лучший тренажёр, который поможет вам научиться легко формулировать офферы по 4u: https://lp4u.ru/4u-zagolovki/
Как нам сделать оффер на конструкторе PlatformaLP? Сначала вставляем блок отступ, чтобы было красивый «пробел» или «воздух» в дизайне для лёгкости.
После вставки «отступа» вставляем блок текст, только уже не «простой текст», а именно «заголовок». Но на всякий случай надо обратить внимание, чтобы шрифты были едины на всём леднинге и уж тем более на экране. Мы, как я писал выше, выбрали шрифт Open Sans, а более крупные шрифты, лучше делать кратнымии базовому размеру 16. В данном случае наиболее адекватно подошёл размер шрифта 48 — в 3 раза больше стандартного и это правильно.
Шаг №9: Устанавливаем форму захвата
С оффером закончили — призыв дали, пора получать контакты тех, кого это предложение заинтересовало.
Вариант №1: позвонить по телефону из верхнего правого угла, но в последнее время всё меньше и меньше люди любят звонить. Всем стало проще писать в мессенджеры и пр. поэтому вариант №3 — онлайн консультант и про них в другом посте.
Вариант №2: классический вариант основного формата получения лида — это форма захвата.
Что важно знать про форму захвата:
1. Форма захвата должна быть справа. Очень часто вижу, как ставят формы захвата СЛЕВА — это ошибка.
Почему справа? Я рассказывал выше уже, что в культуре читающей слева направо — взгляд скатывается из левой части экрана в правую. Поэтому очень сложно для мозга сосредотачивать внимание и тем более совершать действие в левой половине экрана. Важно поэтому и баннеры и формы делать в правой половине экрана.
Тем более сейчас, когда писал этот пост, вдруг пришло открытие, что если лендинг реализует модель AIDA (я про это рассказывал в посте про 10-ти экранную модель продающего лендинга), то данная конструкция решает локальную реализацию принципа AIDA, где роль:
А — Attraction решает шапка
I — Interest решает оффер
D — Desire решает текст слева от формы (к нему вернёмся ниже)
A — Action решает как раз форма захвата
2. Форма захвата должна быть на первом экране
Форма захвата или хотя бы конверсионная кнопка (CTA-button — Call-to-Action — кнопка призыва к действию) должна быть обязательно на первом экране. В среднем отсутствие кнопки захвата на первом экране понижает конверсию лендинга в 5 раз — часто просто до 0!!! Но про кнопку мы еще поговорим.
Вот здесь кстати важный вопрос: ставить форму или кнопку которая вызывает форму? В современных трендах в дизайне очень часто предпочитают ставить именно кнопку — так смотрится красивее. Но мы с этим подходом не согласны по двум причинам:
а) кнопка, а потом форма, где ещё одна кнопка — это лишнее действие, а очень часто пользователи их избегают,
б) мы знаем, что пользователя «пугает неизвестность» и поэтому когда ещё «неизвестно», что за форма там будет — а вдруг там 30 полей на 5 вкладках — кнопку даже не нажимают.
в) более того, наш опыт говорит, что человек когда видит сразу всю форму — быстрее свыкается с мыслью заполнить всё-таки форму, чем когда он совершает простое действие — кнопку нажал, а там оказывается надо ещё поработать — форму заполнить и пр.
3. Форма захвата должна иметь минимальное количество полей
Считается, что каждое лишнее поле в форме захвата понижает конверсию на 10% минимум.
В нашем опыте есть одно единственное исключение, когда у вас лендинг по сложной услуге в В2В тематике, то в центральных экранах (НИ В КОЕМ СЛУЧАЕ НЕ НА ГЛАВНОМ ЭКРАНЕ) — можно делать сложные формы — многополей и много страниц и это даже повышает конверсию! Почему? Часто, заполнив максимально полную форму, посетитель понимает 2 вещи: а) эти люди точно разбираются и, задав правильные вопросы, не будут тратить моё время на опросы по телефону, а сразу дадут точный ответ, б) когда я сразу всё указал, я ожидаю, что получу именно то решение, на которое рассчитываю и мне не будут ничего «впаривать» по ходу общения.
Какую частую ошибку я встречаю в области форм? В форме кроме классических: имя + телефон + почта, появляется поле «комментарии»! С «какого перепуга» непонятно совершенно — потому что все вопросы вы зададите клиенту по телефону, что он там должен написать ему тоже непонятно — но зато классический пример лишнего поля, которое убивает конверсию.
Какое минимальное количество полей необходимо иметь в форме?
Наш опыт гласит, что для товаров, которые продаются в онлайн и не требуют сложного личного подтверждения и контакта достаточно 2х полей: Имя + E-mail, для захвата на первую онлайн консультацию достаточно тоже 2-х: Имя + Телефон — остальное можно уточнить по мере общения.
Обычно для более-менее сложных товаров, где может потребоваться и созвон и сразу выслать материалы какие-то достаточно 3х полей: Имя + Телефон + Почта. Причём мы считаем ошибкой делать все эти поля обязательными. Если для вас не является критичным какое-то значение поля, допустим телефон, то можно вообще все поля сделать необязательными. В крайнем случае достаточно одного обязательного поля: телефон или почта, чтобы связаться с потенциальным покупателем.
Кстати именно проверка по 3-м полям дала нам интересное наблюдение — некий мини-скоринг лидов. Если вы проводите мероприятие в онлайне и кто-то не указал телефон, то не страшно, а вот если вы проводите ОФФЛАЙН мероприятие и Вам не оставили телефон, то скорее всего этот лид «неживой» и он на мероприятие не собирается.
4. Мотивируйте посетителя на заполнение формы.
Как замотивировать посетителя заполнить форму? Чаще всего используется приём «ODC = Offer + Deadline + Call-to-Action», ну или его аналог «OLC = Offer + Limited + Call-to-Action».
Что это обозначает и как это сделать?
- Оффер — предложение мы уже знаем и заполняли его выше — здесь нам нужно его дополнить усилением, чтобы человек не думал, а прямо сейчас откликнулся и оставил свои координаты для начала переговоров. Я для того, чтобы отделить его от основного предложения называю его иногда субоффер.
- Дедлайн — ограничение предложения, в данном случае нашего усиливающего субоффера по времени на относительно короткий срок — до конца месяца — это максимум, лучше до конца недели. Субофферы по истечению дедлайна лучше всего менять — даже если они были сверхудачны. Так вы приучите свою аудитрию реагировать на ваши офферы в рамках «окна продаж/возможностей», что Вам сильно поможет в будущем запускать продажи и быстро получать максимальный результат.
- Иногда вместо дедлайна используется другой ограничивающий триггер «лимит». Если с дедлайном будет: «купи до такого-то числа и получи в подарок», то с лимитом будет что-то типа «первые 7 покупателей получат в подарок». Я лично субьективно меньше верю в лимитированные офферы, думаю что они больше придумка, ну кроме случаев, когда реальное ограничение есть — в коттеджном посёлке осталось 3 непроданных дома. Дедалайн же понятное ограничение — кто не успел, тот опоздал. Последнее исследование потребительского поведения россиян говорит о том же, что количество покупок резко возрастает в «лимитированные по времени скидочные периоды и акции».
- Колл-ту-экшен — призыв к действию: сделай что-то (призыв), до такого-то (дедлайн) и получи то-то дополнительно к основной выгоде (субоффер к основному офферу).
Очень важно при построении усиливающего оффера учесть 3 вещи.
- Теоретическую: желательно, чтобы субоффер усиливал предложение в правильную сторону, в некое «превосхождение ожиданий» по основной продаже, которую вы бы итак дали, чтобы сформировать хорошую удовлетворённость у клиента. По сути надо придать ценность тому, что вы были готовы подарить итак, чтобы помочь клиенту. Для опоздавших это будет понятная мотивированная допродажа или сверхбонус за какие-либо действия в вашу сторону.
- Практическую: очень хорошо, когда вы подарку присваиваете ценность сразу же, допустим «Зарегистрируйся в акселератор до 15 мая и получи 2 персональные консультации, стоимостью 15.000 рублей каждая, в подарок». То есть я ценность подарка, которая может быть не очевидна, указываю в явном виде.
- ОШИБКА: в качестве оффера указывать скидку. Скидочный маркетинг вообще самый худший способ мотивировать продажи, это выбор лентяев, хотя и бывают редкие исключения. Но о них в отдельных постах. В данном конкретном случае скидка как оффер/ценность просто НЕ РАБОТАЕТ! Почему? Человек еще не познакомился с ценой вашего продукта, не до конца понял его ценность, а это обозначает, что скидка в данном блоке имеет 0 ценность для вашего покупателя. Подробнее это обсудим как-нибудь в следующих постах.
- ВЫВОД: всегда увеличивайте ценность оффера для клиента давая ему СВЕРХвыгоду, а не занижайте ценность вашего продукта скидками. Иногда при правильной упаковке эта СВЕРХВЫГОДА для вас ничего не стоит — вы итак бы её дали, чтобы обеспечить клиенту результат, а для клиента это важный фактор для выбора в вашу пользу.
Очень часто, нам важно, чтобы лид, который заполнил форму ещё и выбрал правильную цену и, желательно, сразу оплатил, но это уже в следующих постах, где будем разбирать экран ЦЕНЫ.
Настраиваем форму на главном экране:
1. Удаляем видео, которое стояло в этом шаблоне и вставляем туда форму из меню «Формы» в шапке. Причём выбираем форму без цветного заголовка — он только испортит дизайн лишним цветным пятном, а цветное пятно у нас должно быть только одно — кнопка КУПИТЬ
2. Уменьшаем лишние отступы вокруг формы до минимальных 5 пикселей.
3. Делаем форму прозрачной, чтобы она не отвлекала на себя лишнего внимания. Выбираем для этого в блоке настроек «Вид» в выпадающем меню «Стиль» значение «Без стиля»
4. Вот мы и добрались до самого главного продающего элемента первого экрана «КНОПКА КУПИТЬ».
В форме кнопка купить, как правило уже есть, но зачастую она неправильная.
Вспоминаем, про требования к кнопке купить из моих ранних постов:
Кнопка заказа. Наш любимый CTA-button или «кнопка бабло», как называют её манимейкеры. Кнопка сама по себе является очень важным продающим триггером. Ведь именно нажатие на кнопку является тем действием, которое нам необходимо. (Конечно сама форма должна быть заполнена корректными данными).
Правило первое: Кнопка должна быть. Не знаю даже, что тут сказать. Кто-то думает, что клиенты будут только звонить и пр. Но заказчикам в интернете важно и удобно сделать заказ именно в интернет. Поэтому ключевым элементом захвата должна быть именно форма с кнопкой захвата.
Правило второе: Кнопка должна быть одна. Любой опытный продавец и маркетолог знает, что чем меньше выбор, тем проще клиенту принять решение о покупке. Когда выбор слишком велик, клиент теряется, страх сделать неправильный выбор, зачастую, отталкивает от покупки вообще. А когда выбор ограничен или лучше сведён к одному единственному вопросу — покупать или нет. То решение уже совсем другое: покупать или нет. И, если предложение хорошее, но даже есть какие-то сомнения, то часто работает «что лучше сделать и жалеть, чем не сделать и жалеть». А когда непонятно, что лучше выбрать, то решение о покупке откладывается до момента, когда будет больше информации, требуется время подумать и пр.
Правило третье: Кнопка должна быть зелёная. По многим исследованиям, считается что лучше всего продают кнопки именно зелёного цвета. Среди прочих цветов именно этот цвет у нас ассоциируется с командой «можно ехать», «надо двигаться дальше» и пр. Красный же часто обозначает для нас «СТОП», жёлтый «опасность» и пр. Это не 100% правила — есть и контрпримеры. Просто, если у Вас нет какого-то важного довода сделать кнопку какого-то другого цвета — лучше сделать её зелёной. Да и клиенты уже привыкают искать именно зелёную кнопку.
Правило четвёртое: Зелёная кнопка должна быть ОДНА. Здесь продолжается логика второго правила. Что чем меньше выборов, тем больше вероятность, что клиент выберет нужный нам. И здесь это усиливается — только ваш основной конвертационный элемент захвата должен быть зелёный. Вторичные конвертации: подписаться на рассылку и пр. Если уж они есть у Вас — должны быть другого цвета. Пусть конвертация будет на них ниже, но они не будут отвлекать на себя внимание клиента. И он не закажет у Вас промо-буклет (подпишется на рассылку) вместо того, чтобы сделать покупку.
Правило пятое: Надпись на кнопке должна быть достаточно яркой для прочтения и нести в себе понятный результат. Т.е. на кнопке должно быть не просто «Отправить» или «заказать», а именно финальный шаг для получения результата «Получить консультацию», «Записаться на тренинг», «Записаться на просмотр» и пр.
Поэтому заходим в настройки кнопки и выбираем её цвет в списке цветов. Если вам нравится «наш оттенок зелёного», то можете сразу вставить в это поле вот это обозначение цвета по RGB: rgb(53, 153, 6)
Если форма, по какой-то причине кажется Вам зауженной, то её ширину, как и ширину соседнего блока можно легко поправить, просто подвигав мышкой, за границы блоков, которые выглядят как 2 параллельные полупрозрачные полоски.
Кстати я практически ничего не сказал про соседний блок. Какой-то сверхтеории по этому блоку, в отличие от всех остальных, мы пока не разработали. Поэтому выводим в этом блоке пока просто краткую информацию о том, что вы получите кратко в рамках данного оффера и перечисляем 5 состовляющих нашего предложения кратко, подробно это мы опишем на втором экране нашего лендинга в блоке «Что вы получите».
Если визуально текст «слипается», а не рекомендую делать слишком много текста — будет отталкивать посетителя от желания прочитать. А чтобы текст читался легче — его надо сделать «воздушнее», просто увеличив интервал между строчками, так чтобы блок был примерно пропорционален высоте формы.
Выше мы говорили с вами о том, как важно иметь минимум полей в форме, чтобы она хорошо конвертировала. В нашем случае у нас продукт «Акселератор» достаточно дорогой, поэтому нам важно иметь возможность связаться с клиентом. Поэтому добавляем новое поле «телефон». Для этого выбираем форму и наводим на кнопку «+Добавить поле»
В списке типов полей добавляем поле «Телефон»
Чтобы не засыпали заявки странные безымянные личности я всё-таки добавляю полю формы «Имя» — свойство обязательное поле — не хочешь представляться? Не будем общаться — форма не отправится! Теряю в конверсии? Формы да, а в качестве лидов нет.
Вот мы закончили 2 важнейших продающих блока первого экрана:
1. Блок шапка «Пришёл — Увидел — Купил», где была первая возможность стать лидом: сделать звонок.
2. Блок оффер где мы сформулировали ключевое предложение и усилили его субоффером ограниченным по время, где была вторая основная возможность стать лидом: заполнить форму.
Если посетитель не воспользовался ни одной из возможностей стать лидом, но и не закрыл лендинг, а продолжает по нему двигаться, то это обозначает, что ему просто не хватает информации для принятия решения о покупке.
В информационной области он уже переместился в «зону рационального», а это значит, что от эмоций пора аппелировать к его рациональности: приводить факты и цифры.
Почему вообще Цифры, а точнее оцифрованные факты? Мозг, как компьютер любит не просто «Факты», а именно оцифрованные факты. Кстати, что интересно, вот именно ЦИФРЫ в этой части экрана даже важнее смыслов, просто важно, чтобы были цифры. Мой опыт гласит, на 1000 посетителей находится только 2 человека, которые говорят: «Слушай, а я вот тут перепроверил все цифры, поднял статистику, взял интеграл и у меня получилось 43%, а вы пишете 38% — это как так?»
Ну то есть, большинство посетителей в эти цифры всерьёз не вдумываются, но то, что они есть «успокаивает мозг» и вызывает доверие. Это вовсе не обозначает, что здесь надо начать врать, но и «слишком переживать» и затягивать запуск лендинга из-за точности +/- 10% точно не стоит.
Наш опыт говорит, что блок цифры лучше не убирать «под первый экран», а именно завершать им первый экран, чтобы клиент мог принять решение о покупке, не покидая первый экран.
Как лучше всего организовать блок цифры?
1. Сколько должно быть цифр?
Наш опыт говорит, что лучше всего использовать 6 цифр в один ряд.
2. Что это должны быть за цифры?
Следуя логике проективной психологии: первые 3 цифры, которые относятся к левой половине экрана и относятся к прошлому должны быть про «прошлые успехи и достижения» и здесь лучше указать цифры про опыт компании вообще и в реализации подобных проектов.
Вторые 3 цифры, которые находятся в правой половине изображения лучше всего отнести непосредственно к самому продукту/офферу: потенциальным результатам от его использования, преимуществам и пр.
3. Как лучше оформить цифры?
Я в работах по лендингам нашего и других агентств, а также в работах наших учеников видел много разных вариантов: просто крупные цифры, яркая инфографика, фото и пр. Но лично мне больше всего нравится монохромная тематическая контурная инфографика, ну точнее простая тематическая пиктограмма, которая задаёт атмосферу, рядом с которой крупная цифра, можно ниже маленькое пояснение, как у меня в примере ниже.
4. Итак, завершаем первый экран блоком цифры:
Для этого берём сначала блок колонки из меню в шапке — причём пролистываем его сразу до блока с 6-ю колонками.
Чтобы блок с цифрами не «прилипал» к форме добавляем между ним и формой «отступ»
В ячейки таблицы добавляем элемент «иконка с текстом», в каждую ячейку по такому элементу. Потом меняете иконки и текст на те, цифры, которые у вас получились.
Если под блоком цифры еще осталось лишнее место, то можно просто взять и подтянуть низ картинки немного повыше, чтобы весь первый экран влезал в один экран на ноутбуке.
ФУУУХ!!! можно выдохнуть — этот огромный пост-лонгрид закончен. Мы с вами собрали первый экран и можем переходить к созданию следующих экранов. Ссылки на тексты про следующие экраны будут здесь по мере их появления.
Что дальше?
- А пока создавайте свой первый экран по нашей инструкции, если у вас будут вопросы или замечания пишите их в комментариях и я буду отвечать как можно быстрее.
- Если статья вам понравилась, я буду ОЧЕНЬ БЛАГОДАРЕН, если вы поделитесь ей в социальных сетях.
- Хотите первым узнать про новые статьи по лендингам в продолжение этого материала и не только? Подпишитесь на нашу рассылку в правом верхнем углу этого блога.
- Хотите получить полный доступ к нашему основному учебному курсу, где мы пошагово проводим ученика через 5 основных ступеней продаж в интернете: стратегия, лендинг, контекстная реклама, аналитика воронки продаж, автоворонки и e-mail маркетинг? Можно просто купить доступ к нашим учебным материалам без проверки домашних заданий на 1 месяц: сейчас это стоит 990 рублей в месяц: http://domashenko.e-autopay.com/buy/343267
- Также когда мы весной проводили опрос пользователей с вопросом купили бы вы доступ к нашим материалам со всеми обновлениями сразу на 1 год, если бы он стоил как 6 месяцев (скидка 50%) — почти половина опрошенных ответила «ДА» — поэтому мы даём вам такую возможность прямо сейчас — годовой доступ будет стоить 990х12=11.880 рублей — мы же предлагаем вам приобрести его за полцены за 5.940 рублей: http://domashenko.e-autopay.com/buy/361837
- Также можно стать членом нашего сообщества и кроме материалов получить еще и доступ в закрытый чат, где наши специалисты будут отвечать на Ваши вопросы. Стоит такой доступ 2.900 рублей в месяц: http://domashenko.e-autopay.com/buy/343268
- Если вы хотите: доступ к нашим учебным материалам + доступ в наше сообщество + ежедневную проверку домашних заданий, то Вам нужно приобрести наш учебный курс, это стоит 9.900 в месяц: http://domashenko.e-autopay.com/buy/343269 и здесь мы будем КАЖДЫЙ день проверять ваши домашние задания по каждому из 5-ти модулей, вы можете сдавать их с любой частотой — хоть раз в день, хоть раз в месяц, но наши специалисты проверяют домашние задания учеников ЕЖЕДНЕВНО.
- А если вы хотите заработать миллион с помощью интернет-продаж, то у нас есть еще 3 вакантных места в нашей учебной программе акселераторе интернет-маркетинга «Заработай 1.000.000 рублей за 3 месяца обучения в акселераторе интернет-маркетинга«: http://domashenko.digital/1m
Сообщение Создание лендинга на конструкторе PlatformaLP: собираем первый экран появились сначала на Валерий Домашенко: интернет-маркетинг и продажи в интернете.