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

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

При проведении А/В тестирования больше 80% существующих стандартных проверок направлены на исследование первого экрана посадочной страницы. Это еще раз подчеркивает важность правильного создания этой части лендинга. Исследования показывают, что посетитель принимает решение остаться или покинуть сайт в течение всего 3-5 секунд после загрузки страницы. Если приложить максимум усилий по созданию первой страницы, можно получить ощутимый прирост конверсии.

Цель создания первого экрана

Подробное руководство по созданию первого экрана лендинга

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

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

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

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

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

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

Главные компоненты

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

  • информация о компании: логотип, короткое описания сферы деятельности, контактная информация;
  • заголовок и подзаголовок, маркированный список;
  • призыв к действию и кнопка СТА;
  • красивый фон, соответствующий стилю компании и представленному продукту.

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

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

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

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

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

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

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

Для каждого элемента лендинга существует определенная зона ответственности:

  • Изображение привлекает внимание.
  • Заголовок вызывает интерес.
  • Выгоды пробуждают желание совершить покупку.
  • Кнопка СТА подсказывает, что нужно сделать, чтобы получить ваш продукт.

Дизайн

Подробное руководство по созданию первого экрана лендинга

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

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

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

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

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

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

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