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

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

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

В интернет-магазинах к ней обычно добавляются такие элементы как:

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

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

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

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

Готовых ответов здесь не существует. Тенденции в современном веб-дизайне на 2022/2023 диктуют лаконичность и минимализм, поэтому огромное количество сайтов в самых разных сферах сегодня выбирают компактный «бургер» (т. е. несколько символических черточек, подразумевающих выпадающее/всплывающее меню при клике на них) вместо традиционной развернутой панели навигации. Однако, не всегда и не во всех сферах «бургер» предпочтителен.

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

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

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

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

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

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

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

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

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

Также выбор в пользу развернутого меню может быть сделан, если бОльшая часть аудитории — возрастная и/или консервативная. Пользователи 50+ не всегда положительно воспринимают «бургер» — такое решение нередко кажется им непонятным. Частые возражения: «не ясно как передвигаться по сайту», «„бургер“ слишком незаметен», «важной информации нет перед глазами».

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

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

В «основную» строку, которая написана более крупным шрифтом (и иногда карпс локом), включают товарные направления, основные категории услуг или разбивку по типам продуктов (например, НОВИНКИ — НОУТБУКИ — СМАРТФОНЫ — АКСЕССУАРЫ — УМНЫЙ ДОМ). Именно за этим, в конце концов, и приходят на сайт ваши покупатели в первую очередь — а вовсе не затем, чтобы почитать про историю компании или ваши внутренние новости и события.

Все остальное, касающееся самой компании или условий — выделяют в дополнительную строку, расположенную чуть выше основной и представленную в более мелком размере шрифта (например, О компании, Доставка, Оплата, Медиа, Контакты).

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

Кстати, дополнительная строка - как одно из решений - может быть опять же "свернута" в бургер, в то время как основная будет показана в развернутом виде.

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

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

Контакты

В настоящее время на 2022/2023 год в веб-дизайне есть тенденция ухода от добавления в шапку прямой контактной информации и кнопок вроде «заказать», «оставить заявку». Существует мнение, что это делает весь проект более похожим на шаблонный лэндинг, в то время как если продукт/услуга являются товарами высокого класса, то эта информация должна быть исключительно внутри раздела «Контакты» (или где-то ближе к подвалу сайта). Мы бы не были так категоричны. Иногда это так, но в других случаях — нет. Телефон в шапке сайта совершенно необходим для значительного количества компаний, особенно тех, где он реально звонит без конца целый день и именно через этот канал связи поступают заказы. В особенности это касается взаимодействия с физ.лицами. Наличие или отсутствие телефона, либо кнопки связи — при общем продуманном дизайне сайта — вовсе не так критично для формирования какого-то особого настроения и позиционирования.

Что касается e-mail, то — согласимся. Выводить его в шапку и тратить на это драгоценное место вовсе не обязательно, тем более если у вас уже есть более заметная и активная кнопка «оставить заявку». Последний вариант гораздо удобнее для потенциального клиента, так как он может задать вопрос непосредственно через сайт, не заходя в почту для написания письма. Одновременно, это удобнее и для учета/контроля обращений внутри компании, так как заявки через форму с сайта попадают в 1С компании, в то время как общий e-mail обычно закреплен за неким человеком лично и туда, помимо прочего, приходят тонны спама.

С другой стороны, если в вашем конкретном бизнесе клиенты ПРИВЫКЛИ писать вам на e-mail — конечно, его нужно оставить в шапке!

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

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

Главное — не нужно одновременно создавать десяток дублирующих кнопок «заказать звонок», «получить консультацию», «позвонить», «написать», «задать вопрос», «написать онлайн консультанту», «получить предложение», «мессенджер T», «мессенджер V», «мессенджер W» (и еще 5 никому неизвестных мессенджеров и систем) и проч. — на некоторых сайтах это стремление создать максимальное количество кнопок связи доходит до абсурда и путает посетителя.

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

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

Соц.сети

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

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

Поиск по сайту актуален для проектов с большим ассортиментом или серьезным объемом текстового контента (блог, статьи, инструкции, обзоры). Если ни того ни другого нет и, скажем, речь идет о продаже 3–5 вариантов некого товара/услуги, то поисковая строка и вовсе не особо нужна. Лучше сэкономить место.

Выводы

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

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

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