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