Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

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

Сергей Перевозчиков
редактор-маркетолог, 8 лет делаю сайты и промоматериалы, которые привлекают клиентов с деньгами (mktlg.ru)

Почему первый экран — важнейшая часть коммерческой страницы

Первое, что важно понимать: клиенты смотрят не только ваш сайт. Когда человек ищет что-то в интернете, он открывает 8—10 сайтов и проводит на каждом 6—36 секунд в среднем (в разных исследованиях цифры отличаются). Соответственно, чем больше посетителей задержится на вашей странице, тем выше будет её конверсия.

В первую очередь человек видит то, что умещается в экран его устройства. Именно здесь он решает, остаться на странице или идти дальше. На это решение уходит всего несколько секунд. Если за это время клиент увидел, что ему предлагают решение его проблемы, то остается изучать страницу дальше, если нет — уходит к конкурентам.

Клиент остается на странице, если она сразу предлагает решение его проблемы

Запомните: люди покупают не из-за красивых слов премиального текста и не потому, что компания такая классная. Человек обращается в компанию, если верит, что тут могут решить его проблему. Когда я объясняю это предпринимателям, многие начинают по-другому смотреть на свой маркетинг.

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

Иллюстрация: покажите не продукт, а то, как он улучшит жизнь клиента

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

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

Во-вторых, правильная правильная картинка сообщает намного больше, чем текст. То есть иллюстрации информативнее и, что очевидно, нагляднее слов.

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

Про каждую функцию можно было бы рассказать текстом, тогда получилось бы что-то такое:

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

Вместо этого я показал, как функция выглядит внутри самой платформы:

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

В результате получилось интересно и наглядно. Клиенту даже не нужно читать мелкий текст на скриншотах — суть понятна без слов.

Главное о том, как выходить за рамки текста и показывать продукты, рассказываю в отдельной статье.

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

На большинстве лендингов о новостройках, что я встречал, на первом экране изображен вид дома снаружи. Дом действительно может быть очень красивым — но ведь покупателю не во дворе жить. Возможно, следует показывать не саму новостройку, а интерьер квартиры и (желательно) вид из окна.

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

Еще из физического. Посмотрите, как преподносят свои продукты Apple:

Иллюстрация iPad Air. Качественные изображения гаджета вызывают желание подержать его в руках
Иллюстрация iPad Air. Качественные изображения гаджета вызывают желание подержать его в руках

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

Фото со страницы о наушниках Airpods Max. Apple вообще частенько показывают красивых людей, которые пользуются их устройствами. Глядя на такое фото, хочется быть таким же красивым и так же кайфовать
Фото со страницы о наушниках Airpods Max. Apple вообще частенько показывают красивых людей, которые пользуются их устройствами. Глядя на такое фото, хочется быть таким же красивым и так же кайфовать

Веб-дизайнеры, кстати, давно заметили, что клиенты частенько просят «Сделать как у „Эппл“». Я думаю, клиенты как раз имеют в виду классные визуализации. Немного забегу вперёд: дизайнер действительно может нарисовать такую иллюстрацию, но вот придумать её идею и подготовить ТЗ — задача редактора.

Для услуг или всего, что не пощупать — конечный результат. Если с физическими продуктами всё достаточно просто, то проиллюстрировать услуги сложнее. Как проиллюстрировать услугу привлечения трафика? Или юридического сопровождения сделок?

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

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

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

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

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

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

В одном из проектов, на этапе прототипа, я сделал наброски того, какой должна быть фотография продукта:

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

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

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

Заголовок: просто назовите то, что вы продаете

Лет пять назад было суперпопулярно делать длинные заголовки по технологии 4U. Суть метода заключалась в том, чтобы озвучить четыре главные составляющие: полезность, специфичность, срочность и уникальность. В результате получались громоздкие конструкции, чуть ли не абзацы текста в духе «Увеличь свой статус на 30% уже завтра с наручными часами с [какой-то там] технологией» Реальный пример, между прочим.

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

Универсальный вариант — указывать в заголовке название продукта. Если вы продаете франшизу кофейни, то так и напишите: «Франшиза кофейни», без обещаний заработка и прочих сомнительных вещей.

Если продукт для рынка новый и непонятный, действуйте по формуле «название» — «что это из себя представляет». В примере выше вы уже видели такой заголовок: «„Флайзер“ — альтернативный метод коррекции СДВГ у детей». Вот еще один пример экрана про сложный продукт, где заголовок составлен по той же формуле:

Альтернативный первый экран для онлайн-платформы нетворкинга. Вместо «для полезных знакомств» можно было так и написать — «для нетворкинга». Но это не имеет значения, ибо смысл один и тот же
Альтернативный первый экран для онлайн-платформы нетворкинга. Вместо «для полезных знакомств» можно было так и написать — «для нетворкинга». Но это не имеет значения, ибо смысл один и тот же

Подзаголовок: опишите полезное действие

Полезное действие — это причина, по которой человек захочет купить продукт. Обычно она звучит как решение проблемы клиента. Полезное действие постепенно приходит на смену «традиционному» УТП (уникальное торговое предложение). Проблема УТП как подхода в том, что для клиента важнее всего не уникальность компании или ее продукта, а то, какую пользу он в итоге получит.

