На вебинаре об ошибках на посадочных страницах, прошедшем 30.10.2014 , меня попросили привести примеры идеальных лендингов. Я отшутился в том ключе, что мол нет пределов совершенству, но понял, что народ жаждет новых образцов для подражания, в дополнение к тем, что я уже приводил или .
Разумеется, я вижу некоторые ошибки на этих посадочных страницах. Особенно я Но, мне нравится работа дизайнеров, поэтому я делюсь этими примерами с тобой. Ну, а ошибки ты сможешь найти и сам, если посмотрел запись вышеупомянутого вебинара 🙂
Напоминаю, что картинки кликабельны – они ссылаются на полные скриншоты лендингов. Объем которых не слишком дружелюбный для мобильной связи – до 5Мб.
Очень нравится фокус дизайнера на “главном герое” лендинга. А так же третий экран, на котором уделено внимание ключевым особенностям товара. К серьёзным недочётам, кроме тех, о которых говорил на вебинаре, отнесу объединение на одной странице обуви, предназначенной для разных сезонов.
Ура! Есть видео с автомобилем в действии. Не ура – на видео маленькие корейцы. Но продаём-то не им 🙂
Что гораздо серьёзнее, гарантированное зависание для пап: чем белая машина отличается от чёрной. И стоят ли эти отличия 3200 рублей. Остальные недочёты подчеркнёт следующий лендинг.
Как должен выглядеть лендинг с точки зрения эффективности? Какие блоки он должен содержать и как эти блоки должны выглядеть? Прочитав статью, вы получите ответы на эти вопросы и увидите, как выглядят лучшие landing page.
У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:
Размещается заголовок в верхней части лендинга, на уровне глаз пользователя. Большой, яркий, интригующий.
От заголовка зависит показатель отказов.
Вот примеры заголовков лучших лендингов нашей компании.
Дескриптор также влияет на показатель отказов, хоть и меньше, чем заголовок. Обычно состоит из логотипа, названия компании, слогана или нескольких слов об услугах или товарах. Размещается вверху слева или в середине.
В том случае, если на посадочной странице есть заголовок с УТП, дескриптор делают скромным – лого плюс название.
Лучшие лендинги всегда содержат оригинальный дескриптор.
Как правило, размещается в верхнем правом углу. Исчерпывающий блок контактов содержит:
Обязательно используется призыв – просьба позвонить.
Под изображением подразумевается фон – большая картинка, поверх которой размещают заголовок, форму захвата, другие блоки.
В идеальном лендинге изображение соответствует тематике сайта, является оригинальным и интересным. Цветовая гамма фона отличается от цвета шрифта заголовка, чтобы они не сливались.
На скриншотах вы видите красивые лендинги с привлекательными изображениями.
Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.
Форма захвата содержит графы для ввода имени и телефона. Призыв к действию описывает дополнительные выгоды (подарок, скидку, дополнительную услугу), которые побуждают посетителя к немедленной отправке данных.
Если на лендинге проходит акция, форма захвата содержит таймер обратного отсчета.
Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.
Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.
Блок имеет следующую структуру: текст с описанием выгоды и тематическая картинка для каждого пункта. Расположение пунктов – горизонтальное или вертикальное. В идеальном блоке во всех пунктах одинаковое количество текста, а ключевые предложения выделены цветом или жирным шрифтом.
Блок с отзывами – ключевой в лендинге.
На лендинге должны быть реальные отзывы по меньшей мере от трех клиентов. Идеальный вариант – окно с возможностью прокрутки, например слайдер, вмещающий 5–10 отзывов.
Каждый отзыв:
Вот примеры блоков с отзывами на лучших лендингах нашей студии.
Покупатели любят выбирать из нескольких альтернатив. Поэтому идеальный лендинг предлагает на выбор 2–3 тарифа или пакета. Неважно, продает лендинг товары или оказывает услуги, на сайте должен присутствовать блок с тарифами.
Тарифы должны отличаться друг от друга и содержать подробную информацию о том, что в них включено. Один из тарифов помечается, как самый популярный среди клиентов.
Это один из самых важных блоков лендинга. Именно просмотрев портфолио или кейсы, посетитель принимает решение о совершении целевого действия.
Грамотное портфолио содержит только лучшие работы, красиво оформлено, не занимает много места. Для оформления лучше использовать слайдер, с помощью которого посетители будут прокручивать изображения.
Посмотрев примеры лендингов посетитель должен убедиться в качестве продукта или услуги.
Заключительный триггер доверия – блок с контактной информацией о компании или авторе в футере.
В случае с компанией обязательно должна быть карта с указанным местоположением офиса. В случае с автором всевозможные контакты.
Также тут размещается заключительная форма захвата.
В идеальном лендинге присутствуют все вышеперечисленные элементы. Однако чтобы посадочная страница действительно была эффективной, все ее блоки нужно грамотно объединить в одну композицию. А так же добавить смыслы, благодаря которым посетители совершать конверсионные действия на нашем лендинг пейдж.
Лендинги стремительно ворвались в мир интернет-маркетинга, потеснив привычные сайты. Если раньше использовались только 2 типа landing page – одностраничники и многостраничники, то сейчас подвиды лендинга вырастают как грибы после дождя. Давайте рассмотрим ТОП-15 типов одностраничников с примерами, чтобы лучше понимать, с чем сегодня можно работать.
Давайте начнем хит-парад с лендингов «О нас». Согласитесь, куда лучше: вместо скучного текста из пары абзацев в соответствующем разделе сайта создать полноценный лендинг. Это как паспорт в красивой обложке – он и расскажет о главных преимуществах/задачах/ценах, и привлечет внимание.
Ниже пример вики-лендинга, который рекламирует футбольную школу. Тут есть типовые блоки одностраничников – «О нас», преимущества, отзывы. И все это позволяет сделать функционал vk. Кстати, Петр Панда был одним из первых копирайтеров в Рунете, кто начал писать тексты для лендингов Вконтакте.
Это еще один лидер среди посадочных страниц. На главной странице нужно уместить много данных – краткое описание, мини-каталог или описание нескольких продуктов, преимущества, возможно даже цены, контакты, виджеты. Чтобы читатель не устал от этого массива информации, нужно взять на вооружение интерактивность лендингов.
На примере ниже – Landing Page, который понравится даже детям. Поэтому он вызывает доверие у родителей, которые и будут платить за шоу. Помимо ярких красок и фото счастливых детей, тут есть несколько типов сценариев, видеоотзывы и т.д. Остальные подразделы («Узнать подробнее», где описываются типы шоу, цены и т.д.) могут быть выполнены уже не в виде лендинга.
И еще один пример
Такие сайты не будут иметь каталога, описаний плюсов бренда или блока с контактами. Они создаются для косвенной рекламы или просто ради узнавания бренда. Прикольные флеш-игры точно запомнятся пользователю. Если хотите повысить доверие к продукту или подогреть ЦА – берите на заметку.
На примере – игра «Съешь бомбу», она особо не нагружает пользователя и затягивает. К тому же, это ненавязчивый рекламный ход компании The FWA.
Не только полезная информация может быть оформлена креативно. В виде одностраничника можно оформить даже страничку 404. Если пользователь на вашем сайте зашел не на ту страницу, красивая, смешная или даже игровая точно заставит их продолжить серфинг по сайту.
Предложите пользователю ссылки на другие разделы сайта. Так он с большей вероятностью не закроет страничку. На примерах ниже – не только прикольная графика, но и возможность в один клик перейти на домашнюю страницу или другие странички сайта. Мелочь, конечно, но ведь успех и состоит из мелочей!
Если вы хотите, чтобы о мероприятии узнала ЦА – делайте лендинг. , программу события и т.д. смотрится очень скучно, если сделан сплошным полотном, и даже марикрованные списки не помогут удержать внимание читателя до конца.
Вы сможете от блока к блоку подогревать интерес, не теряя читателя, показать в виде удобных блоков программу, спикеров, подчеркнув преимущества иконками. А «вишенкой на торте» будут видео-отзывы, фото с предыдущих событий с анимированными переходами и другие мультимедийные приемы. И не забудьте про триггеры – скидка за регистрацию до определенного числа или за приведенного друга не будет лишней.
Ниже пример длинного лендинга, который дает много концентрированной информации, поэтому вы не теряете ЦА и они доходят до самого конца текста.
Выделяют еще много подтипов лендингов, например, одностраничники без структуры или с автоворонкой, но выше – самые частоупотребляемые. Если вы можете оформить любую страницу сайта на лендинг или заменить веб-ресурс на одностраничник – смело делайте это, потому что пользователей Сети уже не удивить текстом с удобной структурой, им подавай современный дизайн, анимацию и привлекательные триггеры 🙂
В этой статье мы рассмотрим 5 примеров лучших лендингов, взятых с behance.net, признанного мировыми дизайнерами самым популярным сайтом по веб-дизайну, иностранными заказчиками для поиска разработчиков и лучшим для вдохновения и черпания новых идей.
Ниже представлены лучшие лендинг пейдж, которые прошли отбор, непосредственно, нашей веб-студией. Мы взяли ТОПовые работы на сайте и выбрали landing page с наиболее эффективными продающими структурами, ведь именно продающая структура является главным преимуществом лендинга.
Дамы и господа! Знакомьтесь, самые крутые и лучшие продающие лендинги 2017-2018 по версии и популярного сайта behance.net.
Чтобы упорядочить примеры лучших лендингов, мы решили разбить их на блоки, свойственные продающей странице. Мы рассмотрим УТП, описание продукта, выгод и преимуществ, блок доверия и СТА на примерах отобранных лендингов. Вы сможете увидеть варианты оформления и структуры, почерпнув для себя ценную информацию и новые идеи.
Первый пример УТП лучшего лендинга 2019 года - фирма по продаже стульев.
Первое, что бросается в глаза - это фотография товара. Стильный стул действительно привлекает внимание, которое разжигается уникальным торговым предложением. Заметьте, УТП в этом случае нестандартное, отсутствуют какие-либо факты о компании или выгоды покупки. Но при этом мощный продающий текст и качественное изображение делают свое дело - повышают интерес посетителя, в чем и заключается принцип продающей структуры. Стоит сразу сказать, что то самое преимущество продукта размещено на втором и третьем слайде первого экрана.
Каждый слайд содержит фотографии товара с разных ракурсов и описание к нему. Очень мощный ход, который мотивирует читателя проскроллить страницу чуть ниже. Смотрите больше примеров посадочных страниц и черпайте новые идеи для своего проекта.
Следующий пример лучшего, по нашему мнению, лендинга - посадочная страница фирмы по продаже меда
Сочно, ярко, интересно. Очень крутой дизайн первого экрана. При этом уникальное торговое предложение раскрывает главное преимущество - экологичность продукта. УТП написано в мягкой форме, но при этом вызывает доверие.
Следующий пример лучшего лендинга
Первый экран совместил в себе УТП, предоставляющее ценность потенциальному клиенту, а также небольшой список кратких преимуществ. Очень интересно сделан снимок продукта, который на подсознании вызывает желание сделать заказ. Что, в общем-то, и предлагает эффективный лендинг на первом экране.
Первый экран с УТП содержит текст, вызывающий интерес, 3 преимущества производителя, СТА с кнопкой и видео, позволяющее узнать больше информации о компании. Экран оформлен красивым фото меблированного интерьера, подчеркивающее эксклюзивность продукта.
Еще один пример крутого landing page
Сразу бросается в глаза абсолютная нечитабельность текста. Зачем разработчики оформили текст белым цветом на белом фоне остается загадкой. Но, повторимся, лучший леднинг - тот, у которого четко проработана продающая структура, а этот пример работы относится именно к таким. Стильный экран с не очень эффективным еле просматриваемым УТП. К сожалению, фотография услуги компании не дает представление о ее деятельности - большой промах разработчиков.
Хотите узнать больше о УТП? Читайте статью с рекомендациями по созданию УТП на сайте Импульс Дизайн.
На первом примере посетителю предоставляется возможность просмотреть вариации продукта и выбрать его вид. Блок очень удобен с точки зрения пользования. Все фотографии из каталога размещены в виде слайдеров, есть кнопки выбора цвета коробки и приведены примеры готовых работ. Посетитель визуально понимает что ему предлагают. Если он решился на заказ продукта, поможет ему в этом кнопка "Заказать".
Следующий пример описания продукции лучшего продающего лендинга содержит большие и яркие фотографии и категории.
Кроме того, для удобства посетителя предусмотрена лидогенерирующая кнопка. Она "убивает" сразу двух зайцев. Посетитель получает интересующую его информацию, а компания - клиента.
Продающая структура лендинг пейдж должна заключать в себе удобство для пользователя. Удобство во всем: принятии решения и его выполнения, просмотре товара. В случае со следующим примером описания товаров удобство пользования раскрывается на 100%.
Во-первых, представлены виды продукции, во-вторых, под каждым видом есть лидогенерирующая кнопка. При наведении мышкой на стул, меняется фотография и продукт представляется в другом положении, что помогает пользователю понять принцип эксплуатации продуктом и его вид.
Следующий продающий леднинг содержит полный каталог продукции, предоставляемой компанией. Отдельный плюс - красивое оформление и соответствие цветов общей тематики сайта.
Лаконичность - лучший друг лендинга. И следующий пример лучшего лэндинга это подтверждает.
Стильно и скромно, на белом фоне сделан акцент на фото и небольшое описание улуги с лидогенерирующей кнопкой. Остальные услуги сделаны в виде активных ссылок, при кликании на которые открываются другие фотографии с описаниями, соответствующие услугам.
Выгоды и преимущества фирмы для клиента являются эффективной мотивацией. Как правило, преимущества размещаются в начале сайта для разжигания интереса пользователя, а выгоды - ближе к концу, подталкивая посетителя к целевому действию. Оба блока должны содержать ценную информацию, отвечать на вопросы, подавлять страхи потенциального клиента. Рассмотрим на примерах крутых landing page.
Преимущества
Оба блока раскрывают ценности фирмы и конкретного товара. Читатель понимает где можно использовать продукт, его качественные характеристики. В качестве дополнения продемонстрированы конкурентные преимущества самой компании.
Следующий лендинг объединил в себе преимущества и выгоды. Читая и просматривая контент, пользователь убеждается в профессионализме производителя, что подавляет его основной страх - получить низкокачественный товар. Этот триггер демонстрирует лучший пример конверсионного лендинга .
В этом же блочке внедрена фишка, повышающая доверие пользователя к компании - видеоролик, который подробнее расскажет о производителе.
Аналогичное совмещение выгод и преимуществ показывает и следующий лендинг.
В этом случае устраняются страхи. Потенциальный покупатель знает, что натуральный мед - дикая редкость. В случае с одностраничником подтверждается натуральность продукта цифрами. Кроме того, пользователь может получить информацию о продукте, кликнув на кнопку и связавшись с представителями компании.
Еще один блок преимуществ выполнен в очень стильном дизайне и, в целом, довольно интересен. Просматривается профессионализм дизайнера, что однозначно привлекает внимание.
Казалось бы, преимущества можно описать 4 словами "Доставка по всей России", но графическая карта добавляет лендингу уникальности. К тому же, сама карта имеет тематическую направленность, что делает лендинг ну очень крутым.
ТОП лучших лендингов содержит интересные и эффективные решения. Следующий landing имеет небольшой блок преимуществ, который размещен сразу под блоком с УТП. Блок выгод оформлен отдельно и отвечает клиенту на вопросы стоимости, а также усиливает желание за счет скидок.
И еще один продающий лендинг, который раскрывает преимущества компании и выгоды для клиента. В качестве преимуществ описан принцип работы компании, который подавляет существующие страхи.
Усиливается желание благодаря небольшому блоку выгод
При этом компания демонстрирует выгоды для клиента не только тем, что использует во время процедуры качественные продукты, но и намекает о том, что косметика в продаже. Чему и свидетельствует кнопка с СТА.
Блок доверия не является обязательным требованием для лендинга, в отличие, например, от блока call-to-action. Однако он помогает пользователю решиться на целевое действие. Ведь лендинг, исходя из своей специфики, не предусматривает большое количество информационного текста о компании. Следовательно, лучше, если блок доверия будет реализован другими способами. Посмотрим как с этим справились ТОПовые лендинги.
Вариант 1. Отзывы
Очень практично и удобно размещен блок отзывов на сайте. Отдельный плюс - фото реальных людей: не моделей, не снимков людей, откровенно взятых из Интернета.
Вариант 2. Видео
Пожалуй, видео - один из самых эффективных способов повлиять на человека. Видеообращение всегда повышают доверие из-за прямого контакта с пользователями, которые уже стали клиентами и передают свои эмоции "вживую".
Вариант 3. Фотографии
Очень часто в качестве повышения доверия размещаются фотографии реальных специалистов, которые работают в компании. В нашем случае принято решение разместить реальные фотографии салона. Глядя на них, создается впечатление элитности. А элитное не может быть низкокачественным. Следовательно, доверие к компании усиливается.
Первый лендос имеет "сочный" СТА, оформленный в едином стиле с сайтом. Желание сделать заказ усиливается скидкой.
Единственный минус - блок размещен в середине страницы. В идеале, нужно было разместить еще один призыв в самом конце, вместо этого добавлены небольшие кнопки, которые не сразу бросаются в глаза.
Следующий призыв к действию содержит не только лидогенерирующую кнопку, но и дополнительные выгоды для клиента. Очень продуманный призыв.
Завершает наш обзор еще один призыв к действию, оформленный в сочных тонах, привлекающих внимание.
Как видите, продающая структура продающей страницы является главным и мегаважным инструментом для повышения конверсии сайта. Нельзя сказать какая из структур, приведенная в лучших лендингах, будет наиболее эффективной. Скажем только одно: каждая структура должна максимально соответствовать потребностям целевой аудитории и максимально раскрывать преимущество компании/продукта/услуги. Добавьте к этому стильный и яркий дизайн, и вы обязательно получите ошеломляющую конверсию лендинга . Ну, а если вы пока не в силах создать свой продающий одностраничник, вы всегда можете заказать landing page у нас .
На этом все! Ставьте лайки и подписывайтесь на наш блог, чтобы не пропустить самое интересное.
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о такой важной вещи как посадочная страница , которую очень часто на буржуйский манер называют лендинг пейдж (от английского landing page — целевая страница). Что же это такое и почему это так важно?
Давайте текущую статью как раз и посвятим ответу на этот вопрос, а также во всех подробностях рассмотрим те моменты, которые очень важны при создании лендингов, и рассмотрим все это на конкретных примерах landing page и тех приемах, что используются лучшими юзабелистами для повышения эффективности посадочных страниц.
Очень часто даже при правильной работе по привлечению нужных людей (целевой аудитории) на свой сайт ( , и т.п.) вы, как владелец бизнеса, не почувствуете от этого отдачи. Вроде бы и трафик идет, и аудитория является целевой, а продаж или подписок (смотря какое конверсионное действие вы выбрали в качестве основной задачи в ) практически нет. Ничего не работает. В чем может быть дело?
Скорее всего, вы забыли продумать и подготовить приземляющие (посадочные, целевые) страницы, которые часто называют лендингами . Что это такое?
А это очень важный момент, который может существенно повысить конверсию (количество покупок или регистраций), ибо landing page призваны максимально эффективно подводить пользователя к выполнению целевого действия . Если вы со всех рекламных объявлений будете направлять посетителей, например, на главную страницу сайта, то можете катастрофически снизить конверсию и вылететь в трубу.
Сам термин «лейдинг пейдж» образован от английской фразы «landing page», в переводе означающей как раз целевую, посадочную (приземляющую) страницу. Лендинги создаются не абы как, а с учетом психологии посетителей. Они должны цеплять и не отпускать их до самого момент покупки (или регистрации), ибо повторно привлечь посетителя будет уже архисложно.
Это как крючок на рыболовной снасти — он должен надежно подцепить и уверенно удерживать попавшуюся на него рыбу вплоть до того момента, как вы ее подсадком не зафиксируете. Если крючок (лейдинг) будет неподходящим или его не будет вовсе, то все ваши усилия от прикормки, установки наживки и прочих шаманских действий пойдут прахом. Конечной цели вы не достигните.
Сами по себе лендинги представляют из себя либо отдельные страницы уже существующего сайта, либо специально созданные под это дело сайты одностраничники. По сути, попав в которую пользователю уже довольно трудно выбраться и он неизбежно должен в нее сползать, пока не станет вашим клиентом. Но это в идеале, а вот как этот идеал реализовать применяя различные рекламные хитрости, мы и посмотрим в продолжении этой публикации.
В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:
Нужно понимать, что посадочные страницы, на которые будут привлекаться вами пользователи из социальных сетей (или из контекстной рекламы), должны обладать рядом характеристик и удовлетворять некоторым требованиям. Так как же создать идеальную лендинг пейдж ?
Ну а стрелки, как правило, призваны еще больше акцентировать внимание на кнопке, чтобы линия поведения пользователя на лендинге была как можно более прогнозируемой.
Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):
Рядом с таймером неплохо будет расположить форму подписки, заказа или контактный телефон. Это будет работать не всегда, поэтому надо проводить тесты (думаю написать ряд статей про проведение А/Б-тестирования — если не хотите пропустить, то подписывайтесь на рассылку), и возможно, что такой простой и очевидный способ позволит вам увеличить конверсию данной лендинг пейдж и с лихвой окупить деньги, потраченные на продвижение в социальных сетях или контекстной рекламе.
Естественно, что хорошо было бы при этом упомянуть достоинства, достижения, конкурентные преимущества, но не перехваливайте себя, дабы не перейти ту грань, за которой уже снижается доверие к опубликованной информации.
Кроме тех вещей, что помогают landing page более эффективно работать, стоит перечислить и часто допускаемые ошибки при создании посадочных страниц , которые могут нивелировать все перечисленные выше «финты ушами», и вы не получите желаемого результата от рекламы или продвижения в социальных сетах (либо контексте).
Дизайн посадочной страницы на самом деле очень важен. Если он не закончен, сделан непрофессионально или имеет отталкивающий для большинства пользователей вид, то даже соблюдение всех описанных выше правил создания хорошего лейдинга не убережет вас . Если вы сами не обладаете должными умениями и вкусом, или у вас нет в штате фирмы дизайнера, то можно воспользоваться многочисленными конструкторами или же готовыми шаблонами лендинга, которые останется лишь немного переделать под свои нужды.
Опять же, определить лучший вариант вам поможет тестирование и анализ статистики, например, (зачастую не все так очевидно, как может показаться). Таким образом, вы сможете отследить выполнение целевого действия и понять, какие элементы лендинга способствуют увеличению конверсии, а какие оказывают отвлекающее действие и должны быть изменены.
У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :
