Назад в блог

Хедер сайта: что это такое и зачем он нужен

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

Что такое хедер сайта и какие у него функции

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

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

Хедер выполняет несколько функций:

  • Брендинг. Логотип и основные стилистические элементы увеличивают узнаваемость и создают первое впечатление о сайте компании.
  • Навигация для пользователей. Главные ссылки меню обеспечивают быстрый доступ к основным разделам сайта: «О нас», «Каталог», «Контакты» и другие.
  • SEO-продвижение. Актуальные способы связи в шапке положительно воспринимаются поисковыми системами при ранжировании. Кроме того, наличие в хедере меню упрощает разработку внутренней структуры сайта и организацию перелинковки.

Почему хедер страницы необходим

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

Диаграмма Гутенберга

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

Диаграмму Гутенберга используют не только при верстке сайтов, но и при создании инфографики, презентаций и других материалов

Модель Z

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

Модель взаимодействия Z тесно связана с предыдущей, но демонстрирует, что аудитория просматривает всю страницу более подробно

F-паттерн

Исследование Nielsen Norman Group показало, что взгляд людей при просмотре страниц движется по траектории, напоминающей букву F. Пользователи начинают с верхнего левого угла, двигаясь вправо, затем возвращаются и опускаются немного ниже, снова перемещаясь вправо, но на меньшее расстояние и в конце изучают страницу вертикально вниз по левой стороне.

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

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

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

Разработка сайтов

Обратиться к нам

Что должно быть в шапке сайта

  • Айдентика. Это элементы, по которым аудитория понимает, кому принадлежит сайт. Логотип и название в этом случае становятся визитной карточкой. Их принято располагать в левом верхнем углу, так как это первая точка, куда падает взгляд (вспоминаем вышеописанные паттерны). В шапке также может находиться слоган или изображение, которое отражает деятельность компании.
Здесь сайт принадлежит ивент-агентству, и хедер это подчеркивает. Логотип является интерактивным элементом: одним кликом на него пользователь может вернуться на главную
  • Меню навигации. Предоставляет прямой доступ к основным разделам сайта: «каталог», «акции», «о компании», «блог» и т. д. Меню может быть горизонтальным в верхней части хедера или выпадающим. Второе чаще называют гамбургер-меню, поскольку иконка выглядит как три горизонтальные полоски и напоминает бургер.
Пример горизонтального меню: в нем указаны основные форматы мероприятий, которые организует ивент-агентство
При создании этого хедера разработчик придерживался принципа минимализма и выбрал для этого сайта гамбургер-меню
  • Поисковая строка. Это довольно функциональный элемент, который ускоряет работу с сайтом: с помощью ключевых слов можно найти нужную информацию. Поисковую строку часто размещают в центре или справа в хедере.
Поисковые строки иногда содержат подсказки для пользователей, что упрощает взаимодействие с ними
  • Контактная информация. Это номера телефонов, электронная почта и фактический адрес компании. Они позволяют аудитории быстро связаться с организацией или определить, где она находится. Обычно контактную информацию располагают в правом верхнем углу хедера.
Дополнением к контактам нередко служит кнопка «Обратный звонок». Это особенно актуально, если линия компании бывает перегруженной
  • Кнопки социальных сетей. Упрощают доступ к сторонним онлайн-площадкам, где присутствует компания. Элемент способствует увеличению числа подписчиков в социальных сетях, однако он может «уводить» аудиторию с сайта, что негативно воспринимается поисковыми системами. Наличие или отсутствие таких кнопок в хедере зависит от стратегии продвижения компании в онлайн-пространстве.
Обычно значки социальных сетей сгруппированы и находятся рядом с контактной информацией или в нижней части хедера
  • Элементы взаимодействия. Это кнопки входа и регистрации, подписки на новости, расчета стоимости и другие. В зависимости от дизайна они могут быть расположены в верхнем правом углу или в центральной части хедера.
Кнопки должны выделяться на общем фоне и содержать понятный призыв к действию
  • Языковой переключатель. Функция позволяет выбрать предпочитаемый язык интерфейса. Кнопка может выглядеть как флаг страны, буквенное сокращение (RU, EN) или пиктограмма земного шара.
Такой элемент полезен компаниям и интернет-площадкам, работающим на международном уровне
  • Индикатор корзины. Без него не обходится ни один онлайн-магазин. Корзина показывает количество товаров или общую стоимость, а также позволяет быстро перейти к оформлению заказа. Она обычно находится в правом верхнем углу и выглядит как пиктограмма продуктовой тележки.
Как правило, это интерактивный элемент, который работает совместно с кнопками «Купить» в каталоге
  • Выбор города. Функция особенно важна для компаний, предоставляющих услуги или продающих товары в разных регионах. Кнопку размещают в верхней части хедера, где ее легко заметить.
Выбора города предоставляет контент, специфичный для местоположения посетителей, например, информацию об акциях, наличии товаров и т. д.
  • Режим работы. Сообщает аудитории о рабочем графике компании, что помогает планировать звонки или визиты. Обычно элемент располагают недалеко от контактной информации или в нижнем углу хедера.
Нередко график выступает как УТП компании. Это может быть круглосуточный режим или работа в праздничные и выходные дни

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

SEO-продвижение сайтов

Обратиться к нам

Как оформить шапку сайта — основные принципы

  • Простой и понятный хедер позволяет пользователям быстро находить нужную информацию. Избегайте перегрузки шапки ненужным функционалом, который будет отвлекать или затруднять навигацию.
  • Все элементы шапки сайта должны соответствовать фирменному стилю компании. Это укрепляет бренд и делает внешний вид страниц узнаваемым.
  • Меню навигации должно быть интуитивно понятным и логически организованным. Группируйте похожие разделы в подменю для улучшения структуры, откажитесь от пунктов «Еще» или «…».
  • Оптимизируйте изображения, чтобы страницы загружались быстро, что особенно важно для пользователей, которые посещают сайт с мобильных устройств.
  • Выделяйте элементы взаимодействия, чтобы мотивировать аудиторию к коммуникации. Посетитель должен интуитивно понимать, что кнопки интерактивные.
  • Если сайт предполагает выбор города, адреса или языка, убедитесь, что эти кнопки доступны в хедере и не требуют лишних действий для настройки или изменения.
  • Регулярно тестируйте хедер на разнообразных устройствах и среди различных групп людей. Собирайте отзывы и данные о поведении пользователей на странице, чтобы оптимизировать дизайн и функциональность сайта.
  • Согласно исследованиям, люди более трети времени бодрствования пользуются мобильными телефонами. Поэтому не стоит забывать про адаптацию сайта для смартфонов: информация должна отображаться корректно, а страница — не терять функциональности из-за размера экрана.
Мобильная версия хедера обычно содержит основные элементы: айдентику, контакты и гамбургер-меню

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

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

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

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

Команда «Пользы» создает сайты с привлекательным и функциональным UX/UI-дизайном и адаптацией под актуальные требования поисковых систем. Наши SEO-специалисты, дизайнеры  и разработчики учитывают позиционирование бренда, его рыночную нишу, целевую аудиторию и особенности ее поведения.

Остались вопросы?

Задайте их нам

Больше пользы: подписывайся на нас в VK, чтобы узнать о SEO и ADS
Перейти
Еще Статьи