
Правила юзабилити
Правила оформления шапки: компоновка элементов
Какие задачи выполняет хедер?
Шапка сайта — это единая для всех страниц верхняя часть. Для ее обозначения часто используют англоязычный термин header, который перешел в веб-дизайн из полиграфии. В печатных материалах это колонтитул, в котором размещается техническая и навигационная информация. Обычно на сайте у него те же функции.Какие задачи выполняет этот блок?
- Он помогает пользователю идентифицировать компанию с помощью логотипа или названия.
- Ссылки в шапке позволяют быстро перейти на нужные страницы, быстрее взаимодействовать с интерфейсом.
- При правильном оформлении он стимулирует конверсии.
Как тематика сайта влияет на содержание шапки
Продажи, распространение информации, продвижение личности или бренда. У каждого сайта — своя цель. От этого зависит оформление и наполнение хедера. Поскольку его главная функция — навигационная, то содержание должно направлять людей на наиболее важные разделы или стимулировать целевые действия. У разных типов ресурсов этот набор будет отличаться. Разберем на трех примерах.- СМИ, тематический блок
- Бизнес
- Интернет-магазин, маркетплейс
Их цель — передача информации, поэтому пользователю нужно помочь найти нужный материал. По этой причине в шапках новостных изданий вы можете увидеть разделы по темам.
Здесь важны конверсии и отстройка от конкурентов, поэтому можно отходить от канонического дизайна. Чтобы акцентировать внимание на бренде, некоторые компании делают меню в формате бургера, убирая быстрые ссылки, и оставляют только логотип с названием. При разветвленной структуре это неудобно для пользователей, но если сайт небольшой, то в этом может быть смысл. При продвижении веб-приложения в правой верхней части размещают кнопку входа.
Чем больше товаров в каталоге, тем важнее помочь пользователю ориентироваться. Аудитория постоянно взаимодействует с этим блоком, поэтому можно сделать его фиксированным и добавить ссылки на категории. Сюда же добавляются строка поиска, корзина и другие вспомогательные элементы.
Как оформить шапку: пошаговая инструкция
Чтобы хорошо проработать дизайн, нужно определить структуру сайта и понимать, как пользователи будут с ним взаимодействовать. Иногда содержательную работу над этим блоком стоит отложить на последний этап, однако с самого начала нужно определить примерный размер области. Ширина зависит от экрана — обычно это от 1024 до 1920 пикселей. Чтобы не усложнять себе работу с адаптивностью, можно расширить поля и выбрать минимальное значение. Высота чаще всего не превышает 250 пикселей, чтобы не перекрывать контент. Иногда используется двойной и даже тройной хедер, когда необходима навигация на нескольких уровнях.
План действий:
- Выбор элементов: какие кнопки, ссылки, функции должны быть под рукой.
- Определение размеров шрифтов — особенно это важно в многослойных шапках, когда нужно распределить вес и значимость ссылок. Слишком мелкие буквы — плохая практика, поскольку это снижает читабельность и усложняет взаимодействие.
- Выбор типа меню: если разделов не много, их располагают горизонтально, а при многоступенчатой структуре можно спрятать их выпадающем меню.
- Расположение логотипа: в зависимости от стиля его можно поместить в левый верхний угол или по центру.
- Чистка: в стремлении сделать шапку полезной некоторые дизайнеры перенасыщают ее элементами, поэтому на последнем этапе нужно проверить, нет ли здесь ничего лишнего.
Что разместить в шапке сайта: полный список элементов
Чтобы оформление было красивым и функциональным, нужно правильно собрать блок из компонентов. Наполнение зависит от типа веб-проекта и его задач. В этом разделе мы приводим список всех элементов, которые могут входить в шапку. Вы можете использовать его как конструктор и выбрать только те пункты, которые соответствуют вашему бизнесу.Брендинговые элементы
Верхняя область страницы — это одна из первых частей, которая попадает в поле зрения посетители сайта. По информации в шапке должно быть понятно, что это за бизнес и чем он занимается. Логотип, название, если оно не является частью изображения, иногда слоган и дата создания компании — это элементы брендинга, которые располагаются в хедере. Привычная для пользователей практика: при нажатии на логотип происходит переадресация на главную.
Поиск
Это важный элемент для сайтов, где много информации. Его часто можно увидеть на страницах маркетплейсов, СМИ, блогов и на других крупных платформах. Для оформления используется простое поле ввода со значком лупы в правой части.
Контакты
Контактные данные — это одновременно способ вызвать доверие аудитории и форма призывов к действию, тип конверсии. Если ваша задача — стимулировать звонки, то необходимо сделать кнопку или использовать крупные цифры. Если же это вспомогательные элементы, то можно использовать иконки с телефонной трубкой и конвертом для обозначения электронной почты. Обычно они размещаются в правой верхней части экрана и автоматически активируют функцию. Например, если на мобильном телефоне нажать на номер, должно открыться окно с предложением позвонить.
CTA-кнопки
Звонки — это единственный тип конверсии, который можно собирать через сайт. В шапке часто размещают другие типы кнопок, например, зарегистрироваться, заказать, оформить заявку, войти в личный кабинет и т.д. Этой практикой пользуются не все, но инструмент может быть полезным для увеличения конверсии. При оформлении часто используются яркие цвета, чтобы акцентировать внимание потенциальных клиентов.
Социальные сети
Добавлять в шапку логотипы социальных сетей с ссылками на ваши сообщества или нет — зависит от целей вашего проекта, здесь нет строгих правил. С одной стороны, это позволяет увеличивать количество подписчиков, а с другой — вы уводите посетителей сайта и теряете возможность получить конверсию. Если по статистике для решения о покупке человеку требуется время на знакомство с вашей компанией, то установить связь через соцсети — это возможность удержать потенциального клиента.
Адрес
Некоторым типам бизнеса важно физическое расположения офиса или магазина. В этом случае в хедере полезно разместить адрес, при нажатии на который пользователь переадресуется на карту с отметкой. Если у вас несколько точек продаж, компания оказывает услуги онлайн, сайт используется для продвижения сервисов или приложений, то контактную информацию лучше убирать в футер.
Меню
Это один из самых важных элементов в шапке сайта, который влияет на юзабилити. В зависимости от количества разделов, используют несколько типов дизайна:- стандартное горизонтальное: до 7 пунктов;
- с выпадающими списками: в них можно спрятать разветвлённую структуру с подразделами;
- бургер: все меню прячется под одной иконкой;
- многоуровневое: используется с разными классификациями разделов, например, в банках на верхнем уровне указаны группы клиентов — юрлица, физлица, агенты, а на нижнем — типы услуг.

