Чек-лист по созданию
Landing Page
Структура
и вопросы
для проверки
instagram.com/sukhhova
behance.net/sukhovayana
Сухова Яна
• Первый экран (шапка, УТП, кнопка, фото)
• Описание преимуществ
• Фотографии или видео продукта
• Отзывы клиентов
• Форма обратной связи
• Кнопка целевого действия
• Футер
+ Могут быть дополнительные блоки,
в зависимости от темы. Об этом позже
Структура Landing Page
Первый экран
1. Шапка
2. УТП + кнопка
3. Фото/иллюстрация
1. Шапка — верхняя часть первого экрана.
Обычно это: логотип, телефон, меню. Номер телефона кликабельный.
Иногда в шапку добавляют слоган и кнопку обратного звонка.
2. УТП - уникальное торговое предложение.
Это ёмкое и вкусное предложение, где рассказывается о том, что вы предлага-
ете клиенту, какова уникальность, польза и выгода от приобретения.
Должно быть:
- кратким
- ярким
- понятным
УТП - это фраза, которая заманивает юзеров, вызывает желание ознакомиться
с лендингом, а лучше купить продукт.
УТП нужно продумать максимально точно, вкусно, «продающе», чтобы заце-
пить внимание покупателя с первого взгляда и не дать ему уйти с сайта.
За уникальным торговым предложением следует кнопка
целевого действия (CTA-элемент).
Преимущества
В этом разделе расскажите о том, что вы предлагаете, более подробно.
Поясните, зачем ваш продукт клиенту: покажите, что человек получит
после покупки, как это решит его проблему, приведите примеры.
В этом разделе расскажите о том, что вы предлагаете, более подробно.
Поясните, зачем ваш продукт клиенту: покажите, что человек получит
после покупки, как это решит его проблему, приведите примеры.
Фотографии или видео
Обязательно покажите, как выглядит ваш продукт. Добавьте
раздел с фотографиями или галереей. Снимите профессио-
нальное видео и разместите его на сайте.
Если вы продаете товар, разместите его фотографии в несколь-
ких ракурсах. Если предлагаете услугу, сфотографируйте про-
цесс. Когда иллюстраций нет, хотя бы добавьте иконки — не
превращайте лендинг в длинное безэмоциональное полотно.
Сайт должен вызывать отклик, а наглядная демонстрация убе-
дит больше, чем самый подробный текст.
Отзывы клиентов
После описания продукта расскажите об отзывах клиентов.
Если компания молодая и отзывов пока нет, не пытайтесь их
выдумать – такие отзывы только подрывают доверие. Лучше
подождите и соберите честные мнения тех, кто уже пользовал-
ся вашим товаром или услугой. Подкрепите мнения реальной
фотографией, ссылкой на действующий аккаунт или видеоотзы-
вом — будет намного убедительнее.
Также в этом разделе можно разместить логотипы партнеров,
только не забывайте о том, что они должны быть соразмерными
и кликабельными.
Отзывы. Примеры.
Форма обратной связи
В конце страницы обязательно разместите форму обратно-
й связи и кнопку целевого действия, если не сделали этого на
первом экране. Если форма и кнопка уже есть в начале, до-
бавьте их еще раз. 80% покупок совершаются с первого экра-
на, но те пользователи, которые посмотрят лендинг до конца,
смогут оставить заявку здесь, когда убедятся, что товар или ус-
луга им подходит.
Кнопки целевого действия
Размещайте кнопки «Позвонить», «Заказать», «Купить» в не-
скольких разделах лендинга. Это должно быть уместно: на
первом экране, в разделе описания товара и в подвале. Посе-
титель не должен искать, где заказать товар и как связаться с
продавцом, если заинтересовался товаром. Достаточно трех
или четырех кнопок. Они не вызовут ощущения, что клиента за-
ставляют покупать, и обеспечат хорошую конверсию.
Что еще...?
В зависимости от цели страницы можно добавить секцию с:
• Товарами
• Таблицей цен
• Расписанием мероприятия
• Цифрами, рассказывающими о вашей компании
• Описанием процесса заказа товара или услуги
• Ответами на популярные вопросы
• Фотографиями команды
• Картой, как к вам добраться
• Комментариями в социальных сетях
• Счетчиком.
Подвал (футер)
В самом конце добавьте подвал. Он может включать контакты,
логотип, кнопки социальных сетей и дополнительные ссылки.
Если у вас есть офис, обязательно укажите адрес — так клиент
поймет, что обращается к продавцу, которому можно доверять.
Кнопки социальных сетей персонализирует страницу и обеспе-
чат дополнительный приток к вашим аккаунтам.
На какие вопросы нужно ответить
перед запуском лендинга?
Общие
Вы сформулировали для лендинга цель и ожидаемый результат? Не
делаете ли вы его только для того, «чтобы было как у всех»?
Вы провели маркетинговый анализ? Перед тем как приступить к соз-
данию лендинга, изучите ситуацию на рынке, работу конкурентов и
целевую аудиторию.
Учтена ли специфика бизнеса? Франшизу и солнечные очки продают
по-разному.
Не смешаны ли целевые аудитории? Если они требуют разного подхо-
да, лучше сделать отдельные лендинги.
Соблюден ли принцип «Один лендинг = одна цель = один оффер»?
У вас только одно торговое предложение? Каждая дополнительная ак-
ция или услуга снижает эффективность посадочной страницы.
Не слишком ли много триггеров? Они должны стать приправой, а не
основным блюдом.
Нет ли каких-нибудь повторов? Экономьте пространство страницы.
Ваш лендинг способен сразу заинтересовать посетителя? У вас на это
есть от 3 до 8 секунд.
Можно ли «очеловечить» страницу? Людям приятнее иметь дело с дру-
гими людьми, а не с организациями.
Первый экран
По первому экрану можно понять, чему посвящен лендинг?
Соответствует ли содержание первого экрана точке входа? Если бан-
нер предлагал читателю «скидку 20% на все товары», то эти же усло-
вия должны стоять и в начале лендинга. Если же там «20% при покупке
на сумму от 10 тысяч», то читатель почувствует себя обманутым.
Не много ли информации на первом экране? Размещайте там только
самое важное.
Оффер
Заметен ли оффер? Убедитесь, что он сразу бросается в глаза и не
сливается с другими элементами.
А он не слишком «туманный»? Читатель поймет, что именно вы ему
предлагаете и почему это должно быть ему интересно? Не забываете
о выгоде и конкретике.
Нет ли восклицательных знаков? Увы, они не добавляют вашим словам
убедительности.
Ваш оффер не похож на тысячи других? Что еще можно предложить
читателю, кроме очередной «бесплатной консультации» или «пробно-
го периода»?
Есть ли подзаголовок? Помните, что его предназначение — дополнять
и усиливать заголовок, а не дублировать его.
Дизайн и верстка
Ваш дизайн действительно приятен для глаз? Если есть сомнения, не
рискуйте: возьмите уже готовый шаблон или закажите макет у профес-
сионала.
А вы не используете слишком популярный шаблон для лендинга? Убе-
дитесь, что в интернете нет еще тысячи страниц с таким же оформле-
нием.
Не получился ли дизайн ради дизайна? Не сделали ли вы что-то лишь
потому, что могли это сделать? Помните, что каждый элемент должен
вести пользователя к целевому действию.
Не отвлекает ли дизайн от содержания? Он не слишком вычурный?
Не слишком ли много графических элементов? Избыток деталей рас-
севает внимание пользователя.
Вы не переборщили с анимацией? Она увеличивает время загрузки
страницы и, опять же, может отвлечь пользователя от сути.
Текст везде хорошо читается? Убедитесь, что он не сливается с фоном.
Все ли в порядке со шрифтами? Они не слишком мелкие? Используйте
на странице не более 1–2 шрифтов, при этом избегайте слишком эк-
зотических вариантов. Не злоупотребляйте акцентами курсивом, жир-
ным и подчеркиванием.
Все ли в порядке с контрастом? Проверьте, как будет смотреться стра-
ница на смартфонах и бюджетных мониторах.
Не слишком ли много цветов? Если у пользователя от них рябит в гла-
зах, ему будет сложно сосредоточиться на содержании.
Различные элементы лендинга
Не нужно ли повторить форму захвата лидов? Иногда уместно вста-
вить ее в начале лендинга, в середине и в самом конце. Так вы сможе-
те вовремя обрабатывать лиды с разной степенью «теплоты».
Не много ли точек выхода? Не давайте пользователю возможности
«сбежать».
Нет ли кнопок социальных сетей? Они уместны только на «странице
благодарности», на которую попадает пользователь после целевого
действия. Если же очень хочется, разместите их в самом конце, в футе-
ре.
Вы указали телефон организации? Добавьте: он увеличит конверсию.
Нет ли отвлекающих баннеров? Их лучше убрать: пусть пользователь
сфокусируется на торговом предложении.
Юзабилити
Не нарушены ли общепринятые стандарты лендингов? Позаботьтесь,
чтобы посетитель разобрался со страницей без «дополнительного об-
учения».
Нет ли у страницы каких-нибудь технических ограничений? Убедитесь,
что лендинг корректно работает во всех основных браузерах.
Понятна ли навигация? Не забудьте о навигационных подсказках.
Нет ли прелоадера или загрузочного экрана? Они увеличивают число
отказов. Лучше сразу показать пользователю что-нибудь полезное,
иначе он закроет страницу.
Юзабилити
Не нужно ли повторить форму захвата лидов? Иногда уместно вста-
вить ее в начале лендинга, в середине и в самом конце. Так вы сможе-
те вовремя обрабатывать лиды с разной степенью «теплоты».
Не много ли точек выхода? Не давайте пользователю возможности
«сбежать».
Нет ли кнопок социальных сетей? Они уместны только на «странице
благодарности», на которую попадает пользователь после целевого
действия. Если же очень хочется, разместите их в самом конце, в футе-
ре.
Все интерактивные элементы работают как надо? Кнопки, чекбоксы и
формы могут «поломаться» в некоторых браузерах.
Не издает ли лендинг каких-нибудь неожиданных звуков? Используйте
автозапуск музыки и видео, только если это действительно необходи-
мо. Желательно, чтобы все ролики пользователь запускал сам.
Нет ли навязчивых всплывающих окон? Если вы все же планируете
«напасть» на пользователя, то дайте ему время хотя бы познакомиться
с содержанием страницы.
Лендинг будет открываться на планшетах и мобильных телефонах?
Используйте адаптивную верстку.
Не загружается ли страница слишком медленно? Чтобы уменьшить
число отказов, упростите код и уберите все «тяжелые» элементы.
Понятно ли предназначение иконок? Они не слишком креативны?
Визуальный контент
Есть ли вообще на странице визуальный контент? Как ни странно, но
некоторые пытаются выстраивать лендинги из сплошного текста.
Графики не слишком мало? Вся информация должна опираться на ви-
зуальный ряд.
И наоборот: нет ли графики без текста? Даже если пользователи все
поймут, то подумайте о поисковом трафике.
Вы показали читателям свой продукт? Сделайте это как можно рань-
ше: на первом или хотя бы на втором экране. Идеально, если посети-
тель видит товар на всех этапах покупки.
Есть ли фотографии?
Они качественные? Если снимки выглядит слишком кустарно, обрати-
тесь к профессиональному фотографу.
А вы случайно не взяли фотографии со стоков? Особенно избегайте
изображений, которые уже растиражированы по всему интернету.
Все иллюстрации имеют отношение к содержанию страницы? Старай-
тесь не вставлять картинки просто для красоты.
Соответствует ли главное изображение офферу?
Иллюстрации не слишком большие? Тяжелые фотографии замедляют
загрузку страницы.
Вы не используете «карусель» для важного контента? По статистике
84% пользователей посмотрят только первую картинку.
Вы продублировали текстом видеоролики? Видео на лендингах смо-
трят только 10% посетителей.
Содержание
Есть ли вообще на странице визуальный контент? Как ни странно, но
некоторые пытаются выстраивать лендинги из сплошного текста.
Графики не слишком мало? Вся информация должна опираться на ви-
зуальный ряд.
И наоборот: нет ли графики без текста? Даже если пользователи все
поймут, то подумайте о поисковом трафике.
Вы показали читателям свой продукт? Сделайте это как можно рань-
ше: на первом или хотя бы на втором экране. Идеально, если посети-
тель видит товар на всех этапах покупки.
Есть ли фотографии?
Они качественные? Если снимки выглядит слишком кустарно, обрати-
тесь к профессиональному фотографу.
А вы случайно не взяли фотографии со стоков? Особенно избегайте
изображений, которые уже растиражированы по всему интернету.
Все иллюстрации имеют отношение к содержанию страницы? Старай-
тесь не вставлять картинки просто для красоты.
Соответствует ли главное изображение офферу?
Иллюстрации не слишком большие? Тяжелые фотографии замедляют
загрузку страницы.
Вы не используете «карусель» для важного контента? По статистике
84% пользователей посмотрят только первую картинку.
Вы продублировали текстом видеоролики? Видео на лендингах смо-
трят только 10% посетителей.
Выгоды и преимущества
Вы рассказали о компании? Коротко напишите, кто вы и чем занимае-
тесь.
Вы не забыли про УТП? Почему за продуктом стоит обращаться к вам,
а не к конкурентам?
Какие еще выгоды и преимущества помогут склонить читателя к покуп-
ке?
А они не слишком абстрактны? Добавьте конкретики и доказательств.
Вы объяснили, в чем ценность продукта? Как он улучшит жизнь покупа-
телей?
Нет ли перечисления характеристик вместо выгод? Объясните читате-
лю важность каждого свойства продукта.
Социальные доказательства
Есть ли социальные доказательства? Покажите, что продукт востребо-
ван, а компании можно доверять.
Отзывы клиентов подлинные? Читатель не заподозрит подделку?
Указаны ли имена клиентов? Безымянные отзывы вряд ли вызовут дове-
рие.
Фотографии клиентов настоящие? Они точно не с фотостоков?
Бросаются ли в глаза самые лучше отзывы? Разместите их впереди или
выделите визуально.
Призыв к действию (блок CTA)
Есть ли призыв к действию? Без него вся остальная работа станет бес-
смысленной.
Призыв к действию только один? Если их несколько, лучше сделайте
под каждый из них отдельную посадочную страницу.
Пользователь поймет, чего вы от него хотите? Убедитесь, что призыв к
действию получился конкретным и ясным.
Говорится ли в нем о пользе? Не «закажите капли ххх», а «закажите
капли ххх и забудьте о насморке через 5 минут».
Хорошо ли видна кнопка CTA? Убедитесь, что она не сливается с фо-
ном и не теряется среди других элементов.
Из блока CTA понятно, что будет, если нажать на кнопку?
Нет ли рядом с блоком CTA отвлекающих элементов?
Рядом с блоком CTA есть фотографии людей? Тогда постарайтесь,
чтобы они смотрели в сторону кнопки. Удивительно, но это влияет на
конверсию.
Целевое действие и лид-форма
Лендинг ведет только к одному целевому действию? Помните о двух
зайцах, за которыми лучше не гоняться.
Целевое действие не слишком сложное? Сделайте его максимально
простым, иначе даже «созревший» пользователь отложит его «на по-
том».
Не много ли полей в лид-форме? Оставьте лишь те, которые необхо-
димы для заказа.
А вы не спрашиваете у читателя слишком личную информацию? Так ли
вам нужны на этом этапе его адрес и телефон?
Лендинг подтверждает действия пользователей? Чтобы они не беспо-
коились, дайте им знать, что заказ действительно принят.
Есть ли страница с благодарностью, на которую попадает клиент по-
сле заказа? Поблагодарите его за покупку, расскажите, что ждет его
дальше, и предложите перейти на основной сайт. Не забудьте про
логотип компании и кнопки социальных сетей.
Ниже разные шпаргалочки
Надеюсь данная информация
была для тебя полезной!
Если есть вопросы, пиши
instagram.com/sukhhova
Меня также можно найти тут:
behance.com/sukhovayana
dribbble.com/sukhhovayana
t-do.ru/goodnostory (telegram)
t-do.ru/sukhovayana (telegram)
Приятного обучения и жди от меня
подобных вкусностей:)
P.s. если есть какая-то непонятная тема,
пиши в директ - сделаю разбор
