x

- Заказать звонок -

согласен на обработку персональных данных
x
- Оформить заявку -

Как оформить шапку интернет-магазина

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

Избавьтесь от лишнего

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

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

Как выбрать важные элементы?

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

Самые важные данные

Логотип

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

При всей важности фирменного логотипа, знайте меру. Изображение не должно быть слишком большим. Оптимальный вариант лого – до 60 пикселей в высоту.

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

Описание

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

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

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

Некоторые сайты размещают сразу несколько номеров. Это лишнее. Даже если у вашей компании несколько офисов, выберите один основной номер. Также уместно сделать выпадающий список, где пользователь может выбрать свой город или район. Такой функционал требует дополнительных затрат, но он эффективен. Размещать в шапке более двух номеров телефона не стоит, лучше – один.

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

Второстепенные данные

Режим работы

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

Адрес

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

Заказ обратного звонка

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

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

Корзина и вход в личный кабинет

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

Призыв к действию

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

Когда все сделано правильно

На данном примере мы можем видеть оптимальный размер шапки -85px по высоте. Сделан удачный акцент на действующие спецпредложения. Призыв к действию, адрес, кнопка обратного звонка – все это осталось «за кадром» в других частях сайта. Гармонично подтянуто главное меню. В целом, шапка смотрится презентабельно, а информация на ней легко воспринимается.

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

Что нужно убрать в первую очередь?

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

Элементы, которым нет места:

  • Акции. Хотите привлечь внимание пользователей к спецпредложениям вашей компании? Нарисуйте яркий и красивый баннер, поместите его на видном месте и отклик будет. Уверенно отказывайте от соблазна сделать ссылку на акции в шапке сайта.
  • Вызывающие призывы. Слишком яркие и большие кнопки с призывом к покупке, подписке, звонку в рядовом интернет-магазине совершенно неуместны. Они смотрятся излишне агрессивно и никак не побуждают посетителей перейти по ссылке. Хотите сделать броскую кнопку «Купить»? Поместите ее рядом с товаром, но не более одной на странице.
  • Лишние слова. Нередко владельцы сайтов пытаются сделать шапку предельно емкой, помещая сюда дополнительную информацию о компании, услугах, товарах, регалиях и многое другое. Сюда же относятся девизы, длинные слоганы, афоризмы и прочие ненужности. Для всего этого есть соответствующие разделы на сайте.

Подводим итоги

Чтобы шапка сайта смотрелась аккуратно и красиво:

  • Уберите лишние элементы, оставив только самое необходимое;
  • Не делайте отдельные элементы слишком броскими;
  • Размещайте элементы на традиционных местах, уже привычных для пользователей;
  • Объединяйте схожие элементы и не пытайтесь сочетать не сочетаемое.

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

Интернет-магазин автозапчастей

Разработка сайта

Окна Мегаполиса

Разработка сайта

Интернет-магазин «Много полов»

Разработка сайта

Черепица из Финляндии «Катепал»

Разработка сайта

Советуем почитать