Правила оформления шапки: компоновка элементов

Какие задачи выполняет хедер?

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

1. Он помогает пользователю идентифицировать компанию с помощью логотипа или названия.
2. Ссылки в шапке позволяют быстро перейти на нужные страницы, быстрее взаимодействовать с интерфейсом.
3. При правильном оформлении он стимулирует конверсии.

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

Как тематика сайта влияет на содержание шапки

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

1. СМИ, тематический блок

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

 


2. Бизнес

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

 


3. Интернет-магазин, маркетплейс

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

Как оформить шапку: пошаговая инструкция

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

  
План действий:

1. Выбор элементов: какие кнопки, ссылки, функции должны быть под рукой.
2. Определение размеров шрифтов — особенно это важно в многослойных шапках, когда нужно распределить вес и значимость ссылок. Слишком мелкие буквы — плохая практика, поскольку это снижает читабельность и усложняет взаимодействие.
3. Выбор типа меню: если разделов не много, их располагают горизонтально, а при многоступенчатой структуре можно спрятать их выпадающем меню.
4. Расположение логотипа: в зависимости от стиля его можно поместить в левый верхний угол или по центру.
5. Чистка: в стремлении сделать шапку полезной некоторые дизайнеры перенасыщают ее элементами, поэтому на последнем этапе нужно проверить, нет ли здесь ничего лишнего.

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

Что разместить в шапке сайта: полный список элементов

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

Брендинговые элементы

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

 

Поиск

Это важный элемент для сайтов, где много информации. Его часто можно увидеть на страницах маркетплейсов, СМИ, блогов и на других крупных платформах. Для оформления используется простое поле ввода со значком лупы в правой части.

 

Контакты

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

 

CTA-кнопки

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

 

Социальные сети

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

 

Адрес

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

 

Меню

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

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

Выбор региона, языка

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

 

Функциональные иконки: корзина, избранное, история заказов

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

 

Ошибки в дизайне шапки

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

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

Резюме

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

• Нужна ли фиксация блока или это мешает юзабилити?
• Достаточно ли иконки или лучше написать название функции?
• Какие кнопки должны входить в горизонтальное меню?
• В каком порядке расположить разделы?
• Стоит делать вложенное меню или многоуровневое?

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