В этой статье нет волшебной структуры лендинга с высокой конверсией — мы в такие не верим. Конверсия больше зависит от клиента, рынка и продукта, чем от презентации продукта на лендинге.
Компания продает CRM-систему. Если она неудобна и не решает задачи пользователя, идеальный лендинг не поможет. Клиент попробует поработать в системе, поймет, что она неудобная, и не купит платную версию. Дело здесь не в лендинге, а в самом продукте — нужно дорабатывать систему.
Другое дело, когда CRM-система действительно удобная, а потенциальные клиенты не знают, что такой продукт есть на рынке. Тогда лендинг поможет привлечь новых пользователей, которые попробуют систему и будут в ней работать много лет.
Мы расскажем, как построить блоки лендинга, чтобы они смотрелись понятно и вызывали желание купить. В основе подхода — знание клиента, иллюстрации и связность структуры. Мы затронем только главные блоки, а о футере, подвале сайта и других элементах лендинга мы написали отдельную статью.
Вам точно нужен лендинг?
Лендинг — это короткая презентация одного товара или услуги с большим количеством иллюстраций. Лендинг делают, чтобы продать в интернете
Перед тем как создавать лендинг, убедитесь, что продаете то, для чего нужна презентация.
Структура лендинга
Структура лендинга, или landing page, включает три части:
- Знакомство с продуктом. Это первое, что видит человек на лендинге. Задача раздела — показать товар и дать человеку повод остаться на странице.
- Презентация продукта. Это главный раздел лендинга — демонстрация полезного действия продукта. Цель раздела — показать клиенту, как продукт сделает его жизнь лучше.
- Сделка. Это предложение купить или совершить любое другое целевое действие — подписаться, оставить контакты, отправить заявку на консультацию.
Теперь давайте пройдемся по каждому пункту подробно.
Знакомство
Цель раздела — дать клиенту повод остаться на странице. Для этого дайте ответы на главные вопросы:
- Как называется продукт или услуга?
- Как выглядит?
- В чем от него польза для клиента?
- Сколько стоит?
Как называется продукт или услуга. Назовите продукт или услугу так, чтобы читатель понял, что будут продавать на странице.
| ❌ Непонятно | ✅ Понятно |
|---|---|
| Спасаем от рутины аудиопотока | Расшифровываем аудиозаписи |
| Шальная франшиза | Франшиза караоке-бара «Шальная императрица» |
| Оказываем услуги всем участникам ВЭД | Оформление груза на таможне |
| Мужицкая удаль | Кружка «Мужицкая удаль» |
| Центр крема и шоколада | Кафе-кондитерская |
Как выглядит. Покажите, что получит клиент за свои деньги. Если это продукт, достаточно красивой фотографии. Если это услуга, рекомендуем нарисовать схему, которая покажет, как вы сделаете жизнь клиента лучше. Давайте разберем несколько примеров.
❌ Посмотрите на скриншот лендинга ниже. Сможете догадаться, что он продает?
Разгадка: это ВПН-сервис. Так называют плагин для браузера, который позволяет анонимно подключаться к запрещенным сайтам, например к соцсети LinkedIn, через нее ищут сотрудников.
Широкой публике будет сложно догадаться, о чем речь на лендинге. Для них так лучше не показывать товар или услугу: клиент не поймет, чего от него хотят и что предлагают. В итоге он просто уйдет с сайта.
✅ Ниже скриншот лендинга о MacBook Pro. Ноутбук здесь занимает внушительную часть экрана. На фото красиво отражается свечение от монитора, а изображение такое четкое, что видно текстуру корпуса. Клиенту сразу понятно, что ему предлагают — крупно, красиво и в высоком разрешении.
Бывают сложные продукты или услуги: система финансовой аналитики для микробизнеса, услуги таможенного брокера, строительство домов. Такие тоже можно показать с помощью видео, схем, инфографики, фотографий, 3D-модели.
Собрали в таблицу идеи для иллюстрации и примеры того, как это может выглядеть.
| Продукт или услуга | Как показать | |
|---|---|---|
| Даем пользоваться своей CRM‑системой | Скриншот из CRM-системы. Видно, что будет удобно пользоваться | Пример |
| Расшифровка аудиозаписей | Скриншот личного кабинета. Понятно, как можно отслеживать результат | Пример |
| Строительство деревянного дома | Фотография большого деревянного дома. Видно, что здесь можно жить | Пример |
| Создание BIM‑модели по 2D‑чертежам | Гифка или видео, на которой видно, как появляется 3D‑модель | Пример |
| Перевозка товара из Китая в Украину | Карта с маршрутом перевозки, местами погрузки и доставки. Схема с этапами перевозки и оформления груза на таможне | Пример |
| Делаем рекламные баннеры | Видео с баннерами в 3D‑плоскости. Видно, что они красивые и привлекают внимание | Пример |
| Курс для начинающих дизайнеров | Схема, по которой видно, сколько длится обучение и что с каждым этапом будет сложнее. Темы курса | Пример |
| Индивидуальные занятия по речи | Видео с речью ученика до занятия и видео с речью после занятий | Пока никто не догадался, что так можно делать |
В чем польза для клиента. Напишите, как товар или услуга сделает жизнь клиента лучше. Особенно это важно, когда по названию и иллюстрации продукта не очевидно, какая от него польза. На лендинге о ВПН-сервисе как раз и есть эта проблема: даже если бы продукт назвали, неподготовленные читатели не поняли, зачем он нужен.
Представьте, что проблема клиента — вопрос, с которым он приходит на страницу. Если на ней не будет ответа, он уйдет. Ответ можно сформулировать
| Продукт или услуга | Проблема или задача клиента | Как выразить пользу |
|---|---|---|
| Полноразмерные наушники «Бум‑тыщ‑пум» Pro 5X | Сводить треки и монтировать подкасты | Ровная амплитудно-частотная характеристика. Наушники не приукрашивают звук верхними или нижними частотами |
| Ручная кофемолка с жерновами из нержавеющей стали | Пить кофе на свежем зерне | Равномерно и быстро мелет, легко очищается, подходит под все виды заваривания |
| Эргономичная клавиатура с механическими клавишами | Пишу по 10 страниц в день. Руки и пальцы быстро устают | Удобная клавиатура для пишущих людей. Механические кнопки не требуют больших усилий, а необычная форма помогает сохранять силы на протяжении пяти часов |
| Горячие термы под открытым небом | Боже, как я устал за эту неделю на работе | Термы помогут снять стресс и восстановить силы |
| Барбершоп «Цирюльник» | Никто не понимает, как именно меня надо подстричь! | Индивидуальный подход не на словах, а на деле. Наши барберы помогут разобраться в том, чего вы хотите, и сделают стрижку под ваши предпочтения |
| Делаем сайты под ключ | Нужно срочно сделать сайт, чтобы начать продажи | Если вам срочно нужен лендинг, мы поможем сделать все в срок и без ущерба качеству |
Сколько стоит. Укажите стоимость продукта. Это особенно полезно, если цена ниже среднерыночной, — так клиент быстрее перейдет к сделке.
На рынке услуг бывает, что стоимость рассчитывают, исходя из задачи и текущей ситуации клиента. Тогда смысла в цене нет, даже если указывать ориентировочные. Если потом цена услуги будет выше того, что написано на сайте, это разочарует клиента. Чтобы этого избежать, можно предложить клиенту отправить заявку на консультацию.
Презентация
Когда вы назвали продукт, показали его, описали полезное действие и стоимость, можно приступать к главному — презентации. Цель этого этапа — объяснить, как товар или услуга выполняет свое полезное действие с точки зрения клиента.
Разберем этот блок на примере лендинга кофемолки. Собрали в таблицу нужные вводные.
| Продукт | Ручная кофемолка с жерновами из нержавеющей стали |
| Целевая аудитория | Они не любят растворимый кофе. Чувствуют разницу между свежемолотым кофе и тем, что приготовлен из зерен, смолотых две недели назад. Они могут пить в день по две-три чашки свежемолотого кофе |
| Проблемы | Не нравится, когда выходит неравномерный помол: тогда частицы кофе заварятся в разное время и кофе может горчить. Не нравится, что устает рука каждый раз, когда мелешь кофе. Не любят отмывать кофемолку по два-три раза на дню. Иногда хочется кофе во френч-прессе, а иногда в турке |
| Полезное действие | Равномерно и быстро мелет, легко очищается, подходит под все виды заваривания |
Теперь обозначим тезисами, как кофемолка выполняет свое полезное действие:
- быстро мелет кофе;
- устройство кофемолки позволяет получить равномерный помол;
- позволяет смолоть кофе для разных способов приготовления;
- кофемолку не нужно мыть, только очищать раз в неделю.
Затем раскрываем тезисы, которые объясняют полезное действие. Это можно делать разными методами: объяснять текстом, показывать иллюстрации и видео.
Разберем, как можно раскрыть каждый из тезисов.
| Тезис | Как показать | Что написать |
|---|---|---|
| Быстро мелет кофе | Короткое видео, на котором ровно 10 граммов перемалывают на протяжении 30 секунд. На видео видно таймер и что человек в кадре не прикладывает много усилий | Рассказать, что кофемолка работает быстро за счет объединения жерновов с шипом для резки |
| Помол выходит равномерным | Фотография, на которой видно структуру помола. План такой крупный, что любой может сделать вывод, структура равномерная | Объяснять, что вкус кофе зависит от равномерности помола и что жернова помогают молоть кофе равномерно |
| Размер помола можно настроить под все виды заваривания | Фотография механизма для контроля степени помола | Список способов заваривания, под которые можно настроить помол в кофемолке |
| Мыть не нужно, только очищать раз в неделю | Фотография кофемолки во время чистки с помощью кисти и таблеток | Кофемолка легко очищается без мыла и щетки. Если вы пьете две-три чашки в день, достаточно вечером почистить ее кистью. Для пущей надежности можно раз в неделю перемалывать таблетки «Чистота» |
Посмотрим еще один пример — лендинг сервиса для приема донатов. Роль продукта играет сервис для приема денег на стримах. Такой сервис нужен блогерам, которые
Представим, что блогер Афанасий споет «Третье сентября», только если ему зрители пришлют 1000 ₽. Прислать могут хоть по 5 ₽, хоть по 500 ₽. Нужно постоянно считать, сколько уже пришло и сколько осталось. А еще нужно удерживать внимание зрителей, которые ждут песни.
Полезное действие сервиса: он автоматически отслеживает пополнения и выводит на экран красивые оповещения, сколько денег пришло и сколько осталось собрать. Посмотрим, как презентуют личный кабинет такого сервиса.
Разберем третий пример: лендинг об учителе вокала для взрослых.
Продукт — уроки пения. Целевые клиенты — те, кто хочет научиться петь под гитару или пианино. Они считают, что поют плохо, а сами изменить это не могут. В академические школы не обращаются, потому что там учат
Вместо рассказа о преподавательском подходе на лендинге одно видео. Оно иллюстрирует полезное действие «научу петь». На видео преподаватель объясняет простым языком, что делать, чтобы научиться петь. Взрослый человек может сам пройти урок, применить советы преподавателя и оценить результат. Этого достаточно, чтобы он решил, понравится ли ему преподаватель и сможет ли тот научить петь.
Бывает, что один продукт или услуга закрывает много разных проблем для разных клиентов. Например, курсы английского подходят для старшеклассников и молодых менеджеров. Задачи и проблемы у них будут разные: старшеклассник хочет сдать ЕГЭ и смотреть иностранных тиктокеров, а менеджер — выучить язык, чтобы не чувствовать себя за границей как глухонемой, а узнавать дорогу и заводить знакомства.
В такой ситуации рекомендуем сделать несколько лендингов — под каждого клиента. Так будет проще сосредоточиться на задачах конкретного покупателя и показать, как ваш продукт их решит.
Сделка
Когда мы познакомили человека с продуктом и презентовали его, пора предложить сделку. Это может быть любое нужное вам целевое действие: купить товар, подписаться на рассылку, оставить заявку или начать пробный период.
Цель этого раздела — заключить с клиентом договор. Для этого в нем нужно объяснить:
- что вы продаете;
- на каких условиях и за сколько это можно купить;
- что именно нужно сделать для покупки.
Что продаете. Перечислите и изобразите максимально конкретно, что человек получит, как будто это чек.
Если продавали кофемолку, напишите ее название, комплектующие и дополнительные предметы, идущие в подарок.
Если предлагали подключить пробный период в CRM-системе, напишите название CRM-системы, сколько длится этот период, какими функциями можно будет пользоваться и что будет, когда период закончится.
На каких условиях можно купить и за сколько. Пропишите все условия: цену, гарантии, способы оплаты и доставки
Не обязательно делать это на одном экране. Можно способы оплаты и доставки добавить на следующий экран, где покупатель укажет адрес, имя, номер телефона.
Что сделать для покупки. Поставьте кнопку с целевым действием. Без нее будет непонятно, что вы предлагаете. Обычно для нее используют глаголы: добавить, купить, оформить. Цвет кнопки должен отличаться от фона, чтобы ее хорошо было видно.
Вам не обязательно предлагать сделку в самом конце. С одной стороны, люди привыкли: если им понравится продукт, они могут долистать лендинг до конца и нажать кнопку «Купить». Но с другой — бывает, что клиенты охотнее заполняют заявку или расстаются с деньгами, когда сделку предлагают прямо на экране знакомства — ставят кнопку с целевым действием.
Мы не знаем, в каком блоке вашего лендинга будет результативнее поставить кнопку. Рекомендуем попробовать такой способ: поставьте блок сделки в конце лендинга, а потом проведите эксперимент — сделайте копию лендинга и предложите сделку сразу после знакомства. И посмотрите, с какого лендинга будет больше продаж. Такую проверку называют A/B-тестом.
Когда стоимость продукта сильно выше среднерыночной, можно воспользоваться приемами, которые помогут удержать клиента. Приведем несколько.
«На самом деле мы вам скидку даем» — клиенту показывают, что сейчас дают скидку и на самом деле товар стоит дороже. На картинке выше, с футболкой, как раз используют этот прием: цена повыше зачеркнута, а цена пониже стоит на переднем плане.
«Это не так дорого» — ценники в духе «1999 ₽» делают для впечатления, что товар не такой уж и дорогой: не две тысячи же, а одна. Чтобы прием лучше сработал, попробуйте уменьшать реальную стоимость не на рубль, на двадцать или хотя бы на десять.
«Это лучший выбор по соотношению цены и качества» — ставят другие модели товара подешевле и подороже. Это помогает покупателю прийти к выводу, что нынешний вариант оптимальный.
Что дальше
Сделать сам лендинг — это полдела. Теперь надо привлечь на него аудиторию. Как это сделать с помощью социальных сетей, рассказали в отдельных статьях:
- Как создать бизнес-аккаунт в Инстаграме.
- Как подготовиться к запуску таргетированной рекламы.
- Как настроить таргетированную рекламу в Инстаграме через рекламный кабинет Фейсбука.
Конструктор сайтов Тинькофф
Можно сделать лендинг на конструкторе сайтов Тинькофф:
- шаблоны под каждый вид бизнеса;
- можно все сделать без дизайнеров и программистов;
- доступен без счета в Тинькофф;
- пользование конструктором — 0 ₽.