Дизайн
Glory Mlory
8219

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

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

В закладки
Слушать

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

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

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

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

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

Определение ценностного предложения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решите, как вы будете стимулировать к действию

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

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

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

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

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

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

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

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

Понимание возражений пользователя

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

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

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

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

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

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

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

McDonald’s не боятся решать проблемы напрямую

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

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

Тесная связь заверений о конфиденциальности с формой подписки на рассылку часто повышает конверсию

Сформируйте свою личность

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

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

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

Определите, что вы хотите донести

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

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

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

Проверка дизайн-эстетики

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

Часто такой простой тест — лучший способ найти подходящий дизайн

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

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

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

Создайте свою визуальную иерархию

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

Ответьте на правильные вопросы в правильное время

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

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

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

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

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

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

Целевая страница должна сочетать в себе все вышеперечисленные разделы

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

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

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

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

Упростите интерфейс

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

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

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

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

Vibecast скрывает вторичный контент под выпадающим списком

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

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

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

Проверьте свою визуальную иерархию

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

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

Usability Hub облегчает запуск пятисекундных тестов

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

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

Мониторинг, Тест, Повторение

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

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

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

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

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

{ "author_name": "Glory Mlory", "author_type": "self", "tags": [], "comments": 30, "likes": 25, "favorites": 351, "is_advertisement": false, "subsite_label": "design", "id": 128253, "is_wide": false, "is_ugc": true, "date": "Tue, 19 May 2020 18:02:07 +0300", "is_special": false }
Финансы
Управление риском портфеля с помощью плечевых (leveraged) ETF
Предположим, мы планируем ранний выход на пенсию (см. FIRE movement, Early Retirement) или формируем источник…
Объявление на vc.ru
0
30 комментариев
Популярные
По порядку
Написать комментарий...
7

1. Фотка с Unsplash на весь экран с затенением
2. Надпись шрифтом Futura поверх фотки посередине
???
PROFIT!

Ответить
3

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

Спасибо, завтра распечатаю и повешу на все аймаки в офисе. 

Ответить
1

Пожалуйста, уберите капс из подзаголовков, это некрасиво: vc.ru/team/122350

Ответить
–4

Протестируйте на соответствие описанным в статье параметрам наш лендинг:
www.4one.click

Ответить
3

Ахахах, ну и жесть

Ответить
–2

Есть предложения, сделаете лучше или только "Ахахах"?

Ответить
1

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

Ответить
–1

Ага, дизайнер тысяч на 10 может наговорить куда точку поставить и куда картинку на пиксель пододвинуть. А может и на 100, смотря как заеазчик предварительно разогрет постами по маркетингу в соц. сетях.
Только никто потом не отвечает за 0-вой выхлоп с этих дизайнерских плясок...

Ответить
2

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

Но проще конечно сказать, что дизайнер точку за 10к наговорит куда поставить (что совершенно не относится к работе дизайнера, он пиксели не двигает)

Ответить
0

Я пробовал. Я новичок, опыта (особенно живого) - мало, поэтому предлагал данному товарищу свои услуги.
Вполне допускаю, конечно, что я по зелёности-неопытности плохо написал "торговое предложение", но он отказался, мотивировав тем, что не понятно, что ему даст современный, чистый дизайн. Так шо...

Ответить
–2

Ян, ну раз вы решили всё же написать сюда и немножко подцепить за то, что вас не оценили - то я вам тоже немножко объясню.
Мнения дизайнеров совершенно ничего не значат - это НЕ наша целевая аудитория. И дизайнеры НЕ являются маркетологами, знающими НАШУ целевую аудиторию.
Если вы и правда видите косяк в разметке (и другие здесь говорящие "о, ужас!") - сделайте скриншот и покажите. Мы предъявим разработчику конструктора: это из топ-5.
А что всего интересней: спасибо всем - хотя бы за генерацию трафика)...

Ответить
0

 Мы предъявим разработчику конструктора: это из топ-5.

Это чушь. Ничего и никому вы «предъявить» не сможете и не будете :)

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

 А что всего интересней: спасибо всем - хотя бы за генерацию трафика)

Ага, за трафик с нулевой конверсией и резко выросшим показателем отказов :)

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

Ответить
–1

Да, наверное, дизайнеры (или кто этим хочет заработать) - очень  замороченные люди.
По ссылке из этого же vc, но из статьи про FB магазины никаких отказов и просмотры сайта по 3 точки по Я.Метрике + запросы по существу предлагаемого инструмента...
Да, лажанулись, что предложили прокомментировать аналитикам.

Ответить
0

немножко подцепить за то, что вас не оценили

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

Мнения дизайнеров совершенно ничего не значат - это НЕ наша целевая аудитория

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

И дизайнеры НЕ являются маркетологами, знающими НАШУ целевую аудиторию

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

сделайте скриншот и покажите

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

Мы предъявим разработчику конструктора: это из топ-5.

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

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

Ответить
1

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

2020 год на дворе, есть Тильда, Readymag, Squarespace.
На худой конец можно потратить 60 баксов и купить готовую тему под WP на https://themeforest.net/

Ну или если у вас самописное двигло и вам удобнее и быстрее работать с ним, то там же можно купить готовый html-шаблон с адекватным, нет, просто с дизайном!

А то, что у вас там по ссылке — это какое-то «ятаквижу» из начала нулевых))
Очень плохо!

Ответить
1

Пиздец, рили, давно такого говна не видел

Но всегда есть вариант что для некоторых ЦА как раз такое говно и заходит

Ответить
1

Ну, такое говно заходит, когда клиент не видел альтернативы, плохо дружит с этими вашими ынтэрнэтами или не ожидает ничего путного «за_такие_деньги».

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

Конечно, это всё моё скромное мнение и рыночек таки порешает, но осознание, что в мире всё ещё существует «подобное» делает из меня грустную панду :(

Ответить
0

Есть же аудитория одноклассников вконцке концов, мне кажется им такое норм

Ответить
–1

Фонтан в том, что некоторые клиенты делали заказы повторно, включая маркетинговые агенства (т.е. они продавали своим клиентам)...
Вот такой вид дизайна.
И ещё про движок и разметку.
Этот сайт сделан не на своём движке, а на конструкторе из топ-5 (кто профи -может посмотреть код).

Ответить
0

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

Ответить
0

это правда жесть.. Если у вас нет опыта создания сайтов, попробуйте продвигаться пока без сайта, через соц сети. Накопите денег, наймите тех, кто вам его создаст.
У меня сайт тоже не очень, но это необходимый минимум того, как он должен выглядеть в 2020 году.
https://aimobi.ru/

Ответить
–1

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

Ответить
1

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

Ответить
–2

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

Ответить
1

Дак а http://www.4one.click/ мало картинок что ли? Плюс когда дропдауны раскрываешь, то вся страница расширяется, что мега плохо влияет на производительность (даже на моем мощном компе лаг видно), так как весь html перерисовывается после таких анимаций. Текст в некоторых местах белый на белом. Этот сайт можно использовать как пример того, как сайты делать не надо

Ответить
0

выглядит очень хорошо, правда

Ответить
0

Да ладно, нормальный у тебя сайт - в меру чистенький, информация нормально подана)
Я бы только над гарнитурой задумался. Futura на заголовках норм, а вот в подписях, где она 14px - уже тяжеловато читается.

Ответить
0

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

А владелец one-click предлагает услугу, суть которой рекламировать и продавать другие услуги. И если следовать старой маркетинговой мудрости, мол, «если хочешь продать слона, покажи его красиво», то автор 4one-click знатно так лажанул.

Ответить
0

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

Ответить
0

+

Ответить

Комментарии