Что такое шапка для сайта
Header и footer: основные принципы создания шапки и подвала сайта
Шапка и подвал сайта: что такое, назначение
Некоторые элементы веб-страницы более важны для создания первого впечатления, юзабилити и восприятия дизайна сайта в целом. Такими элементами является header и footer.
Пример футера сайта:
Что размещают в хедере сайта
В шапку сайта могут помещать следующие разделы:
Не все элементы должны присутствовать в хедере. Дизайн шапки профиля ограничивается только представлениями дизайнера, нет каких-то обязательных объектов. Однако, некоторые элементы существенно повышают уровень конверсии: если в шапке размещены контакты и кнопка для обратной связи, вероятность отклика пользователя значительно повышается, так как эти элементы видны клиенту в первую очередь.
Рассмотрим несколько примеров хедеров и остановимся на их особенностях.
Примеры дизайна шапки сайта
Классический вид
Двойное меню
В тех случаях, когда ресурс крупный и содержит множество страниц, прибегают к такому приему, как двойное меню.
В интернет-магазине как правило большое количество товаров и категорий, поэтому магазин «Эльдорадо» разбил меню на две части: основное и выпадающее при наведении.
Большое изображение: фото личности или продукта
Например, так выглядит сайт Ани Лорак. Внимание обращено на личность певицы, поэтому размещаются ее фотографии крупным планом. При скроллинге шапка трансформируется и превращается в обычную горизонтальную линию:
Анимация
Чтобы сделать дизайн более привлекательным и запоминающимся, некоторые дизайнеры прибегают к нестандартным решениям и вставляют в хедер анимированные изображения. На примере качается инструмент для сбора металла:
Такой подход тоже имеет место быть, однако, такие анимации занимают много места, поэтому необходимо заранее продумать расположение элементов.
Меню «гамбургер»
После нажатия на значок, появляется страница с меню:
С точки зрения юзабилити сайта нельзя сказать, что это плохой вариант. Такое меню пришло из мобильной разработки и уже привычно пользователям. Гамбургер подойдет промо-сайтам, где основной акцент идет на качественное представление продукта с помощью фото или видео. Для интернет-магазинов такой вариант не подходит, так как клиенту важно иметь в быстром доступе корзину, избранные товары и поле поиска.
Шапка на главном экране
Иногда дизайнеры не выделяют шапку сайта как отдельный блок и встраивают ее в главный экран. Обычно это минималистичное решение, где представлены только ссылки на основные разделы сайта и логотип компании. Особенно такой прием используется в дизайне лендингов.
Шапка-иллюстрация
Иногда дизайнеры отходят от стандартного представления шапки профиля и встраивают навигацию в виде иллюстрации, где ссылки размещены на отдельных объектах. Например:
Это интересное дизайнерское решение, однако, клиент не сразу понимает, как взаимодействовать с интерфейсом, поэтому нужно использовать такие приемы с осторожностью.
Стилизованная шапка
В том случае, если дизайн сайта выполнен в каком-то определенном стиле, нередко шапку сайта также делают стилизованной. На этом примере в хедере расположены известные здания Москвы, с ссылками на страницы с описаниями:
Некоторые бренды под каждый праздник разрабатывают новую шапку для создания атмосферы праздника на сайте. Мы писали об этом в статье, посвященной подготовке сайта к Новому году.
Страница без шапки
Некоторые дизайнеры отходят от традиционных понятий дизайна и не делают шапку сайта в принципе. Например, заменяют верхний блок необычной навигацией, как на этом примере:
Очень сложно оценивать такие решения с точки зрения юзабилити. После перехода на сайт первое время нужно понять, как устроена навигация и что сайт предлагает посетителям. О том, что лучше выбрать, креативность или юзабилити, читайте здесь.
Основные принципы создания хедера
Создавая дизайн хедера, веб-дизайнеру нужно помнить, что это первый элемент, который видит пользователь, и один из самых используемых в интерфейсе. Поэтому необходимо подходить к созданию шапки с особой тщательностью и помнить о юзабилити.
Как оформить шапку, которая будет удобна для клиента, вписываться в стиль всей страницы и способствовать увеличению конверсии? Дадим несколько советов по созданию дизайна хедера.
1. Обращайте внимание на типографику
В первую очередь клиент читает названия разделов и предоставленную компанией информацию: контактные данные, интересные предложения. Поэтому нужно выбрать читабельный шрифт, который не будет ухудшать восприятие.
2. Принимайте во внимание стиль сайта и его назначение
3. Обращайте внимание на расположение элементов
4. Уделите внимание кнопке и веб-форме обратной связи
5. Сделайте хедер фиксированным, если это не нарушает общую концепцию дизайна
Этот пункт больше относится к разработке, однако, дизайнер тоже должен его учитывать. Фиксация хедера означает его перемещение вместе со скроллингом. На нашем сайте при скролле шапка как будто прилипает к верху страницы и всегда находится перед глазами пользователя:
Зачем нужен подвал сайта
1. Визуально завершает дизайн
Бесконечный скроллинг давно не приветствуется в дизайне сайта, так как создает у пользователя ощущение незавершенности. С помощью подвала сайта мы даем клиенту понять, что контент закончен и предлагаем перейти к следующему разделу.
2. Помогает совершить целевое действие
Дополнительные контактные данные или призыв к действию помогает подтолкнуть клиента к совершению покупки или заказу услуги, подписке на рассылку.
3. Направляет пользователя
Дочитав очередную статью пользователь может не возвращать к шапке сайта, а найти нужную информацию в футере.
4. Предоставляет пользователю нужную информацию о компании
Нередко в футере размещают сведения о компании, документы и сертификаты, политику конфиденциальности и прочее.
Примеры дизайна подвала сайта
Рассмотрим, какие элементы могут размещаться в подвале сайта и какой подвал может быть с точки зрения дизайна.
Карта сайта
Контактная информация
В отличие от шапки сайта, в подвале можно предоставить более подробные сведения: несколько телефонов для связи, полный адрес компании и ее расположение на карте. Например, в нашем футере мы разместили адрес и схему проезда до нашего офиса в Москве:
Элементы навигации
Чтобы улучшить навигацию, иногда в футере размещают другие элементы, помимо ссылок на разделы, например, кнопку «наверх», чтобы клиенту не пришлось прокручивать страницу обратно:
Ссылки на социальные сети
Призыв к действию
Чтобы подтолкнуть клиента к целевому действию, некоторые дизайнеры размещают в подвале блок с призывом к действию:
Стилизованное оформление
Иногда сайт завершают просто красиво оформленным подвалом с контактными данными:
Без футера
Как и в случае с хедером, некоторые решения не предусматривают использования подвала сайта:
Основные принципы создания футера
Правильно оформленный футер может не только украсить сайт и привести страницу к логическому завершению, но и принести клиенту пользу, увеличить уровень конверсии сайта.
Несколько рекомендаций по разработке дизайна футера.
1. Делайте футер отличным от общего контента сайта
Чтобы выделить элемент навигации, обратить внимание на контактные данные, дизайнеры обычно делают футер темного цвета или как-то выделяют его из общего фона.
2. Обращайте внимание на типографику
Как и при создании хедера, нужно использовать хорошо читаемые шрифты, следить за интервалами и отступами, чтобы ссылки не сливались друг с другом.
3. Учитывайте важность иерархии
При разработке футера разбивайте его на несколько блоков, сделайте понятными списки и заголовки разделов, учитывайте границы между элементами. Так пользователь легко разберется в содержимом и найдет нужную информацию.
Студия дизайна IDBI уделяет особое внимание разработке header и footer сайта. Мы понимаем, что не будет второго шанса произвести первое впечатление, поэтому подходим со всей тщательностью к содержимому этих двух важных элементов сайта. Примеры наших работ можно посмотреть в разделе «Портфолио».
Создание шапки сайта: рекомендации по юзабилити и разбор примеров
Раннее мы уже рассказывали о том, каким должен быть подвал сайта, про который часто забывают владельцы сайта. Нынешняя статья посвящена более заметному блоку — шапке сайта.
Шапка сайта или хедер (от анг. header — заголовок) — это элемент навигации, который находится в самом начале страницы. Это первый элемент, на который обращает внимание пользователь при переходе на сайт. Именно поэтому важно проработать его оформление.
Зачем нужна шапка сайта:
В целом шапка сайта помогает в формировании первого впечатления о сайте, поэтому важно продумать, какие элементы будут располагаться в данном блоке. А мы в этом поможем.
Что разместить в шапке сайта: основные элементы
Предлагаю рассмотреть элементы как для сайтов услуг, так и для интернет-магазинов, поэтому лучше корректировать список в зависимости от тематики вашего сайта.
Логотип
Элемент, который лучше располагать слева — такое расположение более привычное для пользователей и легче воспринимается. Все надписи в логотипе должны быть читабельны и разборчивы.
Описание направления деятельности компании
Данная информация поможет сориентировать нового пользователя, что он зашел на нужный сайт. Описание должно быть кратким и емким. Если удалось сократить его до нескольких слов, то можно сделать надпись частью логотипа:
Если же текст длинный, рекомендуем расположить его справа от логотипа:
Дополнительно в описании направления деятельности компании стоит указать УТП (уникальное торговое предложение), которое поможет выделиться среди конкурентов. Например:
Подробнее о том, как сформировать УТП, рассказали здесь.
Регионы работы и/или доставки
Данная информация существенно облегчает жизнь пользователям и помогает отсеять нецелевую аудиторию. Посетители редко ищут информацию об условиях оплаты и доставки заранее, поэтому сталкиваются с ними на этапе оформления заказа. Если вы работаете в одном регионе, то лучше сразу рассказать об этом в хедере.
Если работаете в нескольких регионах, также укажите об этом:
Дополнительно можно настроить автоопределение города посетителя сайта. Кроме того, рекомендуем добавить соответствующий выпадающий список городов, чтобы показать, что вы работаете в разных регионах. Информацию стоит расположить рядом с логотипом:
Адрес
Если ваш бизнес предполагает встречи с клиентами в офисе или магазине, лучше указать адрес в шапке сайта.
Если у вас несколько офисов/магазинов, то стоит выводить их в виде всплывающего окна или выпадающего списка, как в примере ниже:
Форма поиска
Для крупных сайтов с большим количеством товаров или услуг рекомендуем добавить форму поиска. Расположить ее лучше в шапке сайта, чтобы пользователи могли быстро ее найти.
Подробнее о том, как организовать поиск на сайте, читайте в данной статье.
Контактная информация
Для быстрой связи со специалистами рекомендуем разместить в правой части шапки сайта номер телефона и рядом с ним режим работы сотрудников, чтобы сориентировать клиентов (например, из других регионов). Если работаете в b2b-сегменте, тоже стоит указать email.
Не рекомендуем располагать несколько номеров телефона, чтобы не путать пользователей. В таком случае в шапке лучше расположить 1-2 номера, а остальные способы связи «убрать» в подвал сайта.
Если предусмотрена связь через мессенджеры, рекомендуем разместить быстрые ссылки на приложения рядом с номером телефона:
Форма заказа обратного звонка
Необходима для тех пользователей, которые по каким-либо причинам не смогли позвонить в компанию и хотят, чтобы им перезвонили. Ссылку на форму лучше расположить рядом с контактной информацией, а саму форму выводить во всплывающем окне.
Личный кабинет
Если на сайте предусмотрен личный кабинет, то ссылку на него лучше расположить в шапке сайта в правом верхнем углу, где все привыкли ее искать.
О том, каким должен быть личный кабинет, рассказали в данной статье.
Корзина
Для интернет-магазинов полезно будет дать в хедере ссылку на корзину. Если позволяет место, можно дополнительно отображать количество добавленных товаров и сумму заказа:
Избранное и список сравнения
Ссылки на данные разделы можно показать рядом со ссылкой на корзину, чтобы они всегда были на виду.
Версия для слабовидящих
Переход на версию для слабовидящих обязателен для медицинской тематики, поэтому стоит добавить соответствующую ссылку в шапке сайта. Для удобства кнопку стоит расположить в правой части хедера:
Горизонтальное меню шапки сайта
Горизонтальное меню — важный элемент хедера, поэтому поговорим о нем отдельно, так как рекомендаций будет немало.
Какие разделы стоит разместить в горизонтальном меню:
Это лишь основные разделы. В зависимости от тематики сайта у вас будет свой набор популярных ссылок. Например, для фитнес-зала стоит показать ссылку на страницу с расписанием работы, а для b2b указать раздел с информацией об условиях сотрудничества.
Не стоит добавлять в меню ссылки на:
Перечисленные разделы достаточно показать в подвале сайта, так как они редко нужны пользователям и будут только нагружать хедер.
Как лучше оформить горизонтальное меню в шапке сайта:
Рекомендуем располагать в меню не более 5-7 ссылок, чтобы оно легче воспринималось. Исключение можно сделать для списка категорий каталога — тогда формируется два меню. Первое меню со вспомогательными разделами располагается над шапкой сайта, а второе меню со списком категорий — внизу:
Не рекомендуем скрывать ссылки под кнопкой «Еще» или многоточием, так как пользователи пропускают данную информацию. Лучше объединять похожие ссылки в группы с более понятными заголовками и делать выпадающие списки.
Не стоит выделять какой-либо раздел цветным фоном, чтобы не дезориентировать пользователей при перемещении по сайту. Обычно цветом выделяется раздел, в котором находится пользователь.
Что не стоит размещать в шапке сайта
Теперь поговорим о тех элементах, которые лучше убрать из шапки сайта.
Ссылки на соцсети
Не стоит сразу уводить пользователей с сайта, поэтому рекомендуем рассказать об аккаунтах в соцсетях ниже или оставить ссылки только в подвале сайта. Вот неплохой пример отдельного блока с постами из соцсетей для Главной страницы:
Большие изображения
Шапка сайта должна быть компактной, чтобы не мешать изучать основную часть страницы. Особенно при просмотре сайта с мобильных устройств. Ловите антипример и никогда так не делайте:
Лучше ограничиться цветным фоном и не перегружать шапку сайта графикой.
Длинные тексты
Хорошая практика указать в шапке сайта УТП или девиз компании, но перечислять все преимущества лучше в основной части страницы, чтобы также не нагружать хедер. Вот так делать не нужно:
Рекомендации по оформлению шапки сайта
Несколько советов, как лучше оформить хедер, чтобы он хорошо смотрелся и помогал в навигации.
Визуально выделяйте блок. Можно использовать цветной фон или горизонтальные линии, чтобы отделить шапку сайта от основной части страницы. Это упростит восприятие информации на сайте в целом.
И в целом рекомендуем не оставлять хедер пустым или, наоборот, перегружать его информацией, чтобы блок приносил пользу новым посетителям сайта. Найдите свою золотую середину. =)
Выводы
Шапка сайта — ключевой элемент для захвата внимания потенциальных клиентов, поэтому рекомендуем использовать его по максимуму. Добавляйте основную информацию о компании и ссылки на популярные разделы сайта. Новые пользователи скажут вам только спасибо.
Надеемся, что рассмотренные выше примеры шапки сайта помогут вам разработать идеальный хедер или скорректировать имеющийся. Если же нужна помощь проработке и оформлении шапки сайта, то вы всегда можете обратиться к нам за помощью. В рамках юзабилити-аудита мы находим все недочеты и дадим рекомендации по их исправлению.
Идеальная шапка сайта: оформление и содержание
Из этой статьи вы узнаете:
Шапкой называют верхнюю часть сайта, в которой обычно находится его название, логотип, контактные данные и панель навигации. От правильного оформления всех этих элементов зависит, какое впечатление произведет ресурс на своих посетителей. Ведь шапка сайта – это первое, что они видят.
Роль шапки сайта для продвижения и юзабилити
Шапка (header) является одной из важнейших составляющих оформления интернет-ресурса и влияет не только на его привлекательность, но и на удобство использования. Именно шапка в первую очередь предоставляет пользователям ключевые сведения о сайте. Она важна и для юзабилити. С ее помощью владелец ресурса отвечает на вопросы клиентов о том, что собой представляет проект, рассказывает о его преимуществах и предложениях, способах связи и пр.
Вместе с тем не следует перегружать header избыточной информацией. В противном случае она будет мешать посетителям концентрироваться на главных задачах.
Составляющие элементы шапки сайта:
Не обязательно вмещать абсолютно все эти данные в header. Более того, современные веб-дизайнеры не рекомендуют использовать некоторые из них. В первую очередь это касается ссылок на соцсети. Находясь в верхней части страницы, они отвлекают внимание клиентов и уводят их на другие площадки.
А публикуя адрес своей электронной почты, вы рискуете стать мишенью для рассылок спама.
Запомните, что правильно оформленная шапка страницы сайта не должна быть перегружена лишними деталями. Ведь одновременное присутствие множества интересных объектов рассеет внимание посетителя.
Выбор подходящих элементов оформления – решение серьезное. Поэтому лучше всего принимать его вместе с маркетологами проекта.
Почему важно правильно оформить шапку сайта
Этому есть логичное объяснение. Прежде всего, при посещении веб-сайта (особенно впервые) человек практически никогда не рассматривает внимательно всю страницу. Он быстро пробегает по ней взглядом, пытаясь обнаружить то, что вызовет у него интерес и убедит задержаться. В ходе проведения ряда экспериментов специалисты обнаружили, что при изучении веб-страниц глаза всех пользователей двигаются типичным образом. На основе этих результатов была разработана классификация, включающая в себя 3 основные модели движения глаз:
Первый вариант чаще всего встречается при чтении страниц со слабой визуальной иерархией либо однородным представлением данных. В нем выделяют 4 активные зоны, две из которых связаны с шапкой сайта (интернет-страницы).
Z-образная модель типична для изучения сайтов, в которых блоки контента визуально разделены. Читатель пробегает взглядом с верхнего левого угла в верхний правый. А значит, он первым делом оценивает header.
Довольно часто встречается и F-образная схема.
Рекомендуемые статьи по данной теме:
В этом случае глаза человека сначала движутся горизонтально, причем обычно именно по верхней части веб-страницы.
А затем они опускаются ниже и опять горизонтально «сканируют» информацию, только при этом охватывают уже меньшую область (дополнительный элемент F-образной модели).
В завершение читатель перемещает свой взгляд к левой стороне монитора, просматривая ее вертикально. В некоторых случаях этот процесс проходит достаточно медленно и систематично, из-за чего он выглядит на тепловой карте как сплошная полоса. Хотя иногда движение происходит быстрее. Этот элемент завершает стебель буквы F.
Все описанные выше модели показали, что пользователи начинают изучать интернет-ресурсы с верхней горизонтальной области. Выходит, что шапка страницы одновременно выполняет две задачи: дает возможность разработчику грамотно представить информацию, а посетителю – быстро отыскать интересующие его данные. Вот почему специалисты по контенту и маркетингу, а также UI/UX-дизайнеры придают блоку header такое большое значение.
С другой стороны, не всем интернет-площадкам необходимо представлять ключевые сведения именно таким образом. Существует множество оригинальных дизайнов шапки сайта (WordPress, например, предлагает немало интересных тем и шаблонов), в которых ее функции связаны с другими частями ресурса.
Проектирование шапки сайта
Тщательно выбирайте цвет фона и шрифт шапки. Ваша цель – сделать так, чтобы клиент легко и быстро заметил и воспринял всю ключевую информацию.
Этот дизайн сегодня пользуется большой популярностью. Он позволяет спрятать ссылки на основные разделы за соответствующей кнопкой.
Такая кнопка зачастую выступает в роли полноценного элемента header, и большинство пользователей уже знают, что она открывает главное меню. Благодаря данному решению у разработчика появляется возможность сохранить больше места для других объектов, сделать оформление легким и минималистичным, а также освободить пространство. Кроме того, это помогает создать привлекательный и удобный интерфейс для разных устройств.
Данный дизайн повышает удобство пользования ресурсом и отлично подходит для страниц с большим объемом содержимого. Навигация доступна пользователям в любом месте экрана.
Это типичное решение для современных шаблонов в некоторых известных платформах. Так, навигация в шапке сайта «Вордпресс» включает в себя два отдельных меню. Вверху размещается кнопка меню, корзина интернет-магазина, поиск и ссылки на популярные соцсети, а в центре – логотип компании.
Вторая линия обращает внимание читателей на основные разделы сайта: предложения и новости, местонахождение торговых точек, контакты и услуги, товарный каталог.
Как мы видим, шапка действительно представляет собой стратегически важную зону в веб-дизайне. Разумеется, для каждого отдельного проекта необходим свой подход, который (скорее всего) должен основываться на результатах исследования целевой аудитории. Тем не менее всегда старайтесь учитывать перечисленные выше основные моменты.
Основные принципы создания шапки сайта
Header должен не только быть красивым и удобным для посетителей, но и способствовать росту конверсии. Чтобы этого добиться, придерживайтесь следующих советов при его оформлении:
Сначала посетители сайта читают названия разделов и предоставленную информацию: интересные предложения, контакты. Подберите такой шрифт, который будет читабельным и улучшит восприятие.
Как мы знаем, оформление блока header зависит от цели проекта и его типа. Например, в шапке сайта, созданного с целью презентации товара, достаточно указать ссылки на основные разделы, совмещенные с главной страницей. Ведь задача этого ресурса заключается в том, чтобы максимально эффектно преподнести товар. А вот для сервисов услуг и интернет-магазинов этого будет недостаточно. Посетители таких ресурсов должны быстро сориентироваться, посмотреть заказанные ранее услуги и узнать, каким образом можно связаться с менеджером компании.
Для удобства пользователей логотип фирмы следует размещать в левом верхнем углу либо в центре шапки, а кнопку для обратной связи и контакты – в правом верхнем углу. Конечно, дизайнеры не ограничены в использовании оригинальных решений. Однако данный прием стал настолько привычным, что может значительно облегчить клиентам ориентирование на ресурсе.
Иногда шапка сайта содержит элементы призыва к действию – кнопки «заказать», «купить», «связаться». При этом последняя из них связана с формой заполнения данных. Кнопка обратной связи должна быть заметной среди основного контента и содержать понятную для читателя надпись. Только тогда она сможет привлечь внимание потенциального клиента и убедить его выполнить целевое действие. А при оформлении веб-формы самое главное – обозначить все состояния (неверное заполнение, ошибка и пр.) и не перегружать ее лишними полями.
Данный пункт должен учитывать не только разработчик, но и дизайнер интернет-проекта. Фиксация блока header выражается в его перемещении совместно со скроллингом.
Многие специалисты и вовсе отказываются от создания шапки сайта. А верхний блок часто заменяют оригинальной навигацией.
С точки зрения юзабилити такие решения оценивать достаточно сложно. Когда пользователь впервые оказывается на сайте, ему требуется некоторое время для того, чтобы разобраться в устройстве навигации и предложениях компании.
При оформлении блока header придерживайтесь следующих правил:
6 правил разработки HTML-шапки
Чтобы успешно продвигать свой ресурс, учитывайте следующие моменты:
Особенности шапки того или иного сайта
1. Header для брендинга личности
Если вы – звезда, авторитетный специалист или владелец собственной частной компании, то сделайте так, чтобы посетители сайта поняли это с первого взгляда. Так как вы представляете собой бренд, посвятите шапку ресурса своей личности.
Чтобы быстрее добиться признания, выстроить отношения и вызвать чувство причастности, разместите в блоке header фотографию счастливого, улыбающегося человека.
Несмотря на то, что читатели никогда не встречали вас в жизни, из-за многократного созерцания фотографии они почувствуют, что вы – хорошие знакомые.
В красивой шапке сайта для брендинга личности лучше всего использовать имя, логотип, фотографии.
2. Header для брендинга бизнеса
Разработчикам корпоративных интернет-площадок следует понимать, что название и логотип в верхней части страницы не «взорвут» Интернет.
Одно из наиболее популярных современных решений – минимизация заголовка и поднятие области контента. Другой дизайнерский ход – совсем отказаться от блока header. Ведь если говорить откровенно, то логотип никак не помогает в убеждении потенциальных партнеров, покупателей, клиентов.
Оформление интернет-площадки, предназначенной для раскрутки бизнеса, должно быть простым и минималистичным. Зачастую достаточно добавить лишь tagline и логотип, избегая всего лишнего и бесполезного.
Самое главное, чтобы header на 100 % справлялся со своими задачами и мгновенно сообщал клиентам о предназначении ресурса.
3. Header для брендинга товаров и услуг
Для успешного продвижения услуг, программ, событий или товаров разработайте такой логотип, который сможет донести до всех пользователей ваше ключевое предложение. Лаконичное описание преимуществ поможет читателям быстро понять, находятся ли они там, где им нужно.
Если вы собираетесь использовать сайт для продажи билетов на какое-либо мероприятие (вечеринка, концерт), то header должен передавать его атмосферу.
В некоторых случаях в шапку стоит включить краткий, информативный подзаголовок с описанием, логотип и фотографии.
Изображение можно расположить рядом с текстом или сделать его фоном. К тому же вы всегда сможете заменить или дополнить выбранную картинку другим тематическим видеороликом.
Эти элементы помогают вызывать у посетителей желание воспользоваться услугами или купить товар. Благодаря видео и картинкам для шапки сайта вы можете значительно увеличить конверсию.
Здесь важно, чтобы выбранное изображение прямо (не косвенно) отражало деятельность организации. К примеру, обучающим компаниям лучше всего размещать фотографии с запечатленным процессом оказания услуги, а не иллюстрации или картинки каких-то персонажей, косвенно относящихся к тематике интернет-ресурса.
А тем, кто занимается доставкой еды, рекомендуем использовать картинку курьера с красивым и аппетитным блюдом. Самое главное, чтобы покупатель наглядно видел услугу или товар. Тогда у него возникнет желание получить это.
Такой текст очень эффективен, поэтому не забывайте вставлять его в шапку. Представьте, что вы – это нуждающийся посетитель. И попытайтесь понять, чего именно он хочет. Затем коротко опишите что-то, что заставит его захотеть ваш продукт еще сильнее.
Текст можно заменить перечнем плюсов организации (начинайте с наиболее важных и цепляющих). Помните, что успех веб-дизайнера зависит от того, насколько верно он сможет угадать желание пользователей.
Зачастую посетители сайтов подсознательно принимают решение о покупке сразу после просмотра первой страницы или ее шапки. Затем они продолжают просматривать информацию уже по инерции. Поэтому рекомендуем включить в шапку простую форму заказа с двумя-тремя полями.
Опытные веб-дизайнеры прекрасно знают, что никто не заполняет сложные формы. А если даже и заполняет, то лишь в случае крайней необходимости (при регистрации финансовых аккаунтов).
4. Шапка сайта для интернет-магазина
Header на страницах онлайн-магазинов имеет особое значение, ведь большинство клиентов в первую очередь обращают внимание именно на него.
Не пытайтесь уместить в шапку сайта все возможное: корзину, вход в личный кабинет, меню навигации, актуальную акцию, логотип, описание, контакты, кнопку призыва, заказ звонка и пр. Прежде, чем приступать к оформлению, определите, какие сведения являются наиболее ценными для клиентов. Учтите это при расстановке акцентов. К тому же нет ничего плохого в том, чтобы посмотреть оформление сайтов своих конкурентов и других популярных магазинов.
Рассмотрим важность каждого элемента шапки сайта с точки зрения классического розничного интернет-магазина:
Представляет собой основу стилистики интернет-площадки и используется для узнавания компании. Его размещают слева. Кроме того, логотип также является ссылкой на главную страницу (за исключением самой главной страницы). Конечно, этот элемент оформления достаточно важен. Однако не стоит акцентировать на нем внимание и делать его слишком большим. В противном случае вы просто потеряете полезное место. Высоты в 40–60 пикселей будет более чем достаточно. Помните, что все посетители переходят на сайт уже с конкретными ожиданиями, которые формируются описанием в сниппете органического поиска (или блоке объявлений контекстной рекламы), текстом ссылки либо еще чем-то. Делать большие и контрастные логотипы на ресурсах, не принадлежащих крупным известным брендам, просто нецелесообразно.
Большинство клиентов попадают на сайт не по брендовым запросам, они стремятся решить свою задачу. Поэтому намного важнее убедить их в том, что они попали в «нужное место», нежели показывать им эффектный логотип. В идеале посетитель должен понять в течение первых трех секунд, что это за сайт и какие услуги/товары он представляет.
Увеличение времени на решение указанных задач повышает риск того, что потенциальный покупатель закроет страницу и уйдет к конкуренту.
Помогает пользователям быстрее понять сферу деятельности организации. Описание размещают рядом с логотипом. Иногда его заменяют кратким УТП (не «чем мы занимаемся», а «что вы получите от сотрудничества с нами»). Но чаще всего для УТП выбирают более заметное место.
Этот пункт подходит не всем компаниям, так как зависит от специфики бизнеса. К примеру, тем, кто получает значительное количество заказов на звонках, необходимо поместить телефон в шапку сайта и выделить его. А когда большинство покупок оформляются через корзину, номер тоже стоит указать, но уже не таким крупным шрифтом. Размещайте свой телефонный номер в разделе «Контакты» лишь в том случае, если вы не желаете получать звонки. При ведении бизнеса в нескольких городах лучше не указывать сразу все телефоны (даже два – это не очень хорошо). Если вы управляете компанией общероссийского масштаба, оптимальным решением будет покупка номера 8-800 либо множества номеров (по одному на регион). Тогда в шапке сайта можно будет поместить выпадающий список «Ваш город». Другой вариант (более эффективный, но и более затратный) – выделение номера в зависимости от кода. Например, в городском номере следует выделять вторую часть – 8( 495) 666-00-00. А в общероссийском – первую, таким образом подчеркивая бесплатность – 8 (800) 888-00-00. При этом обязательно проставьте атрибут «tel», чтобы мобильные пользователи смогли позвонить вам в один клик. В блоке header телефонный номер обычно располагают по центру или справа.
Важность этих сведений тоже зависит от специфики организации. Если при оформлении шапки сайта у вас осталось слишком много свободного места, то можете дописать что-то вроде «Круглосуточно принимаем заказы» или «Время работы 9:30 – 19.30». В противном случае рабочий график лучше убрать в раздел «Контакты».
Что делать с второстепенными ссылками:
Каким элементам не место в шапке сайта
Иногда веб-мастера включают в header такие элементы, которым там совсем не место. Например:
Старайтесь оформлять составляющие шапки сайта таким образом, чтобы посетители не концентрировали на них свое внимание. Размещайте лишь самые важные из них и на привычных пользователям местах. Группируйте схожие элементы и разделяйте разные. Соблюдение описанных выше рекомендаций позволит вам избежать грубых ошибок. Однако об эффективности любых внесенных изменений прежде всего спрашивайте своих клиентов.
4 распространенные ошибки при создании шапки
Ошибка № 1: Мелкая или растянутая картинка
При использовании изображения в фоне шапки веб-дизайнеры иногда непропорционально растягивают его или делают слишком маленьким. Это типичные ошибки новичков. В результате посетитель увидит искаженный текст, слоган или картинку, которые будут вызывать у него раздражение.
Чтобы этого избежать, обязательно проверяйте правильность заданных размеров при оформлении блока header.
Ошибка № 2: Использование шрифта, предлагаемого по умолчанию
Создателю коммерческого блога очень хочется побыстрее оформить его шапку, ведь тогда он скорее приступит непосредственно к самим публикациям. В таком случае появляется соблазн использовать простейший стандартный шрифт (как правило, Arial или Times New Roman). Конечно, он может быть очень хорошим. Но вместе с тем настолько популярным, что все сразу поймут – вы не приложили никаких усилий, чтобы подобрать шрифт, соответствующий брендбуку.
Поэтому лучше попробовать 5–6 разных типов шрифта и подобрать для шапки сайта наиболее стильный и удобочитаемый вариант.
Ошибка № 3: Нечитабельные цветовые сочетания
Еще одна известная ошибка, которая моментально отталкивает пользователей. Поймите, что заголовок с красным текстом на коричневом фоне, желтой надписью на белом фоне и другими подобными вариантами оформления невозможно прочесть с первого взгляда. Будьте внимательны и при наложении текста на изображение – некоторые буквы могут быть видны лучше (черные на светло-сиреневом фоне), а другие намного хуже (черные на темно-сиреневом фоне). Есть простой способ проверить читабельность текста.
Откройте свой сайт и немного отойдите от экрана. Попробуйте быстро прочесть заголовок и слоган. Если почувствуете, что возникли трудности, выберите другие цвета и их сочетания.
Ошибка № 4: Захламление заголовка картинками
Наверняка вам встречались такие коммерческие блоги, в которых header пестрит множеством фотографий. Помимо обязательного логотипа в нем могут быть фотографии коллектива, офиса компании, портрет руководителя. Даже несмотря на профессиональные изображения, такие интернет-площадки выглядят любительскими. На самом деле всего одна картинка будет смотреться намного более эффектно. А тем, кто сомневается в своих дизайнерских способностях, лучше последовать принципам минимализма и оставить лишь текст. Попробуйте, и вы убедитесь, что это нисколько не испортит профессиональный вид сайта.