Правила оформления шапки интернет-магазина

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

Шапка — не справочник

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

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

Свободу важным элементам 

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

Логотип. Необходим как основа стиля сайта и для узнавания магазина. Размещается слева, служит ссылкой на главную страницу (правило хорошего тона: на самой главной лого — не ссылка). Логотип важен, но не придавайте ему слишком большого значения и не делайте его огромным: будет съедаться полезное место на первом экране. 40-60 пикселей по высоте вполне достаточно для логотипа.

Все пользователи попадают на сайт с определенными ожиданиями. Они могут быть сформированы текстом ссылки, описанием в блоке объявлений контекстной рекламы, сниппете органического поиска или чем-то еще. Если сайт не принадлежит крупному, широко известному бренду, то лого не стоит делать слишком контрастным и большим. Как правило пользователи приходят на ресурс не по брендовым запросам, и хотят решить свою задачу. Им гораздо важнее убедиться в том, что они попали “туда куда надо”, чем рассматривать красивое лого.

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

Описание. Размещается рядом с логотипом. Необходимо посетителям для быстрого понимания деятельности компании. В некоторых случаях вместо описания можно вставить короткое УТП (то есть не “что мы делаем”, а “что вы получите”). Однако для УТП обычно предусматривается более заметное место.

Телефоны. Зависит от специфики бизнеса. Если вы получаете много заказов по телефону, его нужно поместить в шапку и выделить. Если заказы в основном идут через корзину, телефон стоит разместить, но более мелким шрифтом. И только, если вы умышленно не хотите получать звонки, уберите его в “Контакты”.

Если вы работаете с несколькими городами, не стоит размещать все телефоны одновременно. Размещение даже двух телефона, хоть и уместно, но уже не очень хорошо. Если вы работаете по всей России, купите номер 8-800 или много номеров в каждом регионе, а в шапке сделайте выпадающий список “Ваш город:”. Второе решение эффективнее, но дороже.

Выделение номера зависит от его кода. Если номер городской, выделяйте вторую часть, например 8(495)888-00-00. Если 800, то первую, чтобы подчеркнуть бесплатность, то есть — 8(800)888-00-00. Не забудьте проставить в коде атрибут tel, чтобы пользователи с мобильных могли позвонить вам в один клик. На шапке телефоны традиционно находятся справа, или по центру.

Время работы. Второстепенная информация, хотя зависит от специфики магазина. Если в шапке осталось много места, напишите: “Время работы такое-то, прием заказов круглосуточно”. В ином случае убирайте в “Контакты”.

Как поступить с второстепенными ссылками

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

Заказ звонка. Если на сайте установлен отдельный виджет с таким функционалом, из шапки ссылку можно убрать — люди привыкли пользоваться виджетами. Только перед убиранием сделайте А/Б тест, все-таки аудитория каждого магазина уникальна. Традиционным же местом размещения ссылки звонка в шапке считается место над или под номером. Отдельно выделять ссылку не нужно. В мобильной версии набирает популярность значок обратного звонка (см. рис.1).

Корзина, Сравнение, Войти в кабинет. Уместно разместить в шапке, если она не перегружена другими элементами. Однако более изящное решение — вынести подобные “навигационные” ссылки в дополнительное верхнее меню, над шапкой.

Кнопка с призывом. Больше актуальна для лендингов и сильно зависит от специфики бизнеса. Актуальна для магазинов со “сложным” товаром, где клиенту может потребоваться полноценная консультация, или если один товар доминирует над всеми остальными. Большинству b2c магазинов она не нужна.

Если же, вы приняли решение оставить кнопку, то помните правило: на странице должен быть только один ярко выраженный призыв. Кнопка в форме может быть оформлена “незаметно” (например, с рамкой без фона) и вести на “дополнительное действие (например, заказать звонок).

Посмотрим, что получится, если соблюсти все перечисленные правила:

Новая шапка: -85px по высоте, появился акцент на акции, дополнительно подтянули основное меню (Каталог, Доставка, Контакты). Потеряли призыв (его заменила акция), адрес и ссылку для заказа звонка. Элементы на шапке стали восприниматься легче, в целом всё стало выглядеть гораздо аккуратнее.

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

Ошибки, которые не стоит повторять

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

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

Агрессивные призывы. Большая яркая кнопка с надписью “Купить” абсолютно неуместна в интернет-магазине. Яркая кнопка должна быть только одна на странице и находится непосредственно рядом с товаром. Добавлять её в шапку - намеренно уводить внимание пользователя в пустоту.

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

В эту категорию входят цитаты от великих людей, тяжеловесные слоганы, а также нужные фразы, но сформулированные слишком длинными оборотами (например, “Мы работаем с понедельника по пятницу, с 9:00 до 19:00 без обеда. Выходные - суббота и воскресенье”). 

Резюме:

  1. Не концентрируйте на элементах шапки много внимания посетителей.
  2. Располагайте в шапке только необходимые элементы.
  3. Размещайте элементы на привычных пользователям местах.
  4. Не слепляйте разные элементы и группируйте схожие. 

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

Компании и сервисы: Мебельная компания Шатура, AskUsers
Автор: Анна

Подписаться на новости

Читайте также

21 февраля / Комментарии

8 способов, когда дизайнеры могут обмануть вас и как этого избежать

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

далее →

27 ноября 2017 / Комментарии

Как Customer Experience изменил бизнес-процессы маркетплейса Goods

В результате нескольких месяцев проектирования «М.Видео» пришлось скорректировать бизнес-процессы под Customer Experience, другими словами, чтобы платформа стала удобнее для покупателя. Попробуем разобраться почему.

далее →

16 ноября 2017 / Комментарии

И еще 11 мифов юзабилити

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

далее →

19 октября 2017 / Комментарии

4 вопроса о поиске в интернет-магазине, ответы на которые меняют всё

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

далее →

12 июля 2017 / Комментарии

Пять объединяющих особенностей тысячи самых успешных посадочных страниц современности

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook