Дизайн — это рассказ. Чтобы лендинг был конверсионный, рассказ должен быть понятным и убедительным.
Последовательность и оформление могут быть разными, но страница должна содержать хотя бы один элемент из каждой группы блоков — так получается комплексное повествование.
Первый экран . Его функция — произвести нужное впечатление на человека, информировать о том, куда он попал, мотивировать остаться и проскроллить страницу вниз.
Рассказ о проекте . Подробное описание продукта или услуги: как устроен, как работает, на кого ориентирован, сколько стоит. Рассказ о проекте невозможно проигонорировать: прежде чем объяснять выгоды или призывать совершить действие, необходимо убедиться, что человек понял, что именно вы предлагаете.
Понятные выгоды . Этот раздел нужен, чтобы объяснить чем вы отличаетесь от конкурентов. На большинстве рынков конкуренция высокая, поэтому необходимы доводы, почему человек должен выбрать вас.
Блоки доверия . Эта группа блоков помогает сформировать кредит доверия. Отзывы, истории успеха, гарантии и сертификаты, партнеры и даже телефон и адрес офиса помогут развиртуализировать ваш проект, показать, что он реальный и ему можно доверять.
Целевое действие . Бизнесу нужны клиенты, поэтому на лендинге должны быть блоки, которые будут генерировать лиды: формы заказа, подписки, обратной связи или телефон.
Функциональные блоки лендинга
Рассмотрим блоки подробнее.
Обложка
Главный экран сайта — первое впечатление от компании. У вас есть несколько секунд, чтобы убедить пользователя остаться на странице.
Набор инструментов для этого небольшой: заголовок, подзаголовок, кнопка или форма, логотип, фон или изображение на фоне, меню, стрелка вниз.
В Тильде блоки для первого экрана находятся в категории «Обложка»
Заголовком и подзаголовком сделайте оффер — вдохновляющую фразу, которая передает суть проекта. Как правило, заголовок более эмоциональный, подзаголовок раскрывает смысл. Как составить оффер, мы подробно разобрали в предыдущей лекции.
Форма или кнопка — для тех, кто сразу заинтересовался или зашел повторно, можно сразу на обложке добавить целевое действие.
Фон обложки — хорошая фотография, атмосферное видео, просто цвет, градиент или иллюстрация. Обратите внимание на сочетание фона с текстом: фотография может быть удачной сама по себе, но если она неоднородная, пестрая, то она будет плохо работать с текстом. Видео нужно снимать, во-первых, плавно, во-вторых, лучше брать увеличенный фокус, чтобы все объекты были крупноваты.
Логотип компании или продукта можно расположить как на самой обложке, так и в меню.
Стрелка вниз. Не обязательный элемент обложки. Ориентируйтесь на аудиторию — если она консервативная, добавьте. Новое поколение привыкло к скроллу, но кто-то может застопориться.
Меню. Также не обязательный элемент, но если он вам нужен для навигации, то выделите основные смысловые секции на странице, к которым нужен быстрый доступ.
О проекте
Функция этого элемента — понятно и развернуто ответить на вопрос «что вы предлагаете?»
Это общее описание продукта или услуги. Оно может быть просто текстовым, либо текст плюс картинка. Логично располагать этот блок сразу после обложки, чтобы посетитель убедился, что он попал на нужную страницу, и тут ему помогут.
Несмотря на то, что описание есть в обложке, необходимо его также выделить отдельным блоком. На обложке описание работает скорее на то, чтобы вовлечь пользователя эмоционально, впечатлить его. Здесь у описания информационная цель.
Человек, который попал на страницу, чаще всего сталкивается с продуктом или услугой в первый раз. Поэтому нужно сформулировать в одном предложении — что это такое?
Преимущества
Преимущества — то, что делает продукт или услугу классной и уникальной.
Как правило, преимущества описываются короткими текстами (одно-два предложения) и сопровождаются иконками, простыми иллюстрациями или фотографиями.
Изображение и заголовок должны зацепить внимание при быстром просмотре страницы, описание — расшифровать преимущество, если взгляд задержался.
Примеры преимуществ:
Сценарии использования и польза продукта
Сценарии показывают примеры использования продукта или говорят, когда пригодится услуга. Выгоды — то, что получит клиент в результате покупки.
Форма подачи такая же, как в преимуществах: заголовок, описание, картинка.
Выгоды и преимущества похожи. Отличие в том, что в преимуществах вы говорите о свойствах продукта, а в выгодах и сценариях использования — о выгоде клиента.
В этом месте человек должен понять какую его проблему вы решаете, и в чем его жизнь улучшится, если он купит ваш продукт или закажет вашу услугу.
Например, вы продаете наборы фруктов с доставкой по подписке. Качество фруктов, цена ниже, чем в магазине, и доставка в двухчасовом интервале — это ваши преимущества. Витамины, экономия денег и отсутствие нужды помнить о том, что нужно купить фрукты — это выгоды клиента.
Примеры выгод и сценарий использования:
Целевая аудитория
На лендинг можно добавить описание основных групп людей, на которые рассчитан продукт или услуга, и объяснить, почему продукт нужен каждой из них.
Форма может быть разной — и просто текст, и колонки с иконками, и плитка фотографий.
Примеры целевой аудитории:
Тарифы и цены
Тарифы используются, если у товара или услуги несколько вариантов цены, включая бесплатную версию. Понимать различие между вариантами удобно, когда цена представлена в виде карточек или колонок.
Частый прием — выделять популярный тариф. Во-первых, раз он популярный, то с большой вероятностью он действительно подойдет человеку. Во-вторых, вы облегчаете задачу клиенту — ему не нужно сравнивать и анализировать. Довольно часто люди принимают решение по принципу «миллионы не могут ошибаться». Выделив популярный тариф, вы упрощаете выбор.
На сайте должны быть указаны реальные цены. Если цена пугает — это просто не ваш клиент. В расчете на то, что человек заинтересуется и позвонит, чтобы узнать стоимость, теряются настоящие покупатели: каждый лишний шаг — это потеря конверсии.
Призыв к действию и мотивирующая кнопка
По сути главный блок посадочной страницы, так как задача лендинга — побудить посетителя к какому-либо действию. Поэтому блок должен быть на виду. Фон можно сделать цветным или использовать фотографию.
Обычно располагается в конце страницы, но если страница длинная, то кнопки могут встречаться несколько раз. Это может быть залипающая панель с кнопкой, которая всегда висит в правом верхнем углу, либо кнопка внутри текста, после смыслового блока. Это хорошо работает, только нужно не переборщить. Ставить кнопки после каждого блока слишком навязчиво.
Не обязательно на кнопке каждый раз писать один и тот же текст. Скорее наоборот — лучше по разному сформулировать предложения: зарегистрируйся, присоединяйся, попробуй бесплатно. Не писать все время: купи, купи, купи.
Форма регистрации или подписки
Похожий по форме на предыдущий элемент, только с добавлением формы. Если цель лендинга получить нового подписчика или посетителя вебинара, то самым важным становится этот блок.
Не повторяйте в заголовке оффер с обложки, но сделайте его таким же вдохновляющим по смыслу. Проанализируйте, что может остановить человека и придумайте мотивирующую фразу. Возможно, нужно просто объяснить, что произойдет после нажатия.
Настройте страницу благодарности или сообщение, которое появится после отправки данных. Например: «Спасибо, ваши данные приняты, мы позвоним вам в течение часа для уточнения заказа», «Спасибо, вы зарегистрировались на конференцию».
Отзывы
Впечатления реальных людей помогают принять решение — раз люди пользуются, и им нравится, можно доверять.
Самый распространенный формат: заголовок, текст отзыва, фото, имя, фамилия, должность и компания.
Проблема с отзывами в том, что в интернете полно фальшивых высказываний, написанных на заказ. Из-за этого к отзывам и рекомендациям настороженное отношение. Чтобы справиться с этим, берите отзывы у представителей индустрии: бренда или человека, который известен. Ставьте ссылки на профиль в социальной сети человека, который оставил отзыв. Добавляйте к отзыву фотографию. То, что отзывы должны быть настоящими, даже не обсуждается.
Отзывы могут быть и в видео-формате. Живые люди, которые делятся опытом использования, говорят, что это круто работает, заряжают и мотивируют.
Партнеры или клиенты
Если среди ваших клиентов или партнеров есть известные компании, покажите отдельным блоком их логотипы. Если с вами работают они, то с большей вероятностью доверятся и новые клиенты
Логотипы клиентов или партнеров впечатляют. Единственное — эти компании должны быть знакомы людям. Упоминания никому не известных имен только замусоривают страницу.
Проблема, которая может возникнуть — логотипы сложно собрать вместе, потому что у них разный стиль. Решение: привести к одному цвету, который при наведении превращается в исходный. Также нужно смотреть по размерам — чтобы блок выглядел гармонично, и все логотипы были примерно равны.
Галерея фотографий
Интернет очень визуальный, и здорово, если бизнес можно показать через фотографии.
Галерея не обязательно должна быть в виде слайдера: каждый клик — это микрорешение, которое люди не любят принимать. Есть множество возможностей, как эффектно комбинировать изображения в группы
Используйте фотографии хорошего качества: посетитель сайта ожидает увидеть фото, у которых все в порядке с резкостью, яркостью, цветностью и контрастностью.
Этапы или «как это работает»
Если важно показать, как работает продукт или услуга, поделите рассказ о ней на этапы.
Это может быть вертикальная или горизонтальная схема, либо просто нумерованные списки или колонки.
Например, студия дизайна может использовать этот блок, чтобы объяснить, на какие этапы делится работа с клиентом: бриф, встреча, договор, предоплата, первый вариант проекта, корректировки, второй вариант, корректировки, финальный вариант, оставшийся платеж.
Расписание
Блок используется, если лендинг посвящен протяженному событию, которое важно разбить на этапы.
Обычно расписание — это таблица или таймлайн. Если есть спикеры, то для наглядности в расписание удобно добавить их фотографии.
Покажите расписание конференции, порядок выступления спикеров, распорядок дня в летнем лагере или выступление групп на фестивале.
Видео
Промовидео или скринкаст — способ наглядно объяснить главную идею проекта, показать, как работает продукт, рассказать историю успеха ваших клиентов или собрать отзывы.
Видео может быть фоновым, в галерее, показываться в виде попапа при клике на кнопку, сочетаться с текстом и изображениями.
Видео требует меньше усилий для восприятия, поэтому люди часто предпочитают видео текстовым инструкциям.
Минус такой подачи — видео не всегда удобно смотреть, поэтому позаботьтесь о сопровождении — обложка, описание, комментарий. Так чтобы информация, которая содержится в видео, не была потеряна.
Часто задаваемые вопросы
Прием работы с возражениями. Хороший ход — понять страхи и сомнения вашего клиента, переформулировать их в вопрос и развернуто ответить.
Часто такие блоки оформляются как чат или интервью.
Другое применение вопросов — способ структурировть информацию. Например, чтобы рассказать про доставку, сплошной текст можно трансформировать в вопросы и ответы. Понять нюансы будет проще.
Контакты
Чаще всего контакты — завершающий блок лендинга.
Контакты могут включать: адрес, e-mail, телефон, карту, ссылки на социальные сети и фотографию.
К карте иногда добавляют подробное описание (как добраться на машине и дойти пешком).
Команда
Люди доверяют тем, кого знают. Даже если только по фотографии.
С формой все просто: фотография человека, имя, должность, иногда цитата самого сотрудника.
Хорошо, если фотографии сделаны в одном стиле, соответствующем сути лендинга. Для гида подойдут фотографии из путешествия, а для юриста или врача лучше использовать фотографии на нейтральном фоне.
Не смущайтесь, если в вашей команде только один человек — вы сами. Расскажите о себе.
Факты в цифрах
Цифры хорошо работают — они легко воспринимаются и поэтому привлекают внимание: наш мозг всегда ищет то, что понятно.
Оптимально использовать три-четыре числительных с кратким описанием каждого.
Цифры должны рассказывать о бизнесе и быть наглядными. Не каждая цифра очевидна для постороннего. «В компании работает 6 000 сотрудников» — в целом, этот показатель понятен и говорит о том, что компания крупная. «В прошлом году было продано 3000 подарочных наборов» — тут не ясно: это много или мало, это успех или компания на грани разорения?
Список тезисов
Блок можно назвать разновидностью «преимуществ» или «выгод», но он отличается по форме. Если выгоды и преимущества — это три-четыре позиции с иконками или фото, то тезисы — это именно список: 5 причин заказать нашу кавер-группу, почему наш рюкзак будет незаменим в походе, работа с нами — это… и т. д.
Гарантии и сертификаты
Профессиональные сертификаты или благодарственные письма работают на доверие. А в некоторых сферах — образование, юриспруденция, медицина, вовсе необходимы.
Другой вид сертификата — тот, который даете вы сами, например, после прохождения онлайн-курса. Покажите его и объясните, почему он станет хорошим дополнением к резюме и в каком случае пригодиться слушателю.
Истории успеха
Кейсы вашей компании или истории клиентов, которые добились успеха, благодаря вашему продукту, курсам, мероприятию.
Если это кейсы компании, расскажите, как вы помогли успешно решить задачу вашим клиентам. Выберите несколько разных историй, покажите индивидуальность своего подхода и диапазон решений. Если все ваши кейсы похожи и построены по одному принципу, будет логичнее использовать блок «как мы работаем» и рассказать об этапах сотрудничества для всех клиентов или разделить кейсы на два блока. В качестве истории успеха для бизнеса, где важна визуальная часть, подойдут фотографии «до и после».
Например, вы делаете дизайн интерьеров. В блоке с кейсами компании покажите фотографии интерьера «до и после» с кратким описанием задачи. А в блоке «как мы работаем», расскажите об этапах согласования макета, работе с клиентом и подрядчиками.
Портфолио
На лендинге показывается только небольшая часть лучших проектов, которые можно рассмотреть подробно на других страницах.
Вдохновляющая фраза
Мотивирующая фраза или цитата на фоне атмосферного видео, фотографии или цветной подложки добавляет эмоции.
Это хорошая перебивка между блоками с перечислениями. Помогает лендингу быть менее формальным.
Счетчик
Счетчики показывают обратный отсчет до завершения какой-то функции на сайте. Их главная цель — мотивировать потенциального покупателя быстрее сделать выбор.
Счетчики могут показывать время и количество.
Если у регистрации на мероприятие есть срок и ограничение мест, то счетчик выполняет и мотивирующую, и информационную функцию. Его наличие на лендинге оправдано.
Бывают и фейковые счетчики — успей до конца апреля, количество ограничено, невероятная скидка. Очевидно, что это рекламный ход, и такой прием снижает доверие к предложению в целом.
Также счетчики могут информировать о начале запуска продукта. Если продукт еще не готов, но уже можно собирать потенциальную аудиторию, делается лендинг-заглушка, на котором расположена форма для сбора подписчиков, и на нее же может быть помещен счетчик.
Всплывающие окна
В попапах размещают информацию об акциях или предложение подписаться на рассылку.
Всплывающие окна могут быть реакцией на какое-то действие посетителя: клик на кнопку, движение мышкой по направлению к иконке «закрыть», доскролливание до определенного места или появляться сами по себе, через какое-то время.
Виджеты обратной связи
Виджеты обратной связи повышают вовлеченность — чем проще человеку с вами связаться, тем больше вероятность, что он это сделает.
Часто они размещены в правом нижнем углу и разворачиваются в диалог либо в форму для отправки письма или телефона.
Чат или звонок — сам по себе уже раздражающий элемент на странице, поэтому не стоит усугублять эффект дергающимся значком или стоковыми фотографиями консультантов.
Меню
На длинной странице можно разместить залипающее меню со ссылками к основным смысловым разделам страницы и кнопкой призыва к действию.
Другой вариант помочь посетителю сориентироваться — добавить боковую навигацию с точками. Она меньше отвлекает внимание, но позволяет быстро перейти к нужному разделу.
Проблема меню в том, что оно часто бывает перегружено и отвлекает внимание от содержания вместо того, чтобы помогать. Чтобы этого не происходило, следует размещать в меню не более 5−7 и использовать короткие слова. У меню вспомогательная функция, главное — содержание.
Навигация также может быть в виде плитки и ссылки, когда вы сначала показываете список, а дальше подробно объясняете каждую позицию. Например, если вы делаете лендинг вакансий, то покажите сначала все вакансии вместе со ссылками на каждую (пусть вакансии находятся ниже на этой же странице), а потом расскажите о каждой подробно.
Кнопки социальных сетей
Есть два вида кнопок: ссылки на профайлы в социальных сетях и кнопки шаринга.
Кнопки могут быть отдельным блоком или входить в меню, футер, всплывающие окна или в контакты сайта.
Строго говоря, ссылки на соцсети — это отвлечение от основной цели посадочной страницы (если конечно ваша цель не собрать подписчиков группы в фейсбуке). Но большое количество лайков (для лендинга — более 100 человек) — это фактор доверия. Большинство людей избирательны в том, чем они делятся в социальных сетях, и если у страницы много расшариваний, это повод обратить на нее внимание.
Теперь вы ВСЁ знаете
из каких элементов может состоять лендинг и можете определить, какие из них вам подходят. Не обязательно использовать их в том порядке, в каком они расположены в лекции. Дизайн — это рассказ, сделайте всю страницу последовательным рассказом о вашем проекте.