Какой должна быть шапка (хедер) сайта, меню и панель навигации?

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

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

• корзина;
• избранное;
• сравнение товаров;
• регистрация и вход в личный кабинет.

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

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

«Бургер» или развернутая панель навигации?

Возникает логическая дилемма — что же обязательно должно быть включено в шапку, а что оптимальнее «спрятать», чтобы не создавать лишний визуальный шум и не портить впечатление от первого экрана?

Готового ответа для всех сайтов нет. Компактный «бургер» — несколько символических черточек, открывающих меню при нажатии, — помогает освободить место. Однако выбирать его только ради минимализма мы бы не советовали: развернутая панель сразу показывает посетителю доступные разделы, а скрытую сначала нужно обнаружить и открыть.

Nielsen Norman Group в исследовании 2016 года обнаружила, что скрытую навигацию находят хуже, чем видимую или частично видимую. Авторы рекомендуют показывать основные пункты на компьютере. На телефонах исследователи сравнивали скрытое меню с комбинированным: в нём часть разделов видна сразу, а остальные раскрываются по кнопке.

Когда лучше использовать бургер?

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

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

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

Когда лучше использовать развернутую панель навигации?

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

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

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

• консалтинг, логистика и таможня;
• покупка спецтехники и аренда спецтехники;
• покупка бизнеса «под ключ», аудит, лекции и мастер-классы.

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

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

Дайте человеку конкретную задачу: найти аренду техники, условия доставки или нужную категорию товара. Смотрите, с чего он начинает, замечает ли меню и понимает ли названия пунктов. Если вместо раздела «Услуги» он ищет знакомое название услуги, одной сменой значка меню проблему не решить — придётся пересмотреть подписи и группировку.

Как правильно сделать шапку с развернутой панелью навигации?

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

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

Сведения о самой компании и условиях можно выделить в дополнительную строку, расположенную чуть выше основной: «О компании», «Доставка», «Оплата», «Медиа», «Контакты». Её допустимо сделать визуально спокойнее, но не превращать в ряд нечитаемых мелких надписей. Если доставка влияет на решение о покупке, ей может понадобиться более заметное место.

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

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

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

Продумайте и поведение меню. В примере раскрывающейся навигации W3C кнопка сообщает открытое или закрытое состояние через aria-expanded. До неё можно дойти клавишей Tab, открыть Enter или пробелом, а раскрытый список закрыть Escape с возвратом фокуса на кнопку. Одна только работа при наведении мыши не покрывает эти сценарии.

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

Какие элементы обязательно должны быть включены в шапку сайта?

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

Контакты

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

Что касается e-mail, выводить его в шапку и тратить на это место необязательно, если у вас уже есть заметная кнопка «оставить заявку» и такой способ подходит клиентам. Через форму можно задать вопрос непосредственно на сайте, не переходя в почту. Но удобство зависит от её устройства: длинный опросник с лишними полями способен усложнить простое обращение.

Для учёта и контроля обращений отдельно определите, куда приходит заявка и кто её обрабатывает. Наличие формы не означает, что сообщение автоматически попадает в 1С компании. Если нужна такая интеграция, её следует согласовать и проверить тестовым обращением. У почты тоже должен быть ответственный и понятный порядок обработки писем — сам адрес в шапке этого не обеспечивает.

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

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

Формы заявок, кнопки обратной связи, мессенджеры

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

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

Кому-то удобнее позвонить, кому-то — написать, причём предпочтение может меняться в зависимости от ситуации. Если для вашего бизнеса нужны оба сценария, предусмотрите хотя бы по одному каналу для каждого: например, телефон и заявку. Не обязательно делать их одинаково яркими и постоянно повторять в нескольких местах шапки.

Мессенджеры можно вынести в шапку, если клиенты действительно обращаются через них и компания готова отвечать. Предложите понятные альтернативы: например, Telegram или сообщения ВКонтакте, а рядом обычный телефон либо форму. Связь должна быть удобна клиенту; посетителю без аккаунта в выбранном сервисе тоже нужен рабочий путь обращения.

Если форма собирает персональные данные, её оформление требует отдельного внимания. По 152-ФЗ нужно обеспечить доступ к политике обработки данных на странице их сбора; практично дать ссылку около формы. Если основанием обработки служит согласие, оно оформляется отдельно от других подтверждаемых документов и информации. Состав полей должен соответствовать цели обращения, без избыточных данных.

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

Соц.сети

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

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

Поисковая строка

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

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

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

Мобильная шапка и размер области нажатия

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

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

Различайте картинку значка и область, по которой можно нажать. В WCAG 2.2 критерий 2.5.8 уровня AA задаёт минимум 24 × 24 CSS-пикселя для цели указателя с предусмотренными исключениями, в том числе по расстоянию до соседних целей. Это не означает, что маленькая иконка обязательно должна иметь такую же маленькую активную область.

В Apple Human Interface Guidelines для кнопок общий ориентир — область нажатия не менее 44 × 44 pt, с отдельными указаниями для других платформ. Это рекомендации Apple в пунктах, а требование WCAG сформулировано в CSS-пикселях. Не смешивайте единицы: для веб-макета задайте активные области в CSS и проверьте их на устройствах. Мобильные кнопки разумно делать просторнее минимального порога WCAG.

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

Нужно ли фиксировать шапку при прокрутке?

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

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

Отдельно проверьте переходы по оглавлению и работу клавиатуры. Заголовок после перехода по якорю лучше оставлять полностью видимым. Критерий WCAG 2.2 2.4.11 уровня AA требует, чтобы элемент с клавиатурным фокусом не был целиком скрыт авторским содержимым. Для удобства стоит добиваться полной видимости: посетителю нужно понимать, на какой ссылке или поле он находится.

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

Выводы

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

В остальном состав кнопок, элементов и форм зависит от задач посетителя. Телефон и кнопка «оставить заявку» могут быть полезны, но добавлять их стоит с пониманием того, кто и как обрабатывает обращения. Лаконичная шапка тоже должна оставлять понятный путь к контактам. Имидж и дизайн здесь не заменяют проверку того, может ли человек связаться с компанией.

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

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

Можно ли оставить только логотип и бургер?

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

Обязательно ли размещать телефон в шапке?

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

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

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

Нужно ли переносить все настольные пункты в мобильную шапку?

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

Достаточно ли проверить шапку на главной странице?

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

Источники

• Исследование скрытой и видимой навигации — Kara Pernice, Raluca Budiu, Nielsen Norman Group, 26.06.2016: Hamburger Menus and Hidden Navigation Hurt UX Metrics.
• Рекомендации по фиксированным шапкам — Page Laubheimer, Nielsen Norman Group, 04.04.2021: Sticky Headers: 5 Ways to Make Them Better.
• Минимальный размер цели указателя — W3C WAI, пояснение к WCAG 2.2, критерий 2.5.8: Target Size (Minimum).
• Области нажатия кнопок — Apple Developer, Human Interface Guidelines: Buttons.
• Видимость элемента с клавиатурным фокусом — W3C WAI, пояснение к WCAG 2.2, критерий 2.4.11: Focus Not Obscured (Minimum).
• Пример раскрывающейся навигации — W3C WAI, ARIA Authoring Practices Guide: Disclosure Navigation Menu.
• Персональные данные в форме связи — Федеральный закон от 27.07.2006 № 152-ФЗ, редакция от 26.07.2026, КонсультантПлюс: статья 5, статья 9, статья 18.1.