Хедер сайта: блок, по которому вас оценивают

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

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

Почему шапка — это важно?

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

• Модель Гуттенберга. В этом случае взгляд читателя движется по четырем точкам экрана: от верхнего левого угла в правому верхнему углу, а затем — по диагонали страницы к нижнему левому углу и в правый нижний угол. Такое поведение характерно для просмотра сайтов с небольшим количеством визуала: оно позволяет пользователям за небольшое время охватить максимум информации. Для данной модели хедер сайта — это две главные точки концентрации внимания.
• F-модель. Так обычно просматривают сайты с большим количеством текстового контента, который требует сосредоточения. Взгляд пользователя движется слева направо вверху страницы, несколько раз повторяя такую траекторию, а затем опускается к подвалу. Таким образом, основное внимание сосредоточено вверху.
• Z-модель. В данном случае поведение пользователя напоминает модель Гутенберга, однако повторение траектории «слева направо – вниз к левому углу» здесь происходит чаще, нежели в первой модели. Так просматривают сайты, на которых отдельные блоки визуально отделены друг от друга.

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

Как выглядит идеальный хедер? Элементы и блоки шапки

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

Айдентика

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

Панель навигации

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

Строка поиска

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

Контакты

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

Есть несколько дополнительных элементов, которые можно использовать в шапке сайта в зависимости от типа вашего бизнеса:

Иконки социальных сетей

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

Режим работы

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

Корзина

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

Сервисные блоки

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

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

Как сделать шапку сайта: основные правила

Чтобы header радовал глаз юзеров, повышал конверсию и вписывался в общую концепцию вашего портала, необходимо:

• Определиться с положением самых главных элементов. Первым делом определите, где на верхнем колонтитуле страницы будет располагаться айдентика и блок с вашими контактами. По возможности, эту информацию следует отобразить в текстовом формате. Это облегчит ранжирование сайта поисковыми системами: роботы, в первую очередь, изучают именно шапку.
• Соблюдать баланс между графикой и текстом. Подумайте, какие именно блоки можно спрятать под компактными кнопками и блоками, чтобы не рассеивать внимание пользователя. Уверены: вам есть что показать посетителям. Однако большое количество фотографий в колонтитуле страницы выглядит не слишком профессионально. То же самое касается и «тяжелых» анимированных элементов. Они значительно снижают скорость загрузки страницы, а это скорее вызовет раздражение юзера, нежели восхищение дизайном.
• Установить размеры. Верхний блок не должен мешать восприятию остальной информации на странице. Для информационных и новостных ресурсов рекомендуется выбирать высоту блока от 100 до 200 пикселей. Лендинги, личные блоги и корпоративные порталы могут позволить себе больше: до 500 пикселей.
• Убедиться, что блок корректно отображается на всех устройствах. Обязательно изучите как мобильную, так и декстопную версии страницы. Не лишним будет загрузить ее и на мониторах с разным разрешением, чтобы убедиться, что всё отображается правильно.
• Не использовать одинаковые H1 на всех страницах. Как правило, шапка остается общей для каждого раздела, однако информацию в ней нужно менять. Причина — все то же ранжирование в поисковых выдачах. Оставьте этот тег только на главной, чтобы сделать ее заметной для роботов.
• Для блока с навигацией использовать только текст. Соблазн добавить флеш-анимации велик, но держите себя в руках. Только представьте, что для внесения изменений в эту часть сайта придется каждый раз обращаться к дизайнеру! Остановитесь на простом и удобном текстовом формате, который можно без труда отредактировать в любую минуту.

Несколько слов о дизайне

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

Сайты для конечного пользователя (B2C)

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

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

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

Сайт для бизнеса (B2B)

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

Уникальные решения для любого бизнеса с Taptop

Если вы предпочитаете писать код самостоятельно, с помощью html и css сделать шапку сайта не составит труда. Для этого необходимо использовать тег <head> и подгрузить стили CSS. Однако сложные дизайнерские решения потребуют больше времени. Благодаря Таптоп, вы можете добавить хедер на главную страницу портала всего за несколько минут. Возможности платформы позволяют:

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

В базе знаний Taptop есть подробный мануал о пошаговом создании шапки сайта: благодаря этой инструкции, запуск вашей страницы не займет много времени. Тестируйте различные дизайнерские гипотезы, проверяйте конверсию и не бойтесь экспериментов, а Таптоп поможет выбрать оптимальное решение!