Покупатель продуктов редко изучает сайт. Ему нужно проверить, привезут ли заказ сегодня, и собрать корзину: молоко, хлеб, что-нибудь к ужину. Первый экран, то есть всё, что видно без прокрутки, должен ответить на этот запрос раньше, чем у человека кончится терпение. Разберём, из чего его собрать.
Какие вопросы покупатель задаёт в первые секунды
Их три. Что это за магазин и что в нём продаётся? Доставляют ли ко мне или где ближайшая точка? С чего начать выбор? Если ответ на любой из них спрятан в меню или в подвале страницы, человек вернётся в поиск или откроет сайт конкурента. Поэтому первый экран строим вокруг этих вопросов, а не вокруг желания показать всё сразу.
Что обязательно разместить
- Заголовок, который называет суть. Например, «Продукты с доставкой по Твери». «Добро пожаловать» ничего не сообщает.
- Условия доставки. Зона, ближайший свободный интервал, минимальная сумма заказа, порог бесплатной доставки. Указывайте только то, что действительно выполняется.
- Проверка адреса. Поле «Введите улицу» или выбор района избавляет от поиска нужной страницы в разделе «Оплата и доставка».
- Крупный поиск по товарам. Многие приходят со списком покупок и сразу хотят найти конкретную позицию.
- Основные категории. Овощи и фрукты, молочное, мясо, хлеб, бакалея: крупные плитки с понятными подписями.
- Телефон, режим работы и корзина с количеством товаров и суммой в шапке.
Условный пример первого экрана
Возьмём вымышленный магазин «Свежий двор» с доставкой по городу. Это иллюстрация, а не описание реального проекта.
- Шапка: логотип, поле поиска «Найти товар», телефон, «Работаем с 8:00 до 22:00», корзина с суммой.
- Заголовок: «Продукты с доставкой по городу». Под ним одна строка: «Привезём сегодня, если закажете до 18:00. Доставка бесплатна от определённой суммы» (сумму владелец подставляет свою).
- Форма: «Куда везти?» с полем для улицы и кнопкой «Проверить». После ответа появляется ближайшее время доставки.
- Под формой ряд плиток категорий с фотографиями реальных товаров и названиями.
- Один небольшой блок с текущей акцией, без автоматической прокрутки.
Пользователь за пару секунд видит, что магазин продаёт, довезёт ли он и куда нажать дальше.
Что лучше убрать с первого экрана
- Карусель из пяти баннеров. Слайды сменяются раньше, чем их успевают прочитать, а на телефоне баннер занимает весь экран и вытесняет каталог.
- Всплывающее окно с подпиской до того, как человек что-либо увидел.
- Общие обещания. «Всегда свежие продукты» без пояснений не убеждают. Конкретный факт вроде «Хлеб привозим с пекарни каждое утро» работает лучше, но только если он правдив.
- Типовые стоковые фотографии. Реальные снимки прилавка и товаров вызывают больше доверия.
Как выглядит первый экран на телефоне
Продукты часто заказывают со смартфона, в дороге или на кухне. Проверьте главную на реальном устройстве. Поиск и кнопка звонка должны быть доступны сразу, категории должны быть плитками, в которые легко попасть пальцем, а не мелким выпадающим меню. Тяжёлые баннеры на медленном мобильном интернете загружаются долго: пока они грузятся, человек видит пустой экран.
Проверочный список
- Из заголовка понятно, что вы продаёте и где работаете.
- Условия доставки видны без перехода на другую страницу.
- Адрес можно проверить прямо на главной.
- Поиск заметен и на компьютере, и на телефоне.
- Категории можно открыть одним касанием.
- Телефон и часы работы не нужно искать.
- Баннеры не вытесняют каталог и не листаются сами.
- Главная быстро открывается на телефоне при обычной мобильной связи.
После запуска сравните, какие блоки люди нажимают, а какие игнорируют. Для этого подойдёт карта кликов или вебвизор в счётчике посещаемости. Исходя из этого, меняйте порядок блоков: так первый экран подстраивается под реальных покупателей.
