Хедер

Хедер (от header — заголовок) — верхняя часть сайта, расположенная выше блока с основным контентом и отображаемая на всех страницах. Это первый элемент, который видит посетитель, поэтому одна из его важнейших задач — привлечь и удержать внимание пользователя. В хедере также размещаются ключевые навигационные компоненты сайта, такие как основное меню, поисковая строка, контактные данные и т.д. Русскоязычные разработчики и пользователи также используют термин «шапка сайта».

Значимость хедера

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

• Диаграмма Гутенберга. Условно ее можно представить в виде буквы Z. Сначала пользователь смотрит на левый верхний угол сайта, затем переводит взгляд вправо до конца строки. Далее по диагонали спускается в левый нижний угол и снова переводит взгляд вправо.
• Z-паттерн. Это усложненная версия диаграммы Гутенберга, свойственная сайтам с блочной структурой. Пользователь также смотрит сначала на левый верхний угол, потом переводит взгляд вправо, спускается по диагонали вниз и снова вправо. Только из-за того, что блоков много, таких последовательных паттернов движения глаз несколько.
• F-паттерн. Согласно этой модели, пользователь сначала смотрит на левый верхний угол страницы, затем переводит взгляд вправо. Далее он спускается на 1 уровень ниже и снова смотрит слева направо. Если на первых двух «этажах» он не находит ничего интересного, то быстро просматривает оставшуюся часть сайта сверху вниз, а затем покидает страницу. Получается паттерн восприятия в виде латинской буквы F.

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

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

Какой должна быть шапка страницы?

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

• Привлекательность. Так как хедер — это то, что пользователь видит при входе на страницу, сделать его нужно максимально заметным, простым для восприятия и эстетически привлекательным. Как вариант, можно оформить фон шапки фотографией или картинкой. В этом случае нужно подобрать его так, чтобы другие визуальные элементы были хорошо заметны, а глаза пользователя не уставали от просмотра.
• Информативность. В хедере должна содержаться основная информация, позволяющая пользователю быстро сориентироваться на сайте и выполнить важнейшие целевые действия — например, оформить покупку, проконсультироваться и т.д. Также необходимо, чтобы шапка на эмоциональном уровне сообщала посетителю, чему посвящен ресурс. Например, если это сервис по доставке пищи, то фоном хедера лучше сделать качественное и эстетичное изображение еды.
• Простота восприятия. Хедер не должен быть перегружен лишними визуальными элементами, чтобы они не сливались в единую информационную «кашу», в которой пользователю будет сложно разобраться. Менее значимые, но нужные пользователю компоненты (например поисковую строку) можно спрятать под компактными иконками.
• Скорость загрузки. Нужно учитывать, что хедер сильно влияет на то, как быстро будет загружаться сайт на ПК пользователя. Поэтому, при всей визуальной привлекательности анимации и видео, такие элементы нужно использовать с осторожностью. От них не будет никакого толка, если пользователю придется ждать, пока прогрузится страница. Кроме того, динамические элементы могут привести к лишнему напряжению глаз. В оформлении хедера лучше сделать акцент на средствах HTML и CSS.
• Соответствие общему дизайну. Внешний вид хедера должен не противоречить облику всей страницы. То есть в его дизайне нужно использовать аналогичную или похожую цветовую схему, стили выделения интерактивных объектов при наведении, шрифты и другие визуальные эффекты.
• Компактный размер. Не существует строгих требований к ширине и высоте хедера, но он не должен занимать значительную часть экрана и «вытеснять» собой контентную часть. Чрезмерно «раздутая» шапка потребует от пользователя проматывать страницу вниз, чтобы ознакомиться с основным содержанием. Но так как среднестатистический пользователь по своей природе «ленив», он может просто этого не сделать. Для сайтов услуг, интернет-магазинов и информационных порталов лучше использовать шапки высотой 100–200 пикселей. Для лендингов (одностраничных сайтов), которые работают немного по иным принципам, этот показатель можно увеличить до 300–400 пикселей, чтобы было больше места для размещения интерактивных элементов (кнопок, калькуляторов, счетчиков времени и т.д.).

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

Что должно быть в шапке сайта?

Основные элементы, которые должны присутствовать в любом хедере:

• Айдентика. Под ней подразумевается совокупность всех визуальных элементов, ассоциирующих сайт с компанией в глазах пользователя. К айдентике относятся логотип, слоган, корпоративный стиль (цветовая схема, шрифты и т.д.). Их назначение состоит не только в ассоциировании ресурса с компанией, но также в привлечении и удержании внимания пользователя. Важно: логотип должен быть интерактивной ссылкой на главную страницу сайта. Это поможет пользователю быстро перейти на нее из любого раздела всего за один клик. Практика показывает, что логотип и слоган лучше размещать в шапке слева, так как именно туда большинство пользователей смотрят при заходе на сайт.
• Горизонтальное меню. Практика показывает, что большинство пользователей просматривают шапку слева направо по горизонтали. Это означает, что главное меню, содержащее основные разделы сайта, должно быть горизонтально ориентированным. Если у веб-ресурса обширная и разветвленная структура с несколькими уровнями вложенности, то подразделы нужно сделать выпадающими при нажатии или наведении на кнопки основных разделов. Это позволит не загромождать меню менее значимыми элементами.
• Поисковая строка. Для интернет-магазина, сайта услуг и информационного портала важно, чтобы пользователь мог сразу найти необходимую ему информацию без исследования всей структуры. Лучше всего эту задачу решает поисковая строка, которая обычно располагается в центральной части с небольшим смещением вправо. Если шапка небольшая и для полноценной поисковой строки не хватает места, то ее можно скрыть под иконкой, изображающей лупу.
• Контактная информация. В первую очередь это номер телефона (желательно городской или бесплатный с кодом 800) и адрес электронной почты на собственном домене сайта. Если компания работает в нескольких регионах, то в шапке лучше сделать их указатель с возможностью выбора. Это нужно не только для пользователей, но и для поисковых роботов. Номер телефона и адрес почты должны быть кликабельными, чтобы пользователь одним нажатием мышки смог позвонить в компанию или открыть форму отправки письма. Также следует предусмотреть кнопку «Заказать звонок» — она позволит посетителю созвониться с менеджером сайта в удобный для обеих сторон момент.

Помимо общих элементов, в шапке сайта обычно располагается несколько дополнительных — их набор определяется типом веб-ресурса:

• Корзина. Этот элемент необходим для интернет-магазинов, чтобы пользователь мог оформить заказ, находясь на любой странице сайта.
• Иконки соцсетей. Сегодня практически любая компания, поставляющая товары и/или услуги, представлена в социальных сетях. Разместив в шапке сайта иконки-ссылки на свои страницы в соцсетях, она получает дополнительный инструмент по привлечению пользователей.
• Кнопка оформления заказа. Этот элемент используется на сайтах услуг, и его название может различаться в зависимости от направления деятельности компании. Например, на сайте медицинского учреждения это «Записаться на прием», у юридической фирмы — «Заказать консультацию» и т.д. Кнопка оформления заказа должна быть хорошо различимой и достаточно крупной, а при наведении на нее курсора — менять цвет и/или размер. Так пользователь поймет, что это интерактивный элемент.
• Режим работы. В шапке лучше упомянуть, по каким дням и часам компания работает с посетителями, даже если это происходит в режиме 24/7. Если менеджеры отвечают ограниченное время, данная информация позволит пользователю связаться с ними в подходящий момент.

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

Дизайн шапки сайта

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

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

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

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