Прототип лендинга: что проверить до дизайна

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

Мы строим прототип на данных, а не на вкусе дизайнера, и ниже показываем это на примерах из наших проектов. В статье — из чего состоит прототип, как его делают и чек-лист: что проверить, прежде чем утвердить схему и отдать её в дизайн.

Что такое прототип лендинга простыми словами

Лендинг — одна страница под один товар или услугу. Когда у компании есть продукт, который работает как основной «паровоз», мы рекомендуем вынести его на отдельный лендинг. Человек, который приходит из контекстной рекламы по запросу товара, не ищет компанию — он ищет конечный продукт, и страница говорит только о нём.

Прототип — план такой страницы. Это чёрно-белая схема из прямоугольников и подписей: сверху вниз идут экраны в том порядке, в каком посетитель увидит их при прокрутке. В каждом экране написано, что в нём стоит: заголовок, предложение, аргументы, кнопка, форма.

По прототипу видно три вещи:

• о чём страница говорит и в каком порядке;
• на какие вопросы покупателя она отвечает;
• где посетитель может оставить заявку.

Какого цвета кнопка и какая фотография стоит на первом экране, решают позже, на дизайне.

Зачем нужен прототип для лендинга заказчику

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

Второе — прототип показывает, для кого страница. Прежде чем делать посадочную страницу и запускать на неё рекламу, мы разбираем, кто на неё придёт: с каким запросом, с какими мыслями, какие у этих людей боли. Пример из разговора с клиентом-производителем: тот, кто покупает для дачи, смотрит на одни критерии, а снабженец, который закупает на объект, приходит с заявкой и ГОСТами. У каждого свой перечень внутренних вопросов, и страница их закрывает или нет — это видно уже на схеме.

Третье — деньги на рекламу. От конверсии страницы, то есть доли посетителей, которые оставили заявку, зависит, окупится ли контекстная реклама. А её мы считаем самой дорогой рекламой на сегодня. Страница может и отсеивать лишние обращения: тогда отдел продаж не тратит время менеджеров на заявки, которые ему не нужны. Как это делают формы, показано в следующем разделе.

Из чего состоит прототип лендинга

Прототип лендинга собирают из пяти элементов:

• Экраны — части страницы, которые посетитель видит без прокрутки. Мы держимся правила «один экран — одно действие».
• Блоки — смысловые части экрана: предложение, аргументы, ответы на возражения, контакты.
• Заголовки — тексты мы пишем до прототипа, поэтому на схеме сразу стоят настоящие заголовки, а не заглушки.
• Кнопки — что на них написано и куда они ведут: к форме, звонку или мессенджеру.
• Формы заявки — где они стоят и какие в них поля.

Первый экран по нашему правилу — не слайдер с общими фразами, а конкретное предложение: что, для кого, по какой цене, и кнопка заявки.

Прототип сайта, пример: первый экран. Заголовок говорит, что продаём и для кого, под ним — предложение с условиями, кнопка заявки и форма.

Подборку готовых страниц с примерами соберём в отдельной статье.

Форм на странице может быть несколько, и на прототипе видно, где стоит каждая. Пример — два лендинга вместо одного сайта для компании Снаб Пром. Она продаёт стальные трубы и производит ППУ-трубы — в изоляции из пенополиуретана. У двух продуктов разные покупатели. На каждой странице пять форм захвата по всей длине, и каждая форма появляется там, где посетитель уже получил достаточно информации для следующего шага. К форме можно прикрепить файл: снабженцы работают со спецификациями. Отдельная форма «до 5 тонн» уводит розничные обращения в отдельный поток в CRM Битрикс 24, и менеджеры оптового отдела их не видят.

Такие решения видны и проверяются уже на прототипе: на схеме понятно, где стоит каждая форма и кому она адресована.

Как из схем отдельных страниц складывается многостраничный сайт, разобрано в статье «структура сайта». Какие блоки продают и в каком порядке их ставить, расскажем в отдельной статье о структуре продающей страницы.

Набросок, wireframe и кликабельный прототип: что видит заказчик

Прототип бывает разной подробности. Wireframe по-английски значит «каркас»: так называют схему из серых блоков с подписями. Заказчику важно понимать, что ему показали и что по этому можно утвердить.

Смысл страницы утверждают с того вида, где уже стоят настоящие тексты. По наброску утверждать нечего: он годится для первого разговора.

Как делают прототип лендинга: этапы

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

Бриф и техническое задание идут до прототипа: в них заказчик описывает задачу, продукт и покупателей. Как составить техническое задание для лендинга, мы разобрали в отдельной статье. О брифе расскажем отдельно.

