.webp)
.webp)
Первый экран или hero section — это первое, что видят ваши потенциальные клиенты. Это то, что определяет их первое впечатление. И это то, что на 90% должно убедить их совершить целевое действие. Как же спроектировать эффективный первый экран, обеспечивающий высокую конверсию? Читайте в сегодняшней статье.
Вы больше никогда не сможете смотреть на лендинги так, как прежде.
Основная цель любого лендинга — конвертировать пользователей в клиентов. Короче говоря: все дело в продажах! 💰
Изучив 500+ часов записанных сессий Hotjar и проанализировав 400+ сайтов, я выявил ряд приемов, которые неизменно дают впечатляющий результат.
Я не собираюсь углубляться в науку. Я просто хочу, чтобы вы переосмыслили свой подход к дизайну сайтов, а затем нашли собственный способ сделать их лучше.
Но есть базовые принципы, которые работают всегда.
Все начинается с первого экрана
Первый экран или hero section — это первое, что видят ваши потенциальные клиенты.
Это то, что определяет их первое впечатление.
И это то, что на 90% должно убедить их совершить целевое действие. Хороший первый экран дополняется и усиливается другими разделами, задача которых — развеять возможные сомнения.
Цель
Вопреки распространенному мнению, цель первого экрана — не разжечь любопытство или заинтриговать аудиторию. Не стоит рассчитывать, что, если он будет загадочным и художественным, люди сами прокрутят страницу вниз в поисках объяснений.
Сегодня у нас мало свободного времени. Если вы не покажете потенциальным клиентам, что они нашли именно то, что им нужно, прямо на первом экране, они уйдут.
Результат — никаких продаж.
Как создается современный дизайн
В этом месяце я проанализировал более 400 современных сайтов. Многие из них довольно хороши, но есть и огромное количество абсолютно не эффективных примеров, которые позиционируются как отличный дизайн.
🚩Вот какие красные флаги встречаются чаще всего:
1. Дизайнеры начинают с изображения, сгенерированного AI. Это либо какой-то пейзаж, либо абстрактная фигура. Зачастую они также добавляют сверху меню в стиле глассморфизм, но мы пропустим этот шаг для ясности.
2. Шаг второй — добавление заголовка, описания и CTA-кнопки. Чаще всего заголовки выглядят так:
3. Самое главное — подобрать для заголовков правильные слова, чтобы мгновенно впечатлить пользователя. Теперь прекрасна не только картинка на заднем плане, но и этот высокопарный, бессмысленный словесный салат!
Если в заголовке есть ДВА или более слов из этого списка, то вероятность того, что он был создан человеком, стремится к нулю.
Помните, что подобные формулировки не добавляют интерфейсу изысканности или профессионализма. Они лишь сбивают пользователей с толку.
В таком дизайне слова — это нечто второстепенное. Их добавляют в последнюю очередь, подстраивая размер, расположение и оформление под имеющееся изображение.
В итоге мы получаем эстетичные, но абсолютно бессмысленные сообщения.
Итак, мы знаем, как делать не нужно, но как же сделать всё правильно?
Начните с «текстового фрейма», а не с визуала
Работая с крупными клиентами и их огромными маркетинговыми командами, мы быстро поняли, что стандартный подход к созданию целевых страниц неэффективен.
Он предполагает два основных риска. Первый — сразу сделать высокодетализированный прототип и, в случае неудачи, потратить много времени и сил на полный редизайн. Второй — сделать низкодетализированный вайрфрейм и столкнуться с непониманием большинства маркетологов, почему он такой уродливый. Подобная обратная связь отрицательно сказывается на мотивации и дальнейшем проектировании.
Но есть и третий путь.
В 2016 году я придумал термин Typeframe (текстовый фрейм). Речь о низкодетализированном вайрфрейме с тщательно проработанным текстом.
Весь текстовый контент уже добавлен и структурирован, он имеет правильные размеры, межстрочные расстояния и отступы и формирует общую иерархию.
Вот пример:
Подумайте, ПОЧЕМУ ваше сообщение должно заинтересовать клиента. Затем создайте 3–5 версий и протестируйте их, чтобы собрать первые отклики.
Формулировки должны соответствовать конкретной отрасли. Не существует каких-то универсальных слов или фраз, которые будут эффективны в любой ситуации.
Главная идея — сделать сообщение понятным для целевой аудитории. Люди должны мгновенно получать ответ на вопрос, какую пользу им принесет ваш продукт.
Когда все шрифты подобраны правильно, размеры и отступы настроены, а типографская иерархия выстроена, заинтересованным сторонам, включая маркетологов, гораздо проще адекватно оценить результат.
И это еще до того, как на экране появился хоть один цветной пиксель!
Переходим к визуальной составляющей
Только теперь пришло время подумать, как лучше всего визуализировать то, о чем говорится в тексте.
Наша цель — не просто подобрать что-то «красивое».
Главное, чтобы визуальные образы подкрепляли и усиливали сообщение.
Люди vs абстракции
99% компаний лишь выиграют, добавив на первый экран изображение человека.
Мы естественным образом равняемся на других людей. Мы подражаем их действиям. Нам проще поставить себя на их место.
Да, существуют отрасли, в которых этот аспект не имеет значения, но их меньшинство. Эмоциональная связь с героем необходима для привлечения внимания.
Конечно, это должно быть сделано правильно — в контексте сообщения и в соответствии с ним.
Случайные люди на первом экране станут лишь отвлекающим фактором.
Добавление популярных, стоковых фотографий может вызвать эффект «где-то я это уже видел». Когда фотография явно стоковая, доверие к бренду резко падает.
Лучший подход — использовать собственные фотографии, сгенерировать изображения при помощи AI и доработать их в графическом редакторе, чтобы они максимально соответствовали стилю вашего бренда, или значительно модифицировать стоковые фото.
Предлагаете клиентам сэкономить время и деньги, пропуская меньше звонков? Добавьте фото человека, разговаривающего по телефону, и иконку/текстовую метку, которая демонстрирует, что звонок был эффективно обработан.
Будьте креативными, но при этом понятными. Меньше — значит больше.
Работа с цветом
Вы можете перекрасить некоторые части изображения (например, одежду) в оттенки основного фирменного цвета, чтобы усилить связь. Иногда мы даже перекрашиваем глаза... мы действительно одержимы. 👁👁
Перекрасьте только один элемент одежды, не нужно превращать аутфит персонажа в однотонную «униформу». В примере выше мы деликатно изменили оттенок блузки.
Принцип взгляда
Люди естественным образом склонны смотреть туда, куда смотрят другие. 👀
Когда человек на фотографии смотрит прямо в камеру, пользователи автоматически фокусируются на его глазах. Но если его взгляд направлен в сторону CTA, их внимание переключается именно туда, куда нам нужно.
Направляющие линии
Принцип взгляда формирует первую направляющую линию от глаз героя к заголовку.
Но обратите внимание на то, как переносятся строки текста (картинка выше). Они образуют естественную диагональную линию, которая спускается к кнопкам. Если расставить переносы по-другому, траектория станет «ломаной», что создаст дополнительные препятствия (картинка ниже).
Разделы контента
Для того, чтобы структурировать контент, я использую метод под названием «Полосы иерархии».
Вот пять основных элементов первого экрана:
- Кикер (фраза перед заголовком), в данном случае в виде социального доказательства. Отображение количества довольных клиентов — один из самых убедительных приемов.
- Основной заголовок. Он должен быть кратким и ОЧЕНЬ простым для понимания. Покажите, как вы решаете проблему пользователей.
- Разъясните, как именно вы решаете проблему в описании. Будьте лаконичны, здесь вы можете развеять наиболее распространенные сомнения — одно или два (например, что, если линия занята?).
- Для большинства проектов достаточно одной CTA-кнопки, которая напрямую запускает процесс покупки. Для продуктов с высокими барьерами (дорогих или трудных в настройке) добавьте вторую кнопку, чтобы продемонстрировать, как их используют другие клиенты.
- Эмоциональная связь — грамотно подобранное изображение + факультативно графические элементы, помогающие показать решенную проблему (например, уведомление, что встреча назначена, несмотря на занятую линию).
Заключение
Универсальной схемы высококонверсионного лендинга не существует. Для того, чтобы его создать, нужно придерживаться базовых правил и быть готовым к исследованиям и проверке всевозможных гипотез.
Главное — ясность и логичная структура.