Концепт первого экрана о звездном проекторе. В данном случае полезное действие предлагает скорее пользу, чем решение проблемы
Концепт первого экрана о звездном проекторе. В данном случае полезное действие предлагает скорее пользу, чем решение проблемы

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

Если же на вашу страницу приходит холодный трафик, который пока не ищет продукт целенаправленно (например, из соцсетей), то полезное действие должно быть в заголовке, а название продукта — в подзаголовке. Так вы сделаете акцент на пользе, ради которой пришел посетитель, а потом уже объясните ему, какой продукт её приносит.

Если трафик холодный, делайте наоборот: полезное действие ставьте в заголовок, а название продукта — в подзаголовок

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

Пять правил дизайна, которые чертовски важно соблюдать на первом экране

В веб-дизайне много правил писаных, неписаных тоже хватает. К сожалению, часто дизайнер хочет сделать красиво и по канонам, забывая при этом об удобстве для пользователя. Хотя именно от него ждут действий и денег.

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

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

Как зацепить максимум клиентов на первом экране лендинга: прокачиваем главное место посадочной страницы

2. Используйте принцип визуальной иерархии. Визуальная иерархия — это когда все элементы выделены так, что взгляд считывает их в определенном порядке. Например, картинка → заголовок → подзаголовок → кнопка → логотип. Дизайнеры говорят, что на элементе сделан акцент — он выделен цветом (например, красная точка среди черных), размером (самый крупный из всех) или как-то еще.

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

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

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

Клиент объяснил, что проблема была еще и в некачественном трафике. Скорее всего, именно поэтому удвоение конверсии было временным
Клиент объяснил, что проблема была еще и в некачественном трафике. Скорее всего, именно поэтому удвоение конверсии было временным

Этот случай в очередной раз доказывает, что в сайтах продает не дизайн, а наполнение.

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

Выход прост: отделяйте фотографии и картинки от текста.

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

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

Как вы могли догадаться, эти правила следует применять не только к первому экрану, но и ко всей странице.

Что еще нужно знать о первом экране

Отвечаю на вопросы, которые мне задавали за время преподавательской практики и которые могут возникнуть у вас.

Можно ли вместо иллюстрации разместить видео?
В некоторых случаях — да, можно. Это подходит для ситуаций, где очень важно показать эмоции и/или атмосферу. Например, организация детских праздников или встречи экспертов. Кстати, видео — это тоже иллюстрация, ведь оно что-то иллюстрирует.

Только, ради бога, не ставьте видео за текст, чтобы они не мешали друг другу.

А что если первый блок короче/длиннее экрана устройства?
Блок может быть длиннее или короче, если это решает какую-то задачу. В длинном блоке проблемы нет: как вы помните, проскроллить-то не проблема. Также он может быть короче, если по какой-то причине важно, чтобы пользователь видел и второй экран тоже. Например, вы делаете страницу о продукции завода. Можно сделать короткий первый блок с названием продукции и кнопкой «Получить КП», а на втором — разместить фотографии самой продукции.

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

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

Можно ли размещать открытую форму?
Можно, если там максимум три поля для ввода. Если полей больше, прячьте в кнопку.

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

Делюсь опытом, как делаю лучшие информационные продукты (прототипы, сайты, статьи, тексты, видео), как работать с клиентом и зарабатывать фрилансом, публикую вакансии о работе с текстом у себя в Телеграм-канале. Подписывайтесь → https://t.me/krometexta

Если вы хотите понять, как усилить первый экран вашей посадочной, напишите адрес страницы, я посмотрю и прокомментирую, что можно сделать лучше. За подробными рекомендациями по поводу страницы в целом (текст, логика, иллюстрации, подача и т.п.) приходите на разбор.

5656
90 комментариев

Извините, но это всё - теория. 
Реально работают только АБ тесты, только на новых клиентах и только со статистически значимыми данными.

5
Ответить

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

Тесты же нужны для докрутки офферов, ценностных предложений и других формулировок. Ну и иллюстраций и других гипотех. В конце статьи об этом сказано.

10
Ответить

Отличная статья, спасибо

6
Ответить

Отличный гайдлайн с примерами, спасибо!

2
Ответить

Здравствуйте! Что можно сделать лучше?

https://orgbez.ru

Ответить

Добрый день!
Шапка чересчур громоздкая. Я бы сделал переключатель контактов в зависимости от города. А сам город добавил в заголовок, чтобы человек мгновенно понял, его ли это регион. 

Фотография на фоне бессмысленная и к тому же сильно мешает считыванию остального контента. Просто уберите её оттуда. 

По тексту вроде неплохо, но надо лучше понимать ваш продукт и потребности клиента, чтобы сказать что-то более конкретное. 

И еще много вопросов к названию компании. Скорее всего, оно потеряется в уме клиента на фоне более запоминающихся. Если вдруг надумаете переименоваться, смогу помочь. 

4
Ответить

Отлично! Когда ты продаёшь 1 товар - все ясно - ставишь крупно этот товар. Ну если это не что-то специфично некрасивое. С услугами сложнее. Передать эмоцию нужно. Если не сложно - посмотрите, плиз! 

https://xn--78-6kcip3a1ajkhig1l.xn--p1ai/

Ответить