В наших проектах порядок такой — подробно он разобран в статье «этапы разработки сайта»:

• Исследование — кто покупает, как ищет, что предлагают конкуренты. Из чего оно состоит, описано в следующем разделе.
• Структура — какие экраны нужны и в каком порядке.
• Тексты — заголовки и ответы на вопросы покупателя.
• Прототип — схема с этими текстами. Заказчик утверждает её до дизайна.
• Дизайн, вёрстка, подключение аналитики и форм, запуск.

Прототип, дизайн и макет — разные вещи. Прототип решает, что сказать посетителю, дизайн — как это показать: цвет, шрифты, изображения. Вместе эти две части называют макетом; как идёт работа над ним, мы описали в статье «создание макета сайта».

Прототип лендинга на данных: откуда берутся блоки и заголовки

На странице нашей услуги этот этап назван так: «Прототип на данных, а не структура из головы дизайнера». Данные дают три источника:

• интервью с отделом продаж — кто покупает и о чём спрашивает до заказа;
• анализ конкурентов — что рынок уже отвечает этим людям на других сайтах;
• разбор поисковых запросов — какими словами ищут.

Только собрав эти данные, можно написать страницу, которая разговаривает с покупателем на его языке и отвечает на то, что он ищет.

Данные меняют заголовок. Для оптовой компании по полимерным трубам на прототипе стоит не «Каталог продукции», а «Производим все виды полимерных труб диаметром от 16 до 1600 мм»: так ищет закупщик.

Данные меняют и первый экран. У компании ЦСС Кабель был многостраничный сайт с каталогом на 10 000 позиций. Мы сделали мультилендинг: каждая рекламная кампания ведёт на одну и ту же страницу, но с параметром в ссылке. По параметру страница собирает первый экран под запрос: заголовок, изображение товара, предложение. Человек искал силовой кабель ВВГ — на первом экране видит силовой кабель ВВГ. На прототипе такой страницы отмечают, какие части первого экрана меняются под запрос, а какие остаются общими.

Прототип — первая версия, а не окончательная. После запуска мы подключаем запись сессий: видно, куда посетители нажимают и докуда прокручивают страницу. Сквозная аналитика показывает путь человека от первого касания в рекламе до покупки. По этим данным страницу корректируют.

Как проверить прототип лендинга: чек-лист заказчика

Прежде чем утвердить прототип, пройдите по нему с этими вопросами:

• Первый экран говорит, что вы продаёте, для кого и на каких условиях, и на нём есть кнопка заявки.
• Заголовки — тексты на языке покупателя, а не названия разделов.
• Исполнитель может объяснить, откуда взят каждый блок и заголовок: из интервью, анализа конкурентов или запросов.
• На каждый вопрос покупателя есть ответ. Возьмите вопросы, которые менеджеры слышат чаще всего, и найдите ответ на схеме.
• Если покупатели разные, у каждого свой путь: оптовику и розничному покупателю страница отвечает по-⁠разному.
• Страница не говорит то же, что конкуренты. Положите рядом страницы конкурентов: если заголовки можно поменять местами и никто не заметит, получилась витрина, как у всех.
• На каждом экране одно действие, и понятно, что посетитель делает дальше.
• Аргументы идут по порядку, до заявки — минимум шагов.
• Формы стоят там, где посетитель уже знает достаточно для заявки, а в полях — только то, что нужно менеджеру.
• Есть мобильная версия: на телефоне экраны идут в том же порядке, кнопка заявки видна.
• Если реклама ведёт на страницу по разным запросам, на схеме отмечено, что меняется под запрос.

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

Вопросы и ответы о прототипе лендинга

Как сделать прототип сайта?

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

Сколько стоит разработка дизайна лендинга?

Разработка дизайна лендинга у нас отдельно не продаётся: прототип и дизайн входят в разработку страницы целиком. Лендинг стоит от 400 000 тенге, точная стоимость зависит от объёма задач. Из чего складывается цена, разобрано в статье «сколько стоит сайт».

Чем отличается сайт от лендинга?

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

Где используется прототипирование?

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

Заключение

Прототип лендинга решает, что страница скажет покупателю, до того как деньги ушли в дизайн и рекламу. Главный вопрос при проверке — можно ли объяснить каждый экран и заголовок данными: словами покупателей, запросами, ответами конкурентов. Если объяснение звучит как «так красивее» или «так у всех», схему лучше вернуть на доработку до дизайна.

Обсудить разработку лендинга можно на странице «разработка сайтов»: опишите задачу в форме расчёта и приложите свой набросок, если он есть.