Хедер сайта: из чего он состоит, что лучше не прятать и где его портят

Что такое хедер сайта?

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

Слово используют в трёх смыслах, и их легко спутать. Визуальная шапка - это дизайнерский блок с логотипом и меню. Тег header - элемент разметки, который может оказаться и внутри статьи. Заголовок h1 к шапке не относится. Шапка в проекте одна на все страницы, её рисуют один раз, а дальше она повторяется везде.

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

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

За первые секунды шапка решает три задачи

Взгляд человека, который впервые открыл страницу, чаще всего ложится на верхний левый угол. Это подтверждает исследование компании Eyequant: Яндекс Реклама пересказывает его со ссылкой на материал CXL, где движения глаз отслеживали айтрекингом. Дальше взгляд идёт по одной из двух привычных траекторий. На простых страницах она повторяет диаграмму Гутенберга: слева направо по верху, по диагонали вниз и снова по горизонтали внизу. На страницах с большим объёмом текста взгляд скользит F-образно, строка за строкой, и каждая следующая короче. В обеих схемах шапка стоит там, откуда взгляд стартует.

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

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

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

Что положить в шапку и что оставить на потом

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

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

Там же есть напоминание про рекламу: если в Директе продвигается товар со скидкой, а баннер в шапке предлагает другую акцию, человек теряется. Лендингу поиск и каталог в шапке мешают: для него, по словам Яндекс Рекламы, это отвлекающие факторы, потому что цель лендинга - одно действие.

Контакты верстают текстом. Кокос объясняет: город в шапке даёт поисковым роботам сигнал для регионального ранжирования, а номер с атрибутом tel: превращается в звонок одним касанием. Телефонов лучше оставить один-два: 1PS не советует показывать несколько номеров сразу, остальные способы связи уходят в подвал.

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

Переполненная шапка стоит денег. Агентство Scandiweb разбирало магазин женской одежды, у которого в меню было около 240 пунктов на четыре уровня, а у других магазинов моды в среднем 50 с лишним и не больше трёх уровней. С меню работали 33% посетителей против примерно 60% на других проектах, а до четвёртого уровня добирались лишь 0,03%. Агентство оставило три уровня, сделало меню горизонтальным и убрало из шапки подписку на рассылку: на неё почти не нажимали. Поиском после правок стали пользоваться на 18,23% реже, потому что нужное находили без него, а выручка магазина выросла на 8%.

Разные проекты собирают шапку по-разному. Ориентир по трём типам собран в таблице.

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

Спрятанное меню проигрывает видимому

Скрытое меню уступает видимому, и это измерено. Nielsen Norman Group провела количественное исследование с 179 участниками на шести проектах, на смартфонах и компьютерах. Скрытая навигация снизила обнаружимость содержимого больше чем на 20%, а на десктопе люди работали минимум на 39% медленнее. Меню делили на три вида: скрытое под значком, видимое и комбинированное, когда часть пунктов на виду, а остальное под кнопкой. На десктопе скрытым меню пользовались в 27% случаев, видимым и комбинированным почти вдвое чаще: в 48% и 50%. На телефоне комбинированное меню использовали в 86% случаев против 57% у скрытого. Из этого исследователи делают вывод: на десктопе гамбургер лучше не использовать вовсе, а на телефоне ссылки стоит показывать открыто, пока их не больше четырёх.

Хорошо это видно на примере приложения Redbooth. Команда убрала из iPhone-приложения «гамбургер» и поставила снизу панель из пяти вкладок. После обновления число сессий выросло больше чем вдвое, время в приложении увеличилось на 70%, а ежедневная аудитория на 65%. Разбор данных показал, что люди нашли функции, которые были и раньше, но лежали за кнопкой меню.

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

Когда шапка должна ехать вместе со страницей?

Закреплённая шапка нужна там, где страницы длинные, а нужное действие осталось наверху. С этим столкнулась Википедия: чтобы открыть историю правок или обсуждение, редакторам приходилось возвращаться к началу статьи. Проект закрепил шапку с поиском, названием статьи, переключением языков и кнопкой правки и провёл A/B-тест на пилотных вики. У вошедших в аккаунт участников число прокруток за сессию снизилось в среднем на 15%. Отдельные эксперименты проверяли кнопку правки внутри закреплённой шапки: доля людей, доведших начатую правку до публикации, выросла на 2,8% в первом тесте и на 6,8% во втором.

