Первый экран сайта: что человек должен понять за пять секунд

Почему именно пять секунд и именно один экран

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

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

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

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

Четыре элемента, и каждый занимает своё место.

Заголовок. Одна строка, максимум две. Отвечает на «что» и «для кого».

Уточнение под заголовком. Одно-два предложения: где вы работаете, за какой срок, от какой суммы. Здесь уместна конкретика, ради которой человек обычно листает до середины страницы.

Одно действие. Одна кнопка, которая явно называет, что произойдёт: «Рассчитать стоимость», «Записаться на приём». Вторая ссылка допустима, но она должна быть визуально слабее первой — иначе выбор между двумя равными кнопками откладывает решение вместо того, чтобы его упростить.

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

Всё. Пятый элемент вытесняет один из этих четырёх, и вытесняет обычно кнопку.

Как написать заголовок, который работает

Рабочая формула короткая: что вы делаете плюс для кого или где. «Шиномонтаж в Саратове с выездом», «Глэмпинг в сосновом бору в часе от города», «Бухгалтерия для ИП на упрощёнке».

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

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

Почему мы задаём высоту в svh, а не в vh

Это техническая деталь, но именно она чаще всего ломает первый экран на телефоне.

Единица vh — это сотая доля высоты окна браузера. Беда в том, что на айфоне высота окна не постоянна: при прокрутке вверх адресная строка и нижняя панель сворачиваются, при прокрутке вниз возвращаются. Блок, которому задано 100vh, рассчитывается по большему из двух состояний. В момент, когда панели показаны, нижняя часть первого экрана уходит под них — и туда уезжает ровно то, что там обычно стоит, то есть кнопка. Человек видит заголовок, видит фотографию, не видит действия и начинает прокручивать. А при прокрутке экран ещё и подпрыгивает, потому что высота блока меняется на ходу.

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

Что случилось с первым экраном «Бора»

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

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

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

Как проверять контраст, если под текстом фотография

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

Мы делаем иначе: снимаем скриншот готовой страницы и считаем контраст по реальным точкам изображения — берём цвет пикселей прямо под текстом и сравниваем с цветом самих букв. Нижняя граница для основного текста — отношение 4,5:1, для крупного заголовка — 3:1. Считать нужно по самому светлому участку фотографии, попавшему под строку, а не по среднему: одна светлая ветка за буквой портит строку целиком.

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

Почему кнопка не бывает меньше 44 точек

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

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

Та же мера относится к ссылке в шапке и к иконке мессенджера. Если иконка нарисована на 24 точки, невидимая зона нажатия вокруг неё всё равно должна быть 44.

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

• Слайдера с автоматической прокруткой. Человек не успевает дочитать первый кадр, как приезжает второй. Если из трёх слайдов главный один, остальные два не нужны; если все три главные, значит, не выбран главный.
• Видео, которое запускается со звуком. Его закрывают вместе со вкладкой.
• Всплывающего окна сразу при входе. Оно перекрывает те самые три ответа и требует действия до того, как человек понял, где он.
• Тяжёлой фотографии. Снимок на 4 мегабайта грузится на мобильном интернете дольше, чем человек готов ждать, и до первого экрана дело просто не доходит. Фон первого экрана — самое важное изображение на сайте, его вес нужно считать отдельно.
• Горизонтальной прокрутки. Обычно её даёт длинное слово или широкая картинка в заголовке. На телефоне это выглядит как поломка.

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

Возьмите телефон, включите тёмную тему и откройте сайт.

1. Закройте нижнюю часть экрана ладонью и прочитайте только заголовок: понятно ли, чем вы занимаетесь.
2. Найдите глазами действие. Оно должно быть видно без прокрутки.
3. Прокрутите чуть вверх и вниз: не прыгает ли экран, не уезжает ли кнопка под панель браузера.
4. Прочитайте заголовок в тёмной теме и в светлой. Обе должны читаться одинаково.
5. Нажмите кнопку одним большим пальцем пять раз подряд: попадаете ли каждый раз.
6. Проверьте, нет ли сдвига страницы вбок.
7. Откройте сайт с мобильного интернета, а не из домашнего вайфая, и засеките, за сколько появится фотография.

Каждый невыполненный пункт стоит заявок ежедневно, а чинится за часы. Если сайт делается с нуля, эти проверки должны быть в работе подрядчика по умолчанию: у нас первый экран собирается по этим правилам даже в самом простом тарифе «Старт» за 24 900 ₽, потому что дешевле сделать сразу, чем переделывать. Что ещё влияет на стоимость работы, разобрано отдельно — в статье «Из чего складывается цена сайта», а полный список того, без чего сайт компании не работает, собран в обязательном минимуме.

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