Главное Авторские колонки Вакансии Образование
Выбор редакции:
1 094 5 В избр. Сохранено
Авторизуйтесь
Вход с паролем

4 компонента, без которых вы не создадите качественный лендинг

Главное, что должен понять пользователь, попадая на ваш лендинг впервые: ЧТО вы предлагаете и КАК это заказать. У вас есть всего несколько секунд, чтобы рассказать о своем бизнесе ключевые моменты, и зацепить внимание.Эти 4 ключевые компонента должны присутствовать в любом лендинге, чтобы помочь вам справится с этой задачей и закрыть продажу. Кратко, ёмко и с примерами разбираем их до нюансов.
Мнение автора может не совпадать с мнением редакции

Компонент №1: Дескриптор

Итак, если отталкиваться от желаний пользователя, то первое, чего он хочет, это понять, куда он вообще попал. Значит, первое, что мы делаем, — размещаем дескриптор (от лат. descriptor — описывающий). По сути это краткое описание того, чем вы занимаетесь. И здесь не нужно вставлять какую-то поэтическую фразу в духе “С нами — в будущее” или “Вперед к успеху!”. Такие предложения не несут смысловой нагрузки, а места занимают уйму. Продумайте свой дескриптор так, чтобы он отвечал на вопросы:• какое действие вы совершаете? (производство, поставка, продажа, разработка)• с каким товаром или услугой? (кондитерские изделия, пластиковые окна, мобильные приложения)• для кого или куда? (по всей Европе, по России, в Томске, США)Например: “Производство и поставка лакокрасочных материалов по всей Европе”Или вот еще один пример:

image4-1024x143.png

Сразу четко видно, что вы производите, продаете и куда доставляете. http://bulat.ua

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

image26-1024x393.png

Не будь на нем изображения роллов, а один только текст, вы бы вряд ли догадались, что речь идет именно об онлайн суши-баре. Картинка полностью “вытянула” неудавшийся дескриптор. http://www.zolotaja-rybka.ua

Помните, что изображение, передающее движение или результат воспринимается гораздо лучше, чем статическая композиция. Покажите, к примеру, момент изготовления продукта, пользования товаром или услугой. Например, украшения или одежда на девушке вызовут больший интерес, чем они же, запечатленные на витрине. Или вот сравните:

image9.png

http://www.ekonomstr.ru

Или

image11-1024x209.png

http://www.thermasteel.ua

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

image6-1024x512.png

http://lptrend.com

Компонент №2: Оффер

Следующее, что нужно пользователю — это, чтобы появился интерес. Продумайте своё уникальное торговое предложение. Что ценно для вашей целевой аудитории и есть у вас.Этот компонент лендинга называется оффер. И он может занять до 25% экрана, т.к. пользователь будет проглатывать любую информацию на посадочной странице и тратить на это свое время, пока ему интересно.С одной стороны оффером может называться сама суть предложения (а это то, что описывается в дескрипторе), с другой стороны, оффером может быть какая-то акция, которая стимулирует пользователя действовать СЕЙЧАС, а не просто принять информацию к сведению. Например, скидка, которая истекает сегодня.Примеры оффера:

image19.png

http://sunscreen.com.ua

А вот 2 примера конструкторов лендингов, которые в оффере делают ставку на цифры. Получить готовый сайт и первых клиентов за один час — звучит заманчиво.

image15-1024x506.png

http://lpmotor.ru

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

image23-1024x485.png

http://leadkit.ru

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

Читай также: 5 лучших статей по маркетингу, которые точно стоят вашего внимания: дайджест декабря 2016

Компонент №3: Утепляющие триггеры

