Схема лендинга: Страница не найдена

Структура Лендинга с высокой конверсией — прототипируем идеальный Landing Page + Инфографика

Содержание статьи:

Идеальный лендинг — это самостоятельная страница, которая призвана подвести посетителя к одному единственному желаемому действию.

В этой статье-руководстве мы поделимся своим опытом касаемо структуры и прототипирования идеального продающего лендинга с высокой конверсией.

Так же в конце статьи Вы найдете инфографику, которую Вы можете распечатать себе и использовать при разработке своего Landing Page!

Видео-версия статьи-руководства

Для чего может создаваться идеальный Landing Page?

• Для предоставления Вашим покупателям материалов (лид-магнитов) различных форматов: подкасты, вебинары, электронные книги, чек-листы, отчеты с целью получения их контактов;
• Для предоставления доступа к подписке на Ваши материалы;
• Для регистрации на живое или онлайн мероприятие;
• Для продажи товаров и услуг,
• Для “утепления” потенциальных покупателей, чтобы перевести их на следующий этап воронки продаж.

Есть различные вариации посадочных страниц:

• короткие (подписные),
• длинные.

В определении структуры страницы мы чаще всего руководствуемся правилом: чем дороже или сложнее услуга/продукт, тем длиннее лендинг. Процесс принятия решения в отношении дорогих и недорогих продуктов/услуг отличается, поэтому чаще всего покупателям требуется гораздо больше информации и доказательств своего правильного выбора, когда на кону стоит “кругленькая” сумма.

Конечно же, длина страницы — не догма и, конечно, требует индивидуального тестирования.

Многие спрашивают, как правильно делать Landing Page? Хочу ответить сразу: правильного  лендинга или идеала не существует, также как и не существует универсального прототипа или схемы. Но есть определенные правила, определенные элементы и принципы их создания, которые нужно понимать и знать перед тем, как делать или заказывать Landing Page. Об этом мы и поговорим в этой статье.

Этапы, необходимые для создания схемы продающего лендинга

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

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

Как искать на форумах?

Заходите в Яндекс и вбиваете запросы “кухни на заказ форум”, “кухни на заказ как” (и далее — по поисковым подсказкам), “кухни на заказ что”, “кухни на заказ какие” и т.д.

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

Третий этап —

определение целевого действия. Что мы хотим получить от наших целевых посетителей, что мы хотим, чтобы они сделали на посадочной странице?

Четвертый этап, наконец, проектирование, дизайн и верстка.

Основные правила продающего лендинга

• Простота. Вылетающие, появляющиеся, исчезающие блоки, супермодный и крутой дизайн — это, конечно, все хорошо, если это не мешает посетителю понять, что Вы хотите ему сказать. У вас есть 5 секунд, чтобы захватить внимание посетителя и дать ему понять, что он находится в правильном месте и получит, то что он ищет. Не тратьте эти 5 секунд попусту. Так же нагромождение подобных скриптов “тормозит” скорость взаимодействия со страницей и она начинает “тормозить” или “дергаться” в браузере Вашего клиента.
• Логичность. При принятии решения потенциальный покупатель движется по определенной схеме AIDA. Сначала у него появляется A(attention) — I (interest) — D(desire)-A(action). То есть сначала надо захватить его внимание, потом пробудить интерес и желание, а потом уже он будет готов принять действие. Руководствуйтесь этим принципом при создании блоков в прототипе посадочной страницы.
• Отвечать на “боли” целевой аудитории. Мы собрали все боли, возражения, вопросы на этапе изучения целевой аудитории. Теперь, когда будете делать прототип лендинга, учитывайте это в структуре, создавая отдельные блоки, отвечающие на все обнаруженные возражения.
• Один лендинг — один оффер. Не надо перебарщивать и “накачивать” лендинг  всем, чем можно. В конечном счете — это лишь собьет с пути целевого действия Вашего посетителя. Одна услуга (товар) — один лендинг.
• Соответствие рекламному сообщению. На ваш лендинг будет приходить трафик. Чаще всего это контекстная реклама или таргетированная реклама с соц.сетей. Если в рекламном сообщении написано одно, а на лендинге другое — то посетителя этовведет в заблуждение. Это серьезный нюанс, который может испортить всю цепочку и лишит Вас лидов. Проверьте соответствие основных заголовков, сообщений, офферов на лендинге и в рекламных сообщениях.
• Аналитика.
  Установите Яндекс.Метрику и правильно установите цели. Как это можно сделать написано в этой статье. Вам понадобится это, чтобы  анализировать и вносить изменения в Вашу посадочную страницу.

Структура посадочной страницы (блок с примерами)

В структуре любого одностраничного сайта есть основополагающие элементы. Это:

1. Заголовок

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

Тут должно быть то самое УТП, которое мы собрали на основе первых двух этапов (изучение конкурентов и анализ целевой аудитории). Есть несколько подходов к составлению заголовков.

Один из них — методика 4U:

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

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

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

3. Изображения/видео материалы

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

Поэтому именно с помощью этих материалов, Вы можете дать им ощущение, что все очень даже реально и осязаемо.

4. Лид форма

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

Чем меньше препятствий на пути к совершению целевого действия — тем лучше. Запрашивайте только то, что Вам действительно нужно — обычно это телефон и/или email и альтернативное специфическое поле (в зависимости от Ваших задач).

5. Призыв к действию (Call to Action)

Кнопки с призывом к действию должны быть максимально контрастными (то есть выделяться на фоне остальных элементов). Также внимательно отнеситесь к тексту кнопки. Банальное “Отправить” работает все хуже и хуже…

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

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

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

6. Элементы доверия (партнеры/клиенты, сертификаты, фото команды, офиса)

Посетитель должен быть уверен, что он сделает правильный выбор, обратившись к вам. И в этом Вам помогут такие материалы как — сертификаты, список (лого) партнеров, Ваши публикации в СМИ, количество подписчиков на youtube, фото команды,офиса.

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

7. Отзывы, кейсы

Отзывы и кейсы — это отличный способ убедить. Лучше если будут с фото, именами или в видео-формате. Не пишите отзывы сами — это видно и вредно.

8. Выгоды

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

9. Описание оффера — Объяснения продукта/услуги

Этот пункт может состоять из нескольких блоков. По сути Вам нужно по максимуму разжевать весь свой продукт для самых-самых жирафов и ответить на все-все возражения самого зануды.

Желательно, чтобы на каждое возражение был блок в лендинге, который его снимает. То есть, например:

• “Мне кажется, это дорого/слишком дешево.” — объясните, за что клиент платит и почему это дороже/дешевле, чем у остальных.
• “А что если я буду неудовлетворен качеством продукта?” — расскажите об условиях возврата и обмена продукции.
• “А вдруг это будет очень долго?” — расскажите об условиях  и сроках доставки.

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

10. Интерактивный калькулятор/подборщик/тест

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

Прототипирование лендинга

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

Для составления ТЗ на разработку Лендинг Пейдж чаще всего мы используем обычный GoogleDocs.

Схема Лендинг Пейдж (Инфографика)

И помните! Любые незначительные изменения в заголовках и блоках может просто взорвать конверсию. Поэтому работа над лендингом только начинается после того, как появится Ваша первая рабочая версия!

Как сделать лендинг | maximsoldatkin.com

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

И давайте рассмотрим схему, что должно быть на лэндинге, на главной странице (рис.1).

Рис.1. Схема лендинга

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

Вот,  «Украинские мишки, европейское качество» (рис.2).  Вы видите классический адаптивный дизайн landing page: заголовок, картинка на заднем фоне, ключевое действие (отправить заявку) и так называемая дополнительная информация, продающие триггеры, об этом я поговорю чуть позже.

