Как создать привлекательный лендинг

В статье представлены советы по созданию эффективной и привлекательной целевой страницы с наглядными примерами.

Оригинал статьи.

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

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

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

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

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

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

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

Вот, к примеру, такое предложение у Skype:

«Skype позволяет всегда оставаться на связи. Разговаривать. Переписываться. Сотрудничать».

Первая часть описывает пользу, а вторая — способ её достижения.

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

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

«Мы предлагаем высокое качество по доступной цене»

То реверс был бы примерно таким:

«Мы предлагаем ужасное качество с космическим ценником»

И наоборот, если вы написали:

«Мы предлагаем товары ручной работы для требовательного покупателя»

Противоположность была бы похожа на что-то такое:

«Мы предлагаем продукцию заводского производства для массового рынка»

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

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

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

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

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

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

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

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

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

По каким причинам человек может перестать делать что-либо на вашем лендинге? А платна ли доставка, или может они беспокоятся о своей конфиденциальности? А может у конкурентов дешевле?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Конечно, эстетика — не самое главное в дизайне. Многое зависит от визуальной иерархии.

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

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

Конечно, нельзя быть в нём уверенным на 100%. Даже юзабилити-тестирование может дать только размытое представление. Но давайте сделаем обоснованное резюмирование.

Как правило, пользователь подсознательно задаёт себе ряд вопросов, просматривая вашу целевую страницу. Давайте по порядку:

• Что предлагает мне эта страница? (Ценностное предложение)
• Как это поможет мне? (Польза)
• Как оно работает? (Особенности)
• Почему я должен доверять? (Социальное доказательство)
• Что я должен делать дальше? (Призыв к действию)

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

Например, типичная иерархия лендинга может выглядеть примерно так:

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

Внимание к ним можно привлечь различными способами, включая, но не ограничиваясь такими:

• Позиционирование.
• Цвет.
• Размер.
• Образность.
• Анимация.
• Негативное пространство.

Но, скорее всего, самый эффективный метод — это минимизировать отвлекающие факторы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале)