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

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

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

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

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

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

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

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

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

Модель Z

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

F-паттерн

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

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

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

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

Основные элементы с примерами шапки сайта:

• Айдентика. Это элементы, по которым аудитория понимает, кому принадлежит сайт. Логотип и название в этом случае становятся визитной карточкой. Их принято располагать в левом верхнем углу, так как это первая точка, куда падает взгляд (вспоминаем вышеописанные паттерны). В шапке также может находиться слоган или изображение, которое отражает деятельность компании.

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

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

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

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

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

• Языковой переключатель. Функция позволяет выбрать предпочитаемый язык интерфейса. Кнопка может выглядеть как флаг страны, буквенное сокращение (RU, EN) или пиктограмма земного шара.

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

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

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

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

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

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

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

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

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

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

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