Рис.2 Лендинг «Украинские мишки европейского качества» ( http://fabrikamishek.com.ua)

Еще один пример — про торты. Опять же адаптивный лендинг: есть заголовок, ключевая картинка. Если сайт про торты, мы картинку ставим про торты (рис.3). Ключевые действия – заказать заявку, заказать звонок, заказать торт.

Рис.3 Лендинг “Эксклюзивные торты ручной работы” (http://danilovskaya.com)

Кстати, рекомендую посмотреть прямо сейчас:

Следующий сайт, ровно тоже самое (рис.4). Заголовок, уже он меньшего размера, картинка, блок с ключевым действием, здесь какая-то дополнительная информация.

Рис.4 Лендинг “Школа боевых искусств” (http://budokanschool.ru)

Если мы посмотрим на западные аналоги, то принцип тот же (рис.5) есть картинка, есть заголовок, есть ключевое действие. Есть как бы второе действие, одно для регистрации, второе для тех, кто уже пользуется – логин.

Рис.5 Лендинг Basecamp (http://basecamp.com/)

Еще один пример адаптивного дизайна landing page, тоже западный аналог (рис.6). Более крупный заголовок, кнопка действия, подзаголовок и опять же есть картинка.  На всех страницах есть определенная структура. Просто она немного отличается.

Рис.6 Лендинг Tictail (http://tictail.com/)

Еще несколько вариантов (рис.7), здесь «Макао» – огромная картинка, заголовок чуть даже меньше, внимание все на картинке уделено.  Dropbox- простота.

Рис.7 Лендинги

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

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

И 7 важных правил хорошего лэндинга.

1. Картинка

Изображение сильнее текста и сразу привлекает внимание. Подберите тематическую картинку для лендинга, чтобы по ней сразу было понятно, о чем речь (рис.8).

Рис.8 Пример лендинга

Например, в случае Mycaw заголовок значительно меньше, чем картинка. Здесь картинка делает основную работу (визуально).

2. Заголовок

Пишите короткие заголовки. В заголовке должна быть понятная польза для человека. Используйте релевантные слова (до того как попасть на ваш сайт пользователь в поисковике набирает релевантные слова, которые в свое время прописаны у вас на сайте, благодаря чему он попадает к вам на сайт). Заголовок вашего landing page должен быть крупным и привлекать внимание. Прочитав одни только заголовки в теле страницы, должно быть понятно о чем речь. Как известно, сначала люди сканируют  страницы и если информация их заинтересовала, то они продолжают чтение, поэтому очень важно уделить внимание заголовкам внутри страницы, на самом теле страницы, чтобы только по ним сложилось впечатление о том, что вы предлагаете.

Рис.9 Пример лендинга

3. Призыв к действию

Что вы хотите, чтобы человек сделал на лендинге. Сделайте это действие самым заметным (рис.10). И в этом действии можно еще написать пользу. Например, на рис. 10 написано: используйте Basecamp бесплатно в течение 2 месяцев, и это очень хороший пример пользы. Старайтесь писать пользу.

Рис.10 Пример лендинга

4. Ценность для человека

Цель лендинга — вызвать доверие и убедить человека. Один слой — одна единица смыслов. То есть на странице dropbox (рис.11) человек увидит только картинку и только это описание. Здесь показана польза —  у нас одна и та же фотография (как на компьютере, так и на планшете, так  и телефоне) и текст написан точно про это же. Он поясняет эту пользу: ваши фотографии везде ( ноутбук, планшет и телефон). Ну и сам лендинг dropbox  — пример отличного адаптивного дизайна landing page.

Рис.11 Dropbox пример ценности для человека

5. Короткие тексты

Длинные тексты не хочется читать, они выглядят устрашающе. Короткие читать легко, поэтому их читают. Когда делаете лендинг, обязательно делите тексты на короткие блоки. Например, в одной из страниц basecamp текст подан в виде диалога (рис.12). Человека спрашивает у basecamp, он ему отвечает. Опять же диалоги короткие, не больше 4х строк, их очень просто начать читать.

Рис.12 Basecamp пример подачи текстовой информации на сайте

6. Убеждающие триггеры

Дефицит. Есть ограниченное предложение и осталось всего лишь  13 часов, а дальше товара этого уже не будет. (рис.13)

Социальное доказательство (рис.14 ). Это публикации в именитых источниках, цитаты СМИ о вашей компании, выигрыши в в конкурсах и т.д. Также отзывы. Например, 1500 человек уже посетило сайт и ,во-вторых, сами отзывы людей. Также можно привести в пример (рис. 15), например, что существует куча брендов которые доверяют basescamp и вы тоже можете последовать их примеру.

Влияние авторитета. На лендинге с рис. 14 видны имена спортсменов, которые учились в этой школе. Фамилия Владимира Минеева — 4х кратного чемпиона мира по К1.

Правило взаимного обмена (подарок).  На рис.13 мы видим, что плюшевая подушка достанется клиенту бесплатно

Контрастное воcприятие. Необходимо цену товара/услуги подавать с какой-то другой цифрой товара/ услуги. Например, рядом с ценой напишите “ нас уже заказало 5000 человек”. Они вроде как из разных контекстов, но они работают, то есть цифра 100 уже не кажется такой большой по сравнению с 5000.

Рис.13 Пример убеждающих триггеров

 

Рис. 14 Пример социального доказательства

Рис. 15 Пример социального доказательства

7. Сильный главный экран

80 % людей увидят главный экран вашего landing page, и лишь 20 % прокрутят страницу ниже. Это в лучшем случае, поэтому самую важную информацию расположите на главном экране лендинга. Помните, что большее количество людей видят именно ее. Все продающие штуки и фишки, всю самую важную информацию стоит расположить на главной странице (рис.16,17).

Рис.16 Пример социального доказательства

Рис. 17 Пример сильного главного экрана

4 сервиса для создания адаптивного дизайна landing page

В этих сервисах есть готовые компоненты, блоки, которые добавляются друг за другом (рис.18). Вы страницу составляете из уже готовых модулей (текст,  картинки и т.д.). На мой взгляд это гораздо удобнее, чем конструктор. В этих сервисах вы можете легко создавать адаптивные дизайны landing page.

Рис.18 Примеры сервисов создания страниц из готовых модулей

Еще два сервиса. (рис. 19). Это конструкторы страниц и множество шаблонов. По сути помимо шаблонов вы здесь страницы создаете примерно как в фотошопе ( вытаскиваете текст, можно передвинуть куда угодно , с картинками тоже самое). То есть здесь более широкие возможности для редактирования. Но не всегда это нужно. Для кого-то больше подходит первый вариант, когда есть блоки с нормальной версткой, нормальным соотношений и они тянутся.

Рис.19 Примеры сервисов конструкторов страниц и множество шаблонов

Во всех сервисах есть:

1. Бесплатный пробный период
2. Статистика
3. CRM
4. А/Б тестирование
5. Шаблоны
6. Хостинг
7. Адаптивный дизайн landing page

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

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

Схема лендинга с высокой конверсией. Cтруктура лендинг пейдж

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

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

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

Существует 15 блоков информации, которые должны присутствовать на странице приземления, да и к тому же должны быть правильно оформлены и грамотно расположены, только после этого следует направлять трафик на landing page и ждать обращения клиентов. Однако помните про эксперименты, вносите изменения и ищите положительные результаты.

Структура продающего landing page

1. Заголовок, который должен зацепить клиента.

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

2. Правильные контактные данные.

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

3. Понятный заголовок и расшифровка в подзаголовке.

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

4. Реальные выгоды клиента.

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

5. Главная кнопка.

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

6. Отражение товара на картинке или видео.

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

7. Призыв к действию посетителя.

В данном случае простота — залог успеха. Как бы ни было печально, но простое «нажмите на кнопку и получите бесплатно 5 уроков» работает лучше, чем красивое описание в виде: «Не знаете как? Не умеете, но хотите научиться! Пора действовать и мы в этом вам поможем!», ну или что-то подобное. Оформите призыв кратко, напишите, что человек должен делать, и все. Это будет действовать лучше, нежели красота и многословность предложения.

8. Отзывы о вас.

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

9. Гарантии!

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

10. Избавьтесь от воды

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

11. Таймер ограничения времени на акцию.

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

12. Подтверждение правдивости предложения.

Если есть возможность, то нужно указать известных партнеров или хотя бы число пользователей, которые уже приобрели у вас товар, но не нужно много врать, не накручивайте, например «222000 клиентов уже приобрели данный товар», лучше показать правду, например «423 клиента купили у нас ноутбук».

13. Теперь мы пришли к нижней части страницы – футер.

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

14. Логотип.

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

15. Консультация.

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

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

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

Что такое лендинг простыми словами

Сложно? Теперь объясним по-простому. Пролистывая страницу, пользователь проходит чётко заданный вами путь (). Вы знакомите его со своим предложением, затем перечисляете выгоды, убеждаете совершить покупку и в конце призываете к действию.

На этой странице кратко и ёмко доносится, что за продукт, чем он уникален, в чём его преимущества (или в чём преимущества компании). Как итог, пользователю предлагают заполнить лид-форму, чтобы оформить заказ, скачать бесплатный пробник и т.п. Далее с полученными данными работает отдел продаж компании, в зависимости от выстроенной вами воронки продаж.

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

Идеальная структура лендинга — это 8 основных экранов

Приступим к проработке структуры вашего идеального лендинга?

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

Также на первом экране может находиться подзаголовок, который поясняет основное сообщение, которое есть в заголовке.

Часто на первом экране можно увидеть первый – кнопку «Узнать больше», и даже лид-форму, если посетителям уже известна ваша услуга, или это уже не первый контакт с вашей компанией.

Яркая иллюстрация – лендинг Сбербанка, посвящённый именной стипендии. Он рассчитан на тех, кто уже знает компанию (кто её не знает?). Здесь располагается краткий призывающий заголовок, интригующий подзаголовок и кнопка CTA («Готов попробовать»), дополненная логотипом акции.

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

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

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

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

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

Блок с ценами

Конечно же, увидев предложение и узнав о его преимуществах, посетитель уже задает себе вопрос – сколько это стоит? Пришло время здесь рассказать ему об этом.

Пример – лендинг компании, которая изготавливает кепки по индивидуальному заказу. На лендинге они предлагают приобрести сертификат на изготовление такого интересного сувенира. После демонстрации уже готовых работ сообщается цена на сертификаты. Детально описано, что входит в каждый пакет.

Блок с отзывами

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

Запомните одно важное правило: фальшь заметна сразу. Не делайте поддельные отзывы с фотографиями со стоков. Постарайтесь , как это сделать – мы рассказывали раньше.

Ответы на часто задаваемые вопросы (снятие опасений)

Даже после всей этой информации у клиента могут остаться опасения. Почему так дорого/дёшево? А как я получу свой заказ? А могу ли я приехать в офис? И многое другое. Успокойте посетителя, и разместите ответы на часто задаваемые вопросы. Это поможет ему ещё больше проникнуться к вам доверием.

Например, так сделали на лендинге компании по доставке наборов вина на дом:

Выгодное предложение (акция, дефицит, истекающий срок действия)

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

Например, Тильда предлагает купить курс по интернет-маркетингу со скидкой в 40%.

А LPGenerator предлагает пройти первое занятие бесплатно – и выгодное предложение, и обработка возражений («а вдруг мне не подойдет») в одном блоке.

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

Контакты

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

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

Как работает лендинг

Где используются лендинги? Да практически во всех нишах. Сегодня это самый популярный инструмент быстрых продаж, и не зря – как правило, у такого одностраничного сайта конверсия на порядок выше, чем у простого.

Когда есть смысл делать Landing Page? В первую очередь все зависит от ситуации, продукта и вашей ниши. Прежде чем решать запускать продающую страницу, нужно провести анализ рынка. Но есть уже ряд «стандартных ситуаций, в которых лендинг оказывается идеальным решением:

• когда вы запускаете новый продукт и хотите протестировать нишу;
• когда у вас появляется новая линейка продуктов, отличающаяся от остальных;
• когда вы проводите промо-акцию , и её нужно вынести отдельно от сайта;
• когда у вас всего один товар , или продукция носит сезонный характер (например, изготовление сувениров, цветы в коробках, даже услуги по монтажу окон можно продвигать с помощью лендинга). Тут хорошо работает схема одна услуга (товар) – одна страница. Больше в принципе и не надо, все можно успешно запаковать в такой формат.

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

А если есть сайт, что тогда?

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

Как продвигать Landing Page

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

Заключение

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

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

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о такой важной вещи как посадочная страница , которую очень часто на буржуйский манер называют лендинг пейдж (от английского landing page — целевая страница). Что же это такое и почему это так важно?

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

Что такое лендинг пейдж и почему это так важно

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

Скорее всего, вы забыли продумать и подготовить приземляющие (посадочные, целевые) страницы, которые часто называют лендингами . Что это такое?

А это очень важный момент, который может существенно повысить конверсию (количество покупок или регистраций), ибо landing page призваны максимально эффективно подводить пользователя к выполнению целевого действия . Если вы со всех рекламных объявлений будете направлять посетителей, например, на главную страницу сайта, то можете катастрофически снизить конверсию и вылететь в трубу.

Сам термин «лейдинг пейдж» образован от английской фразы «landing page», в переводе означающей как раз целевую, посадочную (приземляющую) страницу. Лендинги создаются не абы как, а с учетом психологии посетителей. Они должны цеплять и не отпускать их до самого момент покупки (или регистрации), ибо повторно привлечь посетителя будет уже архисложно.

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

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

Примеры лендингов

В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:

12 шагов по созданию идеального лендинга

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

1. Каждый лендинг должен быть заточен только под одно целевое (конверсионное) действие — либо подписка, либо продажи. Не надо жадничать, ибо внимание пользователя будет рассеяно и сильно увеличится вероятность его ухода (так ничего и не выбрав из предложенных вариантов). Лучше как можно меньше заставлять клиентов думать и выбирать — путь на landing page должен быть прямым как стрела (очевидным для него) и без каких-либо ответвлений.
2. На посадочной странице обязательно должен присутствовать призыв к действию (с глаголами в повелительном наклонении — позвони, купи, получи, приди и т.п.). Фразы должны быть короткими и мотивирующими. Например, «купите сейчас», «получить видеокурс» или «подпишись и получи».
3. Рулят также яркие кнопки и стрелки , создающие на них акцент. Неплохо работают кнопки красных и желтых оттенков, ибо заметны и содержат как бы призыв к действию.

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

   Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):

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

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

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

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

9. Страница landing page может быть довольно длинной, но при просмотре первого экрана (это та область страницы, что видна без использования прокрутки) пользователю должно быть совершенно ясно и понятно, что именно вы хотели ему сказать.
10. Для стимулирования подписчиков или покупателей некоторых товаров (например, ) можно использовать вариант дополнительных бонусов, которые получит подписчик или покупатель при заказе. Когда пользователь находится на грани принятия решения, то как раз такие «плюшки» могут перевесить чашу весов в вашу пользу.
11. Ну и, конечно же, стоит делать упор на то, что «только здесь и только в течении нного количества времени» пользователю будет доступно все это великолепие (подписка, специальная цена на товар, дополнительный набор услуг). Как это сделать лучше всего? Правильно, поставить таймер, ведущий обратный отчет времени до часа Х, когда предоставленная возможность будет упущена. Ничто так не стимулирует к принятию решения колеблящегося пользователя, как буквально на глазах убегающие секунды.

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

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

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

Примеры ошибок делающих landing нерабочим

Кроме тех вещей, что помогают landing page более эффективно работать, стоит перечислить и часто допускаемые ошибки при создании посадочных страниц , которые могут нивелировать все перечисленные выше «финты ушами», и вы не получите желаемого результата от рекламы или продвижения в социальных сетах (либо контексте).

1. Еще раз напоминаю, что в интернете практически никто не читает (во всяком случае вновь открытую страницу), а именно просматривает информацию. Если она окажется действительно стоящей и требующей более детального изучения, то тогда уже доходит дело и до прочтения (в общем-то, так же как и с газетами). Поэтому не допускайте перегруженности лендинга информацией — это может дезориентировать пользователя и вызвать реакцию отторжения еще до того момента, когда он разберется о чем там идет речь.
2. Текст должен быть небольшого объема, максимально лаконичен и наполнен информацией, а не водой. Пару абзацев «ни о чем» вызовут у пользователя бурное желание закрыть такую посадочную страницу. На landing page также плохо работает мелкий шрифт. В общем-то, его использование и не нужно, ибо для изложения сути много слов не потребуется.
3. Не обманывайте ожидания пользователя. Если в рекламе или в посте в социальной сети вы говорили об одном, а при попадании на лендинг пользователь видит несколько другое, то происходит утрата доверия и резко снижается конверсия. Очень важно следить за этим соответствием.

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

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

У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :

Как должен выглядеть лендинг с точки зрения эффективности? Какие блоки он должен содержать и как эти блоки должны выглядеть? Прочитав статью, вы получите ответы на эти вопросы и увидите, как выглядят лучшие landing page.

1. Заголовок с УТП

У идеального лендинга, одноэкранного или длинного, всегда есть цепляющий заголовок, который:

• сразу дает посетителю понять, куда он попал;
• показывает ему уникальность вашего предложения.

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

От заголовка зависит показатель отказов.

Вот примеры заголовков лучших лендингов нашей компании.

2. Дескриптор

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

В том случае, если на посадочной странице есть заголовок с УТП, дескриптор делают скромным – лого плюс название.

Лучшие лендинги всегда содержат оригинальный дескриптор.

3. Блок с контактными данными

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

• реальный номер телефона;
• электронную почту;
• кнопку «Обратный звонок».

Обязательно используется призыв – просьба позвонить.

4. Привлекательное изображение

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

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

На скриншотах вы видите красивые лендинги с привлекательными изображениями.

5. Формы захвата

Одноэкранный лендинг содержит одну форму захвата, длинный – 2 или 3 формы. Первая форма соседствует с заголовком – рядом с ним или под ним.

Форма захвата содержит графы для ввода имени и телефона. Призыв к действию описывает дополнительные выгоды (подарок, скидку, дополнительную услугу), которые побуждают посетителя к немедленной отправке данных.

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

Вот такими формами захвата мы оснащаем лучшие лендинг пейдж наших клиентов.

6. Блок с выгодами для клиента

Этот блок идеально обходит возражения посетителей. В блоке помещают 3–8 пунктов.

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

7. Отзывы клиентов

Блок с отзывами – ключевой в лендинге.

На лендинге должны быть реальные отзывы по меньшей мере от трех клиентов. Идеальный вариант – окно с возможностью прокрутки, например слайдер, вмещающий 5–10 отзывов.

Каждый отзыв:

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

Вот примеры блоков с отзывами на лучших лендингах нашей студии.

8. Тарифы или пакеты услуг

Покупатели любят выбирать из нескольких альтернатив. Поэтому идеальный лендинг предлагает на выбор 2–3 тарифа или пакета. Неважно, продает лендинг товары или оказывает услуги, на сайте должен присутствовать блок с тарифами.

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

9. Примеры Лендинг Пейдж

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

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

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

10. Реальные контактные данные в футере

Заключительный триггер доверия – блок с контактной информацией о компании или авторе в футере.

В случае с компанией обязательно должна быть карта с указанным местоположением офиса. В случае с автором всевозможные контакты.

Также тут размещается заключительная форма захвата.

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

Все люди постоянно в поисках каких-либо фишек и ноу-хау. Они ищут интересненькие ходы, чтобы результат увеличился в десятки раз.

И как показала наша практика, всё это если и увеличивает прибыль, то только в небольших размерах. Когда по-настоящему могут изменить ситуацию только основы. И как правило, такие темы всегда остаются за кадром. И зря! Время менять приоритеты.

Сегодняшняя статья будет посвящена началу начал – что такое правильная структура лендинга с высокой конверсией.

Я знаю, что ничего не знаю

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

Уже ни для кого не секрет, что продающий и (он же одностраничный сайт) создается не по воле собственной фантазии, а исходя из четких данных основанных на анализе. То есть это не столько творческая работа, сколько точный расчет.

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

1. провести ;
2. выявить ожидания, стереотипы, страхи, боли и возражения ;
3. разделить ЦА на сегменты и определить их критерии выбора.

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

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

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

Правильная и продающая структура лендинга

После подготовительного этапа, следующее, на чём будет строиться наш сайт, это “теплота” трафика. Да, что уж, от этого будет зависеть все!

И наполнение, и фото, и тексты, и . На этом моменте многие допускают ошибку, но мы ведь не такие? 😉

Настоящей находкой для тех, кто задумался о создании лендинга станет, так называемая, “ ”. Выглядит схема следующим образом:

Лестница Ханта

Согласно этой схеме, клиент должен “созреть” и пройти все 5 этапов от отсутствия потребности до готовности купить. Конкретный пример как применять Лестницу Ханта мы разобрали в этом видео:

Для того, чтобы не объяснять все “на пальцах”, далее все будет основано на реальных событиях, а именно на примере landing page одного из наших клиентов – компании по чистке ковров “Чистый квадрат”.

Конверсия компании по чистке ковров “Чистый квадрат”

К слову, средний результат всего трафика – 6% конверсии в заявку, которая в их нише можно назвать покупкой. Много это или мало? Читайте об этом в нашей статье

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

Этап 1: Нет проблемы

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

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

Чаще всего это клиенты, которые его только-только купили. Поэтому в этом случае весь наш сайт будет пропитан структурой PMPHS.

То есть ваша задача с первой фразы накалять атмосферу и рассказывать, что ковры нужно чистить (обрабатывать после покупки).

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

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

Этап 2: Есть проблема, нет решения

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

Используйте эту информацию на своём сайте, что есть решение этой неприятной ситуации.

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

И тут мы показываем решение только в рамках нашей услуги. Не показывая другие решения. Чем отличается данный этап от третьего.

Этап 3: Решение есть, сравниваем варианты

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

1. Нужно чистить ковер, чтобы продлить его срок службы;
2. Необходимо проводить профилактику для избежания скопления бактерий;
3. Ковёр чистить нужно специальной химией и оборудованием, а не мылом и пылесосом;
4. Можно вывести даже самые ужасные пятна.

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

Так как в данном случае клиент выбирает между разными подходами для избавления от задач, которые я написал выше.

Сравнение с конкурентами

Но надо понимать, что эти люди еще не готовы купить, они довольно “холодные” и еще размышляют:

– Может, всё-таки на автомойку или самостоятельно?

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

Этап 4: Выбор продукта

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

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

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

Результат до/после

Этап 5: Уверенность и намерение

Клиенты, которые приходят по таким запросам как “чистка ковров чистый квадрат” ищут конкретную компанию.

Если вы еще не слишком известны, таких запросов либо будет крайне мало, либо не будет вообще.

Такие клиенты, что называется, “горячее” некуда. Все, что им нужно предоставить – наши контакты и .

А Вы откуда?

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

И я не уделяла бы столько внимания этому, если бы структура landing page не зависела от “Лестницы Ханта”.

И чтобы понять на каком уровне осознанности находится Ваш клиент, необходимо перед созданием определить источники трафика.

Когда лендинг создается с нуля, ответ получается очень размытый, в стиле “Да мы все попробуем…Хотя, наверное что-то одно, либо таргегинг, либо … Еще не решили”.

Почему это так важно?

Прототип

Коротко о главном

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

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

При разработке структуры вам нужно: провести , определить уровень осознанности трафика и определить возражения с критериями выбора клиента. И только после этого (не раньше) приступать к разработке.

Общая схема работы с лендингом: как его создать и привлечь людей

Не представляете, как создать лендинг под вакансии или внутриком своими силами? Эксперты MarHR School рассказывают о жизненном цикле посадочной страницы: как подготовить ее к запуску и что делать с лендингом, когда он выполнил задачу.

---

1. Как выглядит общая схема работы с лендингом?

 

Отвечает Елена Кузьменко:

 

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

 

Что касается подготовки к созданию страницы:

1. Анализ вашей ЦА. Это стартовый и ключевой этап, когда вы составляете портрет: что предлагает ваша компания, для кого, какие есть потребности/возражения и т.п.

2. Проработка блоков. Исходя из собранной информации, вы продумываете примерное смысловое наполнение блоков и структуру страницы: что важно на них указать.

3. Тексты и дизайн. Теперь вы прописываете тексты под ЦА, которые собираетесь разместить на лендинге, подбираете палитру/фото/клипарт или готовые шаблоны для оформления и создаете страницу.

4. Счетчики и домен. Перед запуском подключаете к лендингу счетчики для веб-аналитики (Яндекс.Метрика, Google Analytics, Facebook Pixel), домен.

 

В дальнейшей аналитике самое важное — это настраивать цель на количество полученных резюме и использовать utm-метки, чтобы точно определять источники трафика к вам на страницу. Например, с какого поста в Facebook к вам пришли люди, сколько из них отправили резюме. Или какое партнерское размещение оказалось наиболее выгодным. Системы веб-аналитики (Google, Яндекс) не дают такой глубокой информации, только общий обзор, а с метками вы получите полную картину.

 

Дальше — подготовка к продвижению:

 

1. Анализ конкурентов и их способов продвижения. Важно посмотреть, какие инструменты продвижения уже работают у них на одни и те же вакансии. К примеру: если вы работаете с программистами, значит есть и другие компании, которые ищут сотрудников того же типа. У них уже имеется свой наработанный результат. Изучите, как они пишут тексты, какие используют визуалы, на каких площадках продвигаются.

2. Обзор всех доступных способов продвижения.

3. Оценка ресурсов. Решаете, готовы ли вы вкладываться в продвижение или будете использовать только бесплатные инструменты. Исходя из подготовительного анализа ЦА и способов продвижения, выбираете каналы и создаете стратегию.

4. Тексты и визуальные креативы. Создаете материалы под каждый инструмент продвижения лендинга (для таргета, баннеров, постов в профильных группах). Потребности везде разные и зависят от аудитории и алгоритмов площадки.

5. Запуск: a/b тестирование.

6. Финальная аналитика. Собираете данные, составляете воронку (на какой этап сколько людей дошло), делаете выводы для текущей кампании, ее применимости в будущем.

 

Это самая простая и минимальная схема для общего понимания.

 

2.

Сколько обычно живет лендинг?

 

Отвечает Алина Михель:

 

Срок жизни лендинга зависит от ваших задач.

 

Закрыли проект — необходимость отпала, закрываете лендинг и кидаете его макет в архив. Здесь как с размещением вакансии на hh.ru: когда позицию закрыли, отправляете страницу в архив; понадобилась снова — восстанавливаете. Логика та же самая.

 

Как вариант, вы можете даже не закрывать лендинг, а видоизменить его, поставив как бы «заглушку». Допустим, ваша вакансия закрылась и написали на лендинге: «Сейчас набор приостановлен, спасибо за ваше резюме, в случае чего вы с вами свяжемся». Вы будете продолжать периодически получать с него резюме, таким образом формируя кадровый резерв.

 

Если вакансия у вас в перспективе может заново открыться — оставьте этот лендинг. В той же Tilda есть возможность скрыть его из поиска. Хотя вероятность того, что ваш лендинг попадет в поиск, довольно небольшая, так вы будете уверены, что он не индексируется на первых страницах. Поэтому ничего не мешает просто его закрыть, и пусть лендинг живет как шаблон для будущих проектов — зачем убивать 🙂

 

Мне интересна тема лендингов в HR, но я про них почти ничего не знаю. С чего начать?

Структура лендинг пейдж – блоки, элементы и схема одностраничника

⇐ ПредыдущаяСтр 14 из 17Следующая ⇒

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

Чем теплый отличается от холодного? Теплый клиент уже хочет купить, он уже это решил, и если он пришел на ваш лендинг с контекстной рекламы, то в данный момент решает вопрос «где купить?» Да, у него есть определенные возражения и ожидания. Поэтому наша задача – оправдать его ожидания и нейтрализовать возражения.

Это было краткое вступление, чтобы все поняли, о чем идет речь в публикации. Далее переходим непосредственно к теме публикации – структура и элементы лендинга. А если вы не представляете, что такое лендинг пейдж, то прочитайте предыдущий пост.

Структура лендинг пейдж

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

Есть 5 основных необходимых элементов landing page, которые нужно использовать всегда, за небольшим исключением. Каждый блок лэндинга может быть разбит на более подробные блоки, если есть необходимость.

6. Ваше уникальное торговое предложение (аббревиатура УТП)

1. Основной заголовок

2. Дополнительный заголовок

3. Усиление предложения

4. Решающий аргумент

7. Демонстрация продукта/услуги или результата их использования

8. Преимущества вашего предложения

1. Список выгод или графическая демонстрация

2. Выгоды и особенности в деталях

9. Социальное доказательство

10. Единственная цель конверсии – ваш призыв к действию (Call-to-Action), с формой или без формы контактов. Не нужно давить на клиента разными CTA, например, «Посмотрите каталог, Оставьте заявку, Скачайте прайс, Позвоните». CTA должен быть 1 для страницы.

На картинке ниже представлена схема лендинг пейдж и продемонстрировано использование элементов внутри страницы.

Заголовок

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

Исходя из того, что люди не хотят читать большие тексты, если у людей есть возможность быстро найти/увидеть и прочитать на странице ваши самые важные сообщения (например, ваш заголовок), они более склонны принимать его во внимание и читать. Если посетитель не может найти подтверждение того, что он оказался в нужном месте – он уходит. Например, человек ищет «создание лендинг пейдж», попадает на лендинг и не видит заголовка в котором ясно сообщается, что на этой странице идет речь именно о разработке, а не о конверсии, тестировании, продаже и так далее, то он покинет странице. А вы не получите конверсию.

Пример ниже включает в себя два лендинга с двумя различными конструкциями, в том числе с различными заголовками. Конверсия первой посадочной страницы составляет 3%, а второй 18.7%.

Заголовок – это ваш первый и единственный шанс вовлечь и убедить посетителя остаться на вашей странице и изучить дальнейшее содержание.

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

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

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

3. Изображения

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

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

4. Видео (если уместно)

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

Лучшее место для расположения видео – в первом экране или частично в нем, чтобы помимо прочей информации пользователь видел хотя бы часть видеоплеера (если не установлено автоматические воспроизведение).

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

Краткое описание

Предназначение описания – объяснить потенциальной аудитории, что это за продукт и почему он хорош. Достаточно 4-6 предложений. Только суть.

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

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

Рекомендуемые страницы:

Существует ли правильная структура лендинга?

Разработка сайтов

В предыдущих материалах мы разобрали, что такое landing page, в каких ситуациях и почему его рекомендуется использовать, но при этом и сделали оговорку, что далеко не каждая посадочная страница строится по каким-то общепринятым негласным правилам. Действительно, создание сайта – это не точная наука, здесь всегда можно проявить индивидуальность, отойдя от шаблонных решений, и в итоге оказаться в выигрыше. Однако сугубо творческий подход тоже не всегда себя оправдывает: от сайта, продающего щебень, не требуется вычурности страницы студии дизайна. Поэтому в определенных моментах действительно лучше идти проверенными путями и не изобретать велосипед. Ниже речь пойдет об этих самых путях, но мы еще раз оговоримся, что «правильный лендинг» — это условность, и если на вашем сайте вы отойдете от подобных норм, еще не факт, что он станет «неправильным».

Ответ на вопрос «Как сделать правильный лендинг пейдж?» для каждой ниши свой, но далее мы разберем основные блоки, которые могут применяться на посадочных страницах в большинстве случаев. Где-то имеет значение их порядок, где-то наличие или отсутствие не сыграет существенной роли, а где-то использование их всех слишком сильно загрузит посетителя информацией и обращаться к вам он не захочет. Тем не менее, мы ведем речь об очень усредненном сайте, типовую структуру которого можно обозначить таким образом:

1. Первый экран, на котором располагаются оффер и форма обратной связи.
2. Ваши преимущества, которые в идеале нужно преподнести как выгоды, которые получит ваш клиент.
3. Представление вашего товара, описание его характеристик в самом широком понимании.
4. Описание проблем, которые могут возникнуть и потребителя, если он решит приобрести аналогичный, но некачественный товар/услугу, а также убедительное пояснение, почему с вами таких неприятностей у него не будет.
5. Блок, в некотором роде дублирующий третий, но делающий другие акценты. Служит для закрепления у клиента положительного образа вашего товара, а также раскрывает его с других сторон. Это может быть фотогалерея, портфолио, кейсы и т.д., в зависимости от того, что вы продаете.
6. Акция. Еще один call to action – на этот раз с дополнительным преимуществом. Акция должна быть обоснована (скидку 50% любому обратившемуся предлагать не стоит, необходимо создать хотя бы ограничения по времени обращения), интересна клиенту и не бить слишком сильно по вашему карману.
7. Идеальный лендинг пейдж не может обойтись без отзывов. Отзывы должны быть реальными. Не спрашивайте, как, но если вы сами их придумаете, то посетитель это почувствует. В идеале это должны быть благодарственные письма с печатями конкретных юридических лиц, такие отзывы не очень сложно заполучить, если вы действительно качественно выполняете свою работу.
8. В футере сайта размещается контактная информация и еще одна форма оставления заявки.

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

Схема и правила создания продающего лендинга

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

Главное на первом экране это заголовок или оффер. К нему стоит подойти наиболее основательно, и составить продающий оффер не так и просто, потому что в нем вам стоит предложить клиенту ту выгоду, в которой он больше всего нуждается, сделать так, чтобы это не звучало, как пустое обещание, небанально и, желательно, емко. Создать стройно звучащую фразу, отвечающую всем этим требованиям, удается далеко не каждому, несмотря на наличие онлайн-генераторов заголовков по схеме 4P и т.д. (это тема отдельного разговора).

Если всех выгод в рамках одного заголовка предложить не получается, то можно прибегнуть к подзаголовку. Он пишется более мелким шрифтом, и здесь уже можно позволить себе отойти от строгих форм, но все равно он не должен превращаться в целый абзац текста. Как мы помним, лаконичность не в ущерб полноте информации – это одно из главных оружий landing page.

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

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

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

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

Теперь несколько важных моментов касательно других блоков.

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

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

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

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

Идеальный лендинг — реально ли добиться совершенных результатов?

Нет. И чем раньше вы это поймете, тем лучше. Ваш сайт может работать успешнее любого конкурента, показывать рекордную конверсию при громадном трафике, низкий процент отказов или попасть в списки самых красивых сайтов по версии каких-нибудь независимых экспертов, но никогда нельзя думать, что выше результата получить нельзя. Одна из причин тому – неоднородная целевая аудитория. Не только в плане предпочтений в разрезе вашего продукта, но и в плане отношений к сайту как таковому. А значит у вас есть бесконечное множество вариантов описания ваших конкурентных преимуществ и формы их преподнесения на сайте. Какой из них лучше, смогут показать лишь сплит-тесты, количество которых ограничено только вашей фантазией. Главное – не стоит слишком увлекаться и не резать курицу, несущую золотые яйца. Если ваша посадочная страница уже показывает превосходные результаты и способы их улучшения не представляются очевидными, то на исходную страницу стоит пускать минимум половину трафика, чтобы из-за экспериментов ваш доход изменялся несущественно. Еще одна причина невозможности достигнуть идеала – время. Правила создания лендингов меняются: сайты, которые хорошо смотрелись десять лет назад, сегодня редко могут посоперничать с более молодыми и актуально выглядящими конкурентами. Но даже если не брать в расчет такие большие промежутки, то все равно регулярно появляются новые тренды и фишки, по отдельности, возможно, и не являющиеся особо существенными, но в совокупности их применение может обеспечить положительный эффект. Поэтому, если сейчас сайт кажется вам близким к идеалу, то чем больше времени проходит, тем больше риск, что от совершенства он отдаляется всё дальше. И не менее важен следующий аспект: чем больше появляется лендингов ваших конкурентов, и чем чаще на них используются одни и те же приемы, тем сильнее у вашего клиента «замыливается» глаз, и в итоге информация, которую он встречал не единожды, его совсем не интригует или даже снижает доверие.

Главный вывод, который можно из этого сделать: улучшать лендинг можно всегда, другое дело, что с течением времени это становится всё труднее, и перебрать все возможные варианты очень трудно, если вообще возможно, несмотря на то, что структура landing page весьма жесткая. С этой точки зрения, идеал недостижим. Но зато можно выявить все основные проблемы и ошибки, появление которых на сайте крайне нежелательно, всё, что рубит конверсию на корню. Лучше заняться их исправлением (что тоже может быть процессом не простым), а не апгрейдом того, что уже справляется со своими задачами. Когда вы это сделаете и поймете, что на вашем сайте ничто не отпугивает потенциального клиента, то действительно есть повод сказать, что сработали вы идеально.

И в качестве бонуса: схема лендинга с программой-минимум по наличествующим блокам. Для очень многих ниш их будет достаточно, особенно, если сайт вам нужно запустить в срочном порядке.  

Структура конверсионного лендинга — агентство интернет рекламы R-брокер

Что такое лендинг и для чего он нужен?

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

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

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

Мы собрали перечень основных элементов лендинга в одном из вариантов последовательности.

Итак, что обязательно должно присутствовать в лендинге?

ШАПКА

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

1. Логотип

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

2. Меню

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

Количество пунктов меню — не больше пяти-шести. Названия пунктов лучше делать из одного слова.

Меню должно быть кликабельно и адаптировано под мобильные устройства, в которых чаще всего оно превращается в «бургерное» меню:

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

3. Контакты

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

• электронная почта

• физический адрес и обязательно карта — это повышает доверие:

• формы захвата и поп-апы — должны появляться при скролле, при клике на кнопку или при уходе со страницы, но не сразу:

Если вы не уверены в том, что вам нужен онлайн-чат, можно использовать бесплатную версию (например, JivoSite) и посмотреть, пишут туда люди или нет. Если за два месяца никто не написал — чат не нужен. Если пишут постоянно, пора заказывать персонализированный чат (например, у LiveTex).

ПЕРВЫЙ ЭКРАН

Первый экран — самый главный. Он содержит оффер — ваше уникальное торговое предложение.

Оффер может быть выражен силами заголовка, под- и надзаголовка, иллюстрацией и кнопкой, содержащей призыв к действию.

4. Заголовок

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

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

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

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

Подзаголовок можно синтаксически связать с кнопкой. Кнопка становится логическим продолжением подзаголовка.

6. Надзаголовок

Если заголовок занят формулировкой преимуществ, суть товара можно пояснить в надзаголовке:

7. Иллюстрации

Яркие иллюстрации и фото в хорошем качестве привлекают внимание пользователей. Их использование в лендинге — обязательно.

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

Также на главном экране можно использовать анимацию и видео.

8. Кнопка

Кнопка — это центральный, самый важный элемент лендинга. Она должна содержать призыв к действию. На нее направлено все внимание пользователя!

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

Кнопка должна быть яркой и контрастной — важные объекты выделяйте графически: делайте светлее или темнее остальных.

ОПИСАНИЕ ТОВАРА

Описание товара или услуги должно опираться на информацию о целевой аудитории. До запуска лендинга необходимо исследовать эту аудиторию и выявить все возможные возражения («Дорого», «Долго», «Неудобно», «Неизвестен результат», «Не сейчас»). Текстовые блоки в описании товара должны закрыть все возражения, учесть все боли клиента (то, что его тревожит), ответить на все его вопросы.

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

9. Преимущества

В блоке преимуществ мы не только сообщаем, чем хорош наш товар, но и отстраиваемся от конкурентов — показываем, чем наш товар лучше товаров остальных производителей.

10. Схема работы

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

Услуга тоже может быть описана: каков процесс? как это работает? чего ожидать от мероприятия?

11. Тарифы и цены

Тарифы и цены обязательно должны быть на странице:

Конкретное обозначение цены и скидки (или условий действующей акции) экономит время пользователя:

12. Расписание

Точное расписание тоже помогает понять, подходит услуга или нет:

13. Примеры выгод

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

БЛОКИ ДОВЕРИЯ

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

14. Информация о компании

Формируйте положительный имидж компании, демонстрируйте квалификацию и опыт работы:

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

15. Награды, сертификаты, лицензии

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

16. Отзывы

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

17. Кейсы и истории успеха

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

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

18. Примеры работ

Если вы можете показать товар лицом, пользуйтесь этой возможностью:

19. Список партнеров

Известные марки и компании в списке партнеров — внушают доверие:

20. Фото команды и офиса

Фотографии офиса и рабочего пространства формируют привлекательный образ компании:

Фотографии сотрудников — шаг к знакомству. А в некоторых случаях они могут продемонстрировать и компетентность:

ПОДВАЛ

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

Вот некоторые элементы, которые тоже полезно расположить в подвале:

• копирайты

• правовые оговорки — ОГРН, ИНН и другая юридическая информация о вашем бизнесе увеличит доверие пользователей

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

• биллинговая информация

• кнопки соцсетей

• прокрутка вверх

• FAQ (ответы на частые вопросы)

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

Если вы экономите свое время — доверьте разработку лендинга специалистам. «R-брокер» не просто создаёт лендинги, но и обеспечивает маркетинговую поддержку, настраивает аналитику и внедряет инструменты коммуникаций и анализа поведения пользователей. Конверсии появятся уже через три дня после запуска!

Как выбрать идеальные цвета целевой страницы, которые преобразуют

Во многих статьях, посвященных цвету в маркетинге, делается попытка проанализировать, как определенные оттенки вызывают у клиентов ощущение . Они пытаются превратить нас как маркетологов в своего рода персонажа «Зигмунда Фрейда, веб-дизайнера», способного подсознательно преобразовывать наших потенциальных клиентов в сложные цветовые комбинации.

Это не одна из тех статей.

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

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

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

Наша реакция на цвета слишком зависит от личного опыта.

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

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

Психология цвета иная. Если я спрошу вас, с каким цветом у вас ассоциируется чувство ревности, что вы ответите?

Наверное, зеленый, как видно из фразы «зеленый от зависти», не так ли?

Ну, во Франции желтый цвет ассоциируется с ревностью.В США, если бы мы связали желтый с определенным чувством, это, вероятно, было бы трусостью — как видно из архаического оскорбления «желтый живот»:

«Никто не называет меня« желтым »»

Видите, к чему мы клоним?

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

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

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

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

Основные, второстепенные и третичные цвета

Помните, в средней школе вы спрашивали своего учителя рисования: «Какой смысл это знать? Когда я вообще собираюсь использовать цветовое колесо в реальном мире?

… Если бы только он был здесь, чтобы сказать: «Я же тебе сказал.”

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

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

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

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

Взять, к примеру, синий. Посмотрите на два поля против часовой стрелки, и вы увидите второй цвет, зеленый. Когда вы объединяете два, вы получаете то, что между ними на колесе: сине-зеленый.

Теперь, что происходит, когда мы добавляем в смесь черный и белый?

Оттенки, оттенки, оттенки и тона

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

Любые первичные, вторичные или третичные цвета, которые не смешиваются с черным или белым, называются «чистыми» цветами или «оттенками». Они смелые, яркие и привлекающие внимание.

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

«Тень» создается путем добавления черного к выбранному оттенку.Это значительно их затемняет.

Смешивание черного и белого (серого) цветов с любым элементом цветового круга создает более спокойный, менее вызывающий впечатление «тон». Это значительно снизит его смелость.

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

Понятно?

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

Дополнительные, монохромные и аналогичные цвета

Теперь, когда вы понимаете цветовое колесо в его полной форме, пора выяснить, как сочетать цвета, которые хорошо смотрятся вместе.

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

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

Дополнительные цвета расположены напротив друг друга на цветовом круге. Из-за этого противодействия их использование на целевой странице после клика выделит элементы. Это цветовые комбинации, такие как желтый и фиолетовый (неудивительно, что майки Los Angeles Lakers так привлекают внимание).

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

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

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

Тетрадические, квадратные и триадные цветовые комбинации

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

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

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

Квадратная цветовая схема похожа на тетрадную, за исключением того, что две ее пары равномерно разнесены на цветовом круге.Например, оранжевый, фиолетовый, желто-зеленый и синий:

Тройная цветовая схема также включает цвета, равномерно распределенные по цветовому кругу, но только три вместо четырех. Например: желтый, красный и синий:

Хорошо! Мы закончили с теорией цвета. Мы обещаем. Теперь давайте поговорим о том, как использовать эти цвета на целевых страницах после клика.

Фон, основа и акцент

Цветовые компоненты целевой страницы после щелчка можно разделить на три части: фон, основа и акцент.Когда дело доходит до распределения цветов между ними, профессиональные дизайнеры, такие как Джаред Кристоферсон из Yellowhammer, предлагают вам выбрать три и следовать правилу 60-30-10.

Фон занимает больше всего визуального пространства на целевой странице после клика, поэтому из трех цветов, которые вы выберете, этот будет доминирующим. Выделите 60% цвета своему фону и избегайте ярких, ярких и чистых оттенков. Их лучше всего использовать на кнопках CTA. Вместо этого выберите более тусклые тона, более тонкие оттенки или более темные оттенки, чтобы создать контраст между элементами вашей страницы (для многих целевых страниц после щелчка этот цвет белый).

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

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

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

Вот несколько отличных примеров различных типов цветовых схем, основанных на теории цвета, от медиа-специалиста Джоша Байера:

Аналог

Дополнительные

Монохромный

«Хорошо, хорошо. «Хватит схем», — скажете вы. «Как насчет примеров из реальной жизни?» Хорошо, сначала давайте рассмотрим пример того, как не раскрашивает ваши веб-страницы для конверсии.

Вот целевая страница после клика от Salesforce Pardot:

Давайте разберем фон, основу и акцент этой страницы.

Фон: Белый
Основа (форма, логотип): Синий
Акцент (CTA): Синий оттенок

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

Помните, что теория цвета говорит о монохроматических цветовых сочетаниях? Они приятны для глаз, но не умеют выделять элементы страницы; и это прямо противоположно тому, что вы хотите для кнопки с призывом к действию.

Теперь, с другой стороны, эта целевая страница после клика в Мониторе кампании находится на месте:

Фон: Синий
Основание (нижний колонтитул, значки): Серый
Акцент (CTA): Зеленый

Почему эта страница работает лучше предыдущей? Потому что команда Campaign Monitor использовала цвета из квадратной схемы, чтобы выделить свою кнопку CTA.

Фактически, это тот же самый квадрат, который мы использовали в нашем примере выше.

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

На этой схеме только более прохладная половина квадрата представлена ​​на странице синим и зелено-желтым цветами. Оранжевая или красно-пурпурная кнопка заслуживает A / B-тестирования этого элемента управления, чтобы увидеть, увеличивает ли она коэффициент конверсии.

Если все это правда, как насчет всех сообщений в блогах, которые утверждают, что знают лучшие цвета для конверсии?

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

Но ретроспективно 20/20.

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

Возьмем, к примеру, наиболее широко распространенный пример использования цвета кнопок на сайте HubSpot:

Они обнаружили, что красная кнопка превосходит зеленую на 21%.

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

Итак, возьмите секунду и посмотрите.

Что ты видишь?

Слева мы видим много зеленого, не так ли? Зеленый логотип, зеленый значок рядом с сгибом, а также оттенок и оттенок зеленого на фотографии на странице.

А как насчет справа?

По-прежнему много зеленого цвета, но в этой версии кнопка выскакивает на вас, не так ли?

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

Это все действительно потрясающе. С чего мне начать?

Вам сложно выбрать цвет для начала?

В таком случае обратите внимание на свой логотип.

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

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

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

Если вы обратитесь к диаграммам Джоша Байера выше, вы заметите, что ваш заголовок должен быть вашим основным цветом.Это означает, что ваш логотип должен располагаться на этом базовом цвете. Итак, выберите тот, который хорошо демонстрирует ваш логотип, например, у Facebook:

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

Или, если вам нужен изящный маленький ярлык, перейдите в Adobe Kuler, чтобы использовать их интерактивное цветовое колесо. Это поможет вам выбрать схему на основе выбранного вами цветового правила:

Вот руководство, которое поможет вам начать работу.

Сводка

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

Цветовой круг

• Основные цвета: красный, синий и желтый. Их нельзя получить, комбинируя какие-либо другие цвета, и они объединяются, чтобы получить второстепенные цвета.
• Дополнительные цвета: оранжевый, зеленый и фиолетовый. Они сочетаются с основными цветами, чтобы получить третичные цвета.
• Есть 9 третичных цветов. Когда основной цвет сочетается со второстепенным, полученный им третичный цвет имеет преимущественно характеристики основного цвета, от которого он исходит, а некоторые — от второстепенного.Красный в сочетании с оранжевым дает красно-оранжевый цвет, а красный в сочетании с пурпурным — в красно-пурпурный.

Добавление черного и белого

• Оттенки — это чистые цвета без добавления черного или белого.
• Добавление белого к оттенку создает более светлый и нежный цвет, называемый «оттенком».
• Чистые цвета с добавлением черного цвета образуют более темную версию оттенков, называемую «оттенком».
• Чтобы создать «тон», менее яркую версию оттенка, объедините его с черным и белым (серым).

Создание цветовых схем

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

Более сложные комбинации цветов

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

Фон, основа и акцент

• Фон визуально составляет большую часть целевой страницы после клика.60% выбранных вами цветов должны быть посвящены ему.
• На целевой странице после клика ваш основной цвет занимает второе место по визуализации. Он охватывает ваш верхний колонтитул, нижний колонтитул и вашу форму. Ему должно быть посвящено 30% цвета в вашей схеме.
• Акцентный цвет предназначен для использования в наиболее важных элементах вашей страницы, чтобы выделить их. Он должен занимать только 10% вашей страницы.

Создание собственной цветовой схемы

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

Какие цвета целевой страницы после клика вы выберете?

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

Начните повышать конверсию с помощью теории цвета, создав свою первую целевую страницу после клика, подпишитесь на демонстрацию Instapage Enterprise сегодня.
.

26 вдохновляющих цветовых схем веб-сайтов в 2021 году (палитры для дальтоников)

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

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

В этой статье мы рассмотрим более 25 фантастических цветовых схем веб-сайтов для целевых страниц, электронной коммерции и личных сайтов, а также то, как вы можете выбрать свою, не теряя времени.

Как выбрать цветовую схему для вашего сайта

Глаза нецветного взрослого человека могут видеть более 1 000 000 различных цветов. Как быстро и эффективно выбрать правильную цветовую схему со всеми этими вариантами? Это проблема, с которой сталкиваются все веб-дизайнеры, пытающиеся создать цветовую схему или палитру для своего дизайна с нуля.

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

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

Выбор цвета по отрасли

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

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

Цвета бренда по отраслям (Источник изображения: towergateinsurance.co.uk)

Какие эмоции вы хотите, чтобы потенциальные клиенты ассоциировали с вашим брендом, продуктом или услугой?

Это наводящий вопрос, который должен помочь вам определить основной цвет для вашей палитры.

Синие конвейеры:

Синий цвет надежности

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

Это не апеллирует к спонтанности или эмоциям. Вместо этого он инициирует спокойный и логичный процесс принятия решений.

Наиболее часто встречается в следующих отраслях:

• Банковское дело
• Авиакомпании
• Связь
• Потребительское финансирование
• Электроэнергетика
• Тяжелая техника
• Товары для дома
• Отели
• Фармацевтические препараты

Красные конвейеры:

Красный передает внимание и страсть

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

Наиболее часто встречается в следующих отраслях:

• Рестораны
• Напитки
• Розничная торговля продуктами питания
• Недвижимость
• Одежда

Зеленые конвейеры:

Зеленый передает ощущение жизненной силы

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

Наиболее часто встречается в следующих отраслях:

• Продукты питания и напитки
• Универмаги
• Недвижимость
• Химические вещества

Черный: уверенность, изысканность

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

Наиболее часто встречается в следующих отраслях:

• Одежда
• Принадлежности
• Провайдеры услуг Интернета и мобильной связи
• Универмаги
• Отели

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

Сколько цветовых схем следует использовать на одном веб-сайте?

Для стандартной цветовой схемы веб-сайта вы можете выделить от трех до семи отдельных цветов в одной схеме или палитре.

Но сколько разных цветовых схем вы должны использовать на одном веб-сайте?

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

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

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

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

62–90% первоначального впечатления потребителей основывается только на выборе цвета … а это означает, что поиск правильной цветовой схемы для вашего сайта — это не просто эстетическое, а деловое решение. 🎨✨Нажмите, чтобы написать твит

Как получить точные цветовые схемы на веб-сайте

Colorzilla

Чтобы идентифицировать каждый цвет, используемый на веб-сайте, вплоть до точного оттенка и шестнадцатеричного кода, вы можете использовать расширение Google Chrome или надстройку Firefox, например ColorZilla.

Установив ColorZilla, вы можете просто навести указатель мыши на любой элемент дизайна на любом сайте, логотипе или изображении, и он покажет вам точные шестнадцатеричные коды цветов HTML или RGB для этого пикселя. Если вы не хотите идентифицировать используемые цвета один за другим, вы также можете использовать генератор цветовой палитры, который будет использовать изображение, например инструмент извлечения цвета изображения Colormind.

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

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

Какую цветовую схему веб-сайта мы используем в Kinsta?

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

Медиа-комплект Kinsta

Мы используем темно-фиолетовый (# 5333ed) в качестве основного цвета, бирюзовый (# 2cd4d9), чтобы сопоставить и создать привлекательные, но сбалансированные градиенты, и приглушенный серый цвет для текста (# 6E7076).

Но что делают другие компании?

Давай узнаем!

26 лучших примеров цветовых схем для веб-сайтов

Мы обыскали Интернет в поисках отличных примеров цветовых схем и даже разделили сайты по категориям, чтобы вам было легко найти вдохновение на соответствующих веб-сайтах.

Цветовые схемы веб-сайта Great Ecommerce

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

1. Средство для ухода за кожей: яркое и игривое

Bliss

Когда дело доходит до бренда,

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

2. Бренд одежды: Clear and Concise

Le Bonnet

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

3. Магазин одежды: Simplicity

Редакция

Revise Concept — это сайт бренда одежды, и вместо того, чтобы полагаться на цвета в цветовой палитре веб-сайта, он использует простые цвета и белое пространство, чтобы выделить цвета и дизайн самой одежды.

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

4. Посуда: надежность и профессионализм

Моя посуда

My Tableware — это немецкий сайт электронной коммерции, где продаются столовые приборы и блюда по индивидуальному заказу.

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

5. Жевательная резинка: натуральная и импульсная

Neuro

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

Красный и оранжевый — это обращение к эмоциям и импульсивным решениям, отличное использование акцентных цветов.

6. Наручные часы: изысканность и роскошь

Премьер-посол

Prime Ambassador — это шведский бренд часов, имеющий стильный сайт электронной торговли, посвященный продукции. Цветовые сочетания почти золотисто-светло-коричневого оттенка на темно-сером фоне и деревянные акценты на картине дарят посетителю ощущение изысканности и роскоши.

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

7. Брюки: креативные и доступные

Алдай

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

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

8. Фруктовые закуски: элегантные и подчеркнутые цвета

Мэдис

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

Черный фон и желтое олицетворение спелого манго подчеркивают простоту дизайна и создают элегантный конечный продукт.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили посещаемость более чем на 1000%?

Присоединяйтесь к 20 000+ другим пользователям, которые получают нашу еженедельную новостную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

9.Джинсовая ткань индивидуального кроя: It’s Alive

Без вращения

Unspun использует ярко-красный и оранжевый цвета, чтобы оживить сайт. Идеально подходит для общения с аудиторией, ведущей активный и яркий образ жизни.

Цветовые схемы личных и туристических веб-сайтов

Ниже вы можете найти нашу подборку лучших примеров цветовых схем для личных и туристических сайтов.

10. Творческая простота

Мадлен Далла

Мадлен Далла — фотограф из Нью-Йорка с большим чутьем в дизайне веб-сайтов (и впечатляющим портфолио).

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

11. Оттенки серого с всплеском

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

12. Единство с природой

iFly 50

iFly 50 — это онлайн-журнал, выпущенный KLM в честь своего 50-летия.

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

13. Чистота и профессионализм

Бенедиктас Гилис

Сайт Бенедиктаса Гилиса — это мастер-класс по чистому дизайну.Здесь нет беспорядка, и это также относится к выбору цвета.

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

14. Прагматические цвета

BucketListly

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

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

15. Элегантная простота

Ларс Франзен

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

16. Футуристическая накладка

Точечное легкое

Персональный сайт

Dot Lung отлично справляется с задачей максимизировать простую цветовую палитру с наложениями и чистой фоновой графикой. Фиолетовый цвет на заднем плане создает единое впечатление от страницы к странице.

17. Свет и тьма

Любовь к Исландии

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

Цветовые схемы целевой страницы

Ниже мы выделили различные целевые страницы с уникальными или эффективными цветовыми схемами.

18.Резкие контрасты

Zenly

Zenly использует резко контрастирующие цвета, чтобы подчеркнуть фактическую функциональность приложения Live Map (кстати, именно так вы встраиваете Google Maps на сайты WordPress). Космический фон выделяет глобальный дизайн приложения и придает ему футуристический оттенок.

19. Цвет для выделения

Slack

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

Обязательно ознакомьтесь с нашим подробным сравнением Microsoft Teams и Slack.

20. Яркие цвета вызывают эмоции

Spotify

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

21. Цветовые контрасты создают порядок в хаосе

Автономность

Autonomy использует цвета и контраст для создания порядка в хаотичном анимационном дизайне. Яркий желтый цвет прорезает и отделяется от фона и других объектов.

22. Футуристический ансамбль цветов

Багснаг

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

23. Живые цвета

Connect Homes

Целевая страница

Connect Homes оживает яркими, но мягкими цветами. Цветовая палитра обеспечивает захватывающий баланс, который передает современный вид.

24. Консервативные цвета, игривый дизайн

Plink

Целевая страница

Plink основана на относительно консервативном оттенке темно-синего, но уравновешивает его игривой и веселой анимацией и дизайном в целом.

25. Природная жизненная сила

Travelshift

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

26. Яркие краски надежды

Мазок в мире

Swab the World использует цветовую схему из ярких контрастных цветов, чтобы передать чувство надежды. Идеально подходит для целевой страницы некоммерческой организации. Сочетание цветов сочетается с формами, чтобы подчеркнуть современный / футуристический подход, который они используют для решения этой задачи.

Генераторы цветовых схем веб-сайтов

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

Colormind

Colormind

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

Coolors.co

Coolors.co

Coolors.co — это веб-приложение и мобильное приложение, которое помогает создавать палитры с нуля. В нем есть альтернативные оттенки для каждого варианта цвета и другие расширенные инструменты, которые помогут вам принимать эффективные решения о ваших цветовых схемах.

Палетон

Палетон

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

ColorSpace

ColorSpace

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

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

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

Различные виды дальтонизма

Не все видят «стандартную» цветовую гамму. Существует три основных типа дальтонизма: дейтеранопия, протанопия и тританопия.

Красно-зеленая дальтонизм (дейтеранопия и протанопия) — наиболее распространенная форма дальтонизма. Это поражает примерно 1 из 12 лиц североевропейского происхождения. Учитывая такое большое количество людей, затронутых этим, это стоит учитывать при разработке и / выборе темы WordPress.

Сине-желтая цветовая слепота встречается гораздо реже и в равной степени поражает мужчин и женщин.

Как выбрать для своего веб-сайта палитру для дальтоников

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

• Не противопоставляйте зеленый цвет желтому и наоборот.
• Не контрастируйте желтый с красным или оранжевым.
• Не противопоставляйте фиолетовый оттенок синему.

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

Выделите свой сайт из толпы (и увеличьте продажи) с помощью правильной цветовой схемы 🎨🌈Нажмите, чтобы твитнуть

Сводка

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

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

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

А теперь пора выбрать шрифты, не так ли?

---

Экономьте время, деньги и повышайте производительность сайта с помощью:

• Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
• Интеграция Cloudflare Enterprise.
• Глобальный охват аудитории с 28 центрами обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Почему цветовая схема вашей целевой страницы важнее, чем вы думаете

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

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

Мы говорим о цвете.

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

Фактически, существует целый раздел психологии, посвященный выяснению того, как цвет влияет на поведение человека (это называется психологией цвета), и исследования показывают, что когда дело доходит до привлечения клиентов, визуальные эффекты имеют значение.

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

Так что это значит для вас? Это означает, что если вы хотите повысить коэффициент конверсии, ваша цветовая схема имеет значение.

Вот что вам нужно знать…

Выбор цвета по целевому рынку

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

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

Женщины предпочитают…

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

Мужчины предпочитают…

Если ваша целевая аудитория — в основном мужчины, вам следует использовать смелые цвета, такие как красный, синий, зеленый и даже черный (однако оказывается, что вы все же хотите избегать землистых тонов). Используйте более глубокие и смелые оттенки этих цветов, поскольку они традиционно ассоциируются с мужественностью (и избегайте более светлых «женских» оттенков).

Источник: Kissmetrics

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

Международные рынки предпочитают…

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

В таких странах, как Китай, например, белый цвет используется в торжественных случаях, таких как похороны, поэтому он не ассоциируется с теми же «счастливыми» эмоциями (свадьба, чистота и т. Д.)), которую любят американцы, в то время как смелые цвета, такие как красный или желтый, пользуются большой популярностью. Американцы любят синий цвет за его силу и безопасность, но в некоторых странах он символизирует одиночество и печаль.

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

Выбирайте цвета по фирменному стилю

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

Red Conveys…

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

Orange Conveys…

Хотя оранжевый и не самый популярный цвет, он все же имеет свое место на вашей целевой странице, если вы хотите показать дружелюбие, веселье и уверенность, поэтому его часто используют для спортивных товаров и детских товаров.Его можно использовать в качестве акцента или, если у вас сайт электронной коммерции (например, Amazon.com), вы можете использовать оранжевый, чтобы стимулировать продажи во время оформления заказа.

Yellow Conveys…

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

Green Conveys…

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

Blue Conveys…

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

Purple Conveys…

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

Черный передает…

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

Белый передает…

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

Источник: Нил Патель

Выбирайте цвета стратегически

Если вы все еще не уверены, какие цвета помогут вам достичь максимальной конверсии, примите во внимание следующее:

Первые впечатления имеют значение. У вас есть только один шанс (90 секунд!) Охватить аудиторию цветами, поэтому, если вы не можете выбрать между ярким красным или мягким желтым, выберите тот, который окажет наибольшее влияние на первый взгляд. Просто помните, что вы хотите произвести хорошее впечатление на новых посетителей, не отталкивая постоянных клиентов, поэтому используйте жирные акценты с пустым пространством, чтобы компенсировать другие элементы. Держите ваш образ чистым, но привлекающим внимание.

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

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

Как теория цвета влияет на конверсию целевой страницы

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

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

Что такое теория цвета?

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

Теория цвета — обширная тема, которая веками интересовала художников и ученых. Некоторые из самых ранних принципов теории восходят к 1435 году, когда писал итальянский человек эпохи Возрождения Леоне Баттиста Альберти;

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

Конечно, более поздние теоретики, включая Леонардо Де Винчи и Иссака Ньютона, доказали, что три основных цвета на самом деле — красный, желтый и синий.

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

В последние несколько десятилетий появилась теория цифрового цвета. Теоретики, дизайнеры и веб-разработчики работали над исследованием того, как цвет переводится и просматривается через цифровые платформы.

Как теория цвета связана с вашими целевыми страницами?

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

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

1. Контрастные цветовые комбинации и удобочитаемость
2. Психологические цветовые ассоциации

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

Это поможет вам привлечь посетителей на вашу целевую страницу в первые несколько секунд и значительно снизит показатель отказов. Это также поможет вам создать эффективные призывы к действию и увеличить продажи.

Что ваш выбор цвета говорит вашим посетителям?

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

I’m blue da ba dee da ba die (Источник изображения)

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

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

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

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

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

Розовый обычно считается романтичным и женственным цветом.Он символизирует любовь, тепло, заботу, спокойствие и сексуальность.

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

Черный — яркий цвет, который источает гладкость, изысканность и эффективность.

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

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

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

Как теория цвета помогает улучшить читаемость?

При разработке целевой страницы важно учитывать цветовые ассоциации, но также важно изучить, насколько удобочитаемы ваши выбранные цвета.Вообще говоря, цвета более читабельны, когда они находятся на фоне, который сильно контрастирует с ними (например, черный на белом).

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

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

Примеры эффективных целевых страниц с помощью теории цвета

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

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

Coca Cola

Щелкните, чтобы увеличить изображение

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

PopSurvey

Щелкните, чтобы увидеть полноразмерное изображение

Целевая страница PopSurvey преимущественно бело-голубая. Как и в случае с Coca Cola, эта цветовая комбинация достаточно классическая, чтобы ее легко читать, но достаточно смелая, чтобы создать сильную ассоциацию с брендом.Когда посетители сайта попадают на эту преимущественно синюю страницу, они, вероятно, сразу же ассоциируют ее с надежностью, логикой и общением.

Apple

Щелкните для увеличения изображения

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

Subway

Щелкните, чтобы увидеть полноразмерное изображение

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

---

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

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

— Джош Пигфорд

---

Полное руководство по дизайну целевой страницы (передовой опыт и примеры)

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

Хотя вы хотите оптимизировать весь свой веб-сайт для конверсий, большинство из них будет происходить на целевых страницах (или страницах продуктов для брендов электронной коммерции).

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

Что мы смотрим в этом списке?

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

1. Подготовка : Все работы по планированию и подготовке, которые входят в создание потрясающих целевых страниц.
2. Создание фреймворка : Как разрабатывать фреймворки, которые упростят и ускорят создание целевых страниц в будущем.
3. Контент целевой страницы : Контент не привлекает того внимания, которого заслуживает, но именно это действительно отличает целевые страницы с высокой конверсией от остальных — так что давайте убедимся в этом.
4. Психологические методы : Используйте эти мощные методы для создания убедительного контента и влияния на решения о покупке.
5. Дизайн каждого раздела целевой страницы : Как разработать каждый раздел целевой страницы, сверху вниз.
6. Максимальное количество конверсий : Как оптимизировать целевые страницы для повышения производительности с течением времени.

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

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

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

Планируйте заранее:

каждые целевой страницы.

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

Шаг №1: Получите достойный конструктор целевых страниц

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

«Компании с 30 и более целевыми страницами генерируют в 7 раз больше потенциальных клиентов, чем компании с менее 10».

Согласно исследованию Preface Studios, компании с 30 и более целевыми страницами генерируют в семь раз больше потенциальных клиентов, чем компании с менее 10 — это в три раза больше целевых страниц, генерирующих в семь раз больше потенциальных клиентов.

Вам понадобится помощь, чтобы создать и протестировать все эти целевые страницы, и есть несколько отличных инструментов для целевых страниц, таких как Unbounce, Instapage и Leadpages, которые предлагают конструкторы страниц с перетаскиванием — так что вы можете быстро создавать целевые страницы без написания кода.

Шаг № 2: Определите свою аудиторию для каждой целевой страницы

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

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

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

Это очень важно для дизайна целевой страницы.

Шаг № 3: Определите цели конверсии

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

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

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

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

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

Шаг №4: Создайте сообщение целевой страницы

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

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

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

Шаг № 5: Создайте кампании вокруг ваших целевых страниц

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

Чтобы упростить этот процесс и связать все вместе, как и должно быть (здесь важна последовательность), я рекомендую планировать каждую кампанию в следующем порядке:

1. Выберите цель (цели) конверсии
2. Выберите целевую аудиторию
3. Выберите каналы продвижения (контекстная реклама, обычный поиск, социальные сети, электронная почта и т. Д.))
4. Определите свое ключевое сообщение
5. Сделайте это сообщение единообразным для каждой кампании, включая каналы, которые вы используете для привлечения трафика на свои целевые страницы

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

Создание фреймворка целевой страницы

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

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

Вот несколько советов, которые помогут вам начать работу.

Шаг №6: Откажитесь от заголовка навигации

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

Меню навигации может отвлекать пользователей от ваших целей конверсии.

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

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

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

Избавьтесь от этих меню навигации и следите за посещаемостью целевой страницы.

Шаг № 7: Начните с макета с одним столбцом

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

Источник: Instapage , Getquip.com

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

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

Есть много причин, по которым этот шаблон является хорошим вариантом:

• Ваши целевые страницы будут согласованы с точки зрения дизайна и стилей (выбор шрифтов, стили, размеры, макеты, поля и т. Д.)
• Полноразмерные блоки div заставляют вас создавать краткие сообщения, сосредотачиваясь на одной точке в каждом разделе.
• Это придает каждому сообщению большее воздействие, снижает отвлекающие факторы и упрощает навигацию по страницам.
• Этот формат также сделает сообщение в каждом разделе более запоминающимся.
• Полноразмерные макеты по умолчанию адаптируются, поэтому ваши целевые страницы в значительной степени оптимизированы для мобильных устройств еще до того, как вы начнете (просто убедитесь, что размер текста и изображений для адаптивного дизайна).
• Отдельные столбцы дают вам много свободного пространства для работы, делая ваши основные сообщения и кнопку CTA более заметными.
• Вы можете выровнять текст и другие части контента, чтобы сделать ваши призывы к действию более заметными (подробнее об этом в , шаг № 10 ).
• Наличие такого шаблона сделает проектирование будущих целевых страниц быстрее, проще и эффективнее.
• При необходимости вы можете просто добавить новые разделы в существующий шаблон.
• Вы можете оптимизировать каждый раздел по отдельности, чтобы повысить производительность и увеличить количество конверсий за раз.

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

Шаг № 8: По возможности придерживайтесь трех столбцов

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

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

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

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

Я называю это техникой магических чисел, когда списки из трех более эффективны, чем любые числа, и вот множество дизайнерских и психологических причин для этого:

• Правило шансов: Принцип дизайна, который описывает, как иметь нечетное количество элементов / предметов в поле зрения делает их более привлекательными.
• Правило трех: Принцип письма, который описывает, как трио событий или символов более удовлетворительно, чем другие числа.
• Когнитивная нагрузка: Помня о правиле шансов, списки из них намного легче переварить и запомнить, чем списки из пяти или более
• Объем памяти: Исследования показывают, что человеческий разум способен запомнить только примерно четыре фрагменты информации в любой момент.
• Смещение привязки: Психологическая привычка, которая описывает, как люди придают большее значение первой части информации, которую они получают, которая также влияет на то, как они интерпретируют следующие части информации.
• Эффект последовательной позиции: Психологическая привычка, которая описывает, как первая и последняя информация в списке имеет большее влияние и оказывается более запоминающейся.

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

Шаг № 9: Выберите, где разместить ваши CTA

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

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

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

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

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

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

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

Шаг № 10: Используйте перевернутую пирамиду для CTA

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

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

Шаг № 11: Выберите цветовую схему

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

Вы захотите создать базовую цветовую схему, которая реализует цвета вашего бренда, задает тона и стили (например, пастельные цвета против ярких цветов и т. Д.) И имеет коллекцию цветов фона, цветов выделения, цветов шрифтов, кнопок CTA. и все ключевые элементы на ваших страницах.

Шаг № 12: Выберите шрифты

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

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

Шаг № 13: Создайте свои формы

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

Таким образом, вы можете просто выбрать, какую форму встроить на целевую страницу, и все готово. Мы используем Leadformly для создания многоступенчатых форм с высокой конверсией (которые, как было установлено, увеличивают конверсию до 743%). Вы можете выбирать формы из готовых шаблонов, создавать свои собственные с помощью конструктора перетаскивания и встраивать их на любую страницу всего вашего веб-сайта.

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

Шаг № 14: Создайте нижний колонтитул целевой страницы

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

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

Теперь вам нужно принять некоторые решения:

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

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

Создайте контент для вашей целевой страницы

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

Вот что вам нужно сделать.

Шаг №15: Создайте заголовок целевой страницы

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

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

Я не могу повторить этого достаточно: ваш заголовок — это основной посыл всей вашей кампании; причина, по которой пользователи переходят по ссылкам, и, в конечном итоге, причины, по которым они собираются совершить конверсию (или нет). Если вы не можете объединить это в один заголовок, то вы, вероятно, не знаете, в чем основная идея вашей кампании или что может убедить людей перейти по ссылке и совершить конверсию.

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

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

Шаг №16: Завершите свое сообщение героя

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

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

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

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

Шаг № 17: Создайте копию для ваших CTA

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

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

Для пользователей, которые не покупают ваш первый призыв к действию, вам необходимо более подробно продемонстрировать, что они собираются получить.Вы можете следить за ключевыми преимуществами, сравнивать с конкурирующими брендами, GIF-изображениями или встроенными видео, подчеркивая ваши лучшие особенности — все, что вы решите, поможет людям принять решение о покупке.

В любом случае вы хотите адаптировать свой CTA-текст на всей странице, чтобы усилить ваше сообщение, поскольку оно становится более интересным. Это займет некоторое время (и тестирование), поэтому не бойтесь уточнять свои CTA-сообщения после того, как ваша кампания будет запущена.

Узнайте, что работает с вашей целевой аудиторией, и примените свои выводы на будущих целевых страницах.

Шаг № 18: Определите ваши ключевые преимущества

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

Как я объяснил в Шаг № 8 , я настоятельно рекомендую вам сжать свой список преимуществ до трех пунктов.Психологически это придает вашим преимуществам большее влияние и делает их более запоминающимися и, с точки зрения дизайна, более легкими для просмотра, усвоения и понимания пользователями.

Такой подход к дизайну также хорошо работает в адаптивном дизайне.

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

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

Шаг №19: Определите, что еще нужно знать пользователям

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

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

Вот где действительно важно общее правило преимуществ и возможностей.

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

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

Люди будут покупать iPhone 11 Pro, потому что они чувствуют себя хорошо, имея в своем распоряжении новейший телефон премиум-класса, и они покупаются на уловку камеры, потому что думают, что это сделает их ленты в Instagram более интересными.

Это может показаться поверхностным, но это продает.

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

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

Шаг № 20: Выберите методы социального доказательства

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

• Отзывы клиентов: Особенно с надежных сторонних платформ, таких как Google Reviews и Trustpilot.
• Средний балл: Исследования показывают, что средний балл 4.2–5,5 баллов из 5 на платформах для обзора имеют наибольшее положительное влияние на конверсию.
• Обзоры экспертов: Положительная оценка вашего бизнеса, продуктов или услуг отраслевыми экспертами — важный знак одобрения для новых клиентов.
• Освещение в прессе: Вы, должно быть, делаете что-то правильно, если о вас пишут крупные издания.
• Отзывы: Аккаунты ваших существующих клиентов, которые быстро объясняют, чего вы для них достигли.
• Примеры из практики: Более подробный анализ того, что ваш бизнес или продукт сделал, чтобы помочь вашим существующим клиентам.
• Известные клиенты: Имея портфель известных брендов, доверяющих вашему бизнесу, почему бы не привлечь новых пользователей?
• Отраслевые награды: Еще одна печать одобрения от коллег по отрасли и предложение победить конкурентов и получить приз.
• Партнерские отношения: Вотум доверия от брендов, которые хотят ассоциироваться с вашим бизнесом.

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

Шаг № 21: Создайте / создайте свой визуальный контент

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

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

В идеальном мире у вас будет штатный дизайнер или дизайнер-фрилансер, который сможет предоставить то, что вам нужно, и тогда, когда вам это нужно.В противном случае вам нужно будет посетить веб-сайты ресурсов, такие как Envato Elements, где вы можете загрузить графику или простые инструменты дизайна, такие как Canva, чтобы создать то, что вам нужно.

Наполните свой экземпляр целевой страницы этими психологическими приемами

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

Шаг №22: Создайте стимул на всех ваших целевых страницах (и в кампаниях)

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

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

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

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

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

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

Шаг №23: Создайте ощущение дефицита

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

Есть два типа дефицита, который вы видите во всем Интернете и других каналах сбыта:

• Недостаток предложения: Это говорит людям, что количество товара ограничено или что-то доступно.
• Недостаток времени: Это говорит людям, что срок действия предложения ограничен, и если они оставят его слишком поздно, оно исчезнет навсегда.

Эти две формы дефицита используются всевозможными способами — от таймеров обратного отсчета до ограниченных по времени предложений до более тонких методов, таких как VIP-членство или контент, который подразумевает дефицит, например, призывы к действию, такие как «Получите свой [продукт], пока вы еще жестяная банка».

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

Например, компания-производитель программного обеспечения может создать бета-версию программы с «ограниченным» пространством для клиентов, предоставляя им бесплатный доступ к функциям до их развертывания во всех учетных записях. Хитрость в том, что не-премиум-участники внезапно потеряют доступ к премиум-функциям, когда они будут полностью выпущены. После того, как вы воспользуетесь преимуществами этих функций, их будет сложно потерять, и единственное решение — перейти на профессиональную версию, чтобы вернуть их.

Шаг № 24: Влияйте на решения покупателя с помощью этих когнитивных предубеждений

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

1. Неприятие потерь: Естественный страх людей потерять или упустить что-то .
2. Привязка: Наша склонность больше зависеть от первой информации, которую мы получаем, чем от последующих.
3. Эффект ореола: Причина, по которой первое впечатление так трудно изменить.
4. Предвзятость в отношении невозвратных затрат: Принуждение завершить что-то после того, как вы уже потратили на это время.
5. Эффект эндаумента: Заставляет людей придавать дополнительную ценность вещам, которыми они владеют, а не тем, которыми они не владеют.
6. Эффект простого воздействия: Почему люди предпочитают то, с чем они уже знакомы.
7. Эффект порядкового номера: Как первый и последний элементы в списке кажутся более важными, чем другие.
8. Взаимность: Почему, когда вы делаете что-то для кого-то, у него есть естественная тенденция хотеть сделать что-то для вас в ответ.
9. Феномен Баадера-Майнхоф: Когда вы что-то видите впервые, это заставляет вас внезапно замечать все.
10. Эффект дословности: Причина, по которой мы запоминаем суть сказанного, а не конкретные детали.
11. Кластеризация: Наша привычка кластеризовать похожие фрагменты информации вместе, чтобы сделать их более запоминающимися.

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

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

Быстро принимайте эффективные маркетинговые решения

Совместите, планируйте и отслеживайте свой маркетинг в одном месте, а не повсюду, с помощью нашего последнего предприятия TrueNorth.

Посетите TrueNorth.io

Дизайн каждого раздела целевой страницы

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

• Раздел героев
• Призывы к действию
• Ключевые преимущества
• Социальное доказательство
• Final CTA

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

Шаг № 25: Создайте свой раздел героя

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

Это один из наиболее распространенных, но эффективных форматов разделов героев, и его очень просто создать. За большим заголовком следует подстрока более мелкого текста (возможно, слишком мелкая в приведенном ниже примере) и кнопка CTA.

Источник: Daily Harvest

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

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

Источник: Unbounce

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

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

Шаг № 26: Разработка CTA

Мы уже рассмотрели разработку макета и структуры CTA Шаг № 10 и этот важнейший принцип построения перевернутой пирамиды. Однако я не собираюсь повторять это снова на этом этапе, особенно когда есть так много других моментов, которые нам нужно затронуть в дизайне CTA.

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

Мы уже рассмотрели текст и макет CTA, а это значит, что вам необходимо освоить следующие принципы:

• Стили текста: Шрифты, веса, стили и размеры текста.
• Цвета: Цвет текста, кнопки CTA и цвет фона.
• Пробел: Пространство между различными элементами вашего CTA (и пространство между вашим CTA и другими элементами на странице).
• Контраст: Цветовой контраст является наиболее важным из них, но вы также можете использовать размер, стиль и контраст размещения.

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

Если ваш призыв к действию идет после раздела, в котором уже используется белый фон и черный текст, выберите жирный цвет из вашей схемы (вы уже выбрали их в , шаг № 11 ) и используйте белый текст, чтобы инвертировать контраст.

Вы уже выбрали шрифты, но собираетесь использовать контраст стилей (разные шрифты, стили шрифтов, вес, размеры, регистр и т. Д.), Чтобы выделить каждый фрагмент текста CTA. Это особенно важно, если у вас есть несколько строк текста для работы с призывом к действию.

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

Контраст — ваш лучший друг в дизайне CTA, поэтому обязательно изучите принципы дизайна, лежащие в его основе, а также стили текста, цвета и пробелы. Благодаря этому улучшится весь дизайн вашей целевой страницы, и, в конечном итоге, повысится и коэффициент конверсии.

Шаг № 27: Составьте свой список преимуществ

Мы уже рассмотрели технику магических чисел и почему списки из трех преимуществ обычно наиболее эффективны ( Шаг № 8 ), но теперь давайте посмотрим на визуальный дизайн ваших преимуществ.

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

1. Он выделяет ваши преимущества визуально
2. Значки визуально объясняют каждое преимущество
3. Это позволяет вам использовать меньше текста

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

Готово.

Шаг № 28: Создайте раздел социального доказательства

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

Для списков клиентов, партнеров и освещения в прессе лучше всего использовать их логотипы для создания трафаретных значков одного цвета (в идеале белого цвета на цветном фоне или черного / полужирного цвета на белом фоне.)

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

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

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

Шаг № 29: Создайте окончательный CTA

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

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

Максимальное количество конверсий целевой страницы

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

Шаг № 30: Оптимизация по скорости

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

Если ваши страницы занимают больше времени, значит, у вас проблема.

Воспользуйтесь бесплатным инструментом Google Page Speed ​​Insights для базового анализа своих страниц и посмотрите, как можно сократить время загрузки.Ключевым моментом является минимизация нагрузки на браузер конечного пользователя, и вы можете сделать это следующим образом:

• Использование качественных хостинговых услуг
• Использование конструктора целевой страницы и шаблонов, разработанных для скорости
• Минимизация запросов к серверу
• Упрощение работы JavaScript, плагины и т.д. местоположение вашего сервера)

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

Шаг № 31: Создание кампаний ремаркетинга

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

Вы также можете проводить кампании ремаркетинга в Facebook, Instagram, LinkedIn и на большинстве основных платформ социальной рекламы.

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

Шаг № 32: Сегментируйте лиды целевой страницы

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

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

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

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

Для управления сегментированными лидами вам понадобится надежная платформа управления взаимоотношениями с клиентами (CRM), чтобы вы могли отслеживать лиды по мере их продвижения по пути к покупке.

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

Шаг № 33: Уменьшите коэффициент внимания

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

Вот определение коэффициента внимания из Unbounce:

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

Хороший совет от одного из ведущих специалистов по оптимизации целевых страниц.

Шаг № 34: A / B-тестирование сообщений вашей целевой страницы

A / B-тестирование — ключевой инструмент в оптимизации коэффициента конверсии (CRO), но многие маркетологи застревают в колее, тестируя неправильные элементы на своей странице. Конечно, в принципе, любое изменение может повлиять на коэффициент конверсии, но вы хотите сосредоточить свое внимание на том, что окажет наибольшее положительное влияние.

Позвольте мне прояснить: безусловно, самое важное для A / B-тестирования вашей целевой страницы — это контент.

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

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

Шаг № 35: A / B-тестирование разных версий каждого раздела целевой страницы

Вы также захотите A / B-тестирование разных версий каждого раздела целевой страницы, чтобы подтвердить или улучшить свой выбор дизайна. Хитрость заключается в том, чтобы изменять только один раздел за раз, чтобы вы могли подтвердить, какая версия дает лучший результат. Возможно, вы захотите начать с тестирования размещения CTA и размещения других разделов, чтобы определить наиболее эффективный порядок.

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

Шаг № 36: A / B-тестирование ваших CTA

Обычно, CTA — это первое, о чем упоминается, когда дело доходит до A / B-тестирования, и это достаточно справедливо — они являются одним из самых важных элементов на вашем лендинге. страниц.Я действительно думаю, что оптимизация CTA понимается неправильно, или, может быть, было бы лучше сказать, что я думаю, что она неправильно продается компаниями-разработчиками программного обеспечения, продающими инструменты CRO.

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

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

Шаг № 37: Оптимизируйте свои страницы с помощью тепловых карт

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

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

Шаг № 38: Используйте измерение событий для оптимизации ваших страниц и кампаний

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

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

Шаг № 39: Проведите кампании по тестированию / обратной связи с пользователями

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

Это еще один замечательный аспект Hotjar. Он поставляется с набором инструментов для получения обратной связи от пользователей, включая опросы, опросы и отзывы пользователей веб-сайта в реальном времени.

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

Станьте мастером дизайна целевых страниц

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

Как создать целевую страницу: полное руководство

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

Дизайн целевой страницы — это не волшебный трюк: он требует как цифровой стратегии, так и визуального дизайна. Автор OrangeCrush.

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

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

Как работает дизайн целевой страницы и почему это важно

—

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

Целевые страницы предназначены для продажи определенных продуктов. Дизайн 2ché.

Веб-сайт компании служит центром для всех ее продуктов и услуг в дополнение к общей информации о компании. Хотя целевые страницы являются частью веб-сайта компании, их цель — немедленное убеждение и продажи, и они достигают этого за счет специфики. Целевая страница ориентирована на один продукт, копия ориентирована на описание и продажу этого продукта, а дизайн нацелен на то, чтобы сделать эту копию удобочитаемой, продукт — презентабельным и привлечь зрителя.Таким образом, целевые страницы (особенно несколько целевых страниц) намного эффективнее привлекают потенциальных клиентов, чем домашняя страница веб-сайта компании.

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

Целевые страницы ориентированы на то, чтобы побудить пользователей выполнить определенное действие. Дизайн FaTiH ™.

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

Ищете вдохновение для целевой страницы? Взгляните на эту статью, полную потрясающих идей дизайна целевой страницы.

Анатомия дизайна целевой страницы

—

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

Заголовок

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

Заголовок ориентирован на привлечение внимания пользователя, краткое представление и продвижение продукта.Дизайн thecreatv.

• Брендинг : логотип компании и логотип продукта (если применимо).
• Изображение героя : Основное, наиболее привлекательное изображение, связанное с продуктом, обычно в форме баннера. Это может быть сам продукт или иллюстрированная или сфотографированная сцена, отражающая опыт использования продукта.
• Заголовок : Копия, которая сопровождает изображение героя, делая лаконичную подачу.
• Подзаголовок : идентифицирует продукт и дает более подробное описание его преимуществ (называемое ценностным предложением)
• Призыв к действию : иначе известный как CTA, это кнопка (со вставкой «Купить сейчас!»), Которую пользователи нажимают, чтобы перейти к процессу покупки.Призывы к действию важны, но не злоупотребляйте ими — это может загромождать страницу и выглядеть слишком продаваемым. Вместо этого рассмотрите фиксированную полосу, которая удерживает CTA в верхней части экрана при прокрутке пользователем. (Примечание: призывы к действию могут иметь другие цели, такие как получение подписчиков или загрузок, но для простоты в этой статье мы будем в основном ссылаться на покупки.)

Заголовок должен включать привлекательные изображения и заголовок, чтобы увлечь зрителей. Дизайн Janki14.

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

Содержание

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

Поддерживающая графика и спецификации продукта помогают создать раздел содержания целевой страницы. Полный дизайн — Prismonline ⭐️⭐️

• Вспомогательная графика : вторичные изображения продукта (под другим углом или клиентов, использующих продукт), значки, упрощающие маркировку и цвета, или абстрактные формы, которые направляют взгляд зрителя вниз по странице.
• Технические характеристики продукта : Копия с четкими пошаговыми инструкциями по работе продукта.Ссылки, раскрывающие каждый из этих шагов (например, «Узнать больше»), могут помочь развеять сомнения, но, опять же, будьте осторожны, чтобы не увести пользователей с целевой страницы.
• Сравнение преимуществ : Это показывает, как продукт улучшает жизнь клиентов, иногда сравнивая его с продуктами конкурентов или выявляя и устраняя болевые точки потребителя.
• Свидетельство со стороны коллег : прошлые оценки клиентов, обзоры и / или отзывы, которые укрепляют доверие зрителей к продукту благодаря положительным отзывам в социальных сетях.

Нижний колонтитул

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

Нижний колонтитул содержит заключительную информацию, такую ​​как контактные и юридические данные. Дизайн Адама Муфлихуна.

• Ссылки на другие страницы : Вы можете сделать ссылку на другие релевантные страницы вашего сайта, например, страницу часто задаваемых вопросов.
• Ссылки на социальные сети : это может быть спорным включением (как упоминалось ранее, вы не должны поощрять пользователей выполнять действия, не связанные с CTA), но оно может улучшить трафик, предоставив пользователям ссылки для совместного использования целевой страницы. со своими подписчиками в социальных сетях.
• Контактная информация : номер телефона или адрес электронной почты дает клиентам возможность обратиться, если у них возникнут дополнительные вопросы.
• Юридическая информация : Авторские права на веб-сайт и продукт, а также другие юридические права. Обычно это содержится в темной полосе в самом низу страницы, чтобы отделить ее от остального содержимого.

6 советов по созданию целевой страницы

—

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

1. Придерживайтесь минимализма

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

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

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

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

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

2. Воспользуйтесь «складкой»

Хотя подход «меньше даёт больше» может побудить вас подумать, что короткие страницы без прокрутки лучше, более длинные целевые страницы, как правило, более эффективны для удержания зрителей.Более длинная страница дает возможность увеличить расстояние между элементами, тогда как короткая страница может сделать тот же дизайн тесным и загроможденным. А прокрутка — это небольшое прикосновение, которое делает страницы более интерактивными, чем, скажем, рекламный щит прямо перед вами.

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

Лучший способ извлечь выгоду из прокрутки — создать дизайн вокруг так называемого «сгиба».Это линия, на которой веб-страница обрезается из-за разрешения экрана, заставляя пользователя прокручивать страницу вниз, чтобы увидеть, что находится под ней. Хотя физические размеры экрана различаются, большинство разрешений выше сгиба составляют 1000 x 600 пикселей. Имея интригующую, наполовину скрытую графику или заглядывая прямо поверх сгиба, вы можете соблазнить пользователя прокрутить вниз и продолжить взаимодействие с вашей страницей.

3. Оптимизация для чтения шаблонов

Шаблоны чтения описывают общие способы сканирования веб-страниц пользователями (на основе исследования отслеживания взгляда), и дизайнеры могут использовать выравнивание и интервалы для организации текста, чтобы облегчить это.Поскольку большинство пользователей сканируют веб-страницы, прежде чем приступить к их чтению (79% никогда не выходят за рамки фазы сканирования), в ваших интересах оптимизировать дизайн для сканирования. Разделите текст и графику таким образом, чтобы строки текста можно было легко читать на расстоянии, но это также тонко направляет читателей вниз по странице к CTA.

Расположение выравниваний по Z-образцу помогает пользователям быстро сканировать. Дизайн iva.

Это два наиболее распространенных шаблона чтения, которые следует учитывать при разработке целевой страницы:

• Образец Z : пользователи обводят глазами невидимую букву «Z» при сканировании слева направо.Это полезно для проектов с большим количеством изображений и может сделать макеты страниц более динамичными, поскольку элементы разбросаны зигзагом и пользователи быстро переводят взгляд с одной стороны на другую.
• Шаблон F : пользователи обводят глазами невидимую букву «F» при сканировании слева направо. Это, как правило, более полезно для страниц с большим количеством текста, поскольку форма более удобна для построчного чтения.

4. Дизайн для взаимодействия

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

Анимация, запускаемая при прокрутке, может сделать целевые страницы живыми и интерактивными. Дизайн Адама Муфлихуна.

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

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

5. Создавайте схемы общих целевых страниц

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

Вторая версия целевой страницы с аналогичной схемой макета. Дизайн eeeh_aarrh. Одна версия целевой страницы может создать визуальный стиль других.Дизайн eeeh_aarrh.

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

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

6. Проверьте каждый элемент дизайна

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

Протестируйте несколько версий каждого элемента целевой страницы, пока не найдете подходящий дизайн. Дизайн Яна Дугласа.

Сплит-тесты, иногда называемые A / B-тестами, в которых две разные версии дизайна тестируются на двух отдельных группах клиентов, являются обычным способом, которым дизайнеры и маркетологи выбирают лучший результат. Используйте этот метод для тестирования каждого элемента вашей веб-страницы, от заголовка до рекламного объявления, изображений и формы кнопок.Таким образом, вы можете быть уверены, что дизайн вашей целевой страницы не только хорошо выглядит, но и что ваши пользователи согласны с ним.

Пришло время начать дизайн целевой страницы

–

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

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

Хотите узнать больше о веб-дизайне? Вот пошаговая статья о том, как создать веб-сайт от начала до конца.

Получите дизайн целевой страницы, который взлетит!

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

9 советов по дизайну целевой страницы для повышения конверсии

Включите подробную информацию о продукте

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

Напишите убедительное описание продукта

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

Прямой

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

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

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

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

Оживите свой продукт с помощью изображений

Покупатели не могут физически взаимодействовать с товарами во время совершения покупок в Интернете. Это означает, что они полагаются на фотографии ваших товаров, чтобы убедить их совершить покупку. Фактически, 92% потребителей говорят, что визуальные эффекты являются главным влиятельным фактором, влияющим на решение о покупке, поэтому убедитесь, что изображения на вашей странице передают текстуру, размер, запах или любые другие аспекты вашего продукта, которые могут быть интересны для вас. клиенты.

Несколько изображений лучше, чем одно

В своем отчете по исследованию потребителей за 2018 год Salsify обнаружил, что 73% людей хотят видеть 3 или более изображений, когда думают о покупке. К счастью, большинство мобильных устройств оснащены отличными камерами (а также встроенными инструментами редактирования), поэтому, даже если вы не профессионал в области фотографии, легко сделать как можно больше красивых, высококачественных и привлекательных изображений для своего интернет-магазина. как вам нужно.

Показать разные углы

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

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

Но убедитесь, что не снижаете время загрузки вашего бизнес-сайта.

Используйте образы образа жизни

Изображения

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