• Пн. Апр 15th, 2024

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

Автор:admin

Окт 12, 2023

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

5K показов 992 открытия

Нет названия компании и логотипа

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

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

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


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

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

Объемная шапка с развернутым меню

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

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

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


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

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


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

Слабый офер или его отсутствие

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

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

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


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

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


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

Изображения со стоков — пластиковые и шаблонные

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

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

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


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

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

Нет кнопки CTA или формы обратной связи

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

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

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


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

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


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

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

Перегруженный дизайн, который отвлекает от офера

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

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

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


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

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


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

Подход со стороны продукта

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

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

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


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

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

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

Посмотреть на Рыбу

Источник: vc.ru

Автор: admin