Нас выбесили эти первые экраны лендингов с основными ошибками. Мы взяли и сделали как надо. Смотрите до/после

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

Если пользователь сразу не опознает бренд, когда заходит на сайт, у него могут появиться подозрения, что это какая-то шарашкина контора. Представьте: вы ищете квартиру, видите рекламу с хорошим предложением и переходите по ней на лендинг застройщика. А там ни названия, ни логотипа, только цена и кнопка «Купи». Первая мысль: «Это что, мошенники? Меня здесь кинут». Вы закрываете сайт и забываете про него, а компания теряет потенциального клиента и деньги.

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

Вот первый экран без названия компании и с непонятным неизвестным логотипом:

Мы добавили название компании и заодно офер:

Это когда в шапке лендинга пытаются разместить сразу всё: 100 500 пунктов меню, все телефоны, мессенджеры и ссылки на соцсети. Шапка получается на пол-экрана, выглядит неаккуратно и больше мешает, чем помогает пользователю. В ней очень легко запутаться, можно вообще забыть, зачем пришел на сайт, или перейти по внешней ссылке на YouTube и не вернуться.

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

На первом экране широкая шапка с анонсом какого-то мероприятия:

Мы объединили три строки из шапки в одну, а еще заменили призыв на кнопке:

Первый экран — самая важная часть лендинга. А офер — обязательный элемент первого экрана. Если офера нет или он не решает проблему пользователя, заказов не будет. Иногда в заголовок добавляют сразу несколько преимуществ — так тоже лучше не делать. Много плюсов, особенно если они шаблонные, кажутся неправдоподобными и отвлекают от основного предложения.

Чтобы зацепить внимание и заинтересовать пользователя, выносите в офер главные особенности продукта. Можно использовать формулу: заголовок + подзаголовок. Заголовок должен нести ценность для клиента и быть понятным. А в подзаголовке можно раскрыть и усилить предложение — вынести 1–2 преимущества продукта или уникальные свойства.

Вот пример первого экрана без офера:

Мы добавили офер и вынесли основные направления курсов:

Как сделать сайт дешевым и отталкивающим? Добавьте на первый экран фото людей с наигранными эмоциями или пиксельную картинку, не подходящую по тематике. Каким бы цепляющим ни был ваш офер, клиент не станет листать лендинг дальше, если от картинки на первом экране у него подгорит. Шаблонные изображения снижают доверие: кажется, что если компания не постаралась сделать лендинг для себя, то и клиенту от нее ждать качества тоже не стоит. Особенно кринжовая ситуация, когда пользователь уже видел это фото на другом сайте и даже в другой тематике.

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

На первом экране скучное изображение логотипа:

Мы добавили тематическую анимацию и вынесли главные преимущества на плашки:

Когда на первом экране невозможно найти кнопку с призывом, пользователю сложнее выполнить целевое действие. Представьте: вас заинтересовал офер и вы готовы сделать заказ, но не видите, куда для этого кликнуть. Скроллите сайт вниз, появляются сомнения, и кажется, что продукт уже не так и нужен. Нет кнопки — нет действия. Конверсия лендинга падает, и заказов становится меньше.

Чтобы помочь клиенту сделать заказ, разместите на главном экране кнопку с CTA. Пользователю должно быть интуитивно понятно, что это кнопка, а призыв нужно сделать четким и простым. Если пользователю сложно сразу купить товар и для заказа нужна дополнительная информация, добавьте форму обратной связи. Главное, не перегружайте ее лишними полями. Например, для записи на консультацию достаточно телефона и имени клиента. А для разработки сайта можно предложить заполнить мини-бриф.

Пример первого экрана с неудачными кнопками:

Мы оставили одну кнопку с крепким CTA, а еще допилили офер:

Кстати, пока мы писали статью и рисовали эти экраны, ребята из Mailo Post сделали редизайн сайта — заменили кнопку и спустили инструкцию по работе с сервисом ниже. Но мы все равно нашли, что улучшить: логотип советуем сделать более современным.

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

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

Здесь от перегруженного дизайна голова идет кругом:

Мы сделали дизайн более лаконичным:

Бывает, что на первом экране рассказывают про продукт и совсем забывают о клиенте. Обычно этим грешат стартапы с инновационными технологиями и решениями. Пользователь заходит на лендинг и не понимает, что за неведомого зверя ему предлагают. Никто не хочет чувствовать себя глупо, посетителю легче закрыть сайт и найти что-то понятное и простое.

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

Вот пример с неудачным подходом, когда неясно, что получит клиент, если сделает заказ:

Мы прописали, какие услуги предлагает компания, а еще добавили кнопку:

Приходите в Рыбу за крутыми и цепляющими первыми экранами. Мы дизайним и создаем лендинги и сайты на Тильде, делаем блоги и медиа, ведем соцсети, пишем статьи на vc.ru, запускаем кампании в ПромоСтраницах.