Идеальная шапка сайта: оформление и содержание

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

Роль шапки сайта для продвижения и юзабилити

Шапка (header) является одной из важнейших составляющих оформления интернет-ресурса и влияет не только на его привлекательность, но и на удобство использования. Именно шапка в первую очередь предоставляет пользователям ключевые сведения о сайте. Она важна и для юзабилити. С ее помощью владелец ресурса отвечает на вопросы клиентов о том, что собой представляет проект, рассказывает о его преимуществах и предложениях, способах связи и пр.

Источник: shutterstock.com

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

Составляющие элементы шапки сайта

• символика торговой марки: название, слоган, логотип, фирменные цвета, фотографии офиса и представителей;

• контактные данные (почта, номер телефона);

• поле для поисковых запросов;

• ссылка на мобильное приложение;

• кнопка подписки по имейл;

• навигация (ссылки на основные разделы ресурса);

• контент (презентация услуги или товара);

• кнопка переключения на другие языковые версии интернет-площадки;

• кнопки популярных соцсетей;

• ссылки для взаимодействия с продуктом.

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

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

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

Выбор подходящих элементов оформления – решение серьезное. Поэтому лучше всего принимать его вместе с маркетологами проекта.

Почему важно правильно оформить шапку сайта

Этому есть логичное объяснение. Прежде всего, при посещении веб-сайта (особенно впервые) человек практически никогда не рассматривает внимательно всю страницу. Он быстро пробегает по ней взглядом, пытаясь обнаружить то, что вызовет у него интерес и убедит задержаться. В ходе проведения ряда экспериментов специалисты обнаружили, что при изучении веб-страниц глаза всех пользователей двигаются типичным образом.

На основе этих результатов была разработана классификация, включающая в себя 3 основные модели движения глаз:

1. Гуттенберга;

2. Z-образная;

3. F-образная.

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

Z-образная модель типична для изучения сайтов, в которых блоки контента визуально разделены. Читатель пробегает взглядом с верхнего левого угла в верхний правый. А значит, он первым делом оценивает header.

Довольно часто встречается и F-образная схема.

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

А затем они опускаются ниже и опять горизонтально «сканируют» информацию, только при этом охватывают уже меньшую область (дополнительный элемент F-образной модели).

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

Все описанные выше модели показали, что пользователи начинают изучать интернет-ресурсы с верхней горизонтальной области. Выходит, что шапка страницы одновременно выполняет две задачи: дает возможность разработчику грамотно представить информацию, а посетителю – быстро отыскать интересующие его данные. Вот почему специалисты по контенту и маркетингу, а также UI/UX-дизайнеры придают блоку header такое большое значение.

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

Проектирование шапки сайта

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

Меню «Гамбургер»

Этот дизайн сегодня пользуется большой популярностью. Он позволяет спрятать ссылки на основные разделы за соответствующей кнопкой.

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

Двойное меню

Это типичное решение для современных шаблонов в некоторых известных платформах. Так, навигация в шапке сайта «Вордпресс» включает в себя два отдельных меню. Вверху размещается кнопка меню, корзина интернет-магазина, поиск и ссылки на популярные соцсети, а в центре – логотип компании.

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

Фиксированный (липкий) хедер

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

Как мы видим, шапка действительно представляет собой стратегически важную зону в веб-дизайне. Разумеется, для каждого отдельного проекта необходим свой подход, который (скорее всего) должен основываться на результатах исследования целевой аудитории. Тем не менее всегда старайтесь учитывать перечисленные выше основные моменты.

Основные принципы создания шапки сайта

Header должен не только быть красивым и удобным для посетителей, но и способствовать росту конверсии. Чтобы этого добиться, придерживайтесь следующих советов при его оформлении:

1. Оцените типографику

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

   
   

   Источник: shutterstock.com

2. Учитывайте назначение ресурса и его общий стиль

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

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

3. Правильно расположите все элементы

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

   
   

   Источник: shutterstock.com

4. Поработайте над кнопкой и формой обратной связи

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

   А при оформлении веб-формы самое главное – обозначить все состояния (неверное заполнение, ошибка и пр.) и не перегружать ее лишними полями.

5. Зафиксируйте шапку (если это не нарушит общую стилистику)

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

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

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

Правила оформления блока header

• Он должен корректно отражаться как в основной версии интернет-ресурса, так и в мобильной.

• Высота – не слишком большая, примерно 250 пикселей.

• Добавьте поиск, если на сайте много текста, других страниц и более 10 товаров.

• Не рекомендуется использовать теги H1 – H6, так как это может плохо отразиться на оптимизации. Чем меньше шрифтов будет в заголовке, тем лучше. В идеале он должен быть один.

