Шапка и подвал — два главных структурных элемента сайта, от правильного оформления которых зависит визуальная привлекательность веб-ресурса, конверсия и ранжирование поисковыми системами. Они способны повысить доверие к компании и увеличить продажи. Рассказываем о том, что это такое и из чего они состоят.
Шапка сайта: определение
Хедер — это блок, расположенный в верхней части сайта и отвечающий за привлечение внимания, информирование и навигацию пользователя веб-ресурса. Шапка помогает посетителю свободно перемещаться по разделам и находить нужную информацию. Она находится в начале сайта и позволяет пользователю оценить соответствие контента его потребностям с первых секунд.
Основные элементы
Четкой структуры у хедера нет, некоторые элементы появляются в зависимости от типа сайта, специфики темы и отдельных характеристик целевой аудитории. Чаще всего в его состав включают:
- логотип компании, позволяющий найти сайт конкретного бренда;
- меню, обеспечивающее быстрый переход между страницами;
- контактные данные для получения справочной информации.
Для повышения юзабилити рекомендуется размещать контактный номер в формате доступном для быстрого набора на телефоне, чтобы пользователю не приходилось его переписывать.
Подобный формат актуален и для электронной почты.
Коммерческие веб-ресурсы
Для сайтов с электронной коммерцией характерно наличие учетных записей клиентов, поэтому на таких веб-ресурсах в шапке размещаются кнопки регистрации и входа. Их можно заменить кнопками, призывающими к действию «Присоединиться», «Купить прямо сейчас» и т. д.
Дополнительным элементом для интернет-магазинов является корзина. Он может появляться после авторизации пользователя в личном кабинете.
Многостраничные сайты
Визуально перегруженный хедер может отпугнуть пользователя, поэтому на больших веб-ресурсах делают двойное меню. Это позволяет сократить путь перемещения между разделами и сделать меню более структурированным. В некоторых случаях для этого встраивают поисковую строку.
Сайты с графическим контентом
Чтобы сделать акцент на контенте веб-ресурсов, состоящем из качественных изображений или дизайнерских работ, в шапку можно встроить яркую фотографию. Это сразу привлечет внимание.
При прокручивании страницы вниз изображение свернется и шапка примет лаконичный вид.
Одностраничные сайты и лендинги
В последнее время большую популярность приобретают сайты, шапка которых состоит из логотипа и формы меню, получившей название «гамбургер» — значок из трех горизонтальных полосок, при нажатии на который появляется выбор скрытых функций. Такое оформление не отвлекает человека от контента и оправдано для небольшого сайта. Однако крупным веб-ресурсам шапка с полноценными пунктами меню и кнопками призыва позволяет получить больший процент конверсии.
Подвал сайта: определение
Футер ― раздел, который видит посетитель в конце веб-страницы, после изучения её содержимого. Он содержит полезную информацию для пользователя и партнеров компании, призыв к действию и полезные ссылки.
Примеры
Подвал сайта отличается от цвета основной страницы или отделяется горизонтальной линией. Основными элементами являются:
- логотип;
- информация о компании;
- указание авторских прав;
- дублируются контакты;
- карта сайта, которая позволяет пользователю перейти в следующий раздел, не возвращаясь к началу;
- ссылки на социальные сети сообщают пользователю о востребованности компании.
Компании с офисами в нескольких городах, могут разместить здесь все адреса или ссылку на контакты.
Интернет-магазины указывают доступные формы оплаты товаров и услуг и информацию о возврате. Это вызывает у пользователей доверие к веб-ресурсу.
Онлайн-сервисы с корпоративными блогами могут заинтересовать пользователей размещением ссылок на самые интересные статьи.
Доверие к компании можно повысить и с помощью указания возраста фирмы. Главное, не забывать обновлять эти данные каждый год.