Рассказываем, по какой формуле собирать лендинг, чтобы продать в онлайне товар или услугу
Иван Морозов
Интернет-предприниматель и дизайнер конструктора сайтов Тинькофф
Рассказываем, по какой формуле собирать лендинг, чтобы продать в онлайне товар или услугу
Иван Морозов
Интернет-предприниматель и дизайнер конструктора сайтов Тинькофф
В этой статье нет волшебной схемы лендинга с высокой конверсией — мы в такие не верим. Конверсия больше зависит от клиента, рынка и продукта, чем от презентации продукта на лендинге.
Компания продает 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 ₽» делают для впечатления, что товар не такой уж и дорогой: не две тысячи же, а одна. Чтобы прием лучше сработал, попробуйте уменьшать реальную стоимость не на рубль, а на двадцать или хотя бы на десять.
«Это лучший выбор по соотношению цены и качества» — ставят другие модели товара подешевле и подороже. Это помогает покупателю прийти к выводу, что нынешний вариант оптимальный.
Что еще разместить на лендинге
Можно добавить отзывы и FAQ, чтобы подтолкнуть человека к решению, и оставить контакты, чтобы он мог связаться с вами, если что-то нужно уточнить.
Отзывы. Они помогают людям принять решение о покупке и показывают другим пользователям, что компании доверяют и делают у нее заказы.
Рекомендуем публиковать подробные отзывы с фото и видео, на которых покупатель показывает, как использует товар. Если развернутых отзывов нет, текстовые тоже подойдут.
Не стоит скрывать негативную обратную связь от клиентов — такие отзывы тоже полезны. Они подсвечивают проблемы товара, которые могут возникнуть у других покупателей. Например, у кофемолки слишком короткий провод или нет регулировки количества помола.
FAQ. В конце лендинга можно оставить ответы на часто задаваемые вопросы — например, про возврат, скорость доставки, способы оплаты. Формулировать вопросы нужно коротко и понятно. Люди обычно скользят глазами по FAQ и ищут ответ, не вчитываясь в каждый пункт.
Блок FAQ поможет снять возражения клиентов, направит их в нужные разделы, минимизируя лишние клики и дополнительный поиск ответов.
Контактные данные. Иногда перед покупкой клиенты хотят поговорить с менеджером и еще раз задать интересующие вопросы. Для таких случаев рекомендуем оставить на сайте адрес электронной почты компании, ссылку на социальные сети и телефон для связи.
Что дальше
Сделать сам лендинг — это полдела. Теперь надо привлечь на него аудиторию. Как это сделать, рассказали в отдельных статьях:
