Что находится выше сгиба и почему это важно? (+10 убедительных примеров)

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

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

С другой стороны, веб-сайты без чего-либо интересного в верхней части страницы не произведут впечатления.

В этой статье мы рассмотрим все тонкости разработки верхнего раздела вашей веб-страницы.

Давайте начнем!

Термин «выше сгиба» появился на заре издательского дела в 1700-х годах. В то время печатные машины печатали на больших листах бумаги, которые были слишком велики, чтобы их можно было разместить на газетном киоске. Они сложили их так, что была видна только верхняя половина содержимого первой страницы.

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

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

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

Методология «над сгибом» также является частью дизайна веб-сайтов.

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

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

Посетители попадают на вашу веб-страницу с удивительно коротким периодом внимания — около 8 секунд .

Видите, почему так важно сосредоточиться на том, чтобы привлечь их внимание как можно быстрее?

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

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

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

Фактически, отчет MOVR пришел к выводу, что 11% мобильных пользователей начинают прокручивать страницу в течение четырех секунд после завершения загрузки веб-страницы. Если страница еще не закончила загрузку, 9% все равно начали прокрутку в течение четырех секунд.

Но независимо от того, какое устройство используют ваши посетители, важно сразу показать им, почему ваш сайт достоин их внимания!

Вот три предложения, которые помогут сделать ваш контент в верхней части страницы более мощным:

1. Сделайте свой веб-дизайн адаптивным

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

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

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

2. Добавьте важные призывы к действию

Добавление призыва к действию (CTA) в верхней части страницы напрямую влияет на коэффициент конверсии и может побудить посетителей быстрее выполнить то действие, которое вы от них хотите. Вы можете перенаправить их на другую страницу вашего веб-сайта, содержащую подробные инструкции, направить их на определенную категорию или страницу продукта или предложить им зарегистрироваться.

Существует восемь различных типов CTA, но наиболее важными из них являются:

• Лидогенерация
• Кнопка «Читать далее»
• Открытие продукта

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

3. Поместите важный контент вверху страницы

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

Не забудьте сразу перейти к делу: если вы четко не показываете посетителям, о чем страница, вы очень хорошо знаете, каким будет их следующее действие!

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

Пользователи ищут информацию, соответствующую их поисковым запросам.

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

Если разместить много информации в верхней части страницы, ваш сайт будет выглядеть нестандартным и хаотичным.

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

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

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

Но подождите, чем это плохо для SEO?

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

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

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

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

1. Все птицы

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

У них также есть нажимаемая кнопка для «Купить мужчин» и «Купить женщин», помогающая пользователям найти то, что они ищут, в кратчайшие сроки.

2. Сефора

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

3. Мука короля Артура

Красиво оформленный веб-сайт King Arthur Flour продвигает их первоклассный контент.

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

4. Уорби Паркер

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

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

5. Шопинг

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

Как только потенциальный клиент попадает на свою целевую страницу, его внимание направляется на действие, которое Shopify хочет, чтобы он предпринял.

6. Оптимонк

Как и Shopify, контент OptiMonk в верхней части страницы предназначен для того, чтобы убедить посетителей зарегистрировать бесплатную учетную запись.

OptiMonk подчеркивает главное обещание («самые мощные всплывающие окна электронной коммерции») и социальное доказательство в виде наград и обзоров Shopify.

7. Арефс

Веб-дизайн Ahrefs избегает использования изображений в пользу яркого цвета и короткого текста, чтобы донести простое сообщение: их продукт — это все, что вам нужно, чтобы «повысить рейтинг» и «получить больше трафика».

Тот факт, что в верхней части страницы так мало информации, помогает сосредоточить внимание клиентов на наиболее важном содержании.

8. Потом я встретил тебя

Эта страница из Then I Met You — одна из лучших целевых страниц в этом списке.

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

9. Магазин Happy Box

Развернутый дизайн магазина Happy Box Store призван познакомить новых посетителей с брендом. Их кнопка призыва к действию приводит к более подробной информации об их основном продукте: настраиваемых подарочных упаковках.

10. Котн

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

Теперь, когда мы обсудили область над сгибом и рассмотрели несколько примеров, пришло время поговорить о области под сгибом.

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

Ваши основные блоки текста должны быть внизу страницы… стремитесь к удобоваримым разделам с большими заголовками. Большинство объявлений также размещаются в нижней части страницы: алгоритмы Google не позволяют размещать слишком много объявлений в верхней части страницы.

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

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

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

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

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

Стандартные разрешения сайта для мобильных экранов:

• 360×640
• 375×667
• 414×896
• 360×780
• 375×812

Стандартные разрешения сайта для экранов планшетов:

• 768×1024
• 1280×800
• 800×128
• 601×962
• 962×601

Стандартные разрешения веб-сайтов для экранов ноутбуков:

• 1920×1080
• 1366×768
• 1440×900
• 1536×864
• 1024×768

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

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

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

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

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

Вот оно! К этому моменту вы уже должны хорошо разбираться в разделе, расположенном выше сгиба, и знать, как извлечь из него максимальную пользу. Удачи!