Как создать цепляющую шапку сайта — советы в блоге

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

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

Когда пользователь переходит на веб-страницу, его взгляд в первую очередь останавливается на шапке сайта. Этот элемент позволяет сразу оценить уровень функциональности сервиса и удобство его использования.

Все разработчики и дизайнеры разделяют главную страницу сайта на три основные части:

1. Шапка (header) — информационный блок в верхней части экрана.

2. Тело (body) — основная и самая большая часть страницы, где размещают продающие заголовки, изображения, видео, акции и другие материалы.

3. Подвал (footer) — завершающий блок веб-ресурса, который предназначен для публикации сжатой, но важной информации.

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

Пример реализации с помощью IntecUniverse

Этот элемент выполняет следующие функции:

1. Привлечение внимания. Как правило, именно эту область пользователи рассматривают и изучают дольше всего. Хорошо оформленная и логично продуманная шапка заинтересует покупателей, и они проведут на сайте больше времени.

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

3. Навигация. Ссылки помогают быстро найти нужный раздел и перейти к нему.

Сегодня онлайн-сервисы ожесточенно конкурируют за внимание аудитории. При создании сайта важно учесть потребности клиента и предоставить ему комфортное и интересное взаимодействие с ресурсом. Существует ряд исследовательских методик, в ходе которых программный алгоритм определяет направление движения взгляда человека по странице. Рассмотрим, как пользователь может оценивать сайт за 4 секунды.

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

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

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

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

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

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

Слева лучше разместить:

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

2. Краткое описание. Если бренд еще не известен, над логотипом можно разместить небольшое обозначение сферы деятельности из двух-трех слов. Например, «Ветеринарная клиника», «Магазин товаров для дома» и так далее. Более подробное описание бизнеса лучше расположить в теле сайта.

3. Гамбургер-меню. Компактное выпадающее меню — хороший дизайнерский ход, когда нужно немного разгрузить шапку главной страницы.

Справа расположите следующие элементы:

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

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

3. Личный кабинет. При его наличии расположите иконку перехода в правом верхнем углу страницы.

4. Корзина. Убедитесь, что она выделена на общем фоне — это повышает вероятность успешного оформления заказа.

В центре разместите:

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

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

1. Соблюдайте меру, не перегружайте оформление и сосредоточьтесь на ключевых элементах страницы.

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

3. Ограничьте количество элементов в хедере до 5–7 для удобства восприятия.

4. Добавьте кликабельные ссылки на мессенджеры, чтобы пользователи могли легко вам написать.

5. Если шапка переполнена элементами, разместите информацию о социальных сетях в футере.

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

7. Используйте четкие и легко читаемые шрифты.

8. Добавьте в хедер элементы призыва к действию — кнопки, ссылки или небольшие баннеры, чтобы мотивировать пользователей к выполнению определенных шагов на сайте.

9. Закрепите шапку, чтобы она оставалась на виду при прокрутке страницы.

Рассмотрим один из лучших вариантов составления качественной шапки на примере готового сайта IntecUniverse. Решение позволяет создавать интернет-магазины на «1С-Битрикс» с кастомным дизайном. Оно идеально подойдет для быстрого запуска современного и многофункционального ресурса, а также не потребует лишних расходов и привлечения сторонних специалистов.

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

IntecUniverse предлагает готовые компоненты для главной и внутренних страниц — всего более 50-ти элементов под решение самых разнообразных задач, в их числе:

• Услуги. Нешаблонно расскажите о сервисе, который вы предоставляете.

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

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

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

• Тарифы и цены. Покажите, из чего складывается стоимость ваших услуг.

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