Первый экран сайта: 5 элементов, после которых клиент оставляет заявку

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

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

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

Почему первый экран решает больше, чем весь остальной сайт

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

Типичная ситуация: владелец салона тратит 40 000 ₽ в месяц на рекламу, получает 800 переходов на сайт, а заявок — 12. Конверсия 1,5%. При среднем чеке 3 500 ₽ это 42 000 ₽ выручки при расходе 40 000 ₽ на рекламу — сайт еле окупает рекламу. После переделки первого экрана (заголовок, цена, кнопка записи) конверсия выросла до 4,2% — 34 заявки и 119 000 ₽ выручки. Изменили не весь сайт, а одну зону.

Первый экран выполняет три задачи:

1. Подтверждает попадание. Человек искал «имплантация зубов Краснодар» — и сразу видит, что попал к имплантологу в Краснодаре, а не в общую стоматологию «все услуги для всей семьи».
2. Снимает главное возражение. «Дорого», «долго», «не знаю, кому доверять» — на первом экране должна быть хотя бы одна зацепка: цена «от», срок, отзыв, гарантия.
3. Даёт одно действие. Не три кнопки «Услуги», «О нас», «Контакты», а одна: «Записаться», «Рассчитать стоимость», «Позвонить».

Всё остальное на сайте — портфолио, блог, FAQ — работает для тех, кто уже решил остаться. Первый экран работает для всех остальных.

Элемент 1: заголовок, который отвечает на запрос клиента

Заголовок на первом экране — не слоган и не «мы лучшие с 2010 года». Это ответ на то, что человек вбил в Google или увидел в рекламе.

Плохо:

• «Добро пожаловать в клинику «Белая улыбка»»
• «Качество, которому доверяют»
• «Профессиональный подход к каждому клиенту»

Хорошо:

• «Имплантация зубов в Краснодаре — от 35 000 ₽, рассрочка 0%»
• «Мужская стрижка за 45 минут — от 1 200 ₽, запись онлайн»
• «Ремонт двигателя любой марки — диагностика бесплатно, гарантия 12 мес.»

Формула простая: услуга + география (если локальный бизнес) + цена или выгода. Клиент за полсекунды понимает: «это про меня».

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

Если хотите внедрить подобное решение — напишите в Telegram, разберём вашу задачу.

Элемент 2: одна главная кнопка — не меню из пяти ссылок

На первом экране должна быть одна заметная кнопка действия. Не «Подробнее», не «Узнать больше» — конкретное действие, которое приводит к заявке.

Рабочие формулировки по нишам:

• Клиника: «Записаться на приём» / «Бесплатная консультация»
• Салон: «Выбрать время онлайн»
• Автосервис: «Записаться на диагностику»
• B2B-услуги: «Получить расчёт за 15 минут»

Кнопка должна контрастировать с фоном — если сайт светлый, кнопка тёмная или яркая. Размер на телефоне — минимум 44×44 пикселя (палец должен попасть с первого раза). Расположение — сразу под заголовком или под подзаголовком, не в шапке сайта среди логотипа и телефона.

Частая ошибка: три равнозначные кнопки «Записаться», «WhatsApp», «Позвонить». Клиент не выбирает ни одну и уходит. Решение: одна главная кнопка + телефон и мессенджер мелко рядом или в шапке. Основной путь — запись через форму или онлайн-сервис, альтернатива — звонок.

По нашим наблюдениям на проектах малого бизнеса, замена кнопки «Подробнее» на «Записаться бесплатно» на первом экране даёт прирост заявок на 15–30% без изменения рекламного бюджета.

Элемент 3: цена или якорь стоимости — «от» лучше, чем тишина

«Позвоните, узнаете цену» на первом экране в 2026 году — путь к потере клиента. Человек сравнивает три–пять вариантов параллельно. Если у конкурента написано «от 2 500 ₽», а у вас пусто — вы выпадаете из shortlist ещё до звонка.

Не обязательно публиковать полный прайс. Достаточно якоря:

• «Имплантация — от 35 000 ₽»
• «Стрижка мужская — от 1 200 ₽»
• «Диагностика двигателя — бесплатно при ремонте»
• «Консультация юриста — 0 ₽, далее от 15 000 ₽ за дело»

Цифра «от» снимает страх «это точно дорого» и отсеивает нецелевых клиентов, которые всё равно не заплатят ваш чек. Это экономит время администратора.

Когда цену лучше не ставить на первый экран: индивидуальные проекты с разбросом в 10 раз (дизайн интерьера, сложное лечение). Тогда вместо цены — «Бесплатный расчёт за 24 часа» или «Калькулятор стоимости».

Элемент 4: один сигнал доверия — не стена из значков

Отзывы, сертификаты, «15 лет на рынке», «5000 довольных клиентов» — всё это важно, но на первом экране нужен один конкретный сигнал, который закрывает главное сомнение в вашей нише.

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

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

Элемент 5: подзаголовок, который объясняет «почему вы», а не повторяет заголовок

Подзаголовок — 1–2 строки под основным заголовком. Он не дублирует его, а добавляет аргумент:

• Заголовок: «Имплантация зубов в Краснодаре — от 35 000 ₽»

• Подзаголовок: «КТ-диагностика в клинике, рассрочка 0%, импланты Nobel и Osstem»

