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