Что должно быть на первом экране сайта услуг

Что человек решает за первые секунды

Посетитель пришёл с конкретным вопросом в голове: «ремонтируют ли они АКПП», «сколько стоит домик на выходные», «делают ли сайты под ключ».

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

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

Четыре обязательных элемента

• Что вы делаете — существительными и глаголами, а не эпитетами. «Кузовной ремонт и покраска в Мытищах» работает; «Качество, проверенное временем» — нет, потому что не отвечает ни на один вопрос посетителя.
• Где вы работаете. Для локальных услуг география — важная часть решения: человек из другого города уйдёт сразу (и хорошо — это не ваш клиент), человек из вашего — останется.
• Ориентир по цене. «От 10 000 ₽» отсеивает нецелевых и удерживает целевых: страх «наверное, дорого» тоже уводит людей. Бояться показать цену — значит отдать этот страх на волю фантазии посетителя.
• Куда нажать. Одна заметная кнопка с понятным действием: «Записаться», «Рассчитать стоимость», «Выбрать даты». Не три кнопки, не «Подробнее» — одно главное действие.

Частые ошибки первых экранов

На первом экране типовые ошибки повторяются от ниши к нише почти без вариаций. Вот этот набор:

• Слоган вместо услуги. «Мы создаём настроение» — это про кого угодно: кафе, аниматоров, натяжные потолки. Посетитель не обязан разгадывать.
• Стоковое фото. Рукопожатие, улыбчивый оператор в гарнитуре, небоскрёбы. Мозг научился не видеть эти картинки — а вместе с ними и ваш экран.
• Слайдер из пяти баннеров. Пока человек решает, он видит баннер №1; остальные четыре крутятся для самих владельцев. Слайдер — способ не выбрать главное.
• Кнопка-невидимка: серая на сером, ниже сгиба экрана или с текстом «Отправить» без намёка, что именно отправляем.
• Чат-виджет, наползающий на контент с телефона, — особенно вместе с баннером про cookies и всплывашкой «Подпишитесь». Человек ещё ничего не прочитал, а уже закрывает три окна.

Разбор на условном примере: три версии одного экрана

Возьмём выдуманный кузовной цех и соберём его первый экран трижды.

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

Ни услуги, ни города, ни цен; «узнать больше» ведёт на такую же лирику. Посетитель с запросом «покраска бампера цена» не находит ни одного своего слова.

Версия вторая, уже рабочая: «Кузовной ремонт и покраска. Покраска бампера — от N, расчёт по фото за 20 минут. Кнопка: Отправить фото».

Появились услуга, ориентир по цене и действие с понятной наградой. Такой экран уже конвертирует — хоть и выглядит проще «красивой» первой версии.

Версия третья добавляет снятие страхов: рядом с кнопкой — «работаем по договору, фотоотчёт каждого этапа», ниже — фото вашего цеха (не стокового!) и строка «Мытищи, от МКАД 15 минут».

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

Первый экран на телефоне — отдельная задача

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

• услуга и город — в заголовок;
• кнопка — в пределах большого пальца;
• картинка — если влезет без ущерба.

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

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

Почему «надёжный партнёр» ничего не продаёт

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

Заменяйте абстракции проверяемыми фактами:

Факт можно оспорить или проверить — поэтому ему верят. Эпитет — нельзя, поэтому его пропускают мимо глаз.

Откуда берутся факты, если кажется, что «у нас всё как у всех»? Из ограничений и процессов, которые вы считаете рутиной:

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

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

Формулы заголовков для разных ниш

Рабочий заголовок первого экрана обычно собирается из трёх кубиков: услуга + география + главное числовое обещание. Примеры конструкции:

Что на первом экране НЕ обязательно

Перегруз — зеркальная ошибка пустоты. На первый экран не обязаны попадать:

• история компании;
• все шесть ваших услуг разом;
• сертификаты;
• карта проезда;
• слайдер отзывов.

Всему этому место ниже — первый экран отвечает на «туда ли я попал», остальное человек ищет сам, когда решил остаться.

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

Отдельно про видео и анимации на фоне: они красивы в портфолио дизайнера и как правило, вредны в бою — тянут скорость, отвлекают от текста и съедают батарею телефона посетителя.

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

Как проверить свой первый экран

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

Как по этой логике собирается сайт целиком — на странице про создание сайтов.

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