Выбор региона, языка
Если у бизнеса большая география, которая включает людей, говорящих на разных языках, то стоит добавить возможность выбора. Обычно этот элемент оформляют в виде флагов с сокращениями — RU, EN, FR и т.д. Выбор региона — еще одна полезная опция, если сервис покрывает не всю страну или условия с тарифами зависят от локализации.
Функциональные иконки: корзина, избранное, история заказов
Чтобы не перегружать меню названиями разделов, для некоторых функций используются общепринятые иконки. Например, когда человек видит символ сердечка в правом верхнем углу, он понимает, что при нажатии он попадет в раздел «Избранное», а при клике на значок продуктовой тележки или пакета — в корзину.
Ошибки в дизайне шапки
При оформлении не стоит забывать, что такое хедер. В первую очередь — это функциональная область страницы, которая помогает в навигации. Креатив в этой части может ухудшить коммерческие результаты.ТОП-3 дизайнерских ошибок при создании шапки:
- Нечитабельный шрифт: обычно проблема связана либо со стилем, например, использование слишком тонкого начертания, либо с размером — когда в одну линию пытаются поместить более семи элементов.
- Не отображается, какая страница открыта: в таком случае человек не понимает, в каком разделе он находится.
- Под логотипом нет ссылки на главную: на большинстве сайтов эта функция работает, поэтому если при клике не происходит переадресация, это вызывает раздражение.
Резюме
В этой статье мы разобрали принципы дизайна шапки сайта, главные элементы, из которых она строится, и как оформление зависит от тематики проекта. Начинающие специалисты часто сталкиваются со спорными ситуациями:- Нужна ли фиксация блока или это мешает юзабилити?
- Достаточно ли иконки или лучше написать название функции?
- Какие кнопки должны входить в горизонтальное меню?
- В каком порядке расположить разделы?
- Стоит делать вложенное меню или многоуровневое?
Всего 3 шага и 5 минут вашего времени на пути к росту.
Тогда переходите на новый уровень и улучшайте ваш
продукт вместе с нами