Первый экран
Также: hero, первый блок, обложка сайта
Часть страницы, которую человек видит без прокрутки. За несколько секунд она должна ответить, что вы предлагаете, кому и что делать дальше.
Что обязательно помещается
- Что вы делаете и для кого — конкретно, без «команды профессионалов».
- Город, если услуга привязана к месту.
- Одно действие: кнопка заявки или телефон.
Высота первого экрана у всех разная: на ноутбуке это около 700 пикселей, на телефоне — 500 с небольшим. Проверять нужно именно на телефоне: там половину экрана съедают шапка и адресная строка браузера.
| Что стоит на первом экране | Чем заменить |
|---|---|
| «Добро пожаловать на наш сайт» | что вы делаете и для кого |
| Крупное фото офиса | фотография работы или результата |
| Слоган без конкретики | предложение с городом и сроком |
| Три равнозначные кнопки | одно основное действие |
| Слайдер с пятью баннерами | один экран с главным предложением |
Сколько времени у вас есть
Решение остаться или уйти человек принимает за несколько секунд, и принимает он его не читая, а окидывая экран взглядом. За это время он успевает считать три вещи: крупный заголовок, характер картинки и наличие чего-то похожего на действие. Если из этих трёх сигналов не складывается ответ на вопрос «мне сюда или нет», он возвращается в выдачу — просто потому, что там ещё девять результатов.
Отсюда требование к заголовку: он должен работать как вывеска, а не как приветствие. Вывеска называет услугу и место — «Ремонт квартир под ключ в Ярославле». Приветствие вроде «Добро пожаловать» или «Создаём пространство для жизни» не сообщает ничего и тратит те самые секунды, которых у вас нет.
Как проверить свой первый экран
- Откройте сайт на телефоне и не прокручивайте.
- Прочитайте вслух то, что видно: понятно ли, чем вы занимаетесь и где работаете.
- Найдите глазами действие: кнопка или телефон должны быть видны без прокрутки.
- Покажите экран человеку не из вашей отрасли и спросите, что здесь предлагают.
Если на четвёртом шаге человек затрудняется с ответом, дело не в дизайне, а в формулировке. Заголовок должен называть услугу словами клиента — теми же, которыми он ищет её в поиске.
Частые вопросы
Какой высоты должен быть первый экран?
Он не задаётся числом: это всё, что видно без прокрутки. На телефоне это примерно 500–600 пикселей, и часть их съедают шапка сайта и адресная строка браузера.
Нужна ли кнопка прямо в первом экране?
Да, хотя бы одна. Часть посетителей готова обратиться сразу, и заставлять их искать форму прокруткой — терять обращения.
Можно ли ставить слайдер?
Технически можно, но пользы мало: до второго слайда долистывают единицы, а вес страницы растёт. Лучше один экран с главным предложением.