У Вас есть несколько секунд. За это время посетитель решает: остаться на сайте или закрыть вкладку. Всё решает главный экран сайта, то, что человек видит до прокрутки. Его ещё называют первым или основным экраном. Ниже разберём, что должно быть на первом экране у производственной компании, как подойти к дизайну главного экрана сайта, какие ошибки встречаются чаще всего и как проверить, что экран работает.
Что решает первый экран
Человек приходит на сайт из поиска или рекламы с конкретным вопросом. Не понял за пару секунд, туда ли попал и решите ли Вы его задачу, ушёл к конкуренту. Никакой красивый низ страницы это не спасёт: до него просто не долистают.
Цифры это подтверждают. По исследованию Линдгаард и соавторов в журнале Behaviour & Information Technology (2006), первое впечатление о сайте складывается примерно за 50 миллисекунд. По данным Nielsen Norman Group (2018), 57% времени просмотра страницы приходится на первый экран и 74% на первые два. Всё, что ниже, видит заметно меньше людей.
«Не заставляйте меня думать».
Что должно быть на первом экране
- Кто Вы и что предлагаете: «Производитель сотового поликарбоната», а не абстрактный слоган.
- Выгода для клиента: что он получит, например опт, отгрузку со склада, сроки.
- Доверие: «производитель», «с 2018 года», ключевой факт или цифра.
- Понятный следующий шаг: кнопка «получить расчёт» или «оставить заявку».
- Контакт на виду: телефон, мессенджер.
Заголовок здесь главный элемент. Его читают все, а до подробностей доходят единицы.
«В среднем заголовок читают в пять раз больше людей, чем основной текст».
| Элемент | Слабо | Сильно |
|---|---|---|
| Заголовок | «Инновационные решения для Вашего бизнеса» | «Производим сотовый поликарбонат 4–16 мм, отгрузка со склада в Москве за 1 день» |
| Подзаголовок | «Мы на рынке много лет» | «С 2018 года, 1 200 клиентов, собственная линия экструзии» |
| Кнопка | «Подробнее» | «Получить расчёт за час» |
| Картинка | Стоковое фото офиса | Реальная продукция или цех |
| Контакт | Спрятан в подвале | Телефон и мессенджер в шапке |
Цифры в колонке «сильно» условные: у каждого производства они свои, но всегда конкретные.
Дизайн главного экрана сайта
Дизайн главного экрана сайта подчиняется одной задаче: чтобы глаз прошёл по порядку «кто, что, почему Вам, что сделать». Для этого:
- Один главный заголовок, самый крупный текст на экране. Не два слогана, спорящих друг с другом.
- Одна главная кнопка, заметная по цвету. Вторая, если нужна, тише: например, ссылка на каталог.
- Фото или визуал продукта, а не абстракция. Закупщик хочет видеть, что Вы делаете.
- Лёгкий вес: тяжёлое видео на фоне и слайдер из пяти картинок замедляют загрузку. По данным Google (2017), когда загрузка растёт с 1 до 3 секунд, вероятность отказа увеличивается на 32%.
Порядок блоков удобнее продумать до дизайна, на схеме: зачем это нужно, разобрали в статье Прототип сайта: зачем он нужен до дизайна. А как первый экран связан с остальными разделами, в материале Структура сайта: как организовать разделы под продажи и SEO.
Первый экран на телефоне
На телефоне первый экран в два-три раза меньше, и всё, что на компьютере стоит в ряд, встаёт в столбик. Частая беда: на мобильном заголовок уезжает вниз, а весь экран занимает картинка или меню. Проверяйте главный экран сайта отдельно на телефоне: заголовок, кнопка и контакт должны помещаться без прокрутки. На что смотреть при приёмке мобильной версии, в статье Адаптивная вёрстка сайта: на что смотреть заказчику.
Частые ошибки
- Красивая абстрактная картинка вместо сути.
- Слоган ни о чём («Мы делаем мир лучше»).
- Непонятно, что за компания и что она продаёт.
- Нет призыва к действию: клиент не знает, что делать.
- Предлагается только форма, хотя клиенты хотят написать в мессенджер или позвонить.
Последняя ошибка видна только по данным. Наш собственный пример: за 90 дней на главную страницу нашего сайта пришло 1 086 визитов из России, и главными действиями стали 195 переходов в кейсы и 45 переходов в мессенджеры. Люди приходили проверить агентство и хотели написать напрямую, поэтому мы вынесли на первый экран строку с Telegram и WhatsApp, а не ещё одну кнопку формы.
Как проверить первый экран
- Тест пяти секунд: покажите экран человеку не из отрасли и спросите, что за компания и что она продаёт.
- Вебвизор и карта скроллинга в Метрике: сколько людей уходят, не долистав до второго экрана.
- Цели в Метрике: какие кнопки первого экрана реально нажимают.
- Проверка на телефоне: влезают ли заголовок, кнопка и контакт.
Правило простое
За 5 секунд посетитель должен ответить себе на три вопроса: «Туда ли я попал? Решат ли тут мою задачу? Что делать дальше?». Ответил да, остаётся и читает. Первый экран это часть общей работы над тем, чтобы трафик превращался в заявки. Смежная тема: квиз, который доводит посетителя до обращения.
Первый экран мы собираем в рамках разработки дизайна сайта: от заголовка и оффера до мобильной версии. Хотите поднять конверсию? Разберём Ваш главный экран и путь к заявке бесплатно, а если нужен новый, смотрите дизайн сайта для производства.
