Шапка сайта (хедер): что это, 10 лучших примеров и 9 популярных ошибок

Контент-маркетолог
Стаж 15 лет
Обновлено: 16.05.2023 Опубликовано: 11.05.2023

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

Почему хедер важен и нужен

Шапка сайта — крючок, который цепляет внимание. Если ориентироваться на формулу продаж AIDA, или «Внимание (A)-Интерес (I)-Желание (D)-Действие (A)», header отвечает именно за внимание. И если его не привлечь, никаких I, D и А просто не будет.

Функционально шапка сайта решает три основные задачи:

  1. Идентификация. Человек, оценив информацию в хедере, понимает, на сайте какой компании или какого специалиста он оказался.
  2. Навигация. Верхнее меню, размещенное в шапке сайта, помогает быстро понять, в каком разделе искать нужную информацию. Также в header может быть реализована функция поиска по сайту.
  3. Отстройка. Грамотно оформленная шапка покажет сильные стороны компании, а ее узнаваемый дизайн поможет выделиться среди конкурентов.
Пример яркого и запоминающегося минимализма
Пример яркого и запоминающегося минимализма

А еще шапка сайта вписывается во все три основные схемы, по которым скользит взгляд посетителя сайта. Вот эти схемы:

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

Взгляд движется по модели Гуттенберга
Взгляд движется по модели Гуттенберга

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

Так двигается взгляд в этом случае
Так двигается взгляд в этом случае

F-паттерн. В этом случае сначала воспринимается верхняя часть контента слева направо, затем взгляд опускается вниз и вновь скользит слева направо. При этом горизонтальное сканирование сокращается по мере движения вниз по странице.

Движение взгляда пользователя при F-модели восприятия
Движение взгляда пользователя при F-модели восприятия

 

Что размещают в хедере

Рассмотрим самые важные элементы.

Айдентика

Это логотип, дескриптор, название, шрифты, которые предусмотрены брендбуком компании.

Для персонального сайта вместо логотипа уместно размещение крупной фотографии владельца — например, как у Ольги Бузовой
Для персонального сайта вместо логотипа уместно размещение крупной фотографии владельца — например, как у Ольги Бузовой

Контактная информация

Способы связи — телефон, email, мессенджеры, адрес — важны и для пользователя, и для поисковых систем.

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

Горизонтальное меню

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

Классический вариант — слева название, оно же логотип, справа и снизу меню
Классический вариант — слева название, оно же логотип, справа и снизу меню

Приглашение оформить подписку на рассылку

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

Инжиниринговая компания разместила форму подписки в шапке сайта
Инжиниринговая компания разместила форму подписки в шапке сайта

Поиск по сайту

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

Строка поиска видна сразу же в шапке сайта
Строка поиска видна сразу же в шапке сайта

Ссылки на группы компании в соцсетях или мессенджерах

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

Кнопка обратного звонка

Помимо контактов в header нередко размещают кнопку для заказа звонка от компании пользователю.

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

Корзина

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

Вариант размещения корзины в шапке сайта
Вариант размещения корзины в шапке сайта

Гамбургер-меню

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

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

Основные конкурентные преимущества

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

Указаны сразу 3 значимых для выбора подрядчика преимущества
Указаны сразу 3 значимых для выбора подрядчика преимущества

Уникальное торговое предложение

УТП — цепляет внимание и сразу обозначает, какую пользу посетитель может здесь получить.

Агентство «Убедительный маркетинг» Дмитрия Кота делает именно так — сразу наносит пользу
Агентство «Убедительный маркетинг» Дмитрия Кота делает именно так — сразу наносит пользу

Рекламный баннер

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

Пример рекламного баннера в шапке сайта
Пример рекламного баннера в шапке сайта

Поле для выбора города

Характерно для интернет-магазинов, особенно если от географии пользователя зависят ассортимент и стоимость доставки.

Так реализован выбор города
Так реализован выбор города

Призывы к действию, или Call to action

Работающая идея для теплой аудитории, которая уже точно знает, что ей нужно.

Вариант призыва к действию
Вариант призыва к действию

Сервисные возможности

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

Приятно, когда сайт позаботился обо всех посетителях
Приятно, когда сайт позаботился обо всех посетителях

 

Принципы создания хедера

  1. Главное — на видном месте. Оптимально сразу определить, где в хедере будут отображаться контакты и элементы айдентики. При этом важно, чтобы телефоны, адрес электронной почты, физический адрес и название компании (если оно не интегрировано в логотип) размещались текстом, а не картинками. Это поможет лучшему ранжированию сайта поисковыми роботами, которые считывают географическую привязку сайта из блока контактов в шапке.
  2. Меню — в виде текста. С точки зрения юзабилити меню в header может быть размещено и в виде графического изображения. Но если вдруг понадобится изменить меню, убрать, добавить или отредактировать какие-то пункты, в случае использования картинок это превратится в большую проблему.
  3. Ширина — в пределах разумного. Чаще всего ширина шапки сайта составляет от 100 до 500 пикселей. Это от узкой полоски до большей части первого экрана — делать шапку более объемной нет смысла.
  4. Баланс — в приоритете. Не все элементы, которые в принципе размещают в шапке сайта, должны присутствовать одновременно. Каждый владелец ресурса, маркетолог или разработчик сайта определяют, что разместить в шапке сайта в каждом отдельном случае. Важно соблюдать баланс между информативностью, функциональностью и неперегруженностью этого элемента.
  5. Отображение — корректное. После того, как сайт размещен в интернете, важно проверить, чтобы хедер на любых устройствах и мониторах с разным разрешением отображался корректно и полностью.