• Заголовок: «Мужская стрижка за 45 минут — от 1 200 ₽»

• Подзаголовок: «Запись онлайн без звонка, работаем до 22:00, м. Павелецкая»

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

Ошибка: подзаголовок «Мы заботимся о каждом клиенте и используем только качественные материалы». Это ничего не значит. Замените на «Материалы L’Oréal Professionnel, стерилизация по стандарту Минздрава» — и клиент понимает разницу.

Как выглядит рабочий первый экран: три примера

Стоматология (город 400 000+)

[Фото: врач с пациентом, не стоковая улыбка]

Имплантация зуба «под ключ» в [Город] — от 35 000 ₽
КТ, имплант Nobel, коронка, гарантия 5 лет. Рассрочка 0%.

★ 4,9 — 280 отзывов на ПроДокторов

[Записаться на бесплатную консультацию]

Телефон: +7 (XXX) XXX-XX-XX

Ожидаемая конверсия первого экрана в заявку при платном трафике: 3–6%.

Салон красоты

[Фото: реальная работа мастера, не модель из фотобанка]

Маникюр и педикюр — от 1 800 ₽, запись за 1 минуту
Мастера с опытом 5+ лет, стерильность, м. [Станция метро]

★ 4,8 на Яндекс.Картах — 340 отзывов

[Выбрать время онлайн]

При 600 переходах в месяц с рекламы такой экран даёт 24–36 записей вместо 9–12 при «красивом, но пустом» первом экране.

Автосервис

[Фото: бокс, механик за работой]

Ремонт двигателя и ходовой — диагностика бесплатно
Все марки, смета до начала работ, гарантия 12 месяцев

127 отзывов, 4,7 ★ — 2GIS

[Записаться на диагностику]

Чек-лист: проверьте свой первый экран за 5 минут

Откройте сайт на телефоне (не на компьютере — 70% клиентов заходят с телефона) и ответьте «да» или «нет»:

1. За 3 секунды понятно, какую услугу вы продаёте?
2. Есть цена «от» или понятная бесплатная точка входа?
3. Одна заметная кнопка с конкретным действием?
4. Есть один факт доверия с цифрой (рейтинг, гарантия, опыт)?
5. Подзаголовок объясняет отличие от конкурентов?
6. Телефон виден без прокрутки или в шапке?
7. Страница загружается менее чем за 3 секунды на 4G?

Если меньше пяти «да» — первый экран теряет заявки. Исправление этих пунктов обычно стоит 20 000–60 000 ₽ (переработка дизайна и текстов), а не 200 000 ₽ за новый сайт. Часто достаточно заменить заголовок, добавить кнопку и цену — и конверсия растёт на 20–40%.

Типичные ошибки, которые мы видим на аудитах

Слайдер из пять фото на первом экране. Клиент не успевает прочитать — картинка сменилась. Один статичный кадр с текстом конвертирует лучше.

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

Мелкий текст на фото. Белый текст на светлом фоне, размер 12 px — на телефоне не прочитать. Минимум 16–18 px для подзаголовка, 24–32 px для заголовка.

Логотип занимает полэкрана. Клиенту не важен ваш логотип — ему важна его проблема. Логотип — в шапке, 40–60 px высотой.

Есть вопросы? Telegram → или vic.kell@ya.ru

Частые вопросы

Можно ли обойтись без первого экрана и сразу показать услуги?

Нет. Даже если главная страница — список услуг, верхняя часть всё равно работает как первый экран. Без заголовка, цены и кнопки список услуг воспринимается как каталог, а не как точка входа. Добавьте блок «главное предложение» над списком.

Сколько текста допустимо на первом экране?

Заголовок — 5–12 слов. Подзаголовок — 10–20 слов. Один сигнал доверия — одна строка. Больше — не читают. Все детали — ниже, после прокрутки.

Нужно ли разное первое экран для рекламы и для SEO?

Если реклама ведёт на отдельный лендинг — да, заголовок должен совпадать с объявлением («Имплантация от 35 000» в рекламе = тот же текст на странице). Главная страница сайта для SEO может быть шире, но первый экран всё равно должен содержать ключевую услугу и город.

Первый экран для B2B: что меняется?

B2B-клиент ищет не «красиво», а «решают ли мою задачу». Заголовок: результат + срок («Аудит 1С за 5 дней — от 45 000 ₽»). Доверие: логотипы клиентов, кейс с цифрой («Сократили ошибки учёта на 40%»). Кнопка: «Получить расчёт» или «Скачать коммерческое предложение».

Сколько стоит переделать только первый экран?

Если сайт технически исправен: 20 000–60 000 ₽ за новые тексты, дизайн блока и вёрстку. Если сайт на конструкторе — часто можно сделать самостоятельно за 1–2 дня, заменив тексты и кнопку. Если нужна разработка с нуля — от 120 000 ₽ за полноценный продающий сайт.

Как понять, что первый экран работает?

Подключите Яндекс.Метрику или Google Analytics. Смотрите: процент отказов (цель — ниже 50% для рекламного трафика), глубину просмотра, количество кликов по кнопке на первом экране. Если отказов больше 60% — первый экран не попадает в запрос клиента.

Итог: первый экран — это ваша цифровая витрина

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

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