на какой элемент посадочной страницы пользователь обращает внимание в первую очередь
Как люди просматривают сайты
Согласно исследованиям, большинство людей, находясь на каком-либо сайте, следуют типичным сценариям поведения. Эти сценарии меняются в зависимости от расположения и внешнего вида элементов интерфейса сайта. Значит, управляя ими, вы можете влиять на поведение пользователей, способствовать удержанию внимания и совершению целевых действий, например, покупки или оформления заявки.
На что люди обращают свое внимание в первую очередь? Как они себя ведут на сайте? Какие есть лайфхаки, чтобы направлять пользователей на нужные действия? Обо всем этом мы с вами и поговорим.
Какие элементы сайта завладевают вниманием пользователя
Все эти элементы вызывают наибольший интерес у посетителей ресурса. В целом, первое впечатление о сайте у людей складывается всего лишь за 0,2 секунды. К такому выводу пришли исследователи университета технологий и науки в американском штате Миссури.
Какие изображения привлекают к себе внимание
Лучше всего привлекают внимание фотографии, на которых изображен человек, который смотрит прямо на посетителя сайта. Этот прием способен расположить к себе пользователя и задержать его взгляд.
При этом исследования показали, что людям приятнее видеть на веб-ресурсах фотографии обычных людей, а не представителей модельного бизнеса. Стоковые нетематические изображения тоже не стоит использовать, так как они игнорируются посетителями сайта.
На каких участках сайта концентрируют внимание посетители
Речь идет уже не о конкретных элементах на ресурсе, а об его участках. Когда человек переходит на сайт, то сразу же смотрит на верхний угол с левой стороны. Затем его взгляд перемещается вправо и немного вниз. Взгляните на изображение. Здесь показано, какие зоны на веб-ресурсе приковывают к себе внимание посетителей. Красный участок — максимум внимания, желтый — в средней степени, зеленый — в наименьшей.
Какой текст обращает на себя внимание пользователя
Чтобы человек прочитал хотя бы первый абзац с главным посылом статьи, он должен отличаться от остального текста. Например, увеличьте размер шрифта или примените жирное начертание. Согласно исследовательским данным, такие абзацы привлекают к себе внимание 95% пользователей. Но помните, что использовать другой шрифт нельзя. Это будет выглядеть непрофессионально и вызовет ощущение дисгармонии у читателя.
Сам текст должен состоять из коротких строк, которые располагаются в одну колонку. Не забывайте об абзацах, ссылках и визуальном выделении важных моментов. Текстовый контент должен быть лаконичным, особенно, если речь идет о главной странице ресурса. Никто не любит читать длинные простыни из букв.
Как знакомятся с контентом посетители сайта
Чаще всего, пользователи изучают контент ресурса по F-паттерну. Что это значит? Что люди обращают свое внимание на те части страницы, которые при обрисовке напоминают букву F.
Взгляните, как это выглядит по результатам веб-аналитики:
Заметили сходство с английской буквой F? Этот паттерн состоит из двух горизонтальных линий и одной вертикальной. Расположите все важные данные вдоль последней или верхней горизонтальной. Так вы донесете до читателей то, что им нужно знать в первую очередь.
Какое меню на сайте привлекает больше внимания
Практически любой веб-ресурс имеет навигационное меню. Наибольшим вниманием при этом завладевает то меню, которое располагается вверху страницы.
Если же у вас на сайте вертикальное меню ― лучше всего расположить его с левой стороны. Как показывает статистика, многие пользователи привыкли знакомиться с содержимым площадки слева направо. А это значит, что, если меню будет справа, его могут попросту не заметить.
Какие заголовки удерживают взгляд человека
Прежде всего, крупные. Если при этом они располагаются в левом верхнем углу, то на них гарантированно обратят внимание пользователи. Постарайтесь ограничиться одним заголовком ― при их множественности внимание посетителя рассеивается, и он читает лишь левые части каждого из них. Однако, когда заголовки содержат действительно полезную информацию, то человек прочтет их все до конца.
Время на прочтение заголовка ничтожно мало. Обычно это менее одной секунды. Поэтому важно с первых же слов заинтересовать читателя, чтобы не потерять его внимание.
Какие экраны сайта вызывают больший интерес у посетителей
Согласно многочисленным исследованиям, а также данным Яндекс. Метрик, вебмастера отмечают что самый привлекательный экран — первый. Одно из таких исследований — Scrolling and Attention.
Доля внимания на первом экране самая высокая! Дальше внимание пользователя размывается.
Разместите на первом экране уникальное торговое предложение и всю основную информацию, которая обрисовывает преимущества продукта и мотивирует сделать заказ или позвонить.
Чтобы посетители дольше задерживались на вашем ресурсе, совершали покупки и оформляли покупки и заявки, воспользуйтесь сведениями, которыми мы с вами поделились в этой публикации!
12 продающих элементов для первого экрана лендинга
Когда есть необходимость в продукте или услуге, пользователь вводит определенный запрос в поисковую систему и открывает сразу несколько вариантов страниц, которые предложил поисковик. У пользователя появляется выбор.
На кого обратить внимание?
Вы уже читали или слышали, что есть всего 3–5 секунд, чтобы заинтересовать потенциального клиента остановиться именно на вашем сайте и сделать заказ.
Что показать пользователю за это короткое время?
У вас может быть идеальная страница с продающими текстами и графикой. Но это не даст конверсии, если первый экран лендинга выполнен непрофессионально и не привлекает пользователя продолжить изучение страницы.
В этой статье мы поговорим о том, что стоит разместить на первом экране продающей страницы, чтобы клиенты принимали решение работать именно с вами.
Если вы не придумали чего-то сверх нового, у вас есть конкуренты. Всегда об этом помните и, прежде чем начинать разработку лендинга, загляните на их сайты. Возможно, вы найдете хорошие идеи, приёмы и фишки. Подумайте над тем, как их усовершенствовать и сделать еще сильнее.
Конкуренты — хороший источник идей при создании продающей страницы.
Итак, что показать клиенту на первом экране лендинга?
1. Заголовок
Если на продающей странице нет заголовка, она ничего не продаст.
Не нужно заголовок на лендинге делать интригующим. Напротив, он должен четко и коротко отражать суть, решение проблемы клиента.
Покажите в заголовке, что пользователь попал именно туда, куда целился. Что это именно то место, которое он искал, когда вводил запрос в поисковую систему.
Например, пользователь ввел в поисковую строку запрос «получить кредит». Система выдала рекламное объявление, по которому он перешел на соответствующую страницу. И тут сразу в глаза бросается заголовок.
Плохой вариант: «Хотите узнать, как Иван Федорович получил 30 000 рублей за 15 минут?»
Хороший вариант: «Кредиты от 30 000 рублей за 15 минут».
Пользователь пришел с конкретным запросом. Ему неважно, как кто-то получил 30 000 рублей. Ему нужен кредит. Покажите в заголовке, что он пришел по адресу.
Пример одного из наших клиентов:
2. Подзаголовок
Если цель основного заголовка — ответить на вопрос пользователя «Что я тут получу», то цель подзаголовка — расшифровать заголовок, усилить его.
Возьмем наш пример заголовка:
«Кредиты от 30 000 рублей за 15 минут»
и припишем к нему подзаголовок:
«Без справки о доходах, залога и поручителей».
Стал ли сильнее наш заголовок? Безусловно.
Конечно, можно было включить так называемый креатив написать что-то вроде:
«Уже через 15 минут деньги будут в вашем кармане и вы сможете приобрести то, о чем так давно мечтали».
Красиво? Возможно, но как это усиливает основной заголовок? Ведь по сути мы не открыли ничего нового для клиента. Мы не ответили ни на один вопрос пользователя и даже создали новые.
Да и в денежных вопросах лишние эмоции чаще вредят, чем помогают.
На лендинге клиент хочет получить ответы на все свои вопросы. Если это произойдет и ответы его будут устраивать, вы совершите продажу.
3. Надзаголовок
Этот элемент используется довольно редко, а зря. В действительности в нём не всегда есть необходимость. Но если вы чувствуете, что ваш основной заголовок не полностью раскрывает суть, используйте надзаголовок.
Индикатор простой. Прочтите заголовок, подзаголовок и подумайте, отвечают ли они на ответы пользователя:
Если вы не получили исчерпывающие ответы, используйте надзаголовок, чтобы посетитель сайта сразу получил всю необходимую информацию.
Вот как мы использовали надзаголовок, когда создавали продающую страницу для одного из клиентов:
4. Логотип
Можно ли обойтись без логотипа на лендинге? Можно, но в том случае если он никак не влияет на продажу.
Если вы создаёте лендинг для продажи продуктов известного бренда, логотип может повлиять на показатели конверсии.
Например, если открыть две одинаковые страницы, продающие iPhone 6, на одной из которых будет присутствовать логотип компании Apple, а на другой нет, к какой странице будет больше доверия? На какую страницу пользователь обратит внимание первым делом?
И, напротив, если у вас новая никому не известная компания и вы ставите на страницу новый для пользователей логотип. Раньше они его не видели и понятия не имеют к какой компании он принадлежит. Будет ли такой логотип продавать? Не подумает ли пользователь, что покупать у неизвестной компании небезопасно?
Прежде чем размещать на лендинге логотип взвесьте все «за» и «против».
5. Номер телефона
Нужен ли номер телефона на первом экране лендинга? Да.
Дайте возможность связаться с вами прямо сейчас. У многих клиентов нет желания или времени изучать весь ваш длинный лендинг.
А у кого-то, возможно, остались дополнительные вопросы. Им проще позвонить и получить быстрые ответы, чем снова скролить всю страницу в поисках информации.
6. Кнопка «Заказать звонок»
Не на каждом лендинге такая кнопка встречается. Некоторые от неё отказываются по своим причинам.
Но мы ведь хотим получить максимальную конверсию. Поэтому нужно использовать все возможные инструменты.
Кнопка «Заказать обратный звонок» — еще один способ получения заявок. Пусть они будут менее «горячие», чем клиенты, которые делают прямой заказ, но всё же, это потенциальные клиенты. И они уже дали вам свой номер телефона. Вы можете «дожать» их до продажи, предлагая дополнительные бонусы и скидки.
7. Оффер
Оффер — это предложение от которого невозможно отказаться.
По сути, оффер должен быть настолько сильным и «вкусным», чтобы после его прочтения, клиент сразу принял решение сделать заказ у вас без необходимости изучать всю страницу. Это в лучшем случае.
Используйте скидки, подарки, бонусы, подарочные сертификаты… Всё, что может оказаться ценным для клиента, и обладателем чего он хотел бы стать прямо сейчас.
Вы, как никто другой, знаете свою аудиторию и её потребности. Выделите самую ценную потребность и на основе этой информации разработайте оффер, который заставит посетителей лендинга стать вашими клиентами.
8. Изображение товара или клиента с товаром
Покажите товар на первом экране, чтобы посетитель сайта не только прочитал, но и увидел, о чем именно идет речь.
Это хороший усилитель на первом экране лендинга. Он заставляет пользователя более быстро реагировать и тратить меньше времени на изучение информации.
Если клиент откроет несколько сайтов и на вашем будет изображение товара, а на других только текст, более вероятно, что он начнет изучение именно с вашей страницы. Возможно, на ней и остановиться, чтобы принять решение о покупке.
9. Продающий слайдер
Если у вас предусматривается продажа нескольких товаров или услуг одной группы, используйте слайдер. Дайте пользователю возможность посмотреть весь ассортимент.
Или просто покажите продукт в разных ракурсах, а услугу в различных областях применения.
10. Форма захвата
Это один из самых важных элементов на первом экране лендинга, который влияет на конверсию. Именно её будет заполнять пользователь, чтобы отправить свои контакты в ваш почтовый ящик и сделать заказ.
Дизайн. Форма должна заметно выделяться на странице и при этом быть ненавязчивой.
Количество полей для заполнения. Не заставляйте пользователя совершать лишние действия. Разместите столько полей, сколько необходимо, чтобы связаться с клиентом и завершить сделку. Как правило, достаточно двух полей — для имени и телефона клиента.
На многих страницах можно встретить ещё и поле для ввода почтового ящика с припиской «необязательно для заполнения». Если это поле необязательно, зачем тогда вообще его добавлять в форму? При необходимости почтовый ящик можно уточнить во время общения по телефону, когда у вас уже будет контакт с клиентом и возможность закрыть его на продажу.
Текст. У формы захвата должен быть заголовок. Иногда достаточно фразы «Форма заказа» или «Чтобы сделать заказ заполните эту форму».
В зависимости от вашего бизнеса форма может содержать такой заголовок:
«Чтобы начать пользоваться ______________, пройдите регистрацию»
Пользователь должен понимать, зачем заполнять эту форму. Что произойдет, когда он отправит свои данные? Поэтому под формой иногда полезно разметить фразу:
«В течение 15 минут с вами свяжется наш менеджер для уточнения деталей заказа».
Но тут тоже в зависимости от специфики вашего бизнеса.
Поля формы также должны быть озаглавлены фразами:
«Введите ваш телефон»
Помните, чем больше действий нужно совершить пользователю, тем меньше вероятности, что он станет клиентом. С каждым дополнительным кликом процент конверсии уменьшается.
11. Список выгод
Такой список всегда делает страницу эффективнее, усиливая заголовок, подзаголовок и всё что находится на первом экране.
При этом каждая из выгод бьёт в цель. Предложение становится более привлекательным для клиента и он быстрее принимает решение работать именно с вами. Используйте списки выгод на первом экране, если хотите чтобы ваши лендинги были более эффективными.
12. Стикеры
Это отличный способ выделить основную или одну из самых сильных выгод, которая поможет клиенту принять решение.
Это должна быть выгода, сравнивая которую он выбирает с кем работать.
Что можно указать в стикере?
Всё, что может повлиять на решение пользователя купить именно у вас.
Разработка лендингов — спорный предмет обсуждения. Одни и те же приёмы на разных продающих страницах покажут разные результаты.
Не копируйте лендинги конкурентов. Во-первых, вы не знаете какой результат они дают, а во-вторых — вы должны быть круче конкурентов, если хотите постоянно развивать бизнес.
Всегда всё тестируйте. Заголовки, подзаголовки, кнопки, офферы, формы, отдельные фразы, всплывающие окна и т. д.
Даже если вы написали идеальный на свой взгляд заголовок, всегда можно написать ещё лучше. И вы не можете знать, какой из них сгенерирует больше клиентов.
Поэтому тестируйте, совершенствуйте страницы и увеличивайте продажи.
Что такое интеллектуальный сценарий использования Landing Page
Мы уже рассказывали о качественном и продающем контенте, правильном позиционировании товара или определении болей своей ЦА. За всеми этими элементами стоит не страница «приземления», а продающая стратегия. Ее успех напрямую зависит от того, есть ли у вашей посадочной страницы интеллектуальный сценарий.
Что это такое?
Заранее подготовленный детальный алгоритм поведения посетителя на вашей странице. Точнее, план воплощения этого самого поведения. Страница с продуманной структурой и логически выстроенными блоками, превращающая потенциального покупателя в реального.
Я говорю не о последовательности «кнопка+форма+триггер+кнопка». Я имею в виду выработку концепции страницы на этапе подготовки к проекту и разработке лендинг пейдж. Правила такие же, как и при разработке рекламной кампании у любого бренда. Продумывается абсолютно все — слоган, УТП, ЦА, «алгоритмы движения» от продукта к продукту.
Два основных критерия
Как этого добиться?
*При работе над проектом начинайте с карты персонажей – она поможет определить тип посетителя, уровень его готовности к покупке, мотивацию и проблемы.
Рис.1 Пример карты персонажей
Только так вы поймете, какая информация и в каких количествах необходима для вашего посетителя на самом деле. Самостоятельно определите ее последовательность на посадочной странице и добавите в нужных «местах» аргументы в свою пользу.
Если страница представляет собой просто конструктор из блоков, без сценариев поведения и прототипов, то каким бы классным ни был рекламируемый продукт, к этапу дизайна вы подойдете без четкого и ясного представления ЧТО, КОМУ, и, главное, КАК вы будете продавать.
Первое правило
Каждый посетитель сайта должен чувствовать, что сайт сделан именно для него.
Как этого достичь? Расположите блоки в нужной и важной для НЕГО, а не для вас последовательности!
Примите как данность — посетители вашей страницы не всегда суперцелевые. Они приходят с разными мотивациями, потребностями и степенью готовности к покупке. Это происходит даже в случае, если вы точили свое предложение под очень конкретную ЦА. Персонажи попадают на ЛП, и в ваших силах сделать так, чтобы они остались. Просто п уть убеждения для каждого из них будет разный.
«Горячий» или «очень теплый» клиент? Он уже почти готов нажать заветную кнопку. Не грузите его лишним, не распинайтесь на первых экранах о семье генерального директора и дождливом лете 1986, когда они с другом решили создать «Петров и Партнеры». Дайте ему конкретное предложение, соблазните ценой или «добейте» скидкой.
Требовательному клиенту в ряде ниш (например юристы, врачи, ремонтники, СРО) лишний раз требуется подтверждение качества. Здесь не обойтись без сертификатов соответствия, гарантий, наград, логотипов компаний-партнеров и галереи кейсов (ставьте их повыше, расписывайте подробнее, используйте качественные изображения, играйте на контрасте «до-после»).
Новичкам, которые изучают рынок и «пробивают» вас и вашу компанию (а таких немало), или партнерам, покажите имиджевые кейсы и статусных клиентов. Так можно заполучить качественное предложение в сотрудничестве.
Для всех категорий персонажей нужно строить разные линии аргументации. Ведите своего клиента «за ручку»!
*Важно: Ориентируйтесь, в первую очередь, на тех клиентов, под которых точили предложение, но учитывайте и посетителей на других стадиях принятия решения. Они могут к вам не вернуться. Не принуждайте к немедленной покупке — дайте больше пищи для размышления, предложите что-нибудь взамен на контакт и «догоните» чуть позже рассылкой.
Рис.2 Пример, доказывающий что конвертировать посетителей можно не принуждая к немедленной покупке
Учитывайте 3 типа посетителей вашей страницы:
1. «Читатели» — просматривают лендинг сверху и до самого футера, вчитываются в каждое слово и не снижают концентрацию внимания.
Как удержать? Качественный, содержательный и релевантный запросу контент.
2. «Сканнеры» — вероятно, большая часть вашей ЦА (яркие представители пользователей, следующих F-паттерну при просмотре). Читают оффер и заголовки второго уровня. Большое внимание обращают на акценты — выделенные слова, изображения и графические направляющие.
Рис.3 Карта просмотра страницы в соответствии с F-паттерном
Как удержать? Разместить важную информацию в первой части экрана, выровнять по левому краю заголовки, добавить в них ключевые слова и фразы, чтобы «сканирующие» сразу «выхватывали» интересующие разделы.
3.«Исследователи» — где-то 1/3 ваших посетителей, в зависимости от ниши. Просмотр по схеме «заголовок + пара первых предложений», а затем последняя треть ленда, где должно быть резюме полученной информации. По исследованиям Гутенберга, такие персонажи концентрируют внимание в нижнем правом квадрате — конечном пункте вашего лендинга.
Рис.4 Диаграмма Гутенберга
Как удержать? Не пренебрегайте последней СТА – пропишите четкий и конкретный призыв к действию, продублируйте оффер в «вы-ориентированной» форме, чтобы они гарантированно прокрутили лендинг вверх еще раз.
*Оптимизируйте свою «посадку» для каждого из этих типов пользователей. Просто учитывайте их способы восприятия информации и добавляйте актуальные для них структурные элементы.
Второе правило
Каждый элемент должен работать на стимулирование конверсии.
1. Четко обозначьте главные элементы.
Не вгоняйте пользователя в ступор, не рассеивайте внимание.
Фокусируйте на кнопки с призывом к действию и ключевые «якоря» с помощью графических направляющих. Дополнительные блоки, необходимые для сценариев, с более длительным путем убеждения клиента, делайте очевидно второстепенными — мельче шрифт, нейтральные цвета, дополнения «по развороту» или скроллинг.
Рис.5 Черно-белое спокойное решение дизайна подчеркивает красную кнопку
2. Не допускайте конкуренцию главных элементов, влияющих на конверсию.
Три равнозначных СТА с противоречащими друг другу призывами к действию («Записаться на консультацию», «Позвонить», «Оставить заявку») — это критическая ошибка.
Рис.6 Противоречащие друг другу призывы к действию
Посетитель теряется, не знает куда ему нажимать, не знает, что получит, и в итоге совершает отказ.
3. Уберите отвлекающую графику.
Используйте анимацию внимательно и только там, где это действительно необходимо! Лучше воспользоваться приемом контрастности. Помните, что идеальный способ что-то выделить — это визуально «приглушить» все остальное.
Рис. 8 «Перегруженное» во всех смыслах предложение
4. Избавьтесь от ссылок на другие ресурсы.
Уберите любые ссылки, которые не продвигают вашего клиента в нужную сторону по сценарию покупки (если убрать не получается, то сократите их до минимума или открывайте в поп-апе без перехода посетителя на другую страницу).
Допустимы: ссылки на страницы людей с отзывами (по ним редко переходят, но они добавляют «траста»), ссылки на соцсети с целью показа основного портфолио работ, кол-во подписчиков и тд.
Третье правило
Контент и дизайн должны усиливать друг друга. Работа с дизайном — это, прежде всего, работа с текстом!
1. Не перегружайте страницу.
Работает правило как и с контрастом: «свободное пространство» лучшего всего фокусирует внимание на контенте.
2. Увеличьте шрифт.
Мелкий шрифт читается ПЛОХО. Вся действительно важная информация должна быть читаема. Не надо пытаться вместить максимальное количество информации в один экран. Если хотите получить ровную верстку — либо сократите объем, либо разбейте текст на абзацы.
3. Чередуйте порядок текстовых блоков слева направо.
Колонка текста длиной в полтора экрана может вызвать раздражение у читателя. Текст слева, картинка справа, и наоборот.
4. Ошибки и ляпы убивают.
Текст с ошибками оставляет ощущение неряшливой подачи информации. Если вы делаете ставку на качество, небрежное отношение к контенту негативно скажется на конверсии.
Когда сценарию подчинен каждый блок, каждый символ и каждое изображения, вплоть до буковки, посетитель думает «о, значит и свою работу они выполняют с тем же качеством и аккуратностью. Им можно доверять!»
Не издевайтесь над собой и над своими пользователями — продумайте сценарий страницы! Конверсия точно будет выше, а вам не придется ставить на а/б тест любой элемент, вызывающий сомнение.
Выводы
Упрощенно, сценарий можно представить как порядок следующих действий:
Интеллектуальных сценариев для лендингов с высокой конверсией вам!