Топ-10 примеров хедеров сайтов из разных сфер

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

Личный сайт маркетолога Дмитрия Румянцева

Минимализм, крупное фото, ссылка на лид-магнит — история для теплой аудитории, которая хорошо знает специалиста
Минимализм, крупное фото, ссылка на лид-магнит — история для теплой аудитории, которая хорошо знает специалиста

Личный сайт певца Алексея Воробьева

Контакты, очень подробное меню и песня, которую можно включить прямо в шапке сайта
Контакты, очень подробное меню и песня, которую можно включить прямо в шапке сайта

Корпоративный сайт банка «СБЕР»

Очень подробное меню, сегментация целевой аудитории (самозанятые, ИП, частные лица) и рекламное сообщение
Очень подробное меню, сегментация целевой аудитории (самозанятые, ИП, частные лица) и рекламное сообщение

Корпоративный сайт «Альфа Банка»

Выворотка (белый шрифт на черном фоне) в шапке сайта привлекает внимание и не успевает утомить
Выворотка (белый шрифт на черном фоне) в шапке сайта привлекает внимание и не успевает утомить

Корпоративный сайт компании «Алроса»

Мы видим инвестиционные алмазы, информацию о выплатах по ценным бумагам — сайт точно ориентирован прежде всего на инвесторов
Мы видим инвестиционные алмазы, информацию о выплатах по ценным бумагам — сайт точно ориентирован прежде всего на инвесторов

Сайт строительной компании

Сразу в шапке сайта видны все услуги — полезно для квалификации лидов
Сразу в шапке сайта видны все услуги — полезно для квалификации лидов

Сайт интернет-магазина цветов

Мы видим строку поиска и информацию (баннер) о наличии необычных цветов.
Мы видим строку поиска и информацию (баннер) о наличии необычных цветов.

Сайт университета «Синергия»

Сразу указаны основные направления обучения, есть кнопка «Записаться» и конкурентное преимущество — помощь в трудоустройстве
Сразу указаны основные направления обучения, есть кнопка «Записаться» и конкурентное преимущество — помощь в трудоустройстве

Сайт сервисной компании «Грузовичкоф»

Прямо в шапке размещена ссылка на подарочную карту, а информация в выпадающих пунктах меню организована логично
Прямо в шапке размещена ссылка на подарочную карту, а информация в выпадающих пунктах меню организована логично

Сайт сервиса HH.ru

Мы видим основные возможности для пользователей и важные для репутации сервиса цифры
Мы видим основные возможности для пользователей и важные для репутации сервиса цифры

 

9 ошибок оформления хедера

Использование меню-гамбургера для интернет-магазина. Гамбургер — история для сайта-визитки, возможно, для промосайта. Для интернет-магазинов такой вариант не подходит, так как клиенту важно иметь в быстром доступе, без лишних кликов, основные категории каталога.

До каталога лишний клик — часть лидов точно потеряется по дороге
До каталога лишний клик — часть лидов точно потеряется по дороге

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

Такие шрифты не будут читаться в хедере
Такие шрифты не будут читаться в хедере

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

Отсутствие в шапке офлайн-бизнеса (например, салона красоты) адреса. Без адреса пользователь не может сориентироваться как далеко находится от него салон, или СТО, или медицинский центр. А поисковым системам адрес важен — уже писала выше — для ранжирования и определения географической привязки сайта.

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

Примерно так
Примерно так

Отсутствие конверсионных элементов. Некоторые элементы шапки повышают конверсию. Это Call to action, корзина, заказ обратного звонка. Их отсутствие может снизить эффективность хедера как конверсионного элемента.

Использование раздела «Еще» или даже «…». За ними обычно прячутся ссылки на разные разделы сайта, которые разработчик счел дополнительными. Это неинформативно для посетителя, пользы владельцу сайта не принесет, а место в шапке займет.

Что там, за горизонтом?
Что там, за горизонтом?

Архаичный вид. Несовременное оформление сайта, в том числе его шапки, может оттолкнуть пользователей.

Чтоооо? ICQ? Привет, нулевые! Плюс мыльные шрифты и странная графика — сайту давно нужен редизайн
Чтоооо? ICQ? Привет, нулевые! Плюс мыльные шрифты и странная графика — сайту давно нужен редизайн

Желание вместить в header все и сразу. 5-7 элементов вполне достаточно для того, чтобы шапка была информативной и помогала пользователю.

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

Коротко о главном

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

 

Оценить статью
7 ответов

Комментарии

Написать комментарий
Популярные статьи автора
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
У меня есть сайт
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Оставить заявку сейчас
Ваше имя*
Введите адрес Вашего сайта:*
Введите Ваш номер телефона:*
Введите Ваш e-mail:*
Введите Ваш ник в телеграм:
Выберите интересующую услугу *
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течение дня, спасибо!