Лендинг

Это статья о дизайн-паттерне

от англ. landing page — посадочная страница

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

 

Простейшая вёрстка типичного лендинга. Скачать исходник

 

Проблема

Продукту требуется специальная страница, которая максимально эффективно рассказывает о нём и продаёт, используя все доступные средства: хорошую типографику, красочные иллюстрации, видео и анимацию.

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

Решение

Лендинги могут быть эффективным инструментом лидогенерации и продаж через интернет. Они рассказывают людям о преимуществах продукта и убеждают стать клиентами. В отличие от других паттернов, вариант вёрстки может быть самым разнообразным, поскольку дизайнер чувствует пространство для экспериментов.

Механизм работы

  1. Сформулировать понятное торговое предложение.
  2. Сделать целевое действие очевидным.
  3. Сделать предложение привлекательным, за минимум картинок и слов убедить на покупку.
  4. Нагнать на лендинг целевого трафика.
  5. Отправить клиента на страницу оплаты или собрать контакты для дальнейшей продажи через менеджера.

Для паттерна характерно:

Делать фокус на торговое предложение

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

Использовать полноэкранные фотографии

Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране. В англоязычной терминологии он называется hero (герой). Если первый экран не может заинтересовать пользователя, он отскочет и не будет листать на второй. Обычно лишь небольшая часть посетителей долистывает до третьего.

Сделать целевое действие очевидным и крупным

Когда пользователь решил сделать целевое действие, мы должны заткнуться, затаить дыхание и не мешать ему максимально быстро и удобно пройти по сценарию продажи.

Не отвлекать посторонней информацией

Если пользователь не спрашивает, мы не грузим его лишней информацией, сохраняя его внимание для той информации, которая действительно важна в принятии решения о покупке. Лендинг, который пытается продать всё и сразу, теряет фокус пользователя, а следовательно, конверсию.

Быть готовым к целевому действию

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

Замерять конверсию

Ключевое понятие при работе с любым лендингом — показатель конверсии. Это отношение количества посетителей к количеству совершённых целевых действий. Для измерений используются системы аналитики, например, Яндекс.Метрика.


Частые ошибки

Чаты в углу экрана

Всплывающие чаты могут быть эффективны, если лендинг ориентируется на быстрые продажи, в которых человек совершает покупку импульсивно. Если покупка требует времени на принятие решения или спрашивать консультантов нечего, чаты ухудшают пользовательский опыт и загаживают дизайн. Самая ужасная ситуация — когда тёплый клиент пишет в чат, а ему не отвечают, и он тратит время на ожидание. На следующее утро ему перезванивать уже бессмысленно. На ровном месте пустынные чаты без менеджеров формируют негативное отношение.

Слайдер скрывает важное

Дизайнеры любят куда-попало вставлять слайдеры, потому что им кажется, что анимация листалки предаёт динамики их дизайну. Слайдеры хороши только для показа дополнительного контента. Если это лендинг для продажи рюкзака, в слайдере в нижней части лендинга можно разместить крупные планы карманов и молний. Слайдер повышает логическую нагрузку страницы и заставляет пользователя напрягаться. На лендинге вполне можно обойтись без слайдера и его дизайн от этого не пострадает. Особенно раздражает, когда слайдер крутится без участия пользователя и его нельзя остановить. Это лишает пользователя контроля над сайтом и ведёт к отказам. Слайдер уместен только на странице фотогалереи.

Перегруз информации

Человек, который зашёл на лендинг, не заинтересован, чтобы на него вывалили неусваиваемую простыню текста и 50 тяжёлых фотографий. Чем больше разнопланового контента, тем больше риск потерять фокус на основном торговом предложении. Задача лендинга — нажать на те болевые точки человека, чтобы он купил. Контента должно быть ровно столько, чтобы продать. Если продукт простой, не нужно высасывать контент из пальца.

Блок «Поделиться»

Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Цветастые кнопки шеринга отвлекают от продажи и могут снижать конверсию. Рассчитывать на виральность не стоит. Люди умеют копировать ссылку в свою соцсеть, если действительно хотят чем-то поделиться. В крайнем случае допустимо сделать шеринг-кнопки серыми и неприметными.

 


Примеры

1. Лендинги айфонов — нескончаемый источник опыта для дизайнеров. Они задают моду, словно открытая книга о том как делать дизайн. Эпл умный. Будь как Эпл.

2. Behance: поиск по запросу landing

3. Awwwards: коллекция лендингов для кинофильмов

4. Очень крутой урок Дмитрия Панова о том как сделать Лендинг про банан

5. Bellroy – Slim Your Wallet.