Что такое хедер и как он может сделать сайт лучше

Привет! Я Марко Очоа, Product Marketing Manager в Т‑Реклама. Мы публикуем серию статей, которая поможет сориентироваться в терминах, подходах и темах на стыке технологий и маркетинга. Сегодня поговорим о хедере сайта.

Что такое хедер и зачем он нужен

Хедер — от английского head, «голова». Это верхняя часть сайта, которая помогает пользователям быстро находить нужные страницы, в один клик переходить в личный кабинет или связываться с поддержкой. Другое название хедера — шапка сайта.

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

Минимальный «набор» для хедера — логотип компании, ссылка на главную, меню сайта (если сайт не одностраничный) и ссылки на соцсети или мессенджеры для связи.

Но в больших проектах могут быть и другие элементы:

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

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

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

Что учесть, чтобы хедер работал на цели бизнеса

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

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

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

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

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

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

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

Хедер: главное для бизнеса

1. Главная задача хедера — сделать так, чтобы сайтом было удобнее пользоваться, можно было быстро попасть на нужную страницу или найти контакты компании. Это улучшает клиентский опыт.
2. Если бизнес рекламирует свои услуги на внешних площадках, и объявления ведут на сайт, хедер удерживает внимание и сокращает число отказов.
3. Чтобы не мешать пользователям видеть контент страницы, хедер должен быть не слишком большим по высоте — примерно 200–300 пикселей.
4. Фирменные цвета и логотип компании в хедере помогут сразу понять, какой компании принадлежит сайт.
5. Хедер нужно адаптировать к мобильным устройствам, так как большинство пользователей выходят в сеть со смартфонов.
6. Сложные анимации и «тяжелые» картинки в хедере могут замедлять его загрузку — а это повышает риск, что люди не дождутся и уйдут на другой сайт.