Hero-блок · первый экран

Что разместить в hero-блоке?

В hero-блоке достаточно трёх вещей: «чем вы занимаетесь», «почему именно к вам» и «что сделать прямо сейчас». Только по первому экрану клиент должен решить, смотреть дальше или связаться с вами.

Больше — не значит лучше. Чем больше элементов, тем хуже виден каждый, поэтому стоит разделить обязательное и то, что можно перенести ниже.

Сферу и район указывают ради клиентов из поиска. Если человек, искавший «торты Мангвон-дон», видит на первом экране те же слова, он уверен, что пришёл туда, куда нужно.

Правда ли клиенты судят только по первому экрану?

Смотрят не только первый экран, но дольше всего задерживаются именно на нём. В исследовании Nielsen Norman Group с отслеживанием взгляда, опубликованном в 2018 году, около 57% времени просмотра приходилось на область до прокрутки.

В том же исследовании первые два экрана заняли около 74% времени просмотра. Клиенты прокручивают страницу, но чем ниже, тем менее внимательно смотрят.

Поэтому первый экран ещё и даёт «повод листать дальше». Только убедившись на первом экране, что это нужное заведение, клиент дочитает до цен и отзывов.

Но и умещать всё на первый экран не нужно. Клиенты прокручивают, если видят причину, поэтому если внизу первого экрана слегка виден следующий блок, они естественно продолжат просмотр.

Как написать текст для hero-блока?

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

Если писать по порядку ниже, у большинства заведений получится рабочий текст. Не пытайтесь сразу написать идеально — сделайте два-три варианта и сравните.

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

Определившись с текстом, стоит согласовать слова заголовка страницы в результатах поиска с текстом первого экрана. Если слова в поиске и на первом экране совпадают, клиент меньше путается.

1. 01Выпишите запросы, по которым клиенты могут искать ваше заведение (например, «заказ торта Мангвон-дон», «многослойная стрижка Хондэ»).
2. 02Сделайте из них короткий крупный заголовок со сферой и районом.
3. 03Добавьте строчку-пояснение с одним отличием от других заведений (например, «заказ в день обращения», «процедура после консультации 1:1»).
4. 04Сформулируйте текст кнопки как действие клиента (например, «Узнать о заказе торта», «Свободное время»).
5. 05Вставьте текст на экран телефона и, если строки слишком часто переносятся, сократите слова.
6. 06Покажите экран на 5 секунд человеку, не знающему ваше заведение, и спросите: «Как думаешь, чем здесь занимаются?»

Не замедлит ли загрузку большое фото или видео на первом экране?

Без контроля — замедлит. Большое фото на первом экране обычно самый крупный элемент страницы, поэтому оно напрямую влияет на LCP (время отрисовки самого крупного элемента) — показатель, которым Google измеряет скорость загрузки.

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

На телефоне скорость ниже, чем на компьютере, а в мобильном интернете — ниже, чем по Wi-Fi. Ближе всего к условиям клиента — отключить Wi-Fi и открыть первый экран на телефоне самому.

Фоновое видео создаёт атмосферу, но много весит и нагружает мобильный интернет. Если всё же используете его, делайте короткое видео и готовьте статичное фото, которое показывается до его загрузки.

Как построить первый экран для разных сфер?

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

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

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

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

• Кафе: фото пространства или фирменного напитка, «Кофе ручного заваривания в Ённам-доне · ежедневно с 10:00 до 22:00», кнопка «Маршрут».
• Салон: фото реальных результатов работы, «3 минуты от станции Хапчон · бережная химзавивка», кнопка «Записаться к мастеру».
• Мастерская: фото рук во время занятия, «Мастер-классы по керамике на один день по выходным», кнопка «Расписание на этот месяц».
• Онлайн-продажи: фото главного товара, «Гранола собственной выпечки · доставка по всей Корее», кнопка «Перейти к товарам».

Какие ошибки чаще всего допускают на первом экране?

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

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

Осторожнее и с попапами, всплывающими сразу при входе. Если окно акции закрывает экран, клиент занят его закрытием ещё до знакомства с заведением, а Google называет попапы, закрывающие содержимое, одним из признаков плохого удобства страницы.

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

Что спросить у веб-студии, глядя на макет первого экрана?

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

• Видна ли кнопка на первом экране телефона без прокрутки?
• Проверяете ли вы вес и скорость загрузки фото первого экрана?
• Хорошо ли читается текст поверх фото, даже если фото светлое?
• Если будет слайдер, сможет ли клиент сам его остановить или перелистнуть?