Что такое первый экран сайта
Первый экран сайта и основные зоны внимания лендинга
2015-11-25 • 5 мин. читать
Сегодня мы расскажем, с чего начинается сайт. Для посетителей сайт начинается с первого экрана. Он попадает на первую страничку, затем уходит или остается. От дизайна и оформления первой страницы зависит, совершит пользователь целевое действие или нет.
Если беглый взгляд посетителя не найдет нужной и полезной ему информации в течение 3-5 секунд, он покинет сайт. Именно поэтому правило «Встречают по одежке» очень актуально при оформлении первых экранов. Главная страница сайта выполняет функцию «красивой оболочки», «фантика вкусной конфеты». Если правильно и красиво «упаковать» первый экран, то пользователь заинтересуется дальнейшим содержимым сайта.
Цели первого экрана
Попав на страницу сайта, посетитель обычно задает похожие вопросы:
Куда я попал?
Туда ли я попал, куда хотел?
У каждого бизнеса разные цели первого экрана. У сайта по продаже туров в Египет – продать тур. У сайта Интернет-магазина оптики – завлечь посетителя на другие страницы для осуществления подбора и покупки очков. А у сайта образовательных услуг цель первого экрана – подписка на рассылку.
Совет: Для начала задайте себе вопрос, что я хочу, чтобы сделал посетитель, попав ко мне на сайт? Какое действие он должен совершить? И уже после ответа на данный вопрос приступайте к оформлению своего первого экрана.
Основные элементы первого экрана лендинга
1. Заголовок первого (главного) экрана. В нем поясняете, чем вы занимаетесь, род деятельности компании. Он должен быть кратким и понятным при прочтении. Если вы продаете туры, то пишите на первой странице «Продажа туров в Египет». На сайте оптики хорошим заголовком будет «Очки на любой кошелек». А на сайте образовательных услуг пишите, например, «Обучение Интернет-маркетингу».
Простой совет: Покажите свой сайт постороннему человеку и спросите понятно ли чем занимается компания? Если ответ очевиден, то ничего менять на первом экране не нужно.
2. Картинка или видео – это визуальный контент. Картинка помогает воспринимать информацию. Она может быть:
Видео также может рассказать о вашем продукте. Но здесь нужно соблюсти правило тайминга – оно должно быть не более 2-х минут. За это время успейте заинтересовать и сформировать целевое действие пользователя.
3. Призыв к действию у пользователя. Призыв к действию может быть в виде кнопки «Записаться», «Зарегистрироваться» или «Узнать больше». Подробнее о том, как правильно оформить кнопку целевого действия в разных разрешениях экрана вы можете прочитать здесь. Изменив дизайн кнопки вы можете увеличить конверсию в несколько раз.
Эти три элемента или зоны внимания на сайте являются обязательными. Их можно дополнять по необходимости следующими элементами:
Название и логотип компании. Используйте фирменные цвета и название во всех обращениях с целевой аудиторией.
Форма обратной связи – телефон, онлайн-чат.
Характеристики вашего уникального торгового предложения.
Пример оформления первого экрана лендинга
Минус сайта – отсутствует кнопка призыва к действию «Купить», в качестве предложения можно добавить кнопку «Заказать обратный звонок».
На первой страничке сайта посетителя важно провести по цепочке заголовок–картинка–действие. А целью первого экрана является целевое действие потребителя. Триггеры способны усилить влияние на желание остаться на сайте или совершить целевое действие.
Узнайте больше об оформлении первого экрана, прочитав статью о «волшебном правиле 7+2».
Успехов вам в оформлении первого экрана!
Тех, кто хочет протестировать дизайн своего первого экрана и получить советы нескольких независимых экспертов, приглашаем для регистрации в наш сервис.
Эффективных вам первых экранов! Поделись в соцсети статьей, чтобы не потерять. До встречи на блоге!
Первый экран лендинга: из чего состоит? [Исчерпывающее руководство]
Первый экран посадочной страницы – это блок, который видно сразу после загрузки сайта без прокрутки. Увидев содержимое первого экрана, пользователь принимает решение остаться на сайте или уйти. Поэтому критически важно спланировать его грамотно, не допуская досадных ошибок, из-за которых вы потеряете лида. Сегодня мы подготовили для вас исчерпывающий чек-лист по структуре первого экрана, а также собрали полезные ссылки на материалы блога по теме статьи.
Цели первого экрана
Попробуйте смоделировать поведение вашего клиента во время поиска решения проблемы в Интернете. Скорее всего, он вводит запрос в поисковую строку, а затем открывает сразу несколько сайтов и лендингов из списка. По первому экрану он определяет, стоит ли скролить страницу вниз или перейти к следующей открытой вкладке в браузере.
Как посетитель сайта понимает, что находится в правильном месте:
Самое интересное – львиная доля полученной информации обрабатывается на автопилоте всего за пару мгновений. Поэтому у вас не будет второго шанса произвести первое впечатление на посетителя. Ваш первый экран должен содержать ответы на ключевые вопросы пользователя:
Основные элементы первого экрана
В помощь начинающему интернет-маркетологу мы подготовили простой визуальную подсказку, или шаблон, где показаны все основные элементы первого экрана:
Ключевые элементы первого экрана:
Это обязательные элементы, они должны быть видны строго без прокрутки страницы вниз.
В готовом прототипе, или точнее вайрфрейме (о разнице между ними мы писали в статье «Что такое прототип сайта или лендинга?» ), первый экран выглядит так:
Хотя в прототипе выше не показано изображение, а о нем нужно сказать обязательно. Сначала пользователь считывает, в правильном ли он месте, при помощи идентификации именно через картинку. Поэтому эффективнее всего использовать следующий сюжет на фоне первого экрана:
Примеры подбора изображений покажем в конце статьи, в части про дизайн первого экрана.
Также пользователь быстро считывает короткий текст в дескрипторе. Это могут быть 3-5 слов следующего плана «срочный вывоз мусора в Москве» или «интернет-магазин корейской косметики». Краткое описание ниши зачастую важнее лого, особенно для тех компаний, которых по логотипу пока еще не узнают.
Подзаголовок и маркированный список взаимозаменяемы. Их размещают на странице, чтобы познакомить пользователя с выгодами продукта в цифрах и фактах.
Контактные данные в шапке нужны, чтобы предложить альтернативный способ связи с вами (звонок вместо оставления заявки на ЛП). Иногда среди элементов первого экрана упоминается меню, это бесспорно полезно для многостраничного сайта и интернет-магазина, но совсем не обязательно для лендинга.
Таким образом, каждый элемент первого экрана имеет свою зону ответственности, их можно распределить по классической модели AIDA для простоты запоминания:
А (attention – внимание) – изображение;
I (interest – интерес) – заголовок;
D (desire – желание) – выгоды;
A (action – действие) – CTA и форма захвата;
Для закрепления изученного проверьте себя: каких элементов не хватает на скриншоте первого экрана посадочной страницы ниже?
Дизайн первого экрана
Основное правило – не перегружать первый экран текстом и графикой. Пользователь не хочет искать информацию, поэтому дайте ее в максимально удобочитаемом виде.
Как подобрать изображение для блока номер 1? Используем несколько беспроигрышных сюжетов.
Фото типового клиента
В примере ниже показан ключевой клиент – семейная пара с ребенком, их цель – жить счастливо в уютном семейном гнездышке.
Боль клиента
Боль клиента – член семьи с зависимостью.
Результат от использования продукта
Результат – довольный ребенок, которому нравится няня.
Процесс взаимодействия с продуктом
Показан процесс стрижки у барбера.
Метафора или символ
Пример от агентства Артемия Лебедева, где изображения животных дают отсылку к известным произведениям искусства. В примере ниже обезьяна сидит как «Мыслитель», скульптура знаменитого Огюста Родена.
Еще одно правило: если какой-то графический элемент снижает читаемость текста, то смело отказываемся от него. Например, от темно-серого текста на светло-сером фоне. Такое сочетание очень любят некоторые веб-дизайнеры. А чтобы повысить читаемость текста на сложной картинке, используем заливку изображения темным или цветным фильтром. Либо задействуем стиль дуотон. Это монохромное изображение с добавленным поверх цветом или ярким градиентом. Пример такого изображения:
И правило номер 3 (но не по важности) – соблюдаем визуальную иерархию, чтобы посетитель страницы смог быстро отличить главное от второстепенного. Для тех, кто хочет углубиться в основы веб-дизайна посадочных страниц, рекомендую эту статью для начала.
Небольшой свод правил, которые помогут проконтролировать работу дизайнера или сделать свои лендинге на конструкторе чуть лучше:
Мы рекомендуем планировать 2 размера первого экрана:
Пара слов о верстке. Не буду касаться технических деталей, скажу лишь то, что в результате главное, чтобы сверстанный макет выглядел аккуратно, а элементы первого экрана не съезжали. Для проверки обязательно тестируем отображение сайта в популярных браузерах и на мобильных устройствах.
Все приемы в комплексе, изученные вами сегодня, сделают ваши лендинги более понятными и привлекательными для пользователя. А значит принесут в воронку больше заявок и звонков. Делитесь в комментариях своими хаками по планированию первого экрана лендинга!
Главный первый экран сайта — что выбирают маркетинговые агентства NYC?
Итак, на повестке дня — главный экран сайта (это который на главной странице самый первый). Чем его занять, так ли плохо иметь слайдер, или, наоборот, хорошо? И другие важные вопросы раскроем прямо на фото, смотрите сами:
Главная страница сайта маркетингового агентства hugeinc.com
Просто брендинг. Ярко, просторно, минимализм.
Скорость загрузки по данным PageSpeed Insights — 42 из 100 на мобильных, 46 из 100 для просмотра с ноутбука. Тотально красная зона. Сертификат безопасности отсутствует.
Первый экран harrisonrand.com
Чистый брендинг. Видео про компанию — 75-летняя история, на рынке с 1941-го года. Качество видео по умолчанию низкое (похоже, для ускорения работы сайта).
Скорость загрузки — 13 из 100 для мобильных, 17 из 100 для десктопа. Супер низкий показатель. Даже рассыпчатое видео не спасает. SSL нет.
Опять слайдер на главном экране — trackmarketing.net
Всё про эмоциональный маркетинг, про опыт вне работы, про игру, про ночной город, про жизнь в большом городе. Центральное слово — experience, это как в русском языке что-то среднее между опытом и наслаждением. Такое слово.
Скорость 26/100 и 23/100. Опять далёкая красная зона. Очень медленный. Безопасное подключение не настроено.
Главный экран www.kurtnoble.com — слоган и портфолио
Опытные копирайтеры знают, как сложно вместить максимум точного смысла в одну фразу. Каждое слово имеет оттенки значений, а их сочетание может создать картину многослойную. Ребята справились шикарно. Слоган этой компании звучит как песня.
Симпатичными окошками оформлено портфолио. Первый из просмотренных сайт маркетингового агентства с сертификатом безопасности и нормальной скоростью (76/100 и 80/100).
Сайт маркетингового агентства в NYC- www.acresnewyork.com
Это мой фаворит. Ребята подкупили меня эмоционально. 100 баллов за жизнь, эмоциональность и ничего лишнего. Даже слайд-шоу вам покажу, мотайте фото=).
Сертификата безопасности нет. Скорость загрузки сайта Acres — 50/100 и 53/100. Низкий, но не самый критичный показатель.
Главная страница сайта агентства MKG — www.thisismkg.com
Первый экран — одна стильная и яркая статичная картинка. Дальше — интерактивные блоки портфолио, страница выглядит ярко и смело, оптимистично. Тренд на 80-е.
Скорость загрузки 28/100 и 29/100, как у улиточки. Только http.
Тоже шикарный сайт агентства в NYC — mekanism.com
Полностью в тренде — тут и про космос, и о рекламе, и эмоционально, с чувством юмора и графика на супер-уровне! Восторг. Хотя, и на любителя, но профессионализм виден точно.
Скорость 33/100 и 10/100. Сайт защищен сертификатом. И… я покажу вам ещё один экран.
Главный экран сайта сияет, светится, сверкает — агентство thehalogroup.com
Светлый, лаконичный, элегантный, дорогой. Картинка на весь экран, опять суть — брендинг.
Загружается со скоростью 55/100 в мобильных, 64/100 на ноутбуках. Красная зона, сайт медленный. SSL нет.
ИТАК, выводы: когда вы настолько хороши в своём деле, что это очевидно просто по одной букве вашего логотипа, то ваш сайт может загружаться хоть пол часа — это окей.
С другой стороны, быстрый, информативный сайт с экспертными статьями, фото, репортажами, доказательством компетентности — это история тех, кто уже выбрал свою большую букву и растёт до её уровня.
Что мы видим в целом:
Спасибо за внимание, следите за новостями. Подписывайтесь в соц сетях и получайте в ленте возможность видеть наши новые публикации. Они тоже будут интересными;).
Лендинг, приковывающий взгляд
Разделы
Самое интересное
Авторы
Захватывающий внимание первый экран лендинга — хитрости
Схватка за деньги покупателя начинается на первом экране лендинга! Взгляд пользователя должен быть прикован к нему, как если бы начиналась премьера долгожданного фильма.
Стоит вам «промахнуться» с первым экраном, как никакие дальнейшие ухищрения уже не помогут. Пользователь их попросту не увидит, перейдя на ресурс конкурентов.
В сегодняшней статье мы разберем принципы, соблюдение которых позволит удержать покупателя на вашем лендинге.
Задачи первого экрана
Прежде всего следует помнить о функциях, возложенных на эту часть разрабатываемого лендинга:
По большому счету вы должны сказать покупателю все главное на первом экране. Причем максимально лаконично, ограничившись десятком слов и одним-двумя изображениями. Задача остальных элементов лендинга сводится лишь к тому, чтобы усилить доверие к вашему обещанию, подробнее описать заявленную выгоду, разбив ее на конкретные преимущества, замотивировать к действию прямо сейчас.
А теперь давайте разберем типичный первый экран лендинга на отдельные элементы. Как курсанты военного училища разбирают и собирают автомат по множеству раз, так и желающему разобраться в рекламе следует знать предназначение каждого элемента в маркетинговом инструменте
Составляющие первого экрана
Логотип, название компании, дескриптор. Задача этих элементов сводится к тому, чтобы представиться, вызвать первичное доверие. Когда в офлайн-мире мы знакомимся с кем-либо, первым делом мы называем собственное имя. Пользователи, которые перешли на ваш лендинг из рекламы, скорее всего тоже с вами незнакомы. Поэтому, представиться следует. При этом не стоит недооценивать значение логотипа. Солидная компания с неряшливым или безнадежно устаревшим логотипом похожа на человека в новеньком смокинге и засаленных лаптях, то есть вызывает недоумение и скептицизм еще при первом взгляде. А в случае с первым экраном лендинга первое впечатление — наше все!
Телефон. Предпочитающему решать вопросу по телефону клиенту лучше дать такую возможность с самого начала. Следует отметить, что в плане статусности, представительности в номерах телефонов образовалась некоторая иерархия.
Номер телефона обязательно должен быть кликабельным.
Кнопка/форма. Желательно, чтобы само расположение текста и ориентация изображения подталкивали пользователя к заполнению формы или нажатию кнопки.
Фоновое изображение. О нем мы уже писали в блоге достаточно, почитайте здесь.
Заголовок и подзаголовок. Придумывание заголовка при создании лендинга — целое искусство. Эту тему мы также раскрыли в одной из предыдущих статей. При этом помните, желательно ограничиться 7-9 словами.
Меню. Оно должно помогать сориентироваться в лендинге, сделав его еще более понятным. Однако, меню имеет смысл делать только для многоэтажных лендингов, больше 2 экранов.
На первом экране лендинга охлаждения для майнинг-ферм VidBox вы видите большую часть из этих элементов:
Обратите внимание, логотип размещен сверху, слева. Это его классическое расположение. Из-за особенностей восприятия контента, именно находящаяся в левом верхнем углу информация замечается в первую очередь. В свою очередь, кликабельный телефон с кодом 495 расположен справа.
Заголовок «Двухфазное и однофазное иммерсионное охлаждение» дополнен уточняющим подзаголовком, определяющим целевую аудиторию (владельцев майнинг-ферм) и происхождение товара (напрямую от производителя).
Ключевую роль здесь играет нижний заголовок «Зарабатывай больше до 20% благодаря. » с приведенными ниже подпунктами, поясняющими, в чем именно выражается экономия. С одной стороны, товар переформулируется в выгоду, за которую готов платить бережливый владелец майнинг-фермы. С другой, благодаря емким, снабженным цифрами подпунктам, повышается убедительность заявленной выгоды.
Из продуманности каждого из этих элементов словно мозаика складывается эффективность первого экрана лендинга.
Частые ошибки на первом экране
Неподтвержденные факты. Российские потребители недоверчивы и у них есть на то причины. Когда говорите о каких-либо преимуществах своего товара лучше сошлитесь на результаты исследований, мнение авторитета и т. д.
Трафик не под ту ступеньку лестницы Ханта. Несколько лет в нашем старом офисе висел небольшой плакат с лестницей Ханта. Мы постоянно обращали свой взор на него, когда разрабатывали новый сайт. Суть подхода Ханта заключается в том, что потенциальный клиент может находиться на разных уровнях готовности к покупке. Чтобы провести клиента по этой «лестнице» до покупки важно понимать, на какой стадии находится потенциальный клиент. Кто-то горячий, кто-то «тепленький», а кто-то совсем «холодный» и еще даже до конца не осознал свою потребность в продукте. Если на отрабатывающий горячий спрос лендинг льется «ледяной» трафик, никакие ухищрения уже не помогут.
Абстрактные формулировки. Положительные характеристики ваших товаров и услуг лучше выражать в числовых значениях и в привязках к конкретным фактам. Ради примера приведем одну и ту же продающую фразу, действенность которой возрастает с повышением ее конкретности:
«Наши мастера оперативно заменят ваше окно!» — слабенько.
«Наши мастера заменят вашего окно за 2 часа!» — сильно.
«Наши мастера заменят ваше окно за 2 часа или вернут вам деньги!» — мощно!
Насчет последнего примера: нужно несколько раз взвесить, по силам ли вам будет выполнить такое обещание. Например в автосервисном бизнесе можно попасть на дорогостоящие ремонты, в свое время дав слишком щедрую гарантию.
Ссылки на соцсети. Не следует давать ссылки на соцсети на первом экране. На самом деле вообще надо подумать, прежде чем давать ссылку на сторонний источник с лендинга, даже если это ваш собственный профиль в соцсетях. Во-первых, facebook и vk это все же другие сайты. На них показывается немало рекламных объявлений, которые могут отвлечь вашего потенциального клиента. Во-вторых, нужно удостовериться, что качество оформления и ведения профиля в соцсети соответствует качеству лендинга и статусу организации. Бывает, перейдете с красивого сайта в соцсеть и натыкаетесь на полузаброшенный аккаунт компании. Доверия особого не вызывает, в общем.
Недооценка мобильных устройств. До сих пор есть немало лендингов, которые значительно проигрывают по внешнему виду в мобильной адаптации по сравнению с десктопной версией. Это недопустимо. Либо mobile first, либо равноправие обеих версий. Не забываем, согласно статистике Statcounter, почти 53% онлайн-запросов делают с мобильных устройств.
Неконтрастная кнопка. Она не обязательно должна быть красной. Но ей следует выделяться на общем фоне.
Отсутствие иерархии в кнопках. Если у вас рядом размещены две кнопки, они будут конфликтовать друг с другом. Выделите одну из них, другую сделайте более приглушенной.
Эти ошибки настолько распространенные и губительные, что мы рекомендуем вам использовать этот список в качестве чек-листа.
Аудит первого экрана
Из-за того, что лендинг содержит мало текста и картинок, у многих людей возникает иллюзия о простоте его разработки. На самом деле это объемная, кропотливая работа, которая продолжается и после запуска лендинга. В процессе предварительных «обкаток» и непосредственного использования следует проводить тестирование отдельных элементов лендинга, в том числе и его первого экрана.
В первую очередь должен волновать показатель отказов. Если он выше 20%, следует задуматься. Не стоит пренебрегать таким инструментами как вебвизор или карта кликов. Они позволяют понять логику ознакомления реальных пользователей с вашим лендингом.
И все таки лучше доверьте разработку лендинга профессионалам. Так в конечном счете выгоднее.