Анализ формата Landing Page. Функциональные компоненты

Чтобы сделать Landing Page, нужно понять, из каких блоков она состоит, чем они наполнены, и как их оформить.

Никита Обухов

Основатель Tilda Publishing, креативный директор студии FunkyPunky

Этот материал — ключ к пониманию принципов работы Landing Page. Чтобы его написать, мы с коллегами провели большое исследование продуктовых и сервисных страниц, выделили типовые конверсионные элементы, скомпоновали их в категории и проанализировали формат в целом.

Landing page (лэндинг пейдж, посадочная страница) — страница, презентующая продукт или сервис.

Главная задача Landing Page — убедить пользователя совершить определенное действие: позвонить, подписаться на рассылку, купить товар, поставить лайк, и т. д.

У Landing Page всегда есть цель, поэтому часто на русский язык название формата переводят как «целевая страница».

Где смотреть примеры хороших лэндингов

land-book.com

onepagelove.com

Кроме этого нужно обращать внимание на страницы продуктов, услуг стартапов: Dropbox, Stripe, Google Photo и т.д.

Как появился формат Landing Page

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

Например, школа английского языка рекламирует курс бизнес-английского с носителем языка. Что видят бизнесмены при переходе на главную страницу? Новости, общую информацию, анонс подготовки к экзаменам для старшеклассников. Чтобы найти свой курс, нужно пойти в каталог услуг, потом посмотреть отзывы, потом перейти на страницу с преподавателями, потом дойти до контактов. Каждый клик — это потеря клиентов. Люди уходят и это нормально.

При анализе рекламного бюджета оказывается, что потратили $1000, получили много переходов, но курс купили в итоге несколько человек и школа заработала $300. Очевидно, что нужна оптимизация.

Поэтому люди придумали под каждую рекламную кампанию делать страницу. В идеале задача звучит так: человек получает ответы на все ключевые вопросы по данной услуге без перехода на другие страницы.

Соответственно, как только делаешь такую страницу, растет конверсия. Создание дополнительной страницы — это затраты, но увеличение конверсии их компенсирует.

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

Те принципы, которые сложились в формате Landing Page, стали распространяться и на главные страницы в целом.

Ярослав Шуваев

Product owner Альфа-Мобайл, подразделения Альфа-Банка.

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

Что будет дальше?

Безусловно, подход к дизайну «посадочных страниц» станет еще более рациональным. Уже сейчас появляются такие направления в дизайне как Conversion Centered Design. Набирает популярность персонализация лэндингов, когда страница подстраивается под поисковый запрос и историю пользователя.

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

Функциональные компоненты Landing Page

Обложка ~ Общее описание продукта или услуги ~ «Фишки» ~ Сценарии использования и выгода ~ Целевая аудитория ~ Цены и тарифные планы ~ Формы для регистрации или подписки ~ Отзывы клиентов и пользователей ~ Логотипы клиентов или партнеров ~ «Как это работает» ~ Галерея ~ Видео ~ Навигация на странице ~ Кнопки социальных сетей ~ Призыв к действию и мотивирующая кнопка

1

Первый экран или обложка

Первое, что человек видит на странице. Обложка сообщает уникальную ценность продукта, емко объясняет, почему он интересен. Содержит побуждение совершить действие и мотивирующую кнопку.

У обложки есть свой алгоритм:

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

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

Логотип компании или продукта.

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

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

Кнопка «листать вниз». Сейчас от нее все чаще отказываются, потому что все и так понимают, что нужно делать.

Likes и shares. Не очень хорошая идея ставить эти кнопки прямо на обложку, потому что вряд ли кто-то принимает решение поделиться сразу, как зашел. Этот блок должен появиться ниже или где-то в углу.

2

Общее описание услуги или продукта

Главная мысль. Описание должно объяснить идею продукта в целом — вникая в суть, но не уходя в частности. Может быть текстом или схемой.

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

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

Существуют страницы, на которых все очень убедительно показали, но так и не сказали четко что продают.

Сергей Попков

Партнер агентства aic .

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

При создании лэндинга, вы крайне ограничены в творчестве. У вас есть один продукт и одна страница для попадания в цель.

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

Вам придется больше работать с контентом. Часто входящие тексты от заказчика не сахар. Добавляйте больше логики и смысла, при этом постоянно сокращайте количество текста. Оставляйте только самое сладкое и ценное.

Не стесняйтесь часто повторять кнопки призыва к действию. Закрепляйте call-to-action элементы в шапке. Порой это кажется навязчивым, но вы никогда не знаете наугад, насколько невнимательным окажется пользователь.

Не игнорируйте аналитику. Изучайте конверсионные воронки и поведения пользователей на лэндинге. Только так вы сможете улучшить свой результат. Проведение А/Б тестов, анализ всех этих данных — даст вам возможность увидеть то, о чем вы даже не могли предположить.

К примеру, лендинги для всем известного нам сервиса Booking.com находятся в постоянных тестах. И такая мелочь, как перемещение кнопки «Оформить заявку» на 40 пикселей влево может увеличить конверсию на несколько десятых процентов. В таких масштабах это всегда немалая дополнительная прибыль. А следовательно, этот дизайн работает лучше.

