что такое первый экран сайта
Первый экран лендинга: из чего состоит? [Исчерпывающее руководство]
Первый экран посадочной страницы – это блок, который видно сразу после загрузки сайта без прокрутки. Увидев содержимое первого экрана, пользователь принимает решение остаться на сайте или уйти. Поэтому критически важно спланировать его грамотно, не допуская досадных ошибок, из-за которых вы потеряете лида. Сегодня мы подготовили для вас исчерпывающий чек-лист по структуре первого экрана, а также собрали полезные ссылки на материалы блога по теме статьи.
Цели первого экрана
Попробуйте смоделировать поведение вашего клиента во время поиска решения проблемы в Интернете. Скорее всего, он вводит запрос в поисковую строку, а затем открывает сразу несколько сайтов и лендингов из списка. По первому экрану он определяет, стоит ли скролить страницу вниз или перейти к следующей открытой вкладке в браузере.
Как посетитель сайта понимает, что находится в правильном месте:
Самое интересное – львиная доля полученной информации обрабатывается на автопилоте всего за пару мгновений. Поэтому у вас не будет второго шанса произвести первое впечатление на посетителя. Ваш первый экран должен содержать ответы на ключевые вопросы пользователя:
Основные элементы первого экрана
В помощь начинающему интернет-маркетологу мы подготовили простой визуальную подсказку, или шаблон, где показаны все основные элементы первого экрана:
Ключевые элементы первого экрана:
Это обязательные элементы, они должны быть видны строго без прокрутки страницы вниз.
В готовом прототипе, или точнее вайрфрейме (о разнице между ними мы писали в статье «Что такое прототип сайта или лендинга?» ), первый экран выглядит так:
Хотя в прототипе выше не показано изображение, а о нем нужно сказать обязательно. Сначала пользователь считывает, в правильном ли он месте, при помощи идентификации именно через картинку. Поэтому эффективнее всего использовать следующий сюжет на фоне первого экрана:
Примеры подбора изображений покажем в конце статьи, в части про дизайн первого экрана.
Также пользователь быстро считывает короткий текст в дескрипторе. Это могут быть 3-5 слов следующего плана «срочный вывоз мусора в Москве» или «интернет-магазин корейской косметики». Краткое описание ниши зачастую важнее лого, особенно для тех компаний, которых по логотипу пока еще не узнают.
Подзаголовок и маркированный список взаимозаменяемы. Их размещают на странице, чтобы познакомить пользователя с выгодами продукта в цифрах и фактах.
Контактные данные в шапке нужны, чтобы предложить альтернативный способ связи с вами (звонок вместо оставления заявки на ЛП). Иногда среди элементов первого экрана упоминается меню, это бесспорно полезно для многостраничного сайта и интернет-магазина, но совсем не обязательно для лендинга.
Таким образом, каждый элемент первого экрана имеет свою зону ответственности, их можно распределить по классической модели AIDA для простоты запоминания:
А (attention – внимание) – изображение;
I (interest – интерес) – заголовок;
D (desire – желание) – выгоды;
A (action – действие) – CTA и форма захвата;
Для закрепления изученного проверьте себя: каких элементов не хватает на скриншоте первого экрана посадочной страницы ниже?
Дизайн первого экрана
Основное правило – не перегружать первый экран текстом и графикой. Пользователь не хочет искать информацию, поэтому дайте ее в максимально удобочитаемом виде.
Как подобрать изображение для блока номер 1? Используем несколько беспроигрышных сюжетов.
Фото типового клиента
В примере ниже показан ключевой клиент – семейная пара с ребенком, их цель – жить счастливо в уютном семейном гнездышке.
Боль клиента
Боль клиента – член семьи с зависимостью.
Результат от использования продукта
Результат – довольный ребенок, которому нравится няня.
Процесс взаимодействия с продуктом
Показан процесс стрижки у барбера.
Метафора или символ
Пример от агентства Артемия Лебедева, где изображения животных дают отсылку к известным произведениям искусства. В примере ниже обезьяна сидит как «Мыслитель», скульптура знаменитого Огюста Родена.
Еще одно правило: если какой-то графический элемент снижает читаемость текста, то смело отказываемся от него. Например, от темно-серого текста на светло-сером фоне. Такое сочетание очень любят некоторые веб-дизайнеры. А чтобы повысить читаемость текста на сложной картинке, используем заливку изображения темным или цветным фильтром. Либо задействуем стиль дуотон. Это монохромное изображение с добавленным поверх цветом или ярким градиентом. Пример такого изображения:
И правило номер 3 (но не по важности) – соблюдаем визуальную иерархию, чтобы посетитель страницы смог быстро отличить главное от второстепенного. Для тех, кто хочет углубиться в основы веб-дизайна посадочных страниц, рекомендую эту статью для начала.
Небольшой свод правил, которые помогут проконтролировать работу дизайнера или сделать свои лендинге на конструкторе чуть лучше:
Мы рекомендуем планировать 2 размера первого экрана:
Пара слов о верстке. Не буду касаться технических деталей, скажу лишь то, что в результате главное, чтобы сверстанный макет выглядел аккуратно, а элементы первого экрана не съезжали. Для проверки обязательно тестируем отображение сайта в популярных браузерах и на мобильных устройствах.
Все приемы в комплексе, изученные вами сегодня, сделают ваши лендинги более понятными и привлекательными для пользователя. А значит принесут в воронку больше заявок и звонков. Делитесь в комментариях своими хаками по планированию первого экрана лендинга!
Размер лендинга: какой выбрать + как сделать продающий главный экран
Цель первого экрана лендинга — привлечение внимания пользователя для дальнейшего изучения сайта. На сканирование лендинга у человека уходит около 3-х секунд — если за это время не нашлось за что зацепиться, пользователь уйдет и ты потеряешь потенциального клиента.
По данным исследования компании «Nielsen Norman Group (NNG)»
Идеальный первый экран лендинга
Поэтому задача первого экрана:
Если первый экран не работает — не работает весь лендинг
Посмотри первый экран своего лендинга.
Отвечает ли он на эти вопросы:
Закажи разработку
у меня
Сделай сам на конструкторе
Какие элементы 1-ого экрана отвечают на 5 основных вопросов?
Размер лендинга: высота и ширина
Дизайн лендинга для ПК версии c контентной шириной 1170 px создавай в следующих размерах:
Для мобильных устройств c минимальной контентной шириной 290px используй размеры:
Дизайн лендинга в фотошопе
Дизайн макета в фигме
Основные правила, которые нужно соблюдать при создании первого экрана:
ТОП-6 ошибок первого экрана
Основные ошибки по категориям:
1) Маркетинговая проработка:
Низкие цены! Успейте купить! – без комментариев понятно, что это очень плохо
Где УТП? Куда я вообще попал?
Ничего не понятно, и причем здесь ребенок?
Заговок, описание, акция, форма с таймером — глаза разбегаются
Здесь понятно, что написано?
Перевозка рыбы в аквариуме в Антарктике — а что видишь ты?
Убери текст с экрана. Догадаешься, из какой сферы этот сайт?
Основной контент уехал вниз
Текст без конкретики
5) Доверие и безопасность:
6) Слайдер или баннер на главном экране. На каждом слайде показаны разные торговые предложения, что отвлекает от главного целевого действия и размывает его.
Слайдер на главной
7 рекомендаций по увеличению конверсии главного экрана
Самые эффективные инструменты из моей практики:
16 примеров первого экрана с конверсией от 5%
Лендинг 1. Dessertbro.ru
Пример из нашей практики — одноэкранный лендинг пейдж с конверсией 26%.
Реализован по всем правилам: УТП, преимущества, лого, дискриптор, контактные данные, призыв к действию, форма + приятный, выделяющийся на фоне конкурентов дизайн и аккуратная вёрстка.
Захотелось бы получить каталог с десертами?
Лендинг 2. Inzr.ru
Фишка. Визуально понятная картинка, описание деятельности компании (ассоциации с проектами), емкий заголовок, подзаголовок, увеличивающий ценность, преимущества и целевая кнопка действия.
Лендинг 3. Lp.kuhnivesta.ru
Фишка 1. Лаконичный дизайн с приятно подобранной палитрой цветов, который вызывает доверие.
Первый экран просто пальчики оближешь.
Лендинг 4. Raymod.ru
Оптовая продажа головных уборов.
Фишка. Получить оптовый прайс и бесплатные образцы от производителя.
Лендинг 5. Guru-stroy.by
Фишка 1. Дизайн выглядит дорого и премиально.
Фишка 2. Показывают свою экспертность: делимся опытом на телеканале ОНТ, смотрите обзор нашей работы.
Лендинг 6. Broomroom.ru
Фишка 1. Яркий фон с настоящей фотографией сотрудника в фирменной спецодежде. Плюс к доверию.
Лендинг 7. Piton-power.ru
Продажа блоков питания.
Фишка 1. «Товар лицом». Фото продукта на половину экрана в высоком качестве.
Фишка 2. Факты о компании/товаре: ТОП-5 поставщиков по версии журнала, блоки питания работают даже в экстремальных условиях.
Фишка 3. Продающее видео.
Лендинг 8. Мечтысбываются.su
Лендинг по продаже квартир.
Фишка. Оффер с усиливающим подзаголовком. Простое и эффективное оформление экрана.
Лендинг 9
Лендинг по продаже бытовок.
Фишка 1. Убойный УТП, «нашпигованный» преимуществами.
Фишка 2. При переключении кнопок видим, как представлена бытовка снаружи/внутри. При наведении на «+» показываются характеристики.
Полезные материалы раз в месяц, нужно лишь подписаться
Первый экран landing page — 5 работающих вариантов оформления
5 секунд. Что можно успеть за это время? Признаться в любви. Включить свет. Потушить сигарету. Нажать кнопку вызова на мобильном телефоне.
По статистике, в течение 3-5 секунд интернет-пользователь принимает решение, остаться на сайте или нажать на крестик в правом верхнем углу. Вот почему конверсия landing page напрямую зависит от оформления первого экрана — той части посадочной страницы, которую посетитель видит без прокрутки.
Первый экран — как локомотив. Именно он «тянет» за собой все остальные «вагоны» (блоки лендинга) и мотивирует пользователя читать дальше. Или не читать — в зависимости от того, какие элементы там расположены. У вас может быть идеальный landing page, но если вы налажали с первым экраном — скажите «Прощай, конверсия!»
По результатам тестов 270 посадочных страниц мы отобрали 5 работающих вариантов расположения элементов первого экрана. Для наглядности эти схемы показаны на примерах лендингов крупных компаний.
Вариант №1
Зеленая кнопка Firefox
Зеленая кнопка скачать Firefox, заголовок и картинка-скриншот по центру — как один из жизнеспособных вариантов. Обратите внимание, что в примере нет ничего лишнего. И при этом все работает.
Вариант №2
Заголовок + форма + кнопка
Один из лучших примеров сайта от компании Optimizely
На картинке изображен один из лучших примеров сайта от компании Optimizely, и ему даже не нужен подзаголовок. С помощью градиента и фона внимание пользователя концентрируется на строке для ввода электронного адреса.
Вариант №3
Заголовок + подзаголовок + форма + кнопка
Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня
Третий вариант отличается от второго наличием подзаголовка.
Заголовок: Shop Frank & Oak Today — «Покупайте товары Frank & Oak сегодня». В подзаголовке перечислены выгоды от регистрации на сайте.
Вариант №4
Заголовок + подзаголовок + кнопка + триггеры
Заголовок + подзаголовок + кнопка + триггеры
Триггеры — это те выгоды, которые получает клиент.
Вариант №5
Заголовок + подзаголовок + кнопка + отзывы
Заголовок + подзаголовок + кнопка + триггеры
Отзывы на этой странице — это готовые кейсы. По сути, здесь перечислены выгоды, которые получили пользователи. Например: «Вложил 49 долларов, заработал 1127 долларов».
Теперь вы знаете, как правильно оформлять первый экран посадочной страницы. Самое время применить полученные знания на практике. И сделать экран, к примеру, таким:
Что не так в этом примере?
На первый взгляд все правильно, все формальные требования соблюдены.
Но непонятно, что делает этот человек на фото. Кстати, какие предположения, что предлагает эта компания? Да все что угодно! Начиная с планшетов и заканчивая прогнозом погоды.
Как можно трактовать картинку без подписи? Приложения и облака, которые вылетают из планшета, не дают пользователю сосредоточиться на главном. А главное здесь — призыв к действию внизу экрана, его практически не видно, он не несет смысловой нагрузки.
Ладно, раскроем карты:) На самом деле это профессиональная команда верстальщиков, которая предлагает свои услуги. Но понять это не так-то просто. Поэтому, используя «правильные» элементы лендинга, не нужно уходить от главного — сути вашего предложения.
Что написать и показать на первом экране лендинга, чтобы зацепить максимум клиентов
Как сделать первый экран лендинга исходя из того, как думает и действует клиент – рассказывает Сергей Перевозчиков. Контент и дизайн на примерах, в том числе из собственной практики.
Почему первый экран – важнейшая часть коммерческой страницы
Иллюстрация: покажите не продукт, а то, как он улучшит жизнь клиента
Заголовок: просто назовите то, что вы продаете
Подзаголовок: опишите полезное действие
Дизайн: думайте об удобстве для пользователя, а не о красоте
Что еще нужно знать о первом экране
Ошибки УТП – очевидные и невероятные Статья
Маркетинговый анализ аудитории перед созданием продающего контента Статья
Как избавиться от «солянки с мусором» в Яндекс.Директе и снизить стоимость заявки в 4 раза. Кейс по продаже металлоконструкций Статья
Сейчас одностраничные сайты стали очень популярны среди рекламодателей. Я лично для своего бизнеса создала не один лендинг, эффект от них очень хороший и для создания много денег не надо.
Бесплатное продвижение в соцсетях: способы и примеры от экспертов Статья
«Отправили таску на апрув»: какие английские слова стали частью речи маркетологов и рекламщиков Статья
Что проверить и настроить в Яндекс.Метрике и Google Analytics перед запуском рекламы: инструкция от Промо Эксперт Статья
Как сквозная аналитика поможет повысить эффективность вложений в рекламу: кейсы Alytics Статья
Внутренняя перелинковка: схемы и советы по оптимизации Статья
«Много работаю, а денег нет»: как фрилансеру увеличить доход Статья
5 вариантов первых экранов для landing page
Такой инструмент, как Landing Page считает уже обязательным при продвижении бизнеса. В этом есть своя логика, так как посадочная страница при правильном использовании может стать основным источником продаж. Важных составляющих у него много, но сегодня мы поговорим о том, с чем пользователь встречается сразу, когда попадает на такой сайт – первый экран.
Задача первого экрана
Основная цель этой части страницы – емко и быстро дать понять пользователю что это за сайт и что он предлагает. Если первый экран не отвечает на эти вопросы, то дальше сайт листать никто не станет.
Исключением может быть горячая аудитория, которая попала на лендинг по прямому запросу. Также для горячего трафика сам первый экран может выглядеть иначе, чтобы сразу привести к продаже. Например, на нем будет форма заказа или кнопка «Купить».
Основные составляющие
Несмотря на то, что первая часть лендинга может состоять из разных частей, есть элементы, которые используются чаще всего:
— Меню или навигация по сайту (удобно для ознакомления с интересующим пользователя разделом)
— Логотип или название бренда (может быть расположено на меню или на первом экране)
— Заголовок (обычно это ключевое УТП компании)
— Подзаголовок (пара строчек, дополняющие и раскрывающие УТП)
— Изображение (это может быть демонстрация продукта, фотография специалиста или другое изображение, дополняющее предложение в заголовке)
— Целевое действие (кнопки заказа, различные формы для заполнения, оформление обратного звонка или запись на консультацию)
— Маркетинговые инструменты (это могут быть таймер с обратным отсчетом, акционные предложения, бесплатная услуга в обмен на контакты, чаты или всплывающие окна и прочее)
Старайтесь не перегрузить лендинг массой элементов и расширений. От этого сайт только проиграет, так как пользователь в нем не разберется и просто уйдет. Мы подобрали 5 универсальных примеров, которые подойдут практически под любые задачи и помогут сделать эффективный первый экран. Меню в них мы не затрагивали, так как и этот элемент имеет свои особенности и его стоит обсуждать отдельно.
Такой формат первого экрана встречается чаще всего. Он прост в исполнении и выполняет свою задачу.
Этот вариант хорошо подойдет для конкретного товара или услуг специалиста. В заголовке указываете свое УТП, а вместо подзаголовка раскрываете ценность предложения преимуществами или качествами. На месте изображения показываем сам товар или размещаем фотографию специалиста.
Здесь важно чтобы видео было хорошего качества и с первых секунд заинтересовывало аудиторию. Оно может выполнить функцию вообще всего лендинга, закрывая возражения или раскрывая предложение. Не нужно начинать с долгого вступления, тогда ролик смотреть никто не будет. Сделайте короткое емкое видео, в котором будет ключевая информация о вашем продукте.
Верстка самого экрана может различаться, но как набор элементов такой формат отлично подходит в большинстве ниш. Его также можно усилить лид-магнитом или скидкой за заполнение формы. А вместо формы может быть калькулятор или запись на консультацию.
В качестве визуала может быть коллаж из фотографий продукции или иллюстрация, которая поможет раскрыть предложение. В качестве усиления раздела используется акция или ограничение предложения по времени.
Заключение
Все элементы, помимо предложения и его раскрытия, вполне взаимозаменяемы. Другой вопрос – в эффективности такой посадочной страницы. Каким бы идеальным формат не казался, возможно изменение или небольшое дополнение на первый экран сделает только лучше. Тестируйте разные подходы, чтобы найти наилучшее решение.