Шапка сайта: что разместить в верхней части и чего избегать

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

Что такое шапка сайта и чем она отличается от меню

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

Справочник MDN описывает глобальную шапку так: обычно она содержит логотип, название компании, поиск и иногда основную навигацию или слоган. В HTML для неё есть отдельный элемент <header>. Когда он стоит на верхнем уровне страницы, браузер помечает его как ориентир banner, и программы экранного доступа позволяют перейти к шапке одной командой.

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

Шапка отвечает посетителю на два вопроса: куда я попал и как связаться. Меню — лишь одна из её частей.

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

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

• Логотип — ссылка на главную и ответ на вопрос «чей это сайт».
• Телефон или другой основной контакт — тот канал, по которому компания реально принимает обращения.
• Город или регион — если компания работает не везде, это экономит посетителю звонок.
• Кнопка главного действия — «Оставить заявку», «Рассчитать стоимость», «Записаться».
• Меню — разделы сайта или кнопка, которая его раскрывает.
• Поиск — для каталога и сайтов с большим числом страниц.
• Служебные ссылки — вход в кабинет, корзина, переключение языка.

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

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

Почему логотип ставят слева и куда он ведёт?

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

В эксперименте NN/g логотип в традиционном левом верхнем положении запоминали на 89 % чаще, чем логотип справа. Нестандартное расположение при этом не добавило сайтам ни стиля, ни оригинальности в глазах участников: оценки по этим параметрам статистически не различались.

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

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

Факт. В исследовании Nielsen Norman Group логотип в левом верхнем углу запоминали на 89 % чаще, чем логотип справа.

Контакты и кнопка заявки в шапке сайта

Контакты в шапке сайта нужны, если компания ждёт звонков и обращений. Для сайта услуг телефон в правом верхнем углу — привычное место, где его ищут в первую очередь. Номер оформляют ссылкой tel:, чтобы на телефоне он набирался одним нажатием.

Рядом с номером полезно указать часы работы и город. Человек, который видит «Новороссийск, пн–пт», понимает, звонить ли сейчас, и не тратит время на компанию из другого региона. Если обращения принимают в мессенджере, ставьте один канал, которым реально пользуются, а не ряд значков всех сервисов подряд.

Кнопка главного действия должна быть одна и заметна сразу. Две равноправные кнопки — «Заказать звонок» и «Оставить заявку» — заставляют выбирать там, где выбор не нужен. Подпись кнопки называет результат: «Рассчитать стоимость» понятнее, чем «Отправить».

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

Контакт в шапке — обещание ответить. Ставьте только тот канал, по которому компания действительно отвечает.

Где посетители ищут поиск и служебные ссылки

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

Служебные инструменты — вход в личный кабинет, корзина, выбор языка — по наблюдению NN/g переместились в правый верхний угол страниц. Там их ищут чаще всего, особенно вход и поиск. Ставить их в другое место можно, но тогда посетитель тратит время на поиски привычной кнопки.

Значки без подписей — частая беда служебной зоны. NN/g отмечает: людям нравятся иконки, но они их не понимают и плохо запоминают. Корзину и лупу узнают почти все, а значок человечка может означать и кабинет, и профиль, и «о компании». Если места мало, подпись оставляют хотя бы у неочевидных значков.

Справа вверху посетитель ищет поиск, вход и корзину. Нестандартное место для них стоит ему времени.

Когда закреплять шапку при прокрутке?

Липкая шапка остаётся на экране, пока посетитель прокручивает страницу. По словам Nielsen Norman Group, она даёт быстрый доступ к навигации, поиску и служебным ссылкам без прокрутки наверх. Но плохо сделанная липкая шапка раздражает, отвлекает и закрывает содержимое.

Чтобы закреплённая шапка помогала, NN/g предлагает несколько правил:

• Минимальная высота — шапка занимает место на каждом экране, поэтому в ней остаётся только то, что нужно при прокрутке.
• Непрозрачный фон — фон шапки должен быть непрозрачным и отличаться от фона страницы, иначе текст под ней просвечивает и мешает читать.
• Минимум движения — лучше всего, если шапка просто стоит на месте; если она появляется при прокрутке вверх, анимации длиной около 300–400 мс хватает, чтобы выглядеть естественно.
• Проверка необходимости — если на длинных страницах шапкой никто не пользуется, закреплять её незачем.

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

Шапка на телефоне: что оставить, а что спрятать

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

Nielsen Norman Group советует на сенсорных экранах делать зоны нажатия не меньше 1 x 1 см. Это касается и кнопки меню, и значка телефона, и корзины. Маленький значок со свободным полем вокруг лучше, чем крупный, прижатый к соседнему.

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

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

Как сделать шапку доступной

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

Первое — разметка. Шапку верстают элементом <header> на верхнем уровне страницы: тогда браузер помечает её как ориентир banner, и к ней можно перейти одной командой.

Второе — ссылка «Перейти к содержанию». Руководство WCAG требует способ пропустить блоки, которые повторяются на многих страницах. Без такой ссылки человеку с клавиатуры приходится на каждой странице заново проходить по всем пунктам шапки и меню, прежде чем он доберётся до текста.

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

Пройдите страницу клавишей Tab: если выделенная ссылка прячется под шапкой, ей нужен отступ при прокрутке.

Как проверить шапку перед запуском

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

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

Если сайт ещё только проектируется, шапку рисуют одной из первых: от неё зависят сетка и место кнопки заявки на всех страницах. Мы проектируем шапку вместе со структурой, когда делаем корпоративный сайт. Оставьте заявку — начнём с того, какие действия посетителей для вас главные.

Источники

• : The Header element — MDN Web Docs
• Website Logo Placement for Maximum Brand Recall — Nielsen Norman Group
• Search: Visible and Simple — Nielsen Norman Group
• Utility Navigation: What It Is and How to Design It — Nielsen Norman Group
• Sticky Headers: 5 Ways to Make Them Better — Nielsen Norman Group
• Understanding SC 2.4.11 Focus Not Obscured (Minimum) — W3C
• Understanding SC 2.4.1 Bypass Blocks — W3C