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

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

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

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

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

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

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

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

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

«Услуги» понятнее, чем «Наши компетенции». «Цены» лучше, чем «Коммерческие условия». «Контакты» — чем «Обратная связь».

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

Липкая шапка

Шапка, которая остаётся при прокрутке, полезна на длинных страницах: не надо возвращаться наверх.

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

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

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

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

Кнопка должна быть не меньше сорока пикселей по каждой стороне — иначе в неё не попадают пальцем.

Частые ошибки

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

Логотип без ссылки. Мелочь, которая раздражает: человек кликает и ничего не происходит.

Меню в два ряда. Признак того, что пунктов слишком много. Лечится группировкой, а не переносом строки.

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

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

Проверка своей шапки

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

Если хоть на один ответ пришлось прокручивать — шапка не работает.

Автор: Рогачев Дмитрий Васильевич, основатель La Chatte. Компания с 2014 года
делает сайты, интеграции и решения на искусственном интеллекте — более 400 проектов.