Чтобы понять, что такое триггер, представьте ситуацию: Вы покупаете какую-то вещь на рынке или в магазине, крутитесь у зеркала, но не решаетесь ее взять. Вдруг проходящая мимо женщина говорит: “Ой, вам так идет!”, — и тут у вас пропадают все сомнения, что мешали совершить покупку. Вот это и есть триггер.Пользователь уже знает достаточно информации о товаре или услуге, знает, как заказать, но не решается нажать кнопку. Его интерес нужно подогреть, помочь сделать последний шаг к покупке. Это задача третьего компонента — триггеров. Это всевозможные фишки на странице, которые подпитывают желание пользователя заказать что-то у вас или внушают доверие к вам. Например, отзывы счастливых покупателей, название известных компаний, которые заказали у вас, упоминание клиентов-звезд и многое другое.

image13-1024x425.png

Пример упоминания известных брендов на лендинге от Rafflecopter.https://www.rafflecopter.com

image2-1024x560.png

Использование звездных имен http://dronarium.com.ua

image1-1024x403.png

https://unbounce.com

image22-1024x504.png

https://tilda.cc/ru/

А вот еще один отличный пример от LPgenerator:

image7-1024x510.png

Фото довольных клиентов на первом же развороте и истории успеха каждого при использовании этой платформы.

Только не злоупотребляйте триггерами.

Компонент №4: Призыв к действию

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

image14-1024x497.png

Помните, что пользователю привычно видеть контакты в правом верхнем углу экрана. Не нужно создавать ему трудности с поиском способа связаться с вами.http://service-stiralka.com

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

image12-1024x508.png

https://www.getresponse.ru

Призывы к действию лучше писать в повелительном наклонении. Например: “Закажи бесплатный замер”, “Оставьте заявку”, “Получите наше коммерческое предложение”, “Получите бесплатную консультацию”.

image21-1024x473.png

https://www.optimizepress.com

Лучше всего располагать одну кнопку призыва к действию на один разворот. Но иногда возникает необходимость создать сразу несколько кнопок. Тогда выделяйте цветом только основную, чтобы не было расфокусировки по цветам. Вот удачный пример:

image18-1024x502.png

https://www.leadpages.net

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

image3-1024x505.png

https://www.elegantthemes.com/plugins/divi-builder...

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

Сравните:

image24-1024x508.png

https://unbounce.com/pricing/

И

image17-1024x420.png

https://platformalp.ru

У какого конструктора больше шансов получить ваши данные? Наверняка, у того, который требует от вас написать лишь 2 слова, а не заполнить 7 полей. А еще лучше, если вы предоставите пользователю возможность оставить свои контакты одним нажатием на кнопку соцсетей.

А вот пример оригинального призыва к действию с ноткой юмора: “Замолчи и забери мои деньги”.

image8-1024x504.png

https://designmodo.com/slides/

Почему бы и нет?

Выводы:

Теперь вы знаете четыре ключевые компонента, которые помогут вам сделать лендинг идеальным:

  • дескриптор,
  • оффер,
  • призыв к действию,
  • утепляющие триггеры.

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

image5-1024x500.png

https://ukit.com/ru

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

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Мария Ковалева
Мне кажется должен быть 5 компонент. Внимание к картинкам и шрифтам.
Пример с суши - заболели глаза от союза этого изображения и этого шрифта. Неважно насколько хороша услуга, важно то что с сайта захотелось уйти. Многие лэндинги грешат неправильно подобранным визуальным контентом. Много мелких деталей, вычурные шрифты, отсутствие свободного пространства и т.д.
Ответить
Диана Вишнёва
Ну, это уже не совсем компонент, но тоже верно;)
Ответить
Lex Klimin
Крайне познавательно.
Ответить
Диана Вишнёва
Спасибо ;) Если вам интересна тема лендингов, то совсем скоро выйдет целый гайд по этой тематике на нашем блоге. Так что следите тут http://blog.icondesignlab.com/ru/.
Ответить
Марина Семехина
Понимаю, что мой совет выходит немного за рамки контента лендингов, но блин, для тех, кто только осваивает этот инструмент - отчаянно рекомендую - либо использовать для лендингов корректные платформы с функциями хотя бы минимальной CRM, либо сразу думать про какую-то простейшую интеграцию. И конечно просится продолжение темы с анализом лендинг-платформ)
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.