Размер первого экрана сайта

Размер первого экрана сайта

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

Если беглый взгляд посетителя не найдет нужной и полезной ему информации в течении 3-5 секунд, он покинет сайт. Именно поэтому правило «Встречают по одежке» очень актуально при оформлении первых экранов. Главная страница сайта выполняет функцию «красивой оболочки», «фантика вкусной конфеты». Если правильно и красиво «упаковать» первый экран, то пользователь заинтересуется дальнейшим содержимым сайта.

Цели первого экрана

Попав на страницу сайта, посетитель обычно задает похожие вопросы:

Куда я попал?

Туда ли я попал, куда хотел?

У каждого бизнеса цели первого экрана различны. У сайта по продаже туров в Египет – продать тур. У сайта Интернет-магазина оптики – завлечь посетителя на другие страницы для осуществления подбора и покупки очков. А у сайта образовательных услуг цель первого экрана – подписка на рассылку.

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

Основные элементы первого экрана

  1. Заголовок первого экрана. В нем поясняете, чем Вы занимаетесь, род деятельности компании. Он должен быть кратким и понятным при прочтении. Если Вы продаете туры, то пишите на первой странице «продажа туров в Египет». На сайте оптики хорошим заголовком будет «очки на любой кошелек». А на сайте образовательных услуг пишите, например, «обучение Интернет-маркетингу».
    Совет: покажите свой сайт постороннему человеку и спросите понятно ли чем занимается компания? Если ответ очевиден, то ничего менять на первом экране не нужно.
  • Картинка или видео – это визуальный контент.Картинка помогает воспринимать информацию. Она может быть:
    • Характерной особенностью продукта (для Интернет-магазина оптики – симпатичная девушка в очках)
    • Картинка – процесс (для активного отдыха в горах динамичное фото горнолыжника, покоряющего склон)
    • Картинка – результат (для подписки на образовательные услуги фото чемодана со знаниями, книги)
    • Картинка – символ (для продажи обручальных колец используется голубь, сердце, т.е. соответствующий символ)
    • Видео также может рассказать о Вашем продукте. Но здесь нужно соблюсти правило тайминга- оно должно быть не более 2-х минут. За это время успейте заинтересовать сформировать целевое действие пользователя.

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

        Название и логотип компании. Используйте фирменные цвета и название во всех обращениях с целевой аудиторией.

      Форма обратной связи – телефон, онлайн-чат.

      Характеристики Вашего уникального торгового предложения.

      Пример оформления первого экрана


      Минус сайта — отсутствует кнопка призыва к действию «Купить» и в качестве предложения можно добавить кнопку «Заказать обратный звонок».

      На первой страничке сайта посетителя важно провести по цепочке – заголовок- картинка – действие. А целью первого экрана является целевое действие потребителя. Триггеры способны усилить влияние на желание остаться на сайте или совершить целевое действие.

      Узнайте больше об оформлении первого экрана прочитав статью о «волшебном правиле 7+2».

      Успехов Вам в оформлении первого экрана!

      Тем, кто хочет протестировать свой первый экран и получить советы нескольких независимых экспертов приглашаем для регистрации в наш сервис.

      Эффективных Вам первых экранов! Поделись в соц.сети статьей, чтобы не потерять. До встречи на блоге!

      Подпишитесь на обновления, чтобы быть в курсе!

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

      Разрешение экрана (монитора) – это размеры получаемого на экране изображения в пикселях. Например, разрешение экрана 1920 x 1080 означает, что ширина изображения на мониторе равна 1920, а высота 1080 пикселей.
      Популярные разрешения мониторов (стационарные компьютеры и ноутбуки):
      1920 х 1080 (full HD)
      1600 х 900
      1440 х 900
      1366 х 768
      1280 х 1024
      1280 х 960
      1024 х 600
      Когда мы разрабатываем прототип для десктопа, то нам важно понимать, что мы не должны рисовать варианты для всех существующих компьютеров, нам нужно выбрать оптимальный размер макета сайта, который позволит отображать будущий сайт корректно на всех десктопах.
      Универсальной шириной для прототипа на компьютер и ноутбук является 1920 пкс, также может использоваться ширина 1440 или 1280 пкс. Универсальной высоты нет, т.к. у каждого проекта она своя и зависит от количества разделов.

      Читайте также:  Для подготовки презентаций используется программа

      Когда мы создаем макет сайта шириной 1440 пкс, но открываем его на мониторе 1920 пкс, то по бокам появляются белые или серые полосы, которые заполняют пустое пространство. Если же мы создаем прототип шириной 1920 пкс, а открываем его на мониторе шириной 1440 пкс, то прототип (или макет) “обрезается” по бокам, и мы видим содержимое сайта только в пределах 1440 пкс. В таком случае дизайнеру нужно учесть следующий момент — важный контент (тексты, кнопки и небольшие фотографии) не должны выходить за пределы контейнера определенной ширины. За такую ширину чаще всего принимается значение 1170 или 940. Таким образом, дизайнер создает прототип (или макет) шириной 1920 пкс, но весь важный контент умещает на ширине 1170 или 960 пкс.

      Сегодня мы подробно рассмотрели размер макета сайта только для десктопов (компьютеров и ноутбуков), а разрешения портативных устройств (планшетов и смартфонов) мы рассмотрим в другой раз. Подписывайся на блог по веб-дизайну.

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

      Первый экран

      Лендинги различаются по длине. Есть супердлинные, как промостраница по франчайзингу в «Додо-пицца». Есть суперкороткие — предложение для новых клиентов от Slack. Но у них всегда есть первый экран — отдельный смысловой блок, выделенный графически.

      Лендинг с предложением по франчайзингу «Додо-пицца»

      Одноэкранный лендинг Slack: десктопная и мобильная версии

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

      Элементы. На первом экране часто располагают дополнительные элементы: название организации, контакты, ссылки на соцсети, лид-форму и CTA (call to action). Однако не все перечисленное нужно. Название организации или бренда обязательно — это поможет посетителям запомнить рекламодателя. Иногда пользователи сразу звонят, чтобы сделать заказ или задать вопросы, поэтому на первом экране важно разместить телефон.

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

      Форма заказа. Мы часто видим лид-форму и CTA на первом экране лендинга. Однако это не уместно. Посетитель только знакомится с товаром или услугой и не готов принимать молниеносные решения. Чем дороже продукт, тем дольше клиент будет обдумывать покупку. Поэтому спускайте форму ниже подробного описания, рассказа о преимуществах и социальных доказательств. Лид-форма на первом экране может вызвать даже раздражение как излишне навязчивая, особенно если она с обратным отсчетом.

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

      Реклама. Еще одно правило первого экрана — он должен быть на 100 % релевантен рекламе, по которой пришел посетитель. Допустим, мы продаем дачу и выделили два сегмента потенциальных покупателей: пенсионеры и семьи с маленькими детьми. Для первых главными преимуществами станут пешая доступность до станции электрички, продуктового магазина и медпункта, для вторых — свежий воздух, большой сад и озеро для купания.

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

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

      Первый экран лендинга по продаже контроллера для диджеев

      Оффер

      Оффер, или торговое предложение — то, ради чего создается лендинг. Он отражает главные преимущества товара и причины его купить. Оффер должен быть четко сформулирован, чтобы посетитель с первого взгляда понимал смысл предложения.

      Выгоды. Люди чувствуют выгоду, когда могут получить качество, скорость или хорошую стоимость. Это три главных преимущества, которыми оперируют при составлении оффера.

      Читайте также:  Тачпад на ноутбуке что это такое

      Щадящие контактные линзы от ведущего производителя США

      Доставка контактных линз в течение часа

      Скидка 30 % на упаковку из 90 штук

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

      Пример неудачного оффера

      Заголовок. Обычно оффер состоит из заголовка и подзаголовка. Заголовок — первое, что видит посетитель на лендинге. Он побуждает остаться или уйти. Уделяйте основное внимание созданию заголовка. При работе над лендингом руководствуйтесь формулой времени 50/30/20:

      • 50 % — создание заголовка;
      • 30 % — формулировка призыва к действию;
      • 20 % — остальное содержимое.

      Заголовок работает, если при его составлении соблюдается пять правил:

      1. Он просто, кратко и понятно отражает суть оффера.
      2. Содержит выгоды для посетителя.
      3. Выглядит честным и правдоподобным.
      4. Релевантен рекламе.
      5. Имеет эксклюзивное предложение.

      В хорошем заголовке много глаголов и мало существительных.

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

      Пример хорошего оффера

      Типовые ошибки

      Мы подобрали примеры частых ошибок на первом экране.

      Много элементов. На таком экране посетитель теряется. Мы сразу видим четыре CTA: «вызвать замерщика», «заказать обратный звонок», «вызвать замерщика и получить скидку 40 %» и «жду звонка». Первый экран помимо оффера включает иконки доверия к товару и продавцу. Много лишней информации, которая отвлекает.

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

      Много офферов. Предложения различных категорий товаров в разных ценовых уровнях размывают оффер. У каждого предложения своя целевая аудитория, поэтому следует делать отдельные промостраницы. Совмещение офферов не «цепляет» ЦА.

      Много цветов и шрифтов. Цветовое разнообразие на первом экране создает «информационный шум» и производит впечатление недоработанности. Цвета блоков не сочетаются между собой, а шрифт на них плохо читается. Плюс ко всему, фоновая картинка не связана с товаром и неуместна.

      Шпаргалка

      1. Первый экран — первое и главное, что видят посетители лендинга. Он должен их заинтересовать, иначе они уйдут. Делайте его простым и понятным, чтобы пользователи мгновенно понимали суть предложения.
      2. Размещайте на первом экране название компании, контакты и оффер. Не добавляйте лишние элементы, чтобы не отвлекать посетителей. Не размещайте кнопки соцсетей или другие внешние ссылки.
      3. Добавляйте форму заказа для продукта, который посетители готовы купить сразу без лишних размышлений. Если требуется взвешенное решение, спускайте лид-форму ниже.
      4. Рекламное объявление должно совпадать по смыслу с оффером лендинга. Создавайте отдельные первые экраны для каждого сегмента целевой аудитории или воспользуйтесь автозаменой заголовка при проведении рекламных кампаний.
      5. Формулируйте оффер просто и понятно, включайте в него основные выгоды: качество, скорость и цену. Один оффер может содержать две выгоды одновременно. Если их больше, предложение выглядит неправдоподобно.
      6. Оффер состоит из заголовка, который привлекает внимание, и подзаголовка — он объясняет выгоды. В хорошем заголовке много глаголов и мало существительных, в эффективном подзаголовке есть закрывающий аргумент.

      ">

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

      Первый экран

      Лендинги различаются по длине. Есть супердлинные, как промостраница по франчайзингу в «Додо-пицца». Есть суперкороткие — предложение для новых клиентов от Slack. Но у них всегда есть первый экран — отдельный смысловой блок, выделенный графически.

      Лендинг с предложением по франчайзингу «Додо-пицца»

      Одноэкранный лендинг Slack: десктопная и мобильная версии

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

      Элементы. На первом экране часто располагают дополнительные элементы: название организации, контакты, ссылки на соцсети, лид-форму и CTA (call to action). Однако не все перечисленное нужно. Название организации или бренда обязательно — это поможет посетителям запомнить рекламодателя. Иногда пользователи сразу звонят, чтобы сделать заказ или задать вопросы, поэтому на первом экране важно разместить телефон.

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

      Читайте также:  Язык программирования макросов в excel

      Форма заказа. Мы часто видим лид-форму и CTA на первом экране лендинга. Однако это не уместно. Посетитель только знакомится с товаром или услугой и не готов принимать молниеносные решения. Чем дороже продукт, тем дольше клиент будет обдумывать покупку. Поэтому спускайте форму ниже подробного описания, рассказа о преимуществах и социальных доказательств. Лид-форма на первом экране может вызвать даже раздражение как излишне навязчивая, особенно если она с обратным отсчетом.

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

      Реклама. Еще одно правило первого экрана — он должен быть на 100 % релевантен рекламе, по которой пришел посетитель. Допустим, мы продаем дачу и выделили два сегмента потенциальных покупателей: пенсионеры и семьи с маленькими детьми. Для первых главными преимуществами станут пешая доступность до станции электрички, продуктового магазина и медпункта, для вторых — свежий воздух, большой сад и озеро для купания.

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

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

      Первый экран лендинга по продаже контроллера для диджеев

      Оффер

      Оффер, или торговое предложение — то, ради чего создается лендинг. Он отражает главные преимущества товара и причины его купить. Оффер должен быть четко сформулирован, чтобы посетитель с первого взгляда понимал смысл предложения.

      Выгоды. Люди чувствуют выгоду, когда могут получить качество, скорость или хорошую стоимость. Это три главных преимущества, которыми оперируют при составлении оффера.

      Щадящие контактные линзы от ведущего производителя США

      Доставка контактных линз в течение часа

      Скидка 30 % на упаковку из 90 штук

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

      Пример неудачного оффера

      Заголовок. Обычно оффер состоит из заголовка и подзаголовка. Заголовок — первое, что видит посетитель на лендинге. Он побуждает остаться или уйти. Уделяйте основное внимание созданию заголовка. При работе над лендингом руководствуйтесь формулой времени 50/30/20:

      • 50 % — создание заголовка;
      • 30 % — формулировка призыва к действию;
      • 20 % — остальное содержимое.

      Заголовок работает, если при его составлении соблюдается пять правил:

      1. Он просто, кратко и понятно отражает суть оффера.
      2. Содержит выгоды для посетителя.
      3. Выглядит честным и правдоподобным.
      4. Релевантен рекламе.
      5. Имеет эксклюзивное предложение.

      В хорошем заголовке много глаголов и мало существительных.

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

      Пример хорошего оффера

      Типовые ошибки

      Мы подобрали примеры частых ошибок на первом экране.

      Много элементов. На таком экране посетитель теряется. Мы сразу видим четыре CTA: «вызвать замерщика», «заказать обратный звонок», «вызвать замерщика и получить скидку 40 %» и «жду звонка». Первый экран помимо оффера включает иконки доверия к товару и продавцу. Много лишней информации, которая отвлекает.

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

      Много офферов. Предложения различных категорий товаров в разных ценовых уровнях размывают оффер. У каждого предложения своя целевая аудитория, поэтому следует делать отдельные промостраницы. Совмещение офферов не «цепляет» ЦА.

      Много цветов и шрифтов. Цветовое разнообразие на первом экране создает «информационный шум» и производит впечатление недоработанности. Цвета блоков не сочетаются между собой, а шрифт на них плохо читается. Плюс ко всему, фоновая картинка не связана с товаром и неуместна.

      Ссылка на основную публикацию
      Размер области меньше минимума диспетчер виртуальных дисков
      1. Для выполнения операций с разделами жесткого диска необходимо использовать учетную запись с правами администратора. 2. Если в процессе уменьшения...
      Произошла ошибка при попытке активации windows
      Обновляемся с младших версий Windows 7 до нужной Вам, для получения новых возможностей системы. 1. Запускаем Windows Anytime Upgrade (WAU)...
      Произошла ошибка проверки подлинности затребованный пакет безопасности
      Некоторые пользователи, которые подключаются через удаленный доступ RDP в Windows 10/7, получают ошибку "Произошла ошибка проверки подлинности. Указанная функция не...
      Размер первого экрана сайта
      Сегодня мы расскажем, с чего начинается сайт. Для посетителей сайт начинается с первого экрана. Он попадает на первую страничку и...
      Adblock detector