3

Features («Фишки»)

Как правило, основные преимущества описываются короткими текстами (одно-два предложения) и оформляются иконками или простыми иллюстрациями. Однако существует множество вариаций этого формата.

Features — это то, что делает продукт или услугу классной.

Распространенный вариант подачи — блоки, в которых описываются основные особенности. Каждый блок содержит картинку, заголовок и описание. Можно пробежаться глазами по заголовкам, а если что-то заинтересовало, то прочитать небольшое описание. Заголовки и описания могут работать индивидуально, но текст описания должен дополнять заголовок и при этом не быть слишком раздутым.

Важно подумать над стилем иконок, потому что очень легко все испортить. Шаблонные иконки так примелькались, что на них невозможно сфокусироваться («интерфейсная слепота»). Стиль иконок должен сообщить человеку, что это не первый попавшийся клипарт. Важно все: как нарисованы, какая толщина, насколько они гармоничны и интересны. Не нужно ставить иконки ради иконок. Они должны быть особенными.

«Фишки» можно объяснять не только иконками или иллюстрациями. Можно на скриншоте своего продукта показать, что в нем замечательного. Не описание интерфейса, не то, как он работает, а именно особенности.

Интерфейсных решений много, начиная с самых простых и заканчивая тем, что вы сами изобретете.

Вам нужно рассказать что уникального есть в вашем продукте или услуге. Это и есть блок с «фишками».

5

Сценарии использования и польза продукта

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

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

В подаче используется та же схема — иллюстрация (иконка, фотография), заголовок и и текст.

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

6

Целевая аудитория

Здесь обозначаем на кого в первую очередь рассчитан продукт или услуга.

7

Цены и тарифные планы

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

Как правило, все Landing Pages связаны с зарабатыванием денег. Правильное решение — показывать реальные цены, сколько это стоит. Не нужно бояться и оставлять телефон, чтобы человек позвонил и узнал. Незнание цены останавливает людей. Например, указаны цены на тарифный план: $10, $ 20 и по договоренности. Это сколько — $30 или $500?

Часто на лэндингах акцент сделан на пробную версию — зарегистрируйся, а потом решишь. Когда человек регистрируется, то он превращается в «лид» — потенциального клиента, который отреагировал на маркетинговую коммуникацию. Он оставляет email и потом его можно догнать и вернуть.

Распространенный прием — выделять конкретный план. Тот, который купят с наибольшей вероятностью. Чтобы пользователь не думал и не сомневался, ему говорят — бери вот этот. И это работает.

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

8

Форма регистрации или подписки

Посадочная страница направлена на то, чтобы так или иначе вовлечь пользователя, поэтому форма/кнопка подписки — крупная и на виду.

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

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

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

9

Отзывы клиентов или пользователей

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

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

Самый распространенный формат: заголовок, текст отзыва, фото, имя фамилия, должность и компания.

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

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

Отличный формат — видеоинтервью.

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

10

Логотипы клиентов или партнеров

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

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

Можно сочетать отзыв и логотипы.

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

Какой длины должна быть Landing Page

Короткая страница дает большее количество регистраций, так как человек не успевает потерять фокус: зашел и зарегистрировался. Но качество аудитории ниже. Если человек просто сразу регистрируется, не разобравшись как работает продукт, то вероятность того, что он не будет дальше пользоваться сервисом, выше. Он попадет в интерфейс, ничего не поймет, уйдет и уже не вернется. А если ему подробно объяснить сначала, что нужно делать, то он будет готов работать дальше.

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

Поэтому нужно экспериментировать, делать А/Б тестирование, чтобы в конкретном случае подбирать оптимальное сочетание.

Подробнее о том, как длина страницы влияет на конверсию читайте на http://siliconrus.com/2015/03/short-long-landing/

11

Галерея или схема

В некоторых случаях скриншоты приложения или детали продукта демонстрируются в виде галереи.

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

Если Landing Page сделана для предмета, то можно выделить детали и подписать.

12

«Как это работает»

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

Часто в Landing Page используется схема как работает продукт. Можно показать часть интерфейса по шагам. Или описать последовательность действий.

13

Видео

Промо-видео или скринкаст — хороший способ объяснить посетителю главную идею или показать как он работает.

Видео требует меньше усилий для восприятия, поэтому люди часто предпочитают видео текстовым инструкциям.

Формат видео может быть разным: самозапускающееся, в виде небольшого блока — мысль какая-то и справа видео или слева картинка, справа подпись.

14

Меню для навигации по странице

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

Последнее время стали отказываться от меню, которое залипает при скроллинге. Вместо него залипать стала кнопка call to action.

14

Призыв к действию и мотивирующая кнопка

В конце страницы обычно помещается повторение призыва к действию и мотивирующая кнопка.

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

Не обязательно каждый раз писать один и тот же текст. Скорее наоборот — лучше по разному сформулировать предложения: зарегистрируйся, присоединяйся, попробуй бесплатно. Не писать все время: купи, купи, купи.

15

Кнопки социальных сетей

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

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

Максим Павлов

Notamedia, креативный директор, партнер.

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

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

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент

Дизайн