Источник: shutterstock.com

6 правил разработки HTML-шапки

Чтобы успешно продвигать свой ресурс, учитывайте следующие моменты:

1. Высота шапки не должна мешать восприятию содержимого. Оптимальная высота для информационных площадок – от 100 до 200 пикселей. А для визиток, презентаций и лендингов – немного больше.

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

3. Делайте HTML-шапки сайта. Header, который полностью состоит из флеш-анимации или картинки, только усложнит вам работу. Хотите выделиться? Нет проблем. Для этого достаточно ненавязчиво использовать в дизайне динамические элементы, работающие на скриптах.

4. Если на всех страницах ресурса будет одинаковый заголовок H1, это помешает его продвижению.

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

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

Особенности шапки для разных видов интернет-сайтов

Header для брендинга личности

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

Чтобы быстрее добиться признания, выстроить отношения и вызвать чувство причастности, разместите в блоке header фотографию счастливого, улыбающегося человека.

Несмотря на то, что читатели никогда не встречали вас в жизни, из-за многократного созерцания фотографии они почувствуют, что вы – хорошие знакомые.

Header для брендинга бизнеса

Разработчикам корпоративных интернет-площадок следует понимать, что название и логотип в верхней части страницы не «взорвут» Интернет.

Одно из наиболее популярных современных решений – минимизация заголовка и поднятие области контента. Другой дизайнерский ход – совсем отказаться от блока header. Ведь если говорить откровенно, то логотип никак не помогает в убеждении потенциальных партнеров, покупателей, клиентов.

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

Самое главное, чтобы header на 100 % справлялся со своими задачами и мгновенно сообщал клиентам о предназначении ресурса.

Header для брендинга товаров и услуг

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

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

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

Изображение можно расположить рядом с текстом или сделать его фоном. К тому же вы всегда сможете заменить или дополнить выбранную картинку другим тематическим видеороликом.

Источник: shutterstock.com

Эти элементы помогают вызывать у посетителей желание воспользоваться услугами или купить товар. Благодаря видео и картинкам для шапки сайта вы можете значительно увеличить конверсию.

Здесь важно, чтобы выбранное изображение прямо (не косвенно) отражало деятельность организации. К примеру, обучающим компаниям лучше всего размещать фотографии с запечатленным процессом оказания услуги, а не иллюстрации или картинки каких-то персонажей, косвенно относящихся к тематике интернет-ресурса.

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

• «Текст доверия»

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

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

• Простая форма обратной связи

Зачастую посетители сайтов подсознательно принимают решение о покупке сразу после просмотра первой страницы или ее шапки. Затем они продолжают просматривать информацию уже по инерции. Поэтому рекомендуем включить в шапку простую форму заказа с двумя-тремя полями.

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

Шапка сайта для интернет-магазина

Источник: shutterstock.com

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

Правило 1: Шапка – не справочник

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

Правило 1: Свободу важным элементам

Рассмотрим важность каждого элемента шапки сайта с точки зрения классического розничного интернет-магазина:

• Логотип

Представляет собой основу стилистики интернет-площадки и используется для узнавания компании. Его размещают слева. Кроме того, логотип также является ссылкой на главную страницу (за исключением самой главной страницы). Конечно, этот элемент оформления достаточно важен. Однако не стоит акцентировать на нем внимание и делать его слишком большим. В противном случае вы просто потеряете полезное место. Высоты в 40–60 пикселей будет более чем достаточно. Помните, что все посетители переходят на сайт уже с конкретными ожиданиями, которые формируются описанием в сниппете органического поиска (или блоке объявлений контекстной рекламы), текстом ссылки либо еще чем-то. Делать большие и контрастные логотипы на ресурсах, не принадлежащих крупным известным брендам, просто нецелесообразно.

Источник: shutterstock.com

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

• Описание

Помогает пользователям быстрее понять сферу деятельности организации. Описание размещают рядом с логотипом. Иногда его заменяют кратким УТП (не «чем мы занимаемся», а «что вы получите от сотрудничества с нами»). Но чаще всего для УТП выбирают более заметное место.

• Номер телефона

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

При ведении бизнеса в нескольких городах лучше не указывать сразу все телефоны (даже два – это не очень хорошо). Если вы управляете компанией общероссийского масштаба, оптимальным решением будет покупка номера 8-800 либо множества номеров (по одному на регион). Тогда в шапке сайта можно будет поместить выпадающий список «Ваш город». Другой вариант (более эффективный, но и более затратный) – выделение номера в зависимости от кода.

Например, в городском номере следует выделять вторую часть – 8( 495) 666-00-00. А в общероссийском – первую, таким образом подчеркивая бесплатность – 8 (800) 888-00-00. При этом обязательно проставьте атрибут «tel», чтобы мобильные пользователи смогли позвонить вам в один клик. В блоке header телефонный номер обычно располагают по центру или справа.

