Создание шапки сайта — рекомендации по юзабилити и разбор примеров

записки технаря

Что вставлять в заголовок: основные элементы.

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

Логотип

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

Логотип в шапке страницы

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

Описание компании

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

Если вы не можете сделать его слишком длинным, это поможет.

Описание направления деятельности компании в логотипе

Если ваш текст длинный, мы рекомендуем размещать его справа от логотипа:

 

Описание направления компании справа от логотипа

 

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

 

Уникальное торговое предложение в шапке

Чтобы узнать больше о том, как создать UTP, щелкните здесь.

 

Область деятельности и / или доставки

 

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

Информация о доставке в заголовке

Если вы ведете бизнес в нескольких регионах, также обратите внимание, чтобы об этом была информация

 

Информация о нескольких регионах в заголовке

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

Когда вы входите на свой веб-сайт, не забудьте использовать раскрывающийся список, чтобы указать, что вы работаете в разных областях.

Выбор рабочего региона в шапке

Адрес

 

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

Адрес заголовка

Если у вас несколько офисов / магазинов, вы должны отобразить их во всплывающем или раскрывающемся окне, как в примере ниже:

 

Несколько адресов в шапке страницы

Форма поиска

 

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

Форма поиска по заголовку

Контактная информация

Для быстрого контакта мы рекомендуем вам указать свой номер телефона вместе с часами работы справа от заголовка, чтобы получить представление о ваших клиентах (например, тех, кто находится за пределами региона). Если вы работаете в сегменте b2b, также должен содержать адрес электронной почты.

 

Номер телефона и поведение в заголовке страницы

Мы не рекомендуем указывать несколько номеров телефонов в заголовке, чтобы не запутать пользователей. Если вы это сделаете, вы хотите, чтобы 1-2 числа были в заголовке, а остальные параметры — в нижнем колонтитуле.

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

 

Ссылки на Messenger в шапке страницы

Форма заказа на возврат

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

Форма заказа обратного звонка в шапке страницы

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

Личный кабинет

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

Ссылка на личный кабинет в шапке страницы

 

Как должен выглядеть онлайн-аккаунт

Корзина

 В интернет-магазине полезно добавить ссылку на корзину в заголовке страницы. Если позволяет место, вы можете дополнительно отобразить количество добавленных товаров и сумму заказа:

 

Ссылка на корзину в шапке

Избранное — сравнительный список

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

 

Ссылки на избранное и сравнительный список в заголовке

Версия для слабовидящих

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

Ссылка на версию для слабовидящих

Горизонтальный заголовок меню

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

Какие разделы должны быть в горизонтальном меню:

Каталог товаров или услуг . Вы можете добавить общую ссылку или список подкатегорий, если их несколько. Акции и акции . Мало кто отказывается принимать мягкие игрушки. Портфолио и / или отзывы клиентов . Этот раздел необходим для повышения авторитета сайта и компании в целом. Платежи и доставка, Гарантии и выплаты или на любой другой странице с нашими условиями. Блог, Новости или другие разделы с информацией о продуктах или услугах. Страница О компании . Это также необходимо для повышения лояльности пользователей к компании. Страница контактов. Дает более подробную информацию отадреса и телефоны.

Это только основные разделы. В зависимости от тематики страницы у вас будет собственный набор популярных ссылок. Например, для фитнес-зала вы можете захотеть разместить ссылку на страницу расписания, а для b2b вы можете захотеть включить раздел с информацией об условиях сотрудничества. Не добавляйте ссылки меню на: . Политика конфиденциальности (подробнее о том, чем она занимается здесь) или другие юридические документы; вакансии; карта сайта

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

Как лучше всего создать горизонтальное меню в шапке:

Мы не рекомендуем больше никаких меню в меню. 5-7 ссылок для облегчения понимания. Исключением может быть список категорий в каталоге & mdash ;, тогда создаются два меню. Первое меню со вспомогательными разделами находится над заголовком страницы, а второе меню со списком категорий внизу:

Два меню в заголовке страницы

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

Скрытые разделы в шапке страницы

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

Выделение разделов в шапке страницы

Чего не следует помещать в заголовок

Теперь поговорим о тех элементах, которые лучше не включать в заголовок.

Социальные сети

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

Поле обзора социальных сетей для домашней страницы

Большие изображения

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

Картинки в шапке страницы

Лучше ограничиться цветным фоном и не перегружать заголовок страницы графикой.

Длинный форматированный текст

Рекомендуется включать в заголовок слоган УТП или компании, но лучше поместить все преимущества в основную часть страницы, чтобы не добавлять слишком много текста в заголовок. Это не способ сделать это:

 

Длинные описания в шапке страницы

Советы по созданию заголовка веб-сайта

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

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

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

Используйте цветной фон для заголовка страницы

Дизайн в едином стиле . Заголовок вашей страницы должен быть и выглядеть одинаково на всех страницах вашего сайта, чтобы вы могли легко настраивать таргетингстраница. Блокировать блокировку при прокрутке страницы вниз . Лучше «заблокировать» экран, чтобы основная информация всегда была видна, и пользователь мог ее быстро найти.

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

Компактная версия заголовка страницы

И вообще, мы рекомендуем не оставлять заголовок пустым или, наоборот, перегружать его информацией, чтобы блок приносил пользу новым посетителям сайта. Найдите свой центр. =)

Заключение

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

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

Оцените статью