Шапка сайта: телефон, кнопка и всё, что решает, позвонит посетитель или уйдёт

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

А между тем именно в шапке принимается значительная часть решений. Здесь человек понимает, куда попал, тот ли это город, чем занимается компания, как связаться и стоит ли вообще читать дальше. Ошибки в этой узкой полосе экрана стоят обращений — тихо и незаметно для владельца.

Разберём, из чего состоит рабочая шапка, чем она отличается на телефоне, какие элементы влияют на количество звонков и что чаще всего делают неправильно.

Что человек ищет в шапке в первые секунды

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

Куда я попал? Название компании и род деятельности.

Это мой город? Особенно важно для услуг с выездом и для магазинов с самовывозом.

Как связаться? Телефон, кнопка, мессенджер.

Где искать нужное? Меню или строка поиска.

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

Обязательные элементы

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

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

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

Телефон. Крупно, читаемо, кликабельно. На мобильном устройстве номер должен быть кнопкой, по которой сразу начинается звонок.

График работы. Хотя бы кратко: «пн–пт 9:00–18:00, сб 10:00–15:00». Это снимает часть звонков в нерабочее время и одновременно показывает, что вы работаете в субботу, если работаете.

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

Меню. Основные разделы, ограниченное количество пунктов.

Поиск. Обязателен для магазинов и больших каталогов, не нужен для сайтов с десятком страниц.

Элементы, которые часто добавляют зря

Три телефона подряд. Человек не понимает, куда звонить. Оставьте один основной, остальные — на странице контактов.

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

Длинный слоган. «Мы делаем ваш бизнес успешнее с 2008 года» не сообщает ничего и занимает место, где мог бы быть род деятельности.

Форма поиска на сайте из восьми страниц. Занимает место и никем не используется.

Переключатель валют или языков там, где они не нужны. Добавляет шума.

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

Огромный логотип. Съедает первый экран, из-за чего содержимое страницы начинается ниже видимой области.

Шапка на телефоне: отдельная задача

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

Что должно остаться видимым: логотип, город, кнопка звонка, кнопка меню. Всё.

Кнопка звонка — крупная. Не текстовая ссылка мелким шрифтом, а заметная кнопка, в которую попадёт палец.

Меню — иконкой, но с понятным поведением. Открывается быстро, закрывается очевидно, пункты крупные.

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

Отдельно проверять на маленьких экранах. На узких телефонах номер часто наезжает на логотип или переносится некрасиво.

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

Закреплённая шапка: когда полезна

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

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

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

Разумный компромисс — при прокрутке шапка уменьшается, оставляя только логотип, телефон и меню. Так она не мешает и всегда под рукой.

Как шапка связана со схемой продвижения 3 в 1

Наш подход опирается на три канала — поиск с учётом нейроответов, Яндекс.Справочник и 2ГИС, — и шапка обслуживает каждый из них по-своему.

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

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

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

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

Меню: сколько пунктов и в каком порядке

Меню — часть шапки, которая определяет, найдёт ли человек нужное. Несколько практических соображений.

Пять–семь пунктов в основном ряду. Больше человек не удерживает взглядом. Всё остальное уходит в выпадающие списки или в подвал.

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

Понятные названия вместо придуманных. «Услуги», «Цены», «Работы», «Контакты» ищутся глазами мгновенно. «Наши компетенции», «Экспертиза», «Решения» требуют размышления, а размышлять никто не хочет.

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

Контакты последним пунктом справа. Это привычное место, и там их ищут.

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

Не прятать важное в «Ещё». Всё, что попало под такой пункт, посещается в разы реже.

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

Доверие в шапке: что стоит добавить, а что нет

Шапка — не место для длинных доказательств, но одна-две короткие детали работают.

Срок работы компании. «На рынке с 2007 года» — короткая строка, которая заметно влияет на доверие, особенно в дорогих услугах.

Ключевое отличие одной фразой. «Собственное производство», «Выезд в день обращения», «Работаем по всей области». Не слоган, а факт.

Мессенджеры рядом с телефоном. Только если на них реально отвечают быстро. Иконка мессенджера, где никто не читает сообщения, работает против вас.

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

Как проверить свою шапку

Простой тест, который занимает пять минут.

1. Откройте не главную, а любую внутреннюю страницу сайта — например, описание услуги.
2. Покажите её человеку, который не знает вашу компанию, и дайте три секунды.
3. Спросите: чем занимается компания, в каком она городе, как позвонить.

Если хотя бы на один вопрос он не ответил, шапку нужно править.

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

Третий — сверка. Откройте рядом сайт, карточку в Яндекс Картах и карточку в 2ГИС. Телефон, график и адрес должны совпадать во всех трёх местах.

Как измерить эффект от доработки

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

Нажатия на телефон. Настройте отдельную цель в Яндекс.Метрике — это самый чувствительный показатель.

Нажатия на кнопку целевого действия. Отдельная цель.

Доля отказов на внутренних страницах. Часто снижается после появления в шапке рода деятельности и города.

Карта кликов. Яндекс.Метрика показывает, куда люди действительно нажимают в шапке. Иногда выясняется, что основной трафик уходит в раздел, о котором никто не думал.

Раздельно телефоны и компьютеры. Эффект почти всегда сильнее на мобильных.

Типичные ошибки

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

Нет города. Посетитель считает, что вы не из его региона, и уходит.

Логотип не ведёт на главную. Мелочь, которая ломает привычное поведение.

Разные телефоны на разных страницах. Остаток от старых доработок, из-за которого часть звонков уходит в никуда.

Шапка не помещается на телефоне. Пункты меню наезжают друг на друга, номер переносится, кнопка не нажимается.

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

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

Слишком светлый или мелкий текст контактов. Оформление, красивое на макете, часто оказывается нечитаемым на телефоне при дневном свете.

Анимация в шапке. Движущиеся элементы отвлекают от единственного действия, ради которого посетитель туда смотрит.

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

Что в итоге

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

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

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