Хедер

Хедер – это верхняя плашка, шапка “Сайт”. Название «header» также используется в значениях «заголовок» и «колонтитул». Одним словом – элемент, который находится выше остальных. В сайтостроении и веб-дизайне под хедером понимают область страницы выше контентной части.

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

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

Можно ли обойтись без шапки сайта? Да, можно. Но зачем?

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

Всё точно как по формуле AIDA (Attention, Interest, Desire, Action) : (A) внимание – (I) интерес – (D) желание – (A) действие.

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

• Диаграмма Гутенберга. Посетитель изучает страницу зигзагом.

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

  Получается Z-фигура. Так вот первые впечатления в мозгу человека формируются на этапе просмотра хедера сайта. Если информация не нашла отклика у посетителя, в 90% он закроет страницу.

• Z-паттерн

  Модель схожа с диаграммой Гутенберга. Посетитель также просматривает страницу зигзагом, но этих зигзагов больше одного. Такая модель восприятия часто встречается на ресурсах с блоковой структурой контентной части. Здесь хедер также отвечает за первое впечатление.

• F-паттерн

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

При любой модели восприятия, знакомство с сайтом начинается с хедера. Страница, которая не сумеет приковать взгляд посетителя и доходчиво объяснить суть за 3-4 секунды, будет провальной. В условиях жесточайшей конкуренции в интернете, второго шанса создать хорошее впечатление может и не представится.

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

Что может и должно быть в хедере для лучшего восприятия страницы пользователем?

Основные элементы

К основным элементам относят:

• Айдентика бренда, компании, персоны. Это обязательно – логотип, название или слоган, корпоративные цвета, фирменный стиль
• Контактная информация. Данный блок важен не только для посетителей сайта, но и для поисковых систем. Роботы поисковых систем сканируют информацию о местонахождении компании с контактов, указанных в шапке. После чего уточняют данные на странице «Контакты». Обычно в хедере прописывают телефон, e-mail. В редких случаях указывают физический/юридический адрес или как добраться до офиса
• Горизонтальное верхнее меню. Шапка придает стильности странице, привлекает внимание и предоставляет пользователям удобную навигацию по сайту

Это блоки контента, которые встречаются в 95% хедеров сайтов. Landing Page и одностраничники могут обходиться и без меню.

Второстепенные элементы

Ссылки на популярные соцсети. Элемент используется для связи сайта с группами компании в социальных сетях.

• Поле/кнопка поиска. В интернет-магазинах, а также на больших информационных ресурсах, в шапке размещают поле для ввода поисковых запросов. С его помощью посетители могут быстрее находить нужную информацию, товар
• Кнопка обратного звонка, форма подписки на обновления или рассылку. Довольно часто под телефоном размещают кнопку с предложением «Перезвоним» или «Заказать обратный звонок»
• “Гамбургер-меню”. Элемент больше актуален для мобильной версии шапки сайта, но может использоваться и при отображении на ПК. Смысл выпадающего меню в том, что этот небольшой блок освобождает много места в шапке для более важных элементов. Кроме того, “гамбургер-меню” удачно смотрится в минималистичном дизайне сайта
• Блоки информации. Время работы, краткое описание деятельности, ссылки на мобильную версию и другое

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

Чтобы создать действительно привлекательный и функциональный хедер стоит придерживаться следующих принципов:

1. Размещать контакты и элементы айдентики (лого, название бренда, слоган) на видном месте. Не используйте картинки для отображения имени компании и контактной информации. Графика не мешает восприятию хедера человеком, но сильно затрудняет работу поисковых роботов. Поисковики первым делом считывают региональную привязку сайта с контактов в шапке
2. Не использовать много графических элементов, анимацию и «тяжелые» изображения в хедере. Это тормозит загрузку страницы и, зачастую, раздражает посетителей. Оптимальный вариант – использовать возможности HTML и CSS. Допускается для увеличения функционала хедера подключать динамические элементы на скриптах
3. Не использовать одинаковые заголовки H1 на всех страницах сайта. Это затрудняет поисковикам возможность поднятия ресурса в выдаче. Достаточно использовать тег заголовка на главной странице, чтобы выделить её для роботов поисковых систем
4. Меню должно быть только в виде текста. Следует исключить любые варианты с флеш-анимацией и графикой. Что будет, когда потребуется добавить или изменить пункт меню? В любом не текстовом варианте придется повторно обращаться к дизайнеру и программисту, чтобы внести малейшие изменения
5. Настроить высоту шапки. Хедер на сайте играет важную роль, но он не должен мешать восприятию контента. Поэтому для новостных или информационных порталов шапка должна быть в пределах 100-200 пикселей. Корпоративные ресурсы, Landing Page и одностраничники могут иметь хедер повыше. Например, 300-500 пикселей

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

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

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

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

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

Рассмотрим несколько примеров хедеров разной направленности.

Header для медиаперсоны

Известная личность, звезда экрана, шоумен или шоувумен – словом, человек-бренд – всегда отображает на главной странице свой образ.

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

Другой пример хедера медиаперсоны – сайт Ольги Бузовой.

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

Хедер для интернет-магазина

Задача шапки в онлайн-магазине – привлечь внимание посетителей и направить их в каталог или на страницу популярных товаров. Смотрим пример интернет-магазина обоев.

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

Другой пример зарубежного сайта с шапкой в минимализме.

Здесь мы видим слева логотип и название бренда, справа – меню, поиск и корзину. Ниже два изображения товара из коллекции, кнопка перехода в каталог. В правом нижнем углу кнопка «Написать сообщение». Всё!

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

Рассмотрим пример сайта компании, которая оказывает мелкий и срочный ремонт на дому – «муж на час».

Видим логотип посередине хедера, слоган. Слева – описание деятельности, справа телефон и кнопка «Заказать звонок». Ниже картинка улыбающегося мастера с «золотыми руками» и рядом оффер с кнопкой «Получить консультацию». Всё просто, но эффективно.

Более сложный пример с клининговой компанией.

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

Ещё один пример сервисного сайта – грузоперевозки.

Меню нет. Логотип в левом углу, контакты и «обратный звонок» - в правом. Картинка и оффер отражают тематику сайта. Ниже форма заказа.

Хедер для корпоративного сайта

Рассмотрим один пример шапки сайта компании по оказанию консалтинговых услуг в сфере IT.

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

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