Один из первых элементов, который пользователь видит на сайте, – это шапка, или хедер (header). Обычно она включает в себя и меню, что делает ее еще более значимым элементом проекта. Но, несмотря на значимость, не все уделяют ей должное внимание. В данной статье мы дадим полную инструкцию по созданию сильнейшей шапки, которая обеспечит высокую конверсию путем улучшения юзабилити.
Юзабилити – это пользовательский опыт. Показывает, насколько удобен ваш сайт пользователю, насколько легко найти нужную ему информацию. Мало иметь привлекательный дизайн, нужно, чтобы пользователю было интуитивно понятно, куда нажимать, где и что искать.
Мы рекомендуем делать шапку сайта максимум в 200 пикселей, а лучше – 150 пикселей. Ошибка многих владельцев – слишком высокий хедер, который закрывает практически всю основную информацию, из-за чего сложно изучать остальной контент, расположенный на свободной части монитора. Этой проблеме нужно уделить особое внимание на десктопной версии сайта, так как на мобильном устройстве более вытянутый по высоте экран. К слову, на смартфонах шапка может разделяться на две части, об этом мы расскажем чуть ниже.
При скроллинге страницы хедер должен всегда оставаться в верхней части экрана, то есть пользователь постоянно должен видеть контакты и формы, которые он может быстро заполнить, а также навигацию. Соблюдение этого правила сильно повышает конверсию, поэтому уделите этому внимание. Фиксированная шапка должна быть меньше основной – максимум 150 пикселей.
Именно такой вариант используется у нашего клиента – агентства недвижимости в Турции AZPO. В качестве основной мы использовали большую информативную шапку.
При скроллинге она становится меньше и не мешает просмотру контента на странице. В то же время пользователь постоянно видит номера телефонов, меню и кнопку заказа обратного звонка.
Здесь осталась только самая нужная и важная информация, нет ничего второстепенного. Иконки «добавить для сравнения», «добавить в избранное» постоянно перед глазами пользователя, поэтому при желании он всегда может перейти на нужные страницы и просмотреть отмеченные им объекты.
Фиксированная шапка есть и у маркетплейса AliExpress.
Источник: aliexpress.com
Хедер – это практически сердце сайта. Именно здесь пользователь в первую очередь ищет меню, контакты, дескриптор и логотип бренда. Содержание шапки может меняться в зависимости от типа проекта. Если у вас интернет-магазин, в этом блоке должны быть данные о корзине, сравнение товаров, быстрый заказ, полное меню, контакты, адреса, информация о доставке и оплате. Но если у вас маркетплейс, адрес вашего офиса и ваши номера телефона не нужны. Вы же не будете принимать звонки и заказы по телефону, маркетплейсы ориентированы на самостоятельное оформление заказов покупателями.
Информацию, указанную в хедере, нужно продублировать в подвале (в конце страницы). Так пользователь снова увидит те второстепенные вещи, которые были на первом экране и что было удалено из фиксированного варианта шапки. Мало кто будет подниматься наверх, чтобы еще раз изучить полную версию. Да и со стороны юзабилити (читайте: удобства) лучше сразу показать пользователю то, что его может с высокой долей вероятности заинтересовать. В подвале даже можно дать более подробное описание некоторым пунктам меню.
Сложно перечислить все элементы, которые должны быть в шапке, так как в зависимости от тематики проекта ответ может измениться. Но мы постараемся дать вариант, который с большей вероятностью подойдет практически любому проекту.
Если мы рекламируем какую-то компанию, то должны указать ее логотип. А где это лучше всего сделать? Конечно же, в шапке. Рекомендуем его также добавить в фиксированную версию хедера.
Это краткое описание компании: девиз, слоган или указание деятельности с уникальным преимуществом. Дескриптор – это то, чем вы цепляете. Это ваше конкурентное преимущество. Не стоит путать его с заголовком. Заголовок чаще всего содержит не только ключевое преимущество, но и оффер, ваше главное предложение, которым вы усиливаете позиции компании. Оффер может со временем меняться, дескриптор же, если и меняется, то раз в несколько лет (и то не всегда). Как правило, содержит 3–4 слова, емко описывает суть деятельности компании. Обычно дескриптор размещают под логотипом.
Примеры:
Как мы отметили выше, в некоторых случаях они не нужны, например если у вас маркетплейс или агрегатор. Но для большинства других типов коммерческих сайтов указание контактов для связи обязательно. Стоит указать следующие данные:
Это каталог ваших товаров и услуг, размещенных удобным для клиента способом. Если у вас интернет-магазин, товары должны быть разделены по категориям и подкатегориям для упрощения поиска.
Источник: aliexpress.com
Подумайте, какая информация наиболее важна для потенциальных покупателей. Что они ищут прежде всего? Например, если у вас интернет-магазин, пользователю важны правила возврата, доставки, способы оплаты, отзывы покупателей, информация о компании. Разместите эти данные в шапке сайта, чтобы потенциальным клиентам было легче их найти.
Источник: fabrikaokon.ru
Клиенты, помимо преимуществ компании, хотят еще получить реальные доказательства того, что с вами можно работать. Чаще всего они получают эту информацию из социальных сетей, мессенджеров, сервисов отзывов или каталогов организаций. Люди доверяют людям. Поэтому им важно увидеть подтверждение порядочности компании от реальных пользователей или авторитетного издания. То есть от тех, кому они доверяют. Если у вас есть страницы в социальных сетях, разместите ссылки на них.
Если вам есть чем гордиться, опубликуйте эту информацию в шапке. Ваш канал популярен на YouTube? Вас показывают по телевизору? Вы получили награду от авторитетного издания? Ваш проект возглавил важный рейтинг? Вас рекомендуют экспертные организации? Разместите эти данные в хедере, и вы заметите мгновенный эффект.
В мобильной версии место ограничено, поэтому в хедере нужно разместить только главное: логотип, дескриптор, контакты и одну большую кнопку меню, при клике по которой будет доступна остальная информация из десктопной версии.
Он поможет пользователям быстрее найти нужную им информацию. Важно, чтобы поиск по сайту работал корректно и использовал правильные алгоритмы. При наборе ключевых слов результаты лучше сразу выдавать в выпадающем окне, чтобы не перенаправлять клиента на другую страницу. Любые действия пользователей нужно упрощать.
Это актуально для международных проектов. Посетители должны иметь возможность переключиться на тот язык, который они лучше понимают.
Крупным порталам важна регистрация пользователей. Поэтому на первом экране на самом видном месте размещают кнопку входа в личный кабинет. Этот пункт особенно важен в тех видах бизнеса, где высокий LTV (жизненный цикл клиента) и есть постоянные продажи.
Мы рассказали о важнейшем элементе любого сайта – шапке. При грамотном использовании наших рекомендаций вы сможете не просто удержать пользователя, но и сконвертировать его в покупателя с большей вероятностью. С помощью хорошей шапки вы опередите конкурентов. Ее можно сравнить с картой торгового центра, по которой посетители ориентируются: без нее можно легко заблудиться, особенно если торговый центр большой.
Хедер невозможно создать сразу идеальным, поэтому тестируйте, изучайте аналитику и определяйте, какие версии дают лучшую конверсию. Если же вы хотите создать новый сайт, вам нужна оптимизация или разработка продающего лендинга, обращайтесь в «Поисковую индустрию». Наши специалисты с многолетним опытом помогут вам увеличить объем продаж.
Если у вас есть вопрос
