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

Что такое шапка сайта и зачем она нужна

Шапка сайта (её ещё называют хедером) — это блок в самом верху страницы, который повторяется на всех страницах сайта. Первый экран меняется от страницы к странице, а шапка остаётся: она работает как постоянная точка опоры.

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

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

• сразу после захода, когда проверяет, туда ли он попал;
• в середине страницы, когда захотел перейти в другой раздел;
• в конце чтения, когда решился позвонить и ищет номер.

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

Что должно быть в шапке сайта: 7 элементов

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

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

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

Что поставить в шапку: таблица по типам сайтов

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

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

Как сделать шапку сайта: пошагово

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

1. Выпишите три главных действия посетителя. Для ремонта квартир это «посмотреть цены», «посмотреть работы» и «позвонить». Шапка обслуживает именно их.
2. Откройте статистику. В Метрике найдите страницы, куда чаще всего ходят, и пункты меню с кликами. Пункты без кликов кандидаты на вылет.
3. Сократите меню до 4–7 пунктов. Названия берите из языка клиента: «Цены» вместо «Стоимость решений», «Работы» вместо «Портфолио проектов».
4. Определите один приоритетный контакт. Если бизнес живёт на звонках, номер самый заметный. Если на записи, заметнее кнопка.
5. Нарисуйте шапку сначала для телефона шириной 360 px. На этой ширине сразу становится ясно, что лишнее.
6. Добавьте версию для компьютера: логотип слева, меню по центру или рядом с логотипом, контакты справа.
7. Сделайте телефон ссылкой tel:, а мессенджеры ссылками на диалог. Проверьте нажатие на настоящем телефоне.
8. Настройте цель в Метрике: по справке цель «Клик по номеру телефона» находит номера по tel в ссылках.
9. Проверьте шапку на всех шаблонах: главная, услуга, статья, контакты. На внутренних страницах она часто ломается первой.

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

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

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

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

Условный пример. На экране видно около 660 px страницы. Шапка высотой 64 px занимает примерно 10%, а двухэтажная шапка на 130 px уже около 20%. Если сверху ещё висит плашка с акцией и снизу баннер про файлы cookie, для заголовка и кнопки остаётся половина экрана.

Что такое липкая шапка и нужна ли она

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

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

Анимацию в частично липкой шапке делают короткой: NN/g называет около 300–400 мс. Если шапка догоняет человека с задержкой или дёргается, она отвлекает сильнее, чем помогает.

У липкой шапки есть техническая ловушка: при переходе по якорю заголовок раздела оказывается под ней, и человек видит страницу без начала. Лечится одной строкой: свойство scroll-padding-top задаёт отступ под шапку. Заодно это закрывает требование WCAG 2.4.11: элемент, на котором стоит фокус клавиатуры, не должен полностью скрываться за липкой шапкой.

Как сделать меню в шапке сайта

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

Что работает в меню:

• слова, которые клиент вводит в поиске: «Цены», «Доставка», «Отзывы»;
• одно слово или два вместо длинной фразы;
• выпадающие списки только там, где они экономят клик, например услуги с подвидами;
• подсветка текущего раздела, чтобы человек понимал, где он находится.

Что мешает:

• пункт «Главная», если логотип и так ведёт на главную: место в шапке дорогое;
• «О компании», «Миссия», «Ценности», «Партнёрам», «Вакансии» в первом ряду, их лучше спустить в подвал;
• выпадающее меню, которое открывается при наведении и закрывается раньше, чем человек довёл мышь;
• одинаковые пункты в разном порядке на разных страницах.

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

Бургер-меню на телефоне: когда оно вредит

Бургер-меню — это значок из трёх полосок, за которым спрятана навигация, и прячет оно не только меню, но и часть трафика на разделы. В исследовании Nielsen Norman Group 2016 года участвовали 179 человек на 6 живых сайтах, и скрытая навигация проиграла видимой по всем измеренным показателям.

Данным десять лет, и с тех пор люди привыкли к бургеру. Новых сопоставимых цифр мы не нашли, поэтому читайте их как направление. Вывод NN/g при этом прикладной: на компьютере скрытое меню не использовать, на телефоне при четырёх пунктах и меньше показывать их открыто, а при большем числе скрывать часть и дублировать важное ссылками на странице.

Как собрать мобильную шапку на практике:

1. Оставьте снаружи логотип, значок телефона и бургер. Телефон не прячьте внутрь меню.
2. Сделайте значок телефона достаточно большим: цель нажатия ориентировочно 44×44 px.
3. Внутри меню разместите разделы, номер целиком, мессенджеры и кнопку.
4. Сделайте меню полноэкранным или почти полноэкранным, с крупными пунктами и понятным крестиком.
5. Подпишите значок словом «Меню», если аудитория старшего возраста. Подпись занимает немного места и снимает вопрос, что это за полоски.
6. Проверьте закрытие: крестик, нажатие на пункт и переход назад должны работать без сюрпризов.

Что значит «шапка съедает первый экран»

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

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

Посмотрите на свою шапку через такую таблицу.

Как считать, сколько звонков теряется из-за шапки

Потери из-за шапки считаются через цель «Клик по номеру телефона» в Яндекс Метрике, отдельно для мобильных устройств. По справке Метрики такая цель не заменяет коллтрекинг: она показывает клики, а до звонка доходит не каждый из них. Для сравнения двух версий шапки этого хватает.

Посчитаем на условном примере: клининг, 3 000 визитов в месяц с телефонов, номер спрятан в бургер. Цифры придуманы для расчёта, у вас они будут другими.

Разница в расчёте составила 32 400 ₽ в месяц только за счёт положения значка. Своё значение подставляйте из отчётов Метрики за прошлый месяц и сравнивайте с месяцем после изменения. Чтобы результат не исказила сезонность, смотрите на долю кликов, а не на их количество.

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

Мифы и ошибки про шапку сайта

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

«Чем больше контактов в шапке, тем лучше». Два телефона, почта, адрес, четыре мессенджера и режим работы не помещаются в строку и превращают шапку в стену текста. Покажите главный контакт, остальные уведите в подвал и на страницу контактов.

«Логотип должен быть большим, это же бренд». Крупный логотип в липкой шапке занимает экран на каждой странице. NN/g в разборе липких шапок отдельно советует не тратить высоту ради большого логотипа.

«Все привыкли к бургеру, значит, на компьютере он тоже нормален». Исследование NN/g показало обратное: на компьютере потери от скрытого меню выше, чем на телефоне. Экран там широкий, и прятать разделы незачем.

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

«Кнопка в шапке должна кричать». Если шапка спорит с главной кнопкой первого экрана, человек не понимает, что ему делать дальше. На одном экране должна быть одна главная кнопка, а вторая остаётся заметно спокойнее.

Чек-лист шапки сайта

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

1. Логотип слева и ведёт на главную.
2. На ширине 360 px шапка умещается в одну строку.
3. Телефон на мобильной версии нажимается и открывает набор номера.
4. Значок телефона лежит снаружи бургера.
5. В меню от 4 до 7 пунктов обычными словами.
6. Кнопка в шапке не повторяет главную кнопку первого экрана.
7. Шапка непрозрачна там, где под ней едет текст.
8. Якорные ссылки не прячут заголовки.
9. Цель «Клик по номеру телефона» работает и видна в отчёте «Конверсии».
10. Шапка одинаковая на всех шаблонах страниц.