Первый экран лендинга: что на нём должно быть, чтобы человек не ушёл
Человек попадает на ваш лендинг из рекламы или поиска и за первые пару секунд решает: остаться или закрыть вкладку. Всё это решение он принимает по одному экрану — тому, что видно без прокрутки. Если на нём не считывается, куда он попал и зачем ему здесь быть, он уходит, и вы платите за клик, который ничем не закончился. Разбираем по-честному, из чего собирается сильный первый экран и какие ошибки на нём стоят вам заявок.
Почему первый экран решает всё
Первый экран — это то, что человек видит сразу, ещё не прокрутив страницу ни на пиксель. На языке веба его иногда называют «зоной над линией сгиба»: всё, что попадает в окно браузера при загрузке. И именно здесь теряется большая часть трафика.
Механика простая и немного обидная: человек не читает лендинг, он его сканирует. Первые секунды он не вникает в ваши преимущества и не изучает блоки — он на автомате отвечает себе на три вопроса. Куда я попал? Это вообще про то, что мне нужно? Мне тут что-то предлагают понятное или сейчас будут долго рассказывать про себя? Если за эти секунды ответа нет, вкладка закрывается — и никакой красивый блок на третьем экране уже не сработает, потому что до него не долистают.
Отсюда вывод, который многих удивляет: первый экран важнее всего остального лендинга вместе взятого. Не потому что он «красивее», а потому что это фильтр. Хороший первый экран удерживает нужных людей и мягко отсеивает случайных. Плохой — сливает и тех, и других. Можно вложить силы в отзывы, кейсы, гарантии и тарифы ниже по странице, но если верх не держит внимание, вся эта работа просто не видна.
Особенно это критично для трафика с рекламы. Человек кликнул по объявлению с конкретным обещанием и ждёт, что на странице увидит продолжение этой мысли. Если первый экран говорит о другом или не говорит ни о чём — возникает разрыв, и он уходит. Про то, что сайт есть, а заявок нет, мы писали отдельно — так вот, в половине случаев причина живёт именно на первом экране.
Из чего состоит сильный первый экран
Хороший первый экран — это не про количество элементов, а про то, чтобы каждый из них отвечал на один из вопросов человека. Разберём по кирпичикам. Идти лучше сверху вниз — верхние важнее.
Главный элемент. За одну фразу человек должен понять, что вы предлагаете и в чём для него польза. Не название компании и не абстрактный лозунг, а конкретное обещание результата: что он получит и, желательно, за счёт чего. Это первое, на что падает взгляд, и по нему решается судьба всего экрана.
Одна-две строки под заголовком, которые снимают главное сомнение или уточняют, кому и как. Заголовок говорит «что», подзаголовок — «для кого» и «за счёт чего это правда». Он не должен повторять заголовок другими словами, он должен добавлять ясности.
Одна заметная кнопка с понятным следующим шагом. Не «отправить», а то, что человек реально получит: рассчитать стоимость, оставить заявку, получить пример. Она должна быть видна на первом же экране, а не прятаться где-то ниже.
Короткий якорь, что вам можно верить: годы на рынке, количество проектов, знакомый клиент, гарантия. Не простыня — одна строка или пара логотипов. Задача — снять первую настороженность, а не рассказать всю биографию.
Картинка или фон, который поддерживает смысл, а не спорит с ним. Фото реального продукта, работы, результата — лучше, чем стоковый человек в костюме у окна. Визуал не должен перекрывать текст и мешать читать оффер.
Обратите внимание: тут нет ни меню на пятнадцать пунктов, ни трёх слайдеров, ни блока «о компании» с историей основания. Всё это либо уходит ниже, либо не нужно вообще. Первый экран — это не витрина всего, а одно ясное сообщение с одним действием. Чем меньше на нём лишнего, тем сильнее считывается главное.
Оффер и заголовок: где чаще всего ломается
Если что-то одно на первом экране и стоит вылизывать до блеска — это заголовок. Именно на нём чаще всего всё и рушится, причём одинаково у всех.
Ошибка первая — писать о себе, а не о клиенте. «Мы — молодая динамичная команда с индивидуальным подходом» не говорит человеку ничего. Ему всё равно, какая вы команда, пока он не понял, что получит. Сравните: «Делаем сайты для бизнеса» — и «Сайт с приёмом заявок под вашу нишу за 2 недели». Второй вариант человек примеряет на себя, первый — пролистывает.
Ошибка вторая — абстракция вместо конкретики. «Качественные решения для вашего бизнеса», «выводим на новый уровень», «работаем на результат» — это слова, которые подойдут кому угодно и потому не значат ничего. Хороший оффер можно проверить простым тестом: если эту же фразу может поставить себе на сайт ваш конкурент из другой сферы — она пустая. Конкретика — услуга, срок, для кого, за счёт чего — работает всегда лучше красивых абстракций.
Ошибка третья — заголовок-загадка. Иногда в погоне за креативом первый экран превращают в ребус: красивая метафора, интрига, игра слов — и ни слова о том, что тут вообще предлагают. Человек с рекламы не будет разгадывать, он уйдёт. Интрига работает там, где у вас уже есть внимание и доверие; на холодном трафике она убивает.
Рабочая рамка для заголовка звучит так: что вы делаете + для кого + какой результат или за счёт чего. Не обязательно впихивать всё три в одну строку — часть можно унести в подзаголовок. Но человек, прочитав первый экран целиком, должен без усилий ответить: да, это про меня, мне это нужно, дальше понятно куда нажимать. И ещё одно честное замечание: идеальный оффер редко рождается с первого раза. Нормально сформулировать несколько вариантов и проверять их на живом трафике — то, что кажется гениальным в голове, на людях иногда молчит, и наоборот.
Кнопка и первое действие
Второй по важности элемент после оффера — кнопка. Точнее, то действие, которое вы просите совершить. И здесь тоже есть пара вещей, которые сильно влияют на конверсию.
Одна кнопка, одно действие. Когда на первом экране три равнозначные кнопки — «купить», «узнать больше», «связаться» — человек тормозит, потому что выбор без подсказки утомляет. Уберите развилку: на первом экране должно быть одно очевидное следующее действие, самое главное. Остальные варианты — ниже или в меньшем весе.
Текст на кнопке — про результат, а не про механику. «Отправить» и «Заказать» описывают, что произойдёт с формой, а не что получит человек. «Рассчитать стоимость», «Получить пример работ», «Оставить заявку» — понятнее, потому что говорят на языке выгоды. Мелочь, но на ней теряют проценты конверсии.
Барьер должен быть по размеру желания. На холодном трафике просить сразу «купить» — рано: человек ещё не прогрет. Часто мягкий первый шаг работает лучше жёсткого: рассчитать, подобрать, получить пример, задать вопрос. Иногда вместо лобовой формы лучше заходит квиз вместо формы — человек отвечает на пару вопросов и незаметно втягивается, а вы получаете и заявку, и вводные. Смысл один: первое действие должно быть посильным здесь и сейчас.
И держите в голове общую картину. Первый экран — это только вход в воронку, а не вся продажа. Его задача не закрыть сделку в одну кнопку, а не дать человеку уйти и провести его на следующий шаг. Если помнить про это, соблазн навалить на первый экран сразу всё — цены, гарантии, форму на десять полей — проходит сам собой.
Частые ошибки первого экрана
Соберём в одном месте то, что чаще всего встречается на первых экранах и тихо сливает трафик. Пройдитесь по своему лендингу с этим списком.
Экран занят чем угодно, кроме оффера. Огромный логотип, слайдер с картинками, большое меню — а собственно предложения на первом экране нет, оно уехало вниз. Человек не понимает, куда попал, и уходит. Оффер должен быть виден сразу, без прокрутки.
Слишком много всего. Обратная крайность: в первый экран впихнули оффер, три преимущества, форму, отзыв и акцию. Внимание рассеивается, ни один элемент не выстреливает. Первый экран любит воздух — одно сообщение, одно действие, остальное ниже.
Стоковые картинки вместо смысла. Улыбающийся человек в наушниках из фотобанка не добавляет доверия, он его снижает — люди такое считывают как «шаблон». Лучше реальное фото, схема, результат или вообще чистый фон с сильным текстом, чем стоковая иллюстрация ни о чём.
Первый экран не совпадает с рекламой. В объявлении обещали одно, на странице — про другое. Человек кликнул за конкретикой, а попал в общие слова. Этот разрыв — одна из самых дорогих утечек: вы заплатили за клик и потеряли его на первой же секунде. Заголовок лендинга должен продолжать мысль объявления, а не начинать новую.
Медленная загрузка. Если первый экран собирается на глазах несколько секунд — тяжёлый фон, неоптимизированные картинки, — часть людей уходит ещё до того, как что-то прочитала. Скорость на мобильных особенно важна, потому что оттуда сегодня идёт большинство трафика.
Частые вопросы
Что обязательно должно быть на первом экране лендинга?
Минимум четыре вещи: заголовок-оффер (что вы предлагаете и в чём польза), короткий подзаголовок-уточнение, одна заметная кнопка с понятным действием и короткий якорь доверия. Всё остальное — меню, история компании, детали — можно и нужно уносить ниже, чтобы не размывать главное сообщение.
Нужна ли на первом экране форма заявки?
Не обязательно. Часто достаточно одной кнопки, которая ведёт к форме или открывает её. На холодном трафике большая форма на первом экране скорее пугает. Мягкий первый шаг — рассчитать, подобрать, получить пример или квиз из пары вопросов — обычно собирает больше заявок, чем сразу длинная форма.
Каким должен быть заголовок лендинга?
Конкретным и про клиента, а не про вас. Рабочая рамка: что вы делаете + для кого + какой результат или за счёт чего. Проверка простая: если ту же фразу может поставить себе конкурент из совсем другой сферы, заголовок пустой. «Индивидуальный подход и качество» — плохо, «Сайт с приёмом заявок под вашу нишу за 2 недели» — уже разговор.
Сколько кнопок делать на первом экране?
Одну главную. Когда рядом три равнозначные кнопки, человек тормозит на выборе и часто не жмёт ни одну. Оставьте одно очевидное следующее действие — самое важное для вашей воронки, — а второстепенные варианты уведите ниже или сделайте визуально слабее.
Почему с рекламы люди уходят с первого экрана?
Чаще всего из-за разрыва между объявлением и страницей: человек кликнул за конкретным обещанием, а на первом экране увидел общие слова или другое сообщение. Плюс частые причины — оффер спрятан ниже, экран перегружен или медленно грузится. Первый экран должен продолжать мысль рекламы, а не начинать разговор заново.
Короткий вывод
Первый экран — это фильтр, на котором решается судьба всего лендинга: человек за пару секунд понимает, остаться или уйти, и делает это по одному экрану без прокрутки. Сильный первый экран — это ясный заголовок-оффер про клиента, уточняющий подзаголовок, одна кнопка с понятным действием и короткий якорь доверия, а всё лишнее уходит ниже. Ломается он почти всегда одинаково: пишут о себе вместо клиента, прячут оффер, грузят экран всем подряд, ставят стоковые картинки и рвут связь с рекламой. Гарантий конверсии тут никто не даст — но привести первый экран в порядок почти всегда дешевле и быстрее, чем переделывать весь сайт, а отдача от этого заметнее всего.
Соберём первый экран, который держит
APST делает сайты и лендинги в Воронеже с 2005 года. Пришлите ссылку на свой лендинг — честно скажем, что не так с первым экраном, где спрятан оффер и почему уходит трафик, и предложим, как это починить. Без обещаний «конверсии 30%» — только по делу.
Обсудить проект