Как оформить шапку сайта, чтобы посетители находили контакты и меню

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

Какие элементы шапки помогают связаться и купить

Хедер (шапка) — верхняя часть сайта с основным меню, логотипом и контактами. Каждый элемент решает свою задачу. Навигация показывает структуру сайта, логотип и слоган работают на узнаваемость, а контакты и кнопка действия ведут к заявке.

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

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

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

Разложите элементы по смысловым группам и не сваливайте все в одно место.

Что оставить в шапке мобильной версии

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

На узком экране телефон, как правило, важнее навигационных ссылок. Поэтому после логотипа обычно идет телефон, а меню размещают правее или ниже.

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

Это «гамбургерное» меню экономит место на экране и дает доступ ко всем разделам сайта (beseller.by). Мобильную шапку удобно рисовать отдельным экраном, и для такой работы подойдет веб-дизайн с макетами под разные устройства.

Все, что не ведет к звонку, прячется под значок.

Ошибки, из-за которых шапка мешает заказу

Главный риск: нестандартная структура шапки. Не все посетители находят элементы в непривычных местах, и заявок становится меньше.

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

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

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

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

Править верстку самим неудобно? Тогда проектирование и доработку шапки вместе с дизайном сайта можно отдать студии.

Шапка работает, когда посетитель находит нужное там, где привык

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

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