Шапка сайта: что в ней должно быть и частые ошибки

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

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

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

Логотип слева со ссылкой на главную. Это привычка, выработанная годами почти на всех сайтах интернета: люди кликают по логотипу автоматически, когда хотят вернуться в начало, даже не читая, есть ли рядом слово «Главная».

Понятное меню из пяти-семи пунктов. Больше — человек перестаёт читать их по отдельности и начинает искать глазами что-то смутно знакомое, то есть фактически меню перестаёт работать.

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

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

Схема: как устроена правильная шапка

Четыре зоны, у каждой — своё место и своя задача. Смещать их местами не стоит: пользователь ищет привычные вещи в привычных углах экрана.

Как называть пункты меню

Называйте пункты словами, которые ищет клиент, а не названиями, которыми называется отдел внутри компании. Это разные языки, и путать их — значит терять людей молча: человек не пишет «не понял», он просто закрывает вкладку.

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

Липкая шапка при прокрутке

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

У неё два обязательных условия. На телефоне она должна быть тонкой: если занимает пятую часть экрана, она съедает то место, где человек читает. И при прокрутке вниз её стоит прятать, а показывать только при движении вверх — человек листает страницу вниз, чтобы читать текст, а не чтобы весь путь смотреть на одно и то же меню.

Меню на телефоне

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

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

Размер кнопок в шапке на телефоне — это не вопрос вкуса, а вопрос стандарта: минимум по критерию доступности WCAG 2.2 «Target Size» — 24×24 пикселя, а более удобный для пальца ориентир, которым руководствуется Apple в своих интерфейсах, — 44×44 точки. Кнопка меньше этого размера промахивается пальцем заметно чаще.

Сколько высоты может занимать шапка

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

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

Частые ошибки и как их найти у себя

Разработка дизайна сайтаСпроектируем шапку и весь интерфейс так, чтобы он был понятен и на компьютере, и на телефоне

Проверка своей шапки за 15 секунд

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

1. Чем занимается компания. Логотип или короткая подпись рядом с ним должны отвечать на этот вопрос без прокрутки.
2. Как связаться. Кнопка звонка, мессенджера или заявки должна быть видна в шапке или в первом экране под ней.
3. Где цены. Пункт меню «Цены» или «Услуги» должен быть заметен сразу, а не спрятан на третьем уровне подменю.

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

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

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