Нас выбесили эти первые экраны лендингов с основными ошибками. Мы взяли и сделали как надо. Смотрите до/после
Чтобы клиент совершил целевое действие, на лендинге выстраивается воронка продаж. Но все может пойти псу под хвост, если забить на первый экран. Пользователь, которого не зацепит начало лендинга, не станет листать его дальше. В статье показываем, как исправили основные ошибки на лендосах разных сервисов. Зацените, что у нас получилось.
Нет названия компании и логотипа
Если пользователь сразу не опознает бренд, когда заходит на сайт, у него могут появиться подозрения, что это какая-то шарашкина контора. Представьте: вы ищете квартиру, видите рекламу с хорошим предложением и переходите по ней на лендинг застройщика. А там ни названия, ни логотипа, только цена и кнопка «Купи». Первая мысль: «Это что, мошенники? Меня здесь кинут». Вы закрываете сайт и забываете про него, а компания теряет потенциального клиента и деньги.
Чтобы не отпугивать пользователей, на видном месте обязательно разместите название и логотип фирмы. Сделайте лого кликабельным — при клике пользователь сможет перейти на главный экран с любого раздела лендинга и разобраться, что это за компания.
Вот первый экран без названия компании и с непонятным неизвестным логотипом:
Здесь нет названия бренда, и не сразу понятно, что это за сервис. Какой-то Макс предлагает что-то начать, даже не успев познакомиться. А еще в шапке постоянно меняется текст — пользователю нужно ждать, чтобы узнать, куда он попал
Мы добавили название компании и заодно офер:
Объемная шапка с развернутым меню
Это когда в шапке лендинга пытаются разместить сразу всё: 100 500 пунктов меню, все телефоны, мессенджеры и ссылки на соцсети. Шапка получается на пол-экрана, выглядит неаккуратно и больше мешает, чем помогает пользователю. В ней очень легко запутаться, можно вообще забыть, зачем пришел на сайт, или перейти по внешней ссылке на YouTube и не вернуться.
Чтобы не терять из-за этого лиды, сделайте шапку минималистичной. Добавьте логотип, название, меню с вложенными пунктами, кликабельный номер телефона и мессенджер для связи. Зафиксируйте шапку, чтобы при скроллинге она оставалась вверху экрана — так клиент в любой момент сможет совершить целевое действие.
На первом экране широкая шапка с анонсом какого-то мероприятия:
Мы объединили три строки из шапки в одну, а еще заменили призыв на кнопке:
Слабый офер или его отсутствие
Первый экран — самая важная часть лендинга. А офер — обязательный элемент первого экрана. Если офера нет или он не решает проблему пользователя, заказов не будет. Иногда в заголовок добавляют сразу несколько преимуществ — так тоже лучше не делать. Много плюсов, особенно если они шаблонные, кажутся неправдоподобными и отвлекают от основного предложения.
Чтобы зацепить внимание и заинтересовать пользователя, выносите в офер главные особенности продукта. Можно использовать формулу: заголовок + подзаголовок. Заголовок должен нести ценность для клиента и быть понятным. А в подзаголовке можно раскрыть и усилить предложение — вынести 1–2 преимущества продукта или уникальные свойства.
Вот пример первого экрана без офера:
Мы добавили офер и вынесли основные направления курсов:
Изображения со стоков — пластиковые и шаблонные
Как сделать сайт дешевым и отталкивающим? Добавьте на первый экран фото людей с наигранными эмоциями или пиксельную картинку, не подходящую по тематике. Каким бы цепляющим ни был ваш офер, клиент не станет листать лендинг дальше, если от картинки на первом экране у него подгорит. Шаблонные изображения снижают доверие: кажется, что если компания не постаралась сделать лендинг для себя, то и клиенту от нее ждать качества тоже не стоит. Особенно кринжовая ситуация, когда пользователь уже видел это фото на другом сайте и даже в другой тематике.
Чтобы удержать клиента на лендинге, позаботьтесь об обложке. Разместите на первом экране качественное фото товара, людей в процессе пользования продуктом, примеры работ. Главное, чтобы картинка была настоящей, вызывала эмоции и усиливала офер. Еще можно использовать короткое видео, которое лучше зациклить. Только обязательно выключите у ролика звук, чтобы никого не оглушить.
На первом экране скучное изображение логотипа:
На обложке логотип компании, который ни о чем не говорит клиенту. Разнородные плашки на картинке не несут ценности, а вот кнопки с CTA явно не хватает
Мы добавили тематическую анимацию и вынесли главные преимущества на плашки:
Нет кнопки CTA или формы обратной связи
Когда на первом экране невозможно найти кнопку с призывом, пользователю сложнее выполнить целевое действие. Представьте: вас заинтересовал офер и вы готовы сделать заказ, но не видите, куда для этого кликнуть. Скроллите сайт вниз, появляются сомнения, и кажется, что продукт уже не так и нужен. Нет кнопки — нет действия. Конверсия лендинга падает, и заказов становится меньше.
Чтобы помочь клиенту сделать заказ, разместите на главном экране кнопку с CTA. Пользователю должно быть интуитивно понятно, что это кнопка, а призыв нужно сделать четким и простым. Если пользователю сложно сразу купить товар и для заказа нужна дополнительная информация, добавьте форму обратной связи. Главное, не перегружайте ее лишними полями. Например, для записи на консультацию достаточно телефона и имени клиента. А для разработки сайта можно предложить заполнить мини-бриф.
Пример первого экрана с неудачными кнопками:
Мы оставили одну кнопку с крепким CTA, а еще допилили офер:
Кстати, пока мы писали статью и рисовали эти экраны, ребята из Mailo Post сделали редизайн сайта — заменили кнопку и спустили инструкцию по работе с сервисом ниже. Но мы все равно нашли, что улучшить: логотип советуем сделать более современным.
Перегруженный дизайн, который отвлекает от офера
Иногда в погоне за креативом первый экран получается слишком сложным. Много деталей, яркие цвета или кнопки непривычной формы отвлекают от главного — клиент не видит офера и не совершает целевое действие. Обилие изображений и элементов делает лендинг тяжелым, и он долго грузится — пользователь вряд ли захочет тратить свое время, чтобы оценить дизайнерские решения, и уйдет.
Старайтесь делать дизайн современным, удобным и лаконичным. Не нужно использовать много разных цветов, нечитабельные шрифты, перегружать элементами и делать кнопки в виде звездочек или сердечек.
Здесь от перегруженного дизайна голова идет кругом:
Мы сделали дизайн более лаконичным:
Подход со стороны продукта
Бывает, что на первом экране рассказывают про продукт и совсем забывают о клиенте. Обычно этим грешат стартапы с инновационными технологиями и решениями. Пользователь заходит на лендинг и не понимает, что за неведомого зверя ему предлагают. Никто не хочет чувствовать себя глупо, посетителю легче закрыть сайт и найти что-то понятное и простое.
Чтобы не вызывать у потенциальных клиентов чувство неполноценности и не терять деньги, рассказывайте про продукт с точки зрения клиента. Внятно дайте понять, что это за продукт, чем он может помочь человеку и как решит его проблему.
Вот пример с неудачным подходом, когда неясно, что получит клиент, если сделает заказ:
По заголовку непонятно, как клиент может повысить эффективность рекламы: сложные термины не показывают экспертность, а только вводят пользователя в ступор
Мы прописали, какие услуги предлагает компания, а еще добавили кнопку:
Сделали простой офер. Теперь понятно, что здесь можно заказать рекламные видеоролики и видеокреативы. На фон добавили видео со стока — в реальном проекте лучше использовать шоурил из рабочих кейсов
Приходите в Рыбу за крутыми и цепляющими первыми экранами. Мы дизайним и создаем лендинги и сайты на Тильде, делаем блоги и медиа, ведем соцсети, пишем статьи на vc.ru, запускаем кампании в ПромоСтраницах.
Как же меня бесят анимации, которые на первой картинке и которые вы преподносите как нечто нескучное. Я хочу видеть информацию сразу, а не постепенно выползающее из разных углов нечно. В процессе просмотра глаз пытается выцепить нужную инфу, а ее нет, она еще не проанимировалась, а если и проанимировалась, то фокус внимания уже ушел с того места ну и плюс еще если быстро проскроллил - то и не увидишь такое. В результате приходится ползать взглядом по странице туда сюда, это если сильно надо. В большинстве же случаев страницы с подобным лендингом закрываются, потому что идите в жопу с таким дизайном. Тот, кто принимает такой дизайн на своих страницах - идиот, не пользующийся интернетом.
Абсолютно согласен. Суть лендинга в том, что только взглянув тебе сразу понятно, зачем, почему и сколько. Мультики я и на ютюбе посмотреть могу
А где в этих примерах нужно ждать? Кажется все как раз во время появляется. Или у вас хорошо развиты навыки скорочтения просто
Мне кажется, все хорошо, когда оно с умом, а когда без него — плохо. Анимация ж может сыграть как на пользу, так и нет. Когда она долгая, не в тему, просто сама анимация ради анимации — эт не гуд. А когда свои задачи выполняет — почему нет? Например, как вариант, когда нужно добавить дополнительную информацию, не основной офер или преимущества, а что-то второстепенное, но тем не менее важное. Пользователь может спокойно пробежаться глазами по основным элементам экрана: оферу в заголовке, СТА, а анимация его догонит с доп плюшками, но он так же спокойно может ее пропустить, суть при этом не потеряет, если все элементы расставлены с умом.
Плюс, это отличный инструмент, если нужно изначально передать настрой, добавить нужную атмосферу или динамику.
Или даже чисто технически — прелоудер позволит загрузить полностью весь сайт, когда пользователь его открыл. Тоже плюс
В общем, имхо, главное с умом подходить и понимать, какие задачи ты решаешь, а не пичкать анимацию ради анимации
А меня лично бесят эти ублюдские анимации трехчасовые. Надо сидеть и ждать, пока оно прорисуется... Но получилось, действительно, как-будто лучше
Ну это нормально настраивается же — бывает что надо листать, пока палец отвалится и что-то выползет. Но можно сделать вполне адекватно, когда все элементы анимированы с толком.