Что такое первый экран сайта
Первый экран лендинга: из чего состоит? [Исчерпывающее руководство]
Первый экран посадочной страницы – это блок, который видно сразу после загрузки сайта без прокрутки. Увидев содержимое первого экрана, пользователь принимает решение остаться на сайте или уйти. Поэтому критически важно спланировать его грамотно, не допуская досадных ошибок, из-за которых вы потеряете лида. Сегодня мы подготовили для вас исчерпывающий чек-лист по структуре первого экрана, а также собрали полезные ссылки на материалы блога по теме статьи.
Цели первого экрана
Попробуйте смоделировать поведение вашего клиента во время поиска решения проблемы в Интернете. Скорее всего, он вводит запрос в поисковую строку, а затем открывает сразу несколько сайтов и лендингов из списка. По первому экрану он определяет, стоит ли скролить страницу вниз или перейти к следующей открытой вкладке в браузере.
Как посетитель сайта понимает, что находится в правильном месте:
Самое интересное – львиная доля полученной информации обрабатывается на автопилоте всего за пару мгновений. Поэтому у вас не будет второго шанса произвести первое впечатление на посетителя. Ваш первый экран должен содержать ответы на ключевые вопросы пользователя:
Основные элементы первого экрана
В помощь начинающему интернет-маркетологу мы подготовили простой визуальную подсказку, или шаблон, где показаны все основные элементы первого экрана:
Ключевые элементы первого экрана:
Это обязательные элементы, они должны быть видны строго без прокрутки страницы вниз.
В готовом прототипе, или точнее вайрфрейме (о разнице между ними мы писали в статье «Что такое прототип сайта или лендинга?» ), первый экран выглядит так:
Хотя в прототипе выше не показано изображение, а о нем нужно сказать обязательно. Сначала пользователь считывает, в правильном ли он месте, при помощи идентификации именно через картинку. Поэтому эффективнее всего использовать следующий сюжет на фоне первого экрана:
Примеры подбора изображений покажем в конце статьи, в части про дизайн первого экрана.
Также пользователь быстро считывает короткий текст в дескрипторе. Это могут быть 3-5 слов следующего плана «срочный вывоз мусора в Москве» или «интернет-магазин корейской косметики». Краткое описание ниши зачастую важнее лого, особенно для тех компаний, которых по логотипу пока еще не узнают.
Подзаголовок и маркированный список взаимозаменяемы. Их размещают на странице, чтобы познакомить пользователя с выгодами продукта в цифрах и фактах.
Контактные данные в шапке нужны, чтобы предложить альтернативный способ связи с вами (звонок вместо оставления заявки на ЛП). Иногда среди элементов первого экрана упоминается меню, это бесспорно полезно для многостраничного сайта и интернет-магазина, но совсем не обязательно для лендинга.
Таким образом, каждый элемент первого экрана имеет свою зону ответственности, их можно распределить по классической модели AIDA для простоты запоминания:
А (attention – внимание) – изображение;
I (interest – интерес) – заголовок;
D (desire – желание) – выгоды;
A (action – действие) – CTA и форма захвата;
Для закрепления изученного проверьте себя: каких элементов не хватает на скриншоте первого экрана посадочной страницы ниже?
Дизайн первого экрана
Основное правило – не перегружать первый экран текстом и графикой. Пользователь не хочет искать информацию, поэтому дайте ее в максимально удобочитаемом виде.
Как подобрать изображение для блока номер 1? Используем несколько беспроигрышных сюжетов.
Фото типового клиента
В примере ниже показан ключевой клиент – семейная пара с ребенком, их цель – жить счастливо в уютном семейном гнездышке.
Боль клиента
Боль клиента – член семьи с зависимостью.
Результат от использования продукта
Результат – довольный ребенок, которому нравится няня.
Процесс взаимодействия с продуктом
Показан процесс стрижки у барбера.
Метафора или символ
Пример от агентства Артемия Лебедева, где изображения животных дают отсылку к известным произведениям искусства. В примере ниже обезьяна сидит как «Мыслитель», скульптура знаменитого Огюста Родена.
Еще одно правило: если какой-то графический элемент снижает читаемость текста, то смело отказываемся от него. Например, от темно-серого текста на светло-сером фоне. Такое сочетание очень любят некоторые веб-дизайнеры. А чтобы повысить читаемость текста на сложной картинке, используем заливку изображения темным или цветным фильтром. Либо задействуем стиль дуотон. Это монохромное изображение с добавленным поверх цветом или ярким градиентом. Пример такого изображения:
И правило номер 3 (но не по важности) – соблюдаем визуальную иерархию, чтобы посетитель страницы смог быстро отличить главное от второстепенного. Для тех, кто хочет углубиться в основы веб-дизайна посадочных страниц, рекомендую эту статью для начала.
Небольшой свод правил, которые помогут проконтролировать работу дизайнера или сделать свои лендинге на конструкторе чуть лучше:
Мы рекомендуем планировать 2 размера первого экрана:
Пара слов о верстке. Не буду касаться технических деталей, скажу лишь то, что в результате главное, чтобы сверстанный макет выглядел аккуратно, а элементы первого экрана не съезжали. Для проверки обязательно тестируем отображение сайта в популярных браузерах и на мобильных устройствах.
Все приемы в комплексе, изученные вами сегодня, сделают ваши лендинги более понятными и привлекательными для пользователя. А значит принесут в воронку больше заявок и звонков. Делитесь в комментариях своими хаками по планированию первого экрана лендинга!
Лендинг: идеальный первый экран
Отдел маркетинга может неделю продумывать путь клиента, подбирать социальные доказательства и формировать доверие на лендинге. Однако реальность жестока: 80 % времени пользователи будут изучать первый экран. Если он их не заинтересует, остальная часть лендинга так и не увидит своего посетителя.
Первый экран
Лендинги различаются по длине. Есть супердлинные, как промостраница по франчайзингу в «Додо-пицца». Есть суперкороткие — предложение для новых клиентов от Slack. Но у них всегда есть первый экран — отдельный смысловой блок, выделенный графически.
Лендинг с предложением по франчайзингу «Додо-пицца»
Одноэкранный лендинг Slack: десктопная и мобильная версии
Идеальный первый экран отражает одновременно суть оффера и решение проблемы. Послание должно быть понятно с первого взгляда: что предлагают, для чего это нужно, почему я должен это купить. Для этого на первом экране пишут заголовок и подзаголовок. Иногда вместо подзаголовка размещают краткий поясняющий текст.
Элементы. На первом экране часто располагают дополнительные элементы: название организации, контакты, ссылки на соцсети, лид-форму и CTA (call to action). Однако не все перечисленное нужно. Название организации или бренда обязательно — это поможет посетителям запомнить рекламодателя. Иногда пользователи сразу звонят, чтобы сделать заказ или задать вопросы, поэтому на первом экране важно разместить телефон.
Кнопки соцсетей не нужны, хотя многие считают наоборот. Соцсети — внешние ссылки. Они уводят посетителей с сайта. Перейдя в Facebook, человек мгновенно оказывается под влиянием другой интересной и захватывающей информации. В такой ситуации первый экран должен сильно впечатлить человека, чтобы он не забыл про оффер и вернулся обратно. Лучше соцсети спустить в самый низ, в раздел «Контакты», или не указывать вовсе.
Форма заказа. Мы часто видим лид-форму и CTA на первом экране лендинга. Однако это не уместно. Посетитель только знакомится с товаром или услугой и не готов принимать молниеносные решения. Чем дороже продукт, тем дольше клиент будет обдумывать покупку. Поэтому спускайте форму ниже подробного описания, рассказа о преимуществах и социальных доказательств. Лид-форма на первом экране может вызвать даже раздражение как излишне навязчивая, особенно если она с обратным отсчетом.
Из этого правила есть исключение: размещайте форму заказа на первом экране, если решение о покупке принимается быстро. Это может быть супердешевый товар, известный продукт с хорошей скидкой или бесплатная регистрация в сервисе. Главное — посетители уже готовы купить. Таким экраном мы просто облегчаем им процесс заказа.
Реклама. Еще одно правило первого экрана — он должен быть на 100 % релевантен рекламе, по которой пришел посетитель. Допустим, мы продаем дачу и выделили два сегмента потенциальных покупателей: пенсионеры и семьи с маленькими детьми. Для первых главными преимуществами станут пешая доступность до станции электрички, продуктового магазина и медпункта, для вторых — свежий воздух, большой сад и озеро для купания.
Чтобы привлечь потенциальных покупателей, нужно составить отдельные объявления с разными перечнями преимуществ. Но посетитель, перешедший по рекламе дачи с огромным садом, будет удивлен заголовку «Дача в Ромашково: продуктовый магазин в соседнем доме» — ведь он не совпадает с обещанием в объявлении. Поэтому для каждого сегмента целевой аудитории необходимо создавать уникальный первый экран с отдельным оффером. Для этого проектируют несколько вариантов экрана или настраивают автозамену заголовка в специальных сервисах.
Дизайн должен быть простым, лаконичным, понятным. Не затмевать лид-форму и не отвлекать посетителя от целевого действия. Не перегружайте дизайн лишними элементами, иконками, картинками. Используйте приятные цветовые решения. Покажите товар — разместите большую детальную фотографию, которую интересно рассматривать.
Первый экран лендинга по продаже контроллера для диджеев
Оффер
Оффер, или торговое предложение — то, ради чего создается лендинг. Он отражает главные преимущества товара и причины его купить. Оффер должен быть четко сформулирован, чтобы посетитель с первого взгляда понимал смысл предложения.
Выгоды. Люди чувствуют выгоду, когда могут получить качество, скорость или хорошую стоимость. Это три главных преимущества, которыми оперируют при составлении оффера.
Щадящие контактные линзы от ведущего производителя США
Доставка контактных линз в течение часа
Скидка 30 % на упаковку из 90 штук
В одном предложении можно использовать до двух выгод в любых сочетаниях. Однако если в оффере отражены три выгоды, он не выглядит ценным и правдоподобным. Создается ощущение обмана.
Пример неудачного оффера
Заголовок. Обычно оффер состоит из заголовка и подзаголовка. Заголовок — первое, что видит посетитель на лендинге. Он побуждает остаться или уйти. Уделяйте основное внимание созданию заголовка. При работе над лендингом руководствуйтесь формулой времени 50/30/20:
Заголовок работает, если при его составлении соблюдается пять правил:
В хорошем заголовке много глаголов и мало существительных.
Подзаголовок уточняет оффер и добавляет ценность. Если заголовок призван привлечь внимание и заинтересовать, то подзаголовок должен объяснить, насколько это выгодно для клиента, побудить его совершить целевое действие. Идеальный подзаголовок содержит закрывающий аргумент, который снимает все возражения и ведет к CTA.
Пример хорошего оффера
Типовые ошибки
Мы подобрали примеры частых ошибок на первом экране.
Много элементов. На таком экране посетитель теряется. Мы сразу видим четыре CTA: «вызвать замерщика», «заказать обратный звонок», «вызвать замерщика и получить скидку 40 %» и «жду звонка». Первый экран помимо оффера включает иконки доверия к товару и продавцу. Много лишней информации, которая отвлекает.
Нет обязательных элементов. На первом экране нет оффера — ясного и стимулирующего призыва к действию. Акция не сформулирована словами — нам приходится додумывать, что же предлагает компания. Кроме этого, информация о скидке расположена в разных местах экрана: сверху и сбоку. Это не дает посетителю сосредоточиться. Основное внимание приковывает баннер с немецким флагом, который не несет торгового предложения.
Много офферов. Предложения различных категорий товаров в разных ценовых уровнях размывают оффер. У каждого предложения своя целевая аудитория, поэтому следует делать отдельные промостраницы. Совмещение офферов не «цепляет» ЦА.
Много цветов и шрифтов. Цветовое разнообразие на первом экране создает «информационный шум» и производит впечатление недоработанности. Цвета блоков не сочетаются между собой, а шрифт на них плохо читается. Плюс ко всему, фоновая картинка не связана с товаром и неуместна.
Шпаргалка
Отдел маркетинга может неделю продумывать путь клиента, подбирать социальные доказательства и формировать доверие на лендинге. Однако реальность жестока: 80 % времени пользователи будут изучать первый экран. Если он их не заинтересует, остальная часть лендинга так и не увидит своего посетителя.
Первый экран
Лендинги различаются по длине. Есть супердлинные, как промостраница по франчайзингу в «Додо-пицца». Есть суперкороткие — предложение для новых клиентов от Slack. Но у них всегда есть первый экран — отдельный смысловой блок, выделенный графически.
Лендинг с предложением по франчайзингу «Додо-пицца»
Одноэкранный лендинг Slack: десктопная и мобильная версии
Идеальный первый экран отражает одновременно суть оффера и решение проблемы. Послание должно быть понятно с первого взгляда: что предлагают, для чего это нужно, почему я должен это купить. Для этого на первом экране пишут заголовок и подзаголовок. Иногда вместо подзаголовка размещают краткий поясняющий текст.
Элементы. На первом экране часто располагают дополнительные элементы: название организации, контакты, ссылки на соцсети, лид-форму и CTA (call to action). Однако не все перечисленное нужно. Название организации или бренда обязательно — это поможет посетителям запомнить рекламодателя. Иногда пользователи сразу звонят, чтобы сделать заказ или задать вопросы, поэтому на первом экране важно разместить телефон.
Кнопки соцсетей не нужны, хотя многие считают наоборот. Соцсети — внешние ссылки. Они уводят посетителей с сайта. Перейдя в Facebook, человек мгновенно оказывается под влиянием другой интересной и захватывающей информации. В такой ситуации первый экран должен сильно впечатлить человека, чтобы он не забыл про оффер и вернулся обратно. Лучше соцсети спустить в самый низ, в раздел «Контакты», или не указывать вовсе.
Форма заказа. Мы часто видим лид-форму и CTA на первом экране лендинга. Однако это не уместно. Посетитель только знакомится с товаром или услугой и не готов принимать молниеносные решения. Чем дороже продукт, тем дольше клиент будет обдумывать покупку. Поэтому спускайте форму ниже подробного описания, рассказа о преимуществах и социальных доказательств. Лид-форма на первом экране может вызвать даже раздражение как излишне навязчивая, особенно если она с обратным отсчетом.
Из этого правила есть исключение: размещайте форму заказа на первом экране, если решение о покупке принимается быстро. Это может быть супердешевый товар, известный продукт с хорошей скидкой или бесплатная регистрация в сервисе. Главное — посетители уже готовы купить. Таким экраном мы просто облегчаем им процесс заказа.
Реклама. Еще одно правило первого экрана — он должен быть на 100 % релевантен рекламе, по которой пришел посетитель. Допустим, мы продаем дачу и выделили два сегмента потенциальных покупателей: пенсионеры и семьи с маленькими детьми. Для первых главными преимуществами станут пешая доступность до станции электрички, продуктового магазина и медпункта, для вторых — свежий воздух, большой сад и озеро для купания.
Чтобы привлечь потенциальных покупателей, нужно составить отдельные объявления с разными перечнями преимуществ. Но посетитель, перешедший по рекламе дачи с огромным садом, будет удивлен заголовку «Дача в Ромашково: продуктовый магазин в соседнем доме» — ведь он не совпадает с обещанием в объявлении. Поэтому для каждого сегмента целевой аудитории необходимо создавать уникальный первый экран с отдельным оффером. Для этого проектируют несколько вариантов экрана или настраивают автозамену заголовка в специальных сервисах.
Дизайн должен быть простым, лаконичным, понятным. Не затмевать лид-форму и не отвлекать посетителя от целевого действия. Не перегружайте дизайн лишними элементами, иконками, картинками. Используйте приятные цветовые решения. Покажите товар — разместите большую детальную фотографию, которую интересно рассматривать.
Первый экран лендинга по продаже контроллера для диджеев
Оффер
Оффер, или торговое предложение — то, ради чего создается лендинг. Он отражает главные преимущества товара и причины его купить. Оффер должен быть четко сформулирован, чтобы посетитель с первого взгляда понимал смысл предложения.
Выгоды. Люди чувствуют выгоду, когда могут получить качество, скорость или хорошую стоимость. Это три главных преимущества, которыми оперируют при составлении оффера.
Щадящие контактные линзы от ведущего производителя США
Доставка контактных линз в течение часа
Скидка 30 % на упаковку из 90 штук
В одном предложении можно использовать до двух выгод в любых сочетаниях. Однако если в оффере отражены три выгоды, он не выглядит ценным и правдоподобным. Создается ощущение обмана.
Пример неудачного оффера
Заголовок. Обычно оффер состоит из заголовка и подзаголовка. Заголовок — первое, что видит посетитель на лендинге. Он побуждает остаться или уйти. Уделяйте основное внимание созданию заголовка. При работе над лендингом руководствуйтесь формулой времени 50/30/20:
Заголовок работает, если при его составлении соблюдается пять правил:
В хорошем заголовке много глаголов и мало существительных.
Подзаголовок уточняет оффер и добавляет ценность. Если заголовок призван привлечь внимание и заинтересовать, то подзаголовок должен объяснить, насколько это выгодно для клиента, побудить его совершить целевое действие. Идеальный подзаголовок содержит закрывающий аргумент, который снимает все возражения и ведет к CTA.
Пример хорошего оффера
Типовые ошибки
Мы подобрали примеры частых ошибок на первом экране.
Много элементов. На таком экране посетитель теряется. Мы сразу видим четыре CTA: «вызвать замерщика», «заказать обратный звонок», «вызвать замерщика и получить скидку 40 %» и «жду звонка». Первый экран помимо оффера включает иконки доверия к товару и продавцу. Много лишней информации, которая отвлекает.
Нет обязательных элементов. На первом экране нет оффера — ясного и стимулирующего призыва к действию. Акция не сформулирована словами — нам приходится додумывать, что же предлагает компания. Кроме этого, информация о скидке расположена в разных местах экрана: сверху и сбоку. Это не дает посетителю сосредоточиться. Основное внимание приковывает баннер с немецким флагом, который не несет торгового предложения.
Много офферов. Предложения различных категорий товаров в разных ценовых уровнях размывают оффер. У каждого предложения своя целевая аудитория, поэтому следует делать отдельные промостраницы. Совмещение офферов не «цепляет» ЦА.
Много цветов и шрифтов. Цветовое разнообразие на первом экране создает «информационный шум» и производит впечатление недоработанности. Цвета блоков не сочетаются между собой, а шрифт на них плохо читается. Плюс ко всему, фоновая картинка не связана с товаром и неуместна.
Первый экран сайта. Первый и последний шанс оставить клиента на сайте и получит конверсию
Все начинающие разработчики лендингов грешат размещением слайдера на 1 экране их сайта.
Сейчас мы говорим о продающих сайтах и слайдерах с несколькими предложениями во весь экран.
Забегая наперед, сразу скажу, если ваш сайт не продает и люди с него уходят (отказы на сайте) и вы хотите докопаться до причин отсутствия конверсии, проверьте, не установлен ли у вас на сайте слайдер во весь первый экран.
Этот вопрос вызывает много споров и возражений. Мне приводят в пример кучу сайтов с примерами слайдеров на 1 экранах.
Почему я качу бочку на слайдер?
Казалось бы такой хороший способ показать товар лицом. Дело в том, что смена контента на 1 экране отвлекает посетителя от того, что мы задумали.
А мы задумали за 3-4 секунды дать понять, что мы ему предлагаем, и зачем ему это нужно.
А тут какие-то картинки летают слева направо или наоборот.
И не дай бог еще и заголовки мелькают перед глазами и сменяют друг друга.
Ну о каком внимании посетителя к нашему предложению тут вообще можно говорить.
Почему слайдер на сайте убивает конверсию?
1. Низкая кликабельность.
Статистика из интернета: «Сайт парижского университета Notre Dam за последний год посетили 3 755 000 человек. Из них на слайдер кликнули 1,15%. Выходит, разработчики используют самую важную область страницы впустую. Интересно, что 89% кликов пришлось на первое изображение. Остальные 4 поделили 10%»
2. Эффект «баннерной слепоты»
Форма слайдера визуально напоминает рекламные баннеры. Пользователи их не любят и игнорируют. Об этом свидетельствуют тепловые карты метрики.
3. Отсутствие адаптации или сложности в адаптации к мобильным устройствам.
Вся привлекательность слайдера заключается в крупном, привлекательном и качественном изображении. На экране мобильного устройства этот эффект пропадает. И кроме всего прочего, слайдер (карусель) очень ощутимо тормозит загрузку страницы.. В результате половина вашей аудитории не только не оценит ваше желание удивить пользователя красивыми изображениями, но и может в принципе потерять интерес к вашему сайту.
4. Сложности в подборе скорости переключения изображений.
Казалось бы технически это сделать просто, но …..
Задержка 0,5-2 секунды, в этом случае невозможно осмысленно воспринять информацию, что сильно раздражает. Если наоборот, с длительным промежутком, 3-5 сек, посетители просто не заметят слайдер, воспримут его за картинку и прокрутят страницу вниз. Тогда зачем его устанавливать, утяжелять страницу? Возможно, первый слайд и захватит внимание зрителя, но начиная со второго, внимание будет катастрофически снижаться.
5. Проблема с UX дизайном или юзабилити (удобство восприятия информации пользователем)
Чаще всего слайдер на сайте содержит кликабельные призывы перейти к более детальному изучению предложения.
Например, пользователь кликнул на одно изображение, ознакомился с информацией, а дальше он должен вернуться обратно, дождаться следующего слайда и проделать ту же операцию еще раз, и так далее.
Для наглядности проблемы: вы хотите показать несколько каких-то вещей зрителю. Их можно сложить в сундук и вынимать по одной, или разложить на полках, где они все будут на виду. Явно, что эффективнее не складывать все в кучу, а разделить их по принципу 1 страница (секция) → 1 предложение →1 целевое действие.
Даю вам краткий чек лист для проверки 1 экрана или главной страницы сайта на конверсию.
Все хорошо, если у вас:
1. Статичное изображение продукта. (Возможен в отдельных случаях видео бекграунд закрытый градиентом или цветом с прозрачностью 50-90%);
2. Четкий и понятный заголовок крупным шрифтом H1 (до 60 знаков), который говорит: что за продукт, чем он полезен, и что клиент от него получит и как скоро);
3. Дескриптор: подзаголовок H2 который раскрывает суть продукта в деталях и усиливает значение деталей;
4. Ясный и четкий призыв к действию (СТА) написанный в активном залоге
5. Дедлайн (ограничение по времени или по количеству);
6. Форма захвата не более 3 полей или кнопка с описанием события, которое произойдет после заказа или подписки.
«Оформить подписку и получить 5 видео уроков бесплатно» На кнопке: «ПОЛУЧИТЬ БЕСПЛАТНО»;
7. Есть буллеты о дополнительных преимуществах продукта или оффера;
8. Отсутствуют отвлекающие детали, активная анимация, слайдер, ссылки на сторонние ресурсы (соцсети)
9. Отсутствуют малозначимые части контента, которые можно разместить в секциях ниже;
11. Используется один шрифт. Можно использовать дополнительный для имен собственных и названий брендов;
Есть еще требования к верстке и типографике, но об этом в следующий раз.