Чек-лист по структуре Landing Page

Чек-лист Landing Page

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

Для вашего удобства данный чек-лист также можно скачать в виде PDF-файла: Скачать чек-лист

Содержание

  • 1. Шапка сайта
  • 2. Первый экран
  • 3. Товар/Услуга
  • 4. Основные блоки
  • 5. Прочие блоки
  • 6. Триггеры

1. Шапка сайта

Логотип

Логотип компании. Размещается в левом верхнем углу сайта.

Рекомендации:

  • Профессиональный дизайн
  • Если логотипа нет – можно использовать надпись «Название компании» или «Название сайта»
  • Глядя на логотип понятно, чем занимается компания

Пример: Логотип

Дескриптор

Размещается справа или под логотипом. Краткое описание деятельности вашей компании. Одно-два предложения. Ответ на вопрос «Чем занимается эта компания?».

Рекомендации:

  • Что продаем /какую услугу оказываем
  • География  (где оказываем услугу / продаем товар)

Пример:

  • Регистрация ООО и ИП в Москве и Московской области
  • Оптовая продажа сахара по всей России

Дескриптор

Меню

Размещается в центральной части шапки сайта. Ссылки на основные разделы лендинга. Если разделов много, и все они не помещаются в меню – добавляем в меню только основные разделы.

Пример: Меню

Контакты

Главные контакты компании. Самый крупный элемент в блоке – номер телефона. Каждый пункт визуализируем подходящей иконкой. Размещается в левом правом углу шапки.

Рекомендации:

В зависимости от дизайна в данном блоке размещаем:

  • Телефон (городской номер или 8-800)
  • Электронная почта (ссылка на новое письмо)
  • Адрес магазина/офиса
  • Время работы
  • Обратный звонок (ссылка с прерывистым подчеркиванием, вызывает форму заказа обратного звонка)

Пример: Контакты

2. Первый экран

Оффер

Главное предложение продукта/услуги для клиента. Располагается в центре первого экрана.

Рекомендации:

  1. Недвусмысленно и четко отражает ваше предложение
  2. Содержит УТП (уникальное торговое предложение), которое отличает вас от конкурентов
  3. Содержит факты, числа
  4. Если скидка, то не в процентах, а деньгах
  5. Затрагивает боль/страх клиента
  6. Соответствует рекламе, по корой перешел посетитель
  7. Посетитель может понять его за несколько секунд
  8. Фокусируемся на выгодах для клиента

Пример: Оффер

Подзаголовок

Необязательный элемент. Применяется если нужно дополнительно разъяснить оффер или привести конкурентные преимущества предложения. Располагается под оффером.

Рекомендации:

  • До 3-х предложений
  • Содержит факты числа
  • Числа визуально выделяем

Пример: Подзаголовок

Преимущества («буллеты»)

Основные преимущества продукта/услуги или компании. 3-6 преимуществ в виде «Изображение» + «Преимущество». Располагаются друг под другом. Блок с преимуществами располагается слева от формы захвата, под оффером и подзаголовком.

Рекомендации:

  • Преимущества с фактами и числами
  • Никакой «воды»
  • Не больше одного предложения

Пример: Преимущества

Призыв к действию (CTA)

Второй по важности элемент на первом экране после оффера. Мотивирует посетителя оставить заявку. Конструктор CTA: «Заполните заявку» + «Получите …»

Рекомендации:

  • Дает что-то бесплатное и ценное посетителю
  • Обещает скидку (не в процентах, а в деньгах)
  • Повелительное наклонение глаголов («Оставьте», «Заполните», …)

Пример: Призыв к действию

Форма захвата

Форма для ввода контактных данных посетителя. Располагается справа от преимуществ, под оффером и подзаголовком.

Рекомендации:

  • С уменьшением количества полей возрастает конверсия
  • Минимум полей (E-Mail уточнит ваш менеджер при звонке клиенту)
  • Внутри полей – «мини-CTA» («Введите имя», «Введите телефон»)
  • Кнопка отправки
    • Текст кнопки перекликается с CTA
    • Кнопка большая, ширина как у полей для ввода
    • Цвет кнопки – контрастный, выделяющийся на фоне других элементов
    • При наведении указателя мыши и нажатии на кнопку она реагирует
  • Под кнопкой текст о неразглашении конфиденциальных данных («Ваши данные в безопасности!», «Никакого спама! Мы и сами его ненавидим»). Текст можно дополнительно усилить иконкой замка.

Пример: Форма захвата

Фоновое изображение

Отображает суть вашего предложения. Располагается на заднем фоне у всех элементов первого экрана.

  • Если это продукт – то фотография вашего продукта в хорошем качестве.
  • Если услуга – то показан процесс.

Рекомендации:

  • Желательно использовать уникальные фотографии, именно с вашим продуктом/услугой
  • Если фотография покупается на фотостоке – подбираем фото, максимально подходящее для целевой аудитории лендинга
  • Никаких мексиканцев, афроамериканцев, поднятых пальцев вверх, и мужчин с телефонами и ноутбуками из середины 90-х
  • Никакого копирайта на фото
  • Приглушенная яркость

Пример: Фоновое изображение

3. Товар/Услуга

Подробно раскрывает ваше предложение. Отвечает на вопрос посетителя «А что конкретно вы предлагаете?»

Если на лендинге предлагается только 1 товар/услуга – то детально расписываем и визуализируем.

