Хедер

Статья обновлена 05.07.2024

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

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

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

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

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

Типовой размер хедера

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

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

Типовые форматы хедера

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

1. Закрепленный хедер

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

2. Горизонтальный хедер

• Плюсы:
  • Занимает меньше места, чем закрепленный хедер.
  • Легко сканируется, так как люди привыкли читать слева направо.
  • Подходит для сайтов с простым меню.
• Минусы:
  • Не подходит для больших сайтов со сложной структурой.
  • Может быть менее заметным, чем закрепленный хедер.

3. Вертикальный хедер

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

4. Хедер «гамбургер»

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

Что должно быть в хедере

Хедер может включать следующие элементы:

• Навигация. Основной функционал хедера — навигация по сайту. Это похоже на оглавление для всех страниц, благодаря которому пользователи могут найти то, что им нужно.
• Логотип компании и элементы фирменного стиля. Хедер должен соответствовать рекомендациям по айдентике бренда и адаптироваться к мобильному просмотру.
• Призывы к действию — Call-to-Action. Могут быть в виде текста или баннера. Если CTA заметны и располагаются в области хедера, это повышает вероятность того, что посетители предпримут какие-то действия, например, свяжутся с отделом продаж, закажут образцы или найдут местный филиал компании.
• Контактные данные. Если нужно, чтобы клиенты обращались в компанию по определенным каналам связи, стоит включить их в заголовок для сайта.

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

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

Навигация как важная часть хедера

Дизайн навигации в хедере должен отражать иерархию страниц сайта. Это своего рода генеалогическое древо веб-ресурса.

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

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

Иерархия и типы навигации в хедере

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

• Основная навигация. Эта область должна вызывать страницы верхнего уровня и сразу же объяснять, что предлагает бизнес. Например, для транспортной компании размещение страницы «Товары» в основной навигации не имеет смысла, поскольку она предлагает услугу. В подобных случаях главное — быть конкретным. Основная навигация должна определяться объемом контента, который размещен на ресурсе. Если сайт состоит из нескольких страниц, то, вероятно, все они войдут в верхнее навигационное меню. В противном случае нужно начать категоризацию и расстановку приоритетов.
• Служебная навигация. Этот раздел навигации включает второстепенные действия, которые могут выполнять посетители. Как правило, это вход в систему, выполнение поиска, просмотр данных аккаунта или проверка корзины покупок. Здесь также часто указывают контактные данные компании — например, номер телефона. Служебная навигации обычно не так заметна, как основная, и может располагаться над ней или в углу хедера.
• Мега-навигация. Такие типы навигации чаще всего встречаются на крупных сайтах электронной коммерции вроде Amazon. В раскрывающемся навигационном меню на 2, 3 и даже 4 уровнях указываются абсолютно все товары, представленные на сайте и разбитые по отдельным категориям. Это происходит потому, что цель таких сайтов — побудить людей покупать товары, поэтому их включают в общий список навигации. Мега-навигация после отображения займет значительное количество места, так что использовать ее нужно осторожно.
• Навигация третьего уровня. Она пригодится, когда у бизнеса есть определенные бренды продуктов или уникальные товары, которые тоже нужно перечислить.

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

• Навигация с вкладками. Здесь пользователь может переключаться между различными категориями или брендами, расположенными на отдельных вкладках. Эти вкладки будут отображаться на каждой странице — так человек понимает, на каком разделе какого бренда он находится.
• Глобальная навигация. Так же, как навигация с вкладками, глобальная навигация остается постоянной на каждой странице. Здесь пользователю дают ссылки на страницы, связанные со всеми брендами, и на общие разделы международной компании — такие, например, как страницы вакансий, вход в систему и контакты. Таким образом, обновление контента для разных брендов становится более простым и логичным.
• Локализованная навигация. Эти страницы похожи на основную навигацию на других сайтах, но имеют различающиеся в зависимости от бренда разделы меню — такие, как предложения услуг, расценки и сроки выполнения. Контент этих разделов будет разным для разных брендов.

Как сделать хедер

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

Вот несколько советов, которые помогут вам в этом:

1. Продумайте навигацию

• Структура.Навигация должна быть интуитивно понятной и соответствовать логике сайта.
• Главные элементы. Разместите в хедере самые важные разделы и страницы сайта, чтобы пользователи могли легко их найти.
• Язык. Используйте понятные и лаконичные названия разделов.

2. Используйте читаемую типографику

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

3. Подберите качественные изображения

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

4. Обеспечьте масштабируемость

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

5. Сохраняйте соответствие бренду

• Цветовая палитра. Используйте цвета, соответствующие вашей цветовой палитре бренда.
• Логотип. Разместите логотип бренда в хедере.
• Общий стиль. Оформите хедер в соответствии с общим стилем вашего сайта.

6. Добавьте интерактивные элементы

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

7. Проводите тестирование

• А/Б тестирование. Используйте A/B тестирование, чтобы сравнивать разные варианты дизайна хедера и определить, какой из них наиболее эффективен.
• Сбор отзывов. Спросите пользователей о том, что им нравится и не нравится в хедере вашего сайта.
• Аналитика. Отслеживайте показатели кликабельности и другие данные, чтобы оценить эффективность хедера.

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