• Рабочий график

Важность этих сведений тоже зависит от специфики организации. Если при оформлении шапки сайта у вас осталось слишком много свободного места, то можете дописать что-то вроде «Круглосуточно принимаем заказы» или «Время работы 9:30 – 19.30». В противном случае рабочий график лучше убрать в раздел «Контакты».

Что делать с второстепенными ссылками:

1. Кнопка призыва. Ее наличие или отсутствие будет зависеть от особенностей интернет-проекта. Чаще всего такая кнопка используется в лендингах, а также в интернет-магазинах со «сложным» продуктом (покупателям может понадобиться расширенная консультация) либо с одним доминирующим продуктом. Компании типа b2c ей практически никогда не пользуются. Но если вы все-таки нуждаетесь в кнопке призыва, то придерживайтесь следующего правила при ее размещении: одна страница – один яркий призыв. Можно сделать так, чтобы форма кнопки была «незаметной» (рамка без фона), а сама она вела на другое действие (заказ звонка).

2. Адрес. Чаще всего убирают в раздел «Контакты». Адрес важен только в некоторых случаях. Например, когда компания действует в конкретном регионе области или города, а часть заказов покупатели забирают сами.

3. Войти в кабинет/Сравнение/Корзина. Можно включить в шапку сайта, если в ней осталось много свободного места. Но гораздо оригинальнее будет поместить эти элементы в дополнительное верхнее меню.

4. Заказать звонок. Обычно для этого используют специальный виджет, так как пользователи уже к нему привыкли. В этом случае главное сделать А/Б-тест, ведь у каждого магазина своя целевая аудитория. Что же касается ссылки звонка, то в шапке ее обычно помещают под или над номером. Причем отдельно ссылка не выделяется. В мобильных версиях сейчас очень популярно использовать значок обратного звонка.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Каким элементам не место в шапке сайта

Иногда веб-мастера включают в header такие элементы, которым там совсем не место. Например:

• Лишнюю информацию и словесный мусор. К этому пункту относятся любые сведения, которые, как считает владелец ресурса, очень интересны всем пользователям. Скорее всего, специалисты просто постеснялись сказать ему, что он ошибается. К данной категории можно отнести фразы с очень длинными оборотами («Наш график работы: с понедельника по пятницу, с 8:00 до 18:00, без перерыва на обед, выходные дни – суббота и воскресенье»), тяжеловесные слоганы, а также цитаты известных личностей.

• Агрессивные призывы. Огромная яркая кнопка с кричащей надписью «Купить» будет смотреться абсолютно неуместно в любом онлайн-магазине. Во-первых, на странице должна быть лишь одна яркая кнопка (рядом с товаром). А во-вторых, добавляя ее в header, вы уводите внимание посетителей в никуда.

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

Источник: shutterstock.com

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

4 распространенные ошибки при создании шапки сайта

• Ошибка № 1: Мелкая или растянутая картинка

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

Чтобы этого избежать, обязательно проверяйте правильность заданных размеров при оформлении блока header.

• Ошибка № 2: Использование шрифта, предлагаемого по умолчанию

Создателю коммерческого блога очень хочется побыстрее оформить его шапку, ведь тогда он скорее приступит непосредственно к самим публикациям. В таком случае появляется соблазн использовать простейший стандартный шрифт (как правило, Arial или Times New Roman). Конечно, он может быть очень хорошим. Но вместе с тем настолько популярным, что все сразу поймут – вы не приложили никаких усилий, чтобы подобрать шрифт, соответствующий брендбуку.

Поэтому лучше попробовать 5–6 разных типов шрифта и подобрать для шапки сайта наиболее стильный и удобочитаемый вариант.

• Ошибка № 3: Захламление заголовка картинками

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

Источник: shutterstock.com

Даже несмотря на профессиональные изображения, такие интернет-площадки выглядят любительскими. На самом деле всего одна картинка будет смотреться намного более эффектно.

• Ошибка № 4: Нечитабельные цветовые сочетания

Еще одна известная ошибка, которая моментально отталкивает пользователей. Поймите, что заголовок с красным текстом на коричневом фоне, желтой надписью на белом фоне и другими подобными вариантами оформления невозможно прочесть с первого взгляда. Будьте внимательны и при наложении текста на изображение – некоторые буквы могут быть видны лучше (черные на светло-сиреневом фоне), а другие намного хуже (черные на темно-сиреневом фоне). Есть простой способ проверить читабельность текста.

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

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 24.06.2019

Последние статьи этого автора:

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

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB