Продающие элементы шапки сайта

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

Зачем нужна шапка сайта

Выделим основные задачи данного блока:

Первое впечатление

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

Отстройка от конкурентов

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

Компас для пользователей

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

Формирование бренда

Такие элементы как логотип и слоган участвуют в формировании узнаваемости компании и укреплении ее позиционирования.

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

Больше статей на схожую тематику:

Основные элементы шапки сайта и советы по их размещению

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

Десктопная версия

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

Логотип. Он должен быть кликабельным и вести на главную страницу сайта. Рекомендуем размещать его слева: такое расположение более привычное для пользователей и облегчает восприятие. Все надписи в логотипе должны быть читабельными и разборчивыми.

Еще нет логотипа? Воспользуйтесь подборкой бесплатных инструментов для его создания и гайдом по фирменному стилю. А если самостоятельная разработка вызывает затруднения, вы можете заказать логотип у нас.
Описание направления деятельности компании. Описание помогает новому пользователю сразу понять, что он попал на нужный сайт. Главное требование: краткость и емкость. Если описание укладывается в 2-3 слова, то его можно сделать частью логотипа:

Более длинное описание лучше расположить справа от логотипа:

Дополнительно в описание направления деятельности можно включить уникальное торговое предложение (УТП), которое поможет выделиться среди конкурентов:

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

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

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

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

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

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

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

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

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

Каталог товаров или услуг.

Лучше разместить общей ссылкой, причем стало популярным (и мы это одобряем) использовать яркую кнопку и размещать ее в основной части шапки.

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

Акции и спецпредложения.

От плюшек редко кто отказывается, поэтому стоит показать их в главном меню.

Портфолио и/или отзывы клиентов.

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

Оплата и доставка, гарантии, возврат

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

Блог, новости

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

Страница о компании

также работает на лояльность пользователей.

Страница контактов

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

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

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

Примеры роста кликов, конверсий, заказов и прибыли:

Мобильная версия

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

В мобильной шапке достаточно 4–5 элементов. Ориентируйтесь на то, что вся шапка должна занимать не более 15% от высоты экрана, потому что иначе пользователь будет вынужден постоянно прокручивать страницу, чтобы добраться до основной информации на странице.

Логотип. Так же, как и в десктопной версии, должен быть кликабельным и вести на главную страницу. Оптимальный вариант, если у компании небольшой логотип с названием, позволяющий пользователю мгновенно идентифицировать сайт. О том, как сделать хороший логотип, рассказали в отдельной статье.
Меню. Если у вас 2–3 главных раздела на сайте, то их стоит показать сразу в виде классического горизонтального меню, так как это сэкономит пользователю лишний клик. В остальных случаях лучше использовать бургерное меню и/или таббар (панель вкладок): они не загромождают шапку и остаются привычными для пользователя.

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

Рекомендации по оформлению выпадающего меню:

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

Регионы работы, контакты и краткую информацию о компании стоит выделить в отдельный блок.

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

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

В последнее время некоторые компании стали оставлять только таббар, что тоже может стать эффективным решением для небольшого количества ссылок:

Рекомендации по наполнению таббара:

Панель вкладок предназначена для мгновенного доступа к 3-5 наиболее востребованным разделам и действиям и не должна дублировать основное меню. Так, для интернет-магазина в таббар целесообразно включить каталог, корзину и личный кабинет, а для сайта услуг – каталог услуг, поиск и форму заказа консультации либо онлайн-чат.

Подобно шапке сайта, таббар следует размещать на всех страницах.

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

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

Подробнее про другие важные элементы навигации сайта для мобильных устройств в данной статье.

Что не стоит размещать в шапке сайта

Отдельно остановимся на элементах, присутствие которых в шапке нежелательно.

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

Размещение таких ссылок в шапке провоцирует преждевременный уход пользователя с сайта. Аккаунты в соцсетях уместнее представить в отдельном блоке ниже по странице либо ограничиться ссылками в подвале.

Пример такого блока с призывом для главной страницы:

Блок со ссылками на соцсети

Крупные изображения

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

Антипример размещения изображений в шапке сайта

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

Объемные текстовые блоки

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

Антипример размещения объемного текста в шапке сайта

Разбираем частые вопросы об оформлении шапки сайта

Нужно ли добавлять в меню пункт «Главная»?

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

Обязательно ли указывать адрес и регионы работы?

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

Можно ли добавлять в шапку сайта ссылку на форму заказа?

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

Как группировать элементы в шапке?

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

Допустимо ли использовать анимацию в шапке?

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

Как проверить, удобна ли шапка сайта?

Проведите юзабилити-тестирование: попросите нескольких пользователей найти нужный раздел или совершить целевое действие. Также используйте тепловые карты кликов и A/B-тесты. Главный критерий: пользователь должен интуитивно понимать, куда нажать, без лишних раздумий.

Нравится статья? Тогда смотрите наши курсы!

В заключении

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

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

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