Для магазина подписки картина похожая. На длинной главной австралийского клуба виски человек понимал предложение, когда кнопка «Вступить» осталась высоко над ним. Команда Convertibles добавила на мобильной главной закреплённую полосу с кнопкой и короткими гарантиями. Формально это полоса внизу экрана, но задача та же: держать действие под рукой. На выборке почти в 26 тысяч посетителей конверсия выросла на 20,4%, выручка на посетителя на 19,57%, а средний чек остался прежним.

Магазин самоцветов Moriarty's Gem Art, по словам его маркетолога, два месяца сравнивал обычное меню с закреплённым. Страниц за визит стало больше трёх вместо полутора, отказов стало меньше, и сильнее всего это проявилось у мобильных посетителей: их там около 70%. Единого ответа нет: Шон Нгуен из Internet Advisor закреплённое меню на своём проекте не использует и оценивает его так:

Липкое меню тяжёлое, неуклюжее и лишнее

Шон Нгуен, директор Internet Advisor, о закреплённом меню

Поэтому решайте тестом: закрепляйте шапку на длинных страницах и сравнивайте с обычной через A/B-тест. Смотрите на отказы, глубину просмотра и долю нажатий на главную кнопку, а высоту закреплённой панели держите небольшой, чтобы она не съедала экран.

Шапка на телефоне и в коде

На телефоне высоту шапки ограничивают. Кокос советует не превышать 15-20% высоты экрана и задавать размеры в относительных единицах rem и vh, чтобы содержимое было видно без прокрутки. Меню верстают списком ссылок: графика, по словам Кокоса, блокирует индексацию ссылок. Ещё одна частая беда - сдвиги макета: их вызывают логотипы без заданных размеров и подключаемые шрифты. Лечится это габаритами через aspect-ratio и параметром font-display: swap.

Ориентир для результата даёт документация web.dev: стремитесь к значению CLS не выше 0,1. Показатель считается по тому, насколько элементы смещаются относительно экрана, так что логотип, который подгрузился с запозданием и сдвинул весь текст вниз, портит оценку сильнее мелких правок.

Поле поиска на телефоне лучше показывать открытым: значок лупы прячет его от посетителя. Британская сеть одежды Matalan проверила это в тесте. Ассортимент у магазина большой, и покупателю со смартфона легко потеряться, поэтому строку поиска сделали всегда стоящей на виду, без лишнего нажатия. Поисков стало больше на 32% на телефоне и на 51% на планшете, а за ними выросли и продажи. Авторы описания теста советуют убирать поле только на этапе оформления заказа.

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

Какие ошибки встречаются в шапках?

Кокос насчитал девять типичных промахов. Вот те, что ломают шапку чаще других:

• каталог магазина спрятан за гамбургером на десктопе, и это добавляет лишний клик к каждому переходу;
• телефон или почта нарисованы картинкой либо не оформлены ссылками tel: и mailto:, и на смартфоне их нельзя нажать;
• у местного бизнеса нет города и улицы, и посетитель не может оценить, как добраться;
• вход в личный кабинет спрятан, и постоянным клиентам приходится его искать;
• важные разделы убраны под «Ещё», хотя им место на виду;
• в одном блоке больше пяти-семи смысловых элементов, и взгляду не за что зацепиться.

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

Незакреплённая навигация бьёт по длинному каталогу. Магазин Hayden Girls перед запуском проверил несколько версий сайта, и 85% опрошенных назвали возвращение к началу страницы за меню большой помехой: желание покупать дальше пропадало. В версии с закреплённым меню люди дольше оставались на странице, просматривали больше разделов и покупали больше.

Бывают и технические сбои. Когда магазин самоцветов Moriarty's Gem Art переходил на закреплённое меню, сначала всё ломалось: плашки с акциями в шапке оказались под действием закреплённой панели и вели себя неправильно. Разработчик написал обходное решение, после чего меню закрепили для всех посетителей, и возвращаться к обычному владельцы не собираются. Вывод для вас простой: до запуска проверьте, как закреплённая панель уживается с рекламными полосами.

Перед запуском пройдите по короткому списку:

1. логотип ведёт на главную, а название и контакты набраны текстом;
2. телефон работает как ссылка, а номеров не больше двух;
3. меню с пятью-семью пунктами видно сразу, без кнопки «Ещё»;
4. на телефоне шапка занимает не больше пятой части экрана;
5. размеры логотипа заданы заранее, и страница не прыгает при загрузке.

Частые вопросы