Оффер на первом экране сайта: как за 5 секунд объяснить, что вы продаёте

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

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

Что такое оффер и чем он отличается от слогана

Оффер — это ответ на три вопроса, которые человек задаёт себе, попав на сайт:

1. Что здесь предлагают?
2. Это для меня?
3. Почему стоит выбрать именно их?

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

Сравните:

Второй столбец можно не читать внимательно — смысл ловится с первого взгляда. Именно это и нужно.

Из чего состоит первый экран

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

Заголовок

Главный элемент. Что вы делаете, понятными словами. Хорошая формула: услуга + для кого или где + главное отличие. Не обязательно втискивать всё — иногда достаточно услуги и города, а отличие уходит в подзаголовок.

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

Подзаголовок

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

Ключевые преимущества

Три пункта, не больше. Конкретные, проверяемые, важные для клиента. «Работаем с 2015 года» — конкретно. «Опытные специалисты» — нет. «Договор и гарантия» — полезно. «Высокое качество» — пустые слова.

Кнопка действия

Одно основное действие. Текст кнопки описывает, что произойдёт: «Рассчитать стоимость», «Записаться на замер», «Получить консультацию». Кнопка «Отправить» или «Подробнее» не говорит ничего.

Контакты

Телефон в шапке, кликабельный на мобильном. Кнопка мессенджера. Для локального бизнеса — город или район.

Изображение

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

Типичные ошибки на первом экране

Абстрактный заголовок

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

Слайдер с пятью сообщениями

Карусель, где каждые несколько секунд меняется картинка и текст. Человек видит случайный слайд, не успевает прочитать, отвлекается на движение. Если сказать нужно пять вещей — значит, нет одной главной. Это проблема позиционирования, а не дизайна.

Перегруз

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

Красиво, но непонятно

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

Разрыв с рекламой

Объявление обещает «Ремонт стиральных машин», а первый экран — про весь сервисный центр и все виды техники. Человек не видит подтверждения и уходит. Если на сайт ведёт реклама по разным услугам, первый экран для каждой должен быть своим.

Первый экран на мобильном

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

Как я пишу оффер: процесс

Писать оффер с нуля сложно, если смотреть на пустую страницу. Поэтому у меня есть порядок работы.

1. Собираю факты о бизнесе. Что делаете, где, для кого, сколько лет, какие гарантии, какие сроки, что входит в услугу. Без прилагательных, только факты.
2. Смотрю запросы. Как клиенты называют вашу услугу в поиске. Часто это не совпадает с тем, как её называете вы.
3. Изучаю конкурентов. Не чтобы скопировать, а чтобы найти, чем вы реально отличаетесь. Если у всех «гарантия качества», а у вас выезд в день обращения — это и есть отличие.
4. Слушаю вопросы клиентов. Что спрашивают по телефону первым делом? Цена, сроки, гарантия, район? Ответ на самый частый вопрос часто становится подзаголовком.
5. Пишу пять-десять вариантов заголовка. Выбираю самый понятный, а не самый красивый.
6. Проверяю тестом пяти секунд. Показываю экран человеку, который не знает компанию, и прошу сказать, что здесь продают.

Примеры структуры для разных ниш

Срочные услуги: ремонт, эвакуатор, вскрытие замков

Главное — скорость и доступность. Заголовок про услугу и время приезда, телефон крупно, кнопка «Позвонить». Минимум текста: человек в стрессе, ему нужно быстро понять, что вы приедете.

Обдуманные покупки: ремонт квартир, окна, мебель на заказ

Здесь человек сравнивает и выбирает. Заголовок про результат и условия, подзаголовок снимает главный страх (сроки, смета, гарантия), кнопка ведёт к расчёту или замеру. Фото реальных объектов обязательно.

B2B-услуги: бухгалтерия, юристы, IT

Важна конкретика: для какого типа бизнеса, какой объём работ, как устроено взаимодействие. Кнопка — консультация или аудит. Доверие строится на понятности и профессиональном языке без канцелярита.

Частные специалисты: психолог, репетитор, мастер

Человек выбирает конкретного специалиста. Фото и имя на первом экране, специализация, формат работы. Кнопка записи.

Как проверить оффер на реальных посетителях

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

• Отказы и время на странице. Если после смены оффера люди стали реже уходить в первые секунды — он работает лучше.
• Глубина прокрутки. Доля тех, кто дошёл до второго и третьего экрана. Хороший первый экран не только объясняет, но и вызывает желание узнать подробности.
• Клики по кнопке первого экрана. Отдельная цель в Метрике покажет, насколько призыв понятен и интересен.
• Карта кликов. Иногда люди упорно кликают по элементу, который не является ссылкой, — например, по иконке преимущества. Это подсказка: им хочется узнать больше именно об этом.
• Вебвизор. Десяток записей визитов с телефона часто объясняет больше любых графиков.

Если трафика достаточно, можно запустить A/B-тест двух заголовков. Но для небольших сайтов с сотней посетителей в день честный тест растягивается на месяцы. В таком случае проще сравнивать периоды «до» и «после» при сопоставимом трафике и не менять одновременно рекламу.

Второй экран: что идёт сразу после оффера

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

• фото или примеры реальных работ;
• короткое описание, как устроена работа, в три-четыре шага;
• цены или логика расчёта стоимости;
• блок «кому подходит» — с узнаваемыми ситуациями клиентов.

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

Первый экран и конструктор блоков

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

В 100300 CMS первый экран — это блок конструктора: заголовок, подзаголовок, преимущества, кнопка и фото редактируются прямо в админке. Можно сделать отдельную посадочную под рекламную кампанию с другим оффером за несколько минут, а заявки с неё попадут в ту же встроенную CRM.

Чек-лист первого экрана

• По заголовку понятно, что вы предлагаете, без чтения остального текста.
• Видно, для кого или где вы работаете.
• Есть хотя бы одно конкретное отличие от конкурентов.
• Одна главная кнопка с понятным текстом.
• Телефон и мессенджер доступны в одно касание.
• Фото подтверждает заголовок, а не украшает.
• На телефоне заголовок и кнопка видны без прокрутки.
• Нет слайдеров, всплывающих окон и мигающих элементов.
• Текст первого экрана совпадает с рекламными объявлениями, которые ведут на страницу.

Если хотя бы три пункта не выполняются — первый экран стоит переделать, даже если в целом сайт устраивает.

Что дальше

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

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