Советы, как выстроить структуру лендинга, от UX/UI-дизайнера Анастасии Шек. Разбираем основные блоки лендинга, а также удачные и неудачные примеры.
Сайт Анастасии, канал в Telegram.
Лендинг — один из инструментов продвижения товаров и услуг в бизнесе. Аудиторию приводят на лендинг и надеются, что она купит товар или услугу, запишется на вебинар, подпишется на рассылку или бота.
Иногда этого не происходит. Люди приходят на лендинг, знакомятся с информацией — и уходят. Так может происходить, если у лендинга нет чёткой структуры. В статье разберёмся, какие есть основные блоки лендинга и о чём стоит писать в каждом.
Хотите разобраться, как выстроить работу в маркетинге и зарабатывать в разы больше? Хотите быть в курсе всех трендов и работающих подходов в продвижении? Подпишитесь на журнал от команды Дмитрия Румянцева «Точка доступа». Это бесплатно.
Базовая структура лендинга
Основное отличие лендинга (landing page) от многостраничного сайта — его узкая направленность и концентрация на одной-единственной цели. Задача лендинга — заинтересовать и удержать пользователя, побудить к совершению ключевого действия. А значит, контент должен поэтапно знакомить пользователя с вашим товаром или услугой.
Классическую структуру лендинга рассмотрим ниже. Она может меняться в зависимости от цели сайта (хотите вы получить заявки на платный курс или приглашаете на бесплатное обучение или подписаться на email). То есть очерёдность блоков может быть разной, здесь же перечислены обязательные для лендинга разделы.
- Первый экран, обложка с оффером. Задача — заинтересовать пользователя и побудить узнать о товаре/услуге больше.
- О компании — краткий рассказ о вашей компании с фактами (лучше в виде цифр) и преимуществами.
- Описание товара или услуги.
- Выгоды для аудитории: что получит пользователь в результате заказа товара/услуги у вас.
- Социальные доказательства: убеждают, что продукт уже помог или улучшил жизнь других людей.
- Стоимость и призыв к действию: показывают, сколько стоит ваша услуга и что в неё входит.
- Ответы на частые вопросы: отрабатывают возможные возражения.
- Контакты: должны давать несколько каналов связи — телефоны, почта, форма для обратной связи и социальные сети. Также контактная информация размещается в верхнем меню, обычно там достаточно телефона и соцсетей.
Рассмотрим обязательные блоки landing page подробнее.
Экран 1. Обложка сайта
Обложка должна в течение 2 секунд заинтересовать пользователя, побудить его листать сайт дальше.
Обложка лендинга состоит из набора обязательных элементов: иллюстрации/фото или видео, заголовка, описания, кнопки призыва к действию. Дополнительно можно разместить и другие элементы: форму, ссылки на соцсети, вторую кнопку, цифры или краткие факты-преимущества. Я отношу к обложке также и меню, хотя это отдельный блок сайта. Но пользователи обычно воспринимают меню и обложку как единое целое.
Помните: в обложке главное — текст, а изображение играет второстепенную роль.
Пример плохой обложки, где контент теряется на фоне изображения.
Пример обложки лендинга, где хорошо виден заголовок, а фото служит как дополнительный элемент визуального восприятия информации.
Случается, что даже на обложке лендинга нет кнопки призыва к действию либо чёткого оффера и описания.
Пример обложки без кнопки.
Пример обложки без меню, кнопки и описания.
Заголовок и описание должны быть понятными, здесь мы обычно размещаем оффер. Иногда про оффер либо забывают, либо прописывают только его, не говоря о том, кто вы и что предлагаете. А в этом случае не всегда понятно, куда попал человек.
Пример обложки, где главным является оффер, а то, что это лендинг компании по проведению канализации, написано мелко вверху. Также обложка перегружена маркетинговыми элементами, которые прямо кричат «Закажи».
Пример хорошей, понятной обложки лендинга. Здесь мы видим чёткий заголовок и описание, по которым ясны оффер, ЦА, география предоставления услуг. Даны две кнопки, так как есть онлайн-консультации.
На обложке лендинга обязательно должна присутствовать кнопка действия: зарегистрироваться, оставить заявку, купить. Можно разместить дополнительную кнопку, если она соответствует цели вашего сайта. К примеру, главная кнопка будет вести на услугу, а вторая — на запись для тех пользователей, которые уже знакомы с вашим сайтом. Кнопка на обложке — привычный для пользователя паттерн, мы невольно ожидаем её увидеть там.
На этой обложке лендинга нет CTA, мы не даём пользователю возможность зарегистрироваться. Да, кнопка есть в меню, но люди ленивы по своей природе, они не хотят совершать дополнительных действий. Наша задача — облегчить их взаимодействие с сайтом.
Обложка с двумя кнопками: главная выделена цветом, вспомогательная сразу даёт возможность зарегистрироваться.
Обложка может быть сложной, с дополнительными элементами. Но в этом случае важно правильно расставить акценты и не перегружать пользователя информацией. Такими навыками обладают UX-дизайнеры, знающие паттерны поведения пользователя.
Пример обложки, которую очень сложно воспринимать: глаз не может зацепиться за что-то одно, слишком много акцентных элементов.
В этой обложке лендинга мы сразу видим главный элемент — заголовок. Изображения (слайдер) наглядно показывают дома, подкрепляя заголовок. Преимущества не броские, не мешают восприятию. Есть и маркетинговая составляющая в виде формы.
Экран 2. О компании
Расскажите в этом блоке лендинга о том, кто вы, как давно на рынке, почему работать с вами выгодно. Мы всегда гордимся своими достижениями, только другим читать об этом зачастую неинтересно, поэтому полотна текста здесь не нужны. Лучше показать ваши достижения цифрами, они скорее зацепят глаз. 2–4 предложения с описанием вашей компании вполне достаточно. А если показываете преимущества, то используйте карточки и вы-технику: когда текст пишется с позиции «вы получите».
Вы что-то смогли здесь прочитать? Я даже не пыталась.
Хорошая обложка: понятный заголовок, краткая информация о компании и цифры, за которые сразу цепляется взгляд.
Здесь вместо текста о компании показали преимущества. Карточки с преимуществами аккуратные, есть заголовок и краткое описание. А броская цифра говорит о том, что компания давно на рынке.
Экран 3. Описание товара или услуги
Этот блок лендинга даёт информацию о ваших товарах. Опишите ваш товар или услугу как можно полнее. Чем больше потенциальных вопросов вы закроете описанием и характеристиками товара, тем лучше. Однако во всём нужен баланс. Описание товара на половину экрана читать вряд ли станут.
Компания занимается проведением водоснабжения, канализации и отопления. Вряд ли вы сразу это поняли из содержания блока.
А здесь мы сразу понимаем, что речь идёт о чистке мебели.
Хороший пример карточек с услугами. Они интерактивные: при наведении появляется полное описание услуги. Так мы не создаём когнитивной нагрузки на пользователя. Услуги видно сразу, а если пользователь чем-то заинтересовался, то прочитает подробную информацию на карточке.
Экран 4. Выгоды для аудитории
Этот блок лендинга рассказывает о том, что получит пользователь в результате заказа товара/услуги у вас. Я советую говорить о преимуществах от лица пользователя: не «мы доставим товар за 1 день», а «вы сможете пользоваться товаром уже завтра».
Такой текст не хочется читать, несмотря на разделение по ЦА. Текстовый контейнер слишком широкий, глаз человека легко читает текст шириной не более 700 px, а здесь текст почти во весь экран.
А здесь хороший пример подачи преимуществ в виде карточек. Есть заголовки и описание.
Экран 5. Социальные доказательства
Это отзывы, благодарственные письма, примеры использования, которые убеждают, что продукт ценный и уже помог другим. Лучше, если отзывы представлены в формате видео, к ним возникает больше доверия. На сайтах мероприятий, например, можно размещать видео с интервью, которое берут во время мероприятия или сразу после.
Такие отзывы нечитаемы. Изображение мешает, текст широкий и тонкого начертания. Блок с отзывами лучше не делать на фоне с фотографией.
Тут всё аккуратно, отзывы в виде карточек, есть рубрикатор (отзыв клиента или партнёра). Также есть кнопка.
Экран 6. Стоимость и призыв к действию
В этом разделе сайта-одностраничника мы показываем стоимость, тарифы, что в них входит и чем они отличаются. В этом блоке лендинга нужно обязательно разместить кнопку призыва к действию.
Такую подачу цен сложно воспринимать. Сами цены не бросаются в глаза, к тому же мы ничего не понимаем в септиках и из названия модели не можем сделать каких-либо выводов.
На сайтах, где цена рассчитывается в зависимости от проекта, следует указывать минимальную стоимость для ориентира.
Здесь тарифы даны карточками — наглядно видно отличие одного тарифа от другого. Цена написана крупно, мы видим, что это цена со скидкой (маркетологи тоже остались довольны), также есть кнопка.
Экран 7. Ответы на частые вопросы
В этом блоке лендинга мы можем отвечать на повторяющиеся вопросы и закрывать возможные возражения.
Не очень хороший пример лендинга. Блок с вопросами лучше делать простым по дизайну. Ведь главное здесь — тексты. А на этом сайте первое, на что наш глаз обращает внимание, — человек, затем кнопка и только потом сами вопросы.
Более стандартный, легко читаемый блок — хорошо.
Экран 8. Контакты
В разделе контактов на лендинге я советую давать несколько каналов для связи и лид-форму. Кто-то хочет позвонить и решить свой вопрос сейчас же, а другой человек может стесняться и предпочитает писать в мессенджерах. Кто-то захочет прочитать отзывы в социальных сетях, а кто-то долго принимает решение о покупке, подпишется на вас и будет прогреваться.
Также, если у вас есть офис или магазин, разместите интерактивную карту с адресом и часами работы.
Разный шрифт в заголовке выглядит неряшливо, заголовок и описание мелкие, а блок на карте с адресом слишком узкий.
В этом примере лендинга есть форма, телефон, соцсети и даже дополнительное меню.
Вы можете добавлять другие блоки в зависимости от специфики сайта, главное — выстраивать их в логической последовательности, постепенно подводя посетителя к совершению целевого действия.
