19 Июн 2020, 13:34

Дизайн, текст, интерактив: как создать работающий лендинг

Практические советы по дизайну лендинговых страниц

Лендинги стали главным элементом цифрового маркетинга. Маркетологи сейчас тратят бесчисленные часы на планирование, создание и тестирование целого ряда лендинговых страниц. Однако, несмотря на их популярность и объем вложенных в них ресурсов, лендинги не всегда работают так, как того ожидают маркетологи. Что нужно для того, чтобы лендинги были действенными, рассказал Макс Бенз, head of content компании Filestage (via MarketingProfs).

Пять важных элементов

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

1. Последовательный брендинг

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

2. Привлекательные визуальные эффекты

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

3. Понятный CTA

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

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

sad puppy

4. Надежная форма связи

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

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

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

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

10 примеров дизайна лендинговых страниц

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

  1. Slack
slack lp
  • привлекательные и информативные скриншоты продукта;
  • понятный CTA в верхней части страницы;
  • яркий, привлекательный и последовательный брендинг;
  • social proof выше сгиба в виде перечня компаний, которые пользуются данным инструментом.
  1. Uber
uber
  • супер минималистичный;
  • даже при беглом просмотре пользователи моментально могут сориентироваться, что к чему;
  • четкая форма связи.
  1. Intercom
intercom
  • захватывающие CSS анимации;
  • привлекательный и последовательный дизайн;
  • конкретные преимущества, сформулированные четко и ясно.
  1. Lyft
lyft lp
  • соответствует стилю бренда;
  • прямая и быстрая форма регистрации в верхней части страницы;
  • исчерпывающий раздел FAQ.
  1. Khan Academy
Khan Academy lp
  • удачные образы, которые привлекают посетителя;
  • отличная графика и эскизы, которые выгодно представляют бренд;
  • хороший social proof и отзывы повсюду.
  1. Codecademy
codeacademy lp
  • social proof, CTA и форма связи в верхней части;
  • возможность быстрого входа в систему;
  • привлекательные изображения и графики.
  1. Microsoft
microsoft lp
  • простой макет, понятный даже при беглом просмотре;
  • ясный CTA;
  • выверенная форма, которую легко заполнить.
  1. SquareSpace
SquareSpace lp
  • красивый интерактивный контент;
  • впечатляющий решения технического и графического дизайна;
  • ясный и четкий текст.
  1. TransferWise
TransferWise lp
  • продуманное использование графики и интерактивного контента;
  • четкое ценностное предложение;
  • хорошие иллюстрации и CSS анимация.
  1. Airbnb
Airbnb lp
  • интерактивная калькулятор-форма;
  • привлекательный образ героя;
  • много социального доказательства.

Пять актуальных практических советов

1. Внедряйте интерактивный контент

Интерактивный контент — эффективный способ привлечь посетителей и рассказать им о вашем продукте или услуге. Фактически, 93% маркетологов согласны с тем, что интерактивный контент эффективен для обучения покупателей.

Airbnb и TransferWise предлагают хорошие примеры интерактивного контента в действии. Их интерактивные формы-калькуляторы могут сразу же привлечь посетителей и помочь им увидеть выгоды.

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

interactive content

2. Не стоит пренебрегать текстовым контентом

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

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

3. Форма связи должна хорошо работать

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

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

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

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

4. Вовлекайте своих посетителей выше линии сгиба

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

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

5. Используйте правильные инструменты

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

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

Заключительная мысль

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

Кавер: Unsplash
Гифки: Giphy

Расскажите друзьям про новость

Новое видео