Хедер сайта: принципы создания эффективной шапки

Хедер сайта (header) находится вверху веб-страницы. Он виден на каждой странице и необходим для навигации и удержании внимания посетителей.

Что такое хедер сайта

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

Функции хедера:

1. Брендинг. Лого и фирменные элементы формируют узнаваемый имидж компании.
2. Навигация. По ссылкам меню можно быстро зайти в разделы: «О нас», «Каталог», «Контакты» и другие.
3. SEO-продвижение. Поисковые системы повышают релевантность благодаря размещению способов связей.

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

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

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

Шапка сайта удерживает на себе внимание аудитории. Человек всегда движется по определенным траекториям. Рассмотрим три варианта.

Диаграмма Гутенберга

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

Модель Z

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

F-паттерн

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

Главные принципы создания хедера

Главная задача хедера — привлечь внимание.

Принципы создания шапки

Лаконичным, полезным и запоминающимся он получится, если придерживаться определенных правил.

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

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

Контакты компании

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

Режим работы

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

Адрес

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

Обратный звонок

Дайте посетителю возможность оставить заявку на обратную связь. Например, разместите под телефоном кнопку с предложением «Заказать обратный звонок».

Меню

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

Личный кабинет

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

Корзина

Элемент необходим для любого интернет-магазина. Он демонстрирует количество заказанных товаров или их общую стоимость и помогает быстрее начать оформление заказа. Чаще ее размещают в правом верхнем углу. Иконка представляет собой пиктограмму продуктовой тележки.

Избранное и список сравнения

Рядом с предыдущим элементом поставьте иконки, которые помогают перейти в раздел отложенных товаров. Пиктограммы «Корзина», «Избранное», «Сравнить» идут рядом, поскольку все они позволяют манипулировать товарными карточками.

Отличительные знаки организации

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

Поиск

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

Ссылки на группы в социальных сетях

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

Поле для выбора региона

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

Призывы к действию

Дайте посетителям возможность войти и зарегистрироваться, подписаться на рассылки, рассчитать стоимость и т.п. От дизайна зависит, где располагаются кнопки: слева или в центре.

Краткая информация о продукте

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

Кнопки переключения языков

Функция выбора языка интерфейса тоже бывает уместна. Кнопку обозначают флагом страны, сокращенным названием (RU, EN) или пиктограммой планеты.

Горизонтальное меню шапки

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

В хедере находятся следующие разделы:

• Каталог.
• Акции.
• Портфолио и отзывы.
• Условия оплаты и доставки, гарантии и т.п.
• Блог.
• О компании.
• Контакты.

Как лучше оформить горизонтальное меню сайта:

1. Максимальное количество разделов — 5–7. Но если есть целый каталог сделайте выпадающее меню.
2. Не используйте кнопки «Еще» или «…», скрывающие штук десять ссылок.
3. То, что не уместилось, объедините в тематические группы в виде выпадающего списка.
4. Раздел, на который наведен курсор пользователя, подсвечивается другим цветом, поэтому кнопки навигации нежелательно создавать разноцветными.

В хедере не бывает:

• политики конфиденциальности;
• вакансий;
• карты сайта.

Виды дизайна хедера

Классический вид

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

Двойное меню

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

Большое изображение: фото личности или продукта

Крупная фотография на фоне, поверх которого размещаются все ссылки на разделы (баннер), привлекает внимание к знаменитости, товару, услуге или акции. Во время скроллинга картинка исчезает, и пользователь видит просто классическое меню.

Анимация

Обращает на себя внимание нестандартным решением. Можно анимировать сами элементы хедера или фоновое изображение.

Меню «гамбургер»

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

Шапка на главном экране

Здесь хедер встроен в фон первого экрана. Прием подходит для промо-сайтов и лендингов.

Шапка-иллюстрация

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

Стилизованная шапка

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

Страница без шапки

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

Ошибки в создании шапки

Иногда, несмотря на ясное оформление, юзабилити страницы сайта оказывается не на высоте.

Причиной тому некоторые ошибки:

1. Некликабельные контакты. Чтобы конверсия была выше, надо дать возможность человеку одним кликом связаться с компанией с помощью интерактивной кнопки.
2. Слишком широкий хедер. Шапка должна вмещать все данные и при этом не перегружать часть страницы. При более широком хедере основной контент будет восприниматься хуже.
3. Неудачное сочетание оттенков. Излишний контраст раздражает, а однотонная подборка — ухудшает восприятие информации. Желательно выбирать проверенные решения.
4. Нечитаемые шрифты. Оригинальные и витиеватые буквы не делают сайт необычным, а только сводят на нет его функциональность. Людям трудно читать текст, тем более со смартфонов. Используйте удобные, минималистичные шрифты, которые можно читать в любом масштабе. Тогда ресурс будет хорошо адаптирован под любое устройство.

Для чего надо правильно оформить хедер

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

Шапки для разных типов сайтов

Если вам нужно оформить хедер, исходите из задачи, которая перед вами стоит.

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

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

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