Если на лендинге предлагается несколько товаров/услуг  – то выбираем товары/услуги-локомотивы.

Конструктор: «Название» + «Изображение» + «Краткое описание» + 2 кнопки: «Подробнее» и «Купить»

Рекомендации:

  • При указании цены используем волшебную приставку «от…»
  • Цена – минимально возможная («при заказе от 100 000 тонн …»)
  • Качественные фотографии
  • Качественный текст описания
  • Возможность использования интерактивных элементов: 3D-проектов, анимации, калькуляторов и т.д.

Пример:

Товар или услуга

4. Основные блоки

Портфолио (или «Кейсы»)

Реальные примеры оказанных услуг.

Рекомендации:

  • Фотографии выглядят реальными
  • Краткое описание к каждому проекту
  • Если возможно, указать цену и сроки для каждого проекта
  • Если публикуется «кейс», то формат:
    • Поставленная задача
    • Процесс работы над проектом
    • Успешный результат
    • Полученный опыт
    • Отзыв заказчика

Пример: Кейс

О компании

Блок с информацией о компании. Отвечает на вопрос посетителя «Им можно доверять?»

Структура блока:

  • Текстовое описание
    • От 500 до 1000 символов. Несколько абзацев
    • Больше фактов и меньше воды
    • Позиционирование как экспертов рынка
  • Фотографии офиса/магазина/производства
    • Желательно реальные фотографии, не обязательно профессионального качества
  • Знакомство с сотрудниками
    • Фотография сотрудника и краткое описание
    • Упоминание званий, наград и регалий
  • Документы (сертификаты, грамоты, лицензии)
    • Сканы документов o
    • Если настоящие – то в хорошем качестве, при нажатии – увеличиваются
    • Если ненастоящие – делаем некликабельными

Примеры: О компании   Документы

Схема сотрудничества

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

Рекомендации:

  • Только основные элементы
  • Нет блока про предоплату/оплату
  • Последний этап – указываем положительный опыт клиента

Пример:

Схема сотрудничества

Клиенты, партнеры

Блок с логотипами компаний-клиентов/партнеров/поставщиков.

Рекомендации:

  • Чем известнее компания, тем лучше
  • Изображения некликабельны
  • Желательно указывать реальных клиентов/партнеров
  • Если указываем нереальных клиентов/партнеров – то таких, которых нельзя проверить

Пример: clients

Отзывы

Отзывы клиентов. Крайне важный элемент. Конструктор: «Фото» + «Имя» + «Текст отзыва».

Рекомендации:

  • Много отзывов не бывает
  • КРАЙНЕ желательно использовать реальные отзывы
  • Возможно использование видео- и аудио-отзывов
  • Реальные фотографии людей
  • Если пишем отзывы сами – читаем отзывы на товары в Яндекс.Маркете

Пример: Отзывы

Вопрос-Ответ

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

Рекомендации:

  • От 5 до 20 штук
  • Вопросы берем, опросив ваших менеджеров и реальных клиентов
  • Отвечаем на вопросы максимально информативно

Пример: Вопрос-Ответ

Контакты

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

Рекомендации:

  • Интерактивная карта Google Maps или Яндекс.Деньги на заднем фоне
  • Блок с полной контактной информацией
  • Блок с формой отправки сообщения с полями «E-Mail» и текстовым полем ввода вопроса

Пример: Контакты

5. Прочие блоки

SEO-блок

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

Рекомендации:

  • От 1000 символов
  • Подзаголовки
  • Списки
  • Текст располагаем под «хайдом» (открывается при нажатии на ссылку)
  • Блок располагаем ближе к началу лендинга

Пример: SEO-блок

География работы

Блок, который позиционирует вас как лидеров и экспертов. Обычно представлен в виде карты РФ с отмеченными городами. Может быть статичным изображением или интерактивным (показывается дополнительная информация при наведении на каждую отметку).

Пример: География работы

Блок закрытия

Размещается перед блоком «Контакты» в подвале. Обычно в данном блоке посетителю делается ценное предложение или еще раз приводятся конкурентные преимущества.

Пример: Блок закрытия

Политика конфиденциальности

Стандартный юридический текст для прохождения модерации в рекламных системах. Скачать образец «Политики конфиденциальности».

6. Триггеры

Дополнительные элементы на лендинге, повышающие доверие и заставляющие выполнить целевое действие.

Таймер

Устанавливается на первом экране. Относится к призыву действию.

Рекомендации:

  • Время или количество товара
  • 1 день > время > 1 час
  • После обнуления таймер запускается заново
  • Время таймера привязано к реальному времени, а не времени нахождения посетителя на сайте

Пример: Таймер

Виджеты социальных сетей

Лайки, «мне нравится» и т.д.

Рекомендации:

  • Чем больше лайков – тем лучше
  • Настоящие виджеты, а не картинка

Пример: Виджеты социальных сетей

Он-лайн консультант

Используется для оперативной связи клиента и менеджера.

Рекомендованные он-лайн консультанты:

Пример: Он-лайн консультант

Промежуточные формы

Повтор формы призыва к действию и формы захвата из первого экрана через каждые 2-3 блока landing page.

Пример: Промежуточная форма

Заключение

Для вашего удобства данный чек-лист также выполнен в виде PDF-файла: Скачать чек-лист  Высокой конверсии и роста продаж!

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *