Шапка, хэдер – как не называй, а всё равно будет одним из самых востребованных и сложных в реализации блоков. Шапка может быть большая, маленькая, прозрачная, цветная, фиксированная или статичная, но самое главное при всём при этом – она должна быть удобной. Как её такой сделать? Есть несколько путей:
- Долго и больно оттачивать мастерство и перебирать десятки удачных и не удачных вариантов на разных проектах;
- Положиться на видение заказчика о том, как должна выглядеть шапка (да-да, именно с логотипом справа, корзиной по центру и с блоком ссылок на все страницы сайта разом!);
- Провести анализ популярных решений, выделить общие тенденции, приёмы и сформировать паттерн «идеальной шапки», которая и конверсию увеличит, и пользователю о содержании корзины расскажет, и услужливо попросит подтвердить местоположение.
Первый путь довольно естественный, с опытом придёт и понимание того, как делать хорошо. Второй путь порой тоже может быть верным, ведь у каждого заказчика может быть своё видение продукта и далеко не факт, что оно не правильное – нужно уметь понимать клиента и прислушиваться к его желаниям, потому что не везде одинаковые паттерны и парадигмы могут одинаково эффективно работать. Ну и наконец третий вариант – это именно то, что нам нужно. Пришло время заняться исследовательской работой!
Данные
Для начала определим регион нашего исследования. Тут уговоримся, что данные будем собирать о российских компаниях, поэтому и регионом нашего исследования будет Россия.
Теперь нужно определиться с тем откуда брать данные о том, каким проектам российского интернет-ритейла стоит уделить внимание. Для этого обратимся к сайту https://www.top100.datainsight.ru/.
Из первой пятёрки уберём совсем уж похожие по тематике магазины и те, на которых работы по улучшению юзабилити уже давно не ведутся – отсекаем МВидео и Ситилинк, после чего останется следующая выборка:
- Wildberries – одежда, бытовые товары, ремонт, прочее (да, я знаю что там уже можно купить и бензопилы, но всё таки «Дикие ягоды» в умах людей до сих пор ассоциируются в первую очередь с одеждой);
- Ozon – мультитоварный интернет-магазин;
- DNS – электроника и бытовая техника.
Исследование
Заходим на сайты и делаем скриншоты того, как выглядит шапка на каждом из них:
Теперь начинаем по методу выделения соответствий собирать похожие элементы в кучу.
Основные тенденции, встречающиеся у больших братьев:
- Логотип слева;
- Кнопка определения местоположения слева над логотипом;
- Корзина справа;
- Избранное рядом с корзиной;
- Быстрые ссылки на популярные разделы;
- Поиск товаров занимает большую часть шапки;
- Отображение количества товаров в корзине и избранном с помощью небольшого индикатора с цифрой.
Этого уже достаточно, чтобы по образу и подобию составить свою, идеальную для e-commerce шапку. Однако, настоящий дизайнер при этом выделит ещё и уникальные решения, используемые на разных проектах:
- Расположение кнопки личного кабинета или регистрации совершенно разное, на том же Wildberries кнопки «Зарегистрироваться» или «Войти» нет вовсе. Вместо них есть кнопка «Профиль»;
- Кнопка для обратной связи в классическом виде представлена только на DNS, на двух других проектах номер телефона найти сложнее – кнопка «Звонок с сайта» на Wildberries блекловата, а на Ozon и вовсе вместо привычного тайтла используется кнопка «Служба поддержки»;
- Всплывающее окно быстрой корзины используется только на Wildberries (по слухам этот приём даёт прибавку к конверсии и позволяет бороться с эффектом «брошенной корзины»);
- Каталог на Ozon и DNS всегда вместе с пользователем и свёрнут в аккуратную кнопку, дабы не занимать лишнее место, в то время как на Wildberries решили вынести все разделы своеобразным облаком тегов. В принципе, оба решения правильные, т.к. пользователи обычно предпочитают пользоваться поиском и ищут конкретный товар, не тратя время на путешествие по виртуальным полкам с кучей подобного из запросу барахла. Однако, на первых двух проектах решение просто эстетически более приятное, в отличии от кучи ссылок.
Паттерн
На основе собранных закономерностей можно собрать «обычную шапку» и использовать её как шаблон в ваших проектах. Это сэкономит вам время и оградит от лишних споров с заказчиком о том «как надо» (если таковые будут).
Получилось три уровня нашего импровизированного «бутерброда», дополнить или видоизменить каждый из которых можно совершенно по-разному.
Например, первого уровня может не быть вовсе или же в нём дополнительно могут базироваться ссылки на мобильное приложение, электропочту, мессенджеры и соцсети.
На втором уровне структура уже более устоявшаяся и обычно большинство шапок на сайтах выглядит именно так – логотип слева, большой инпут поиска или блок ссылок на какие-то страницы в центре и справа функциональные кнопки, ведущие на важные для пользователя разделы. На лендингах справа обычно размещают БКК (Большую Красную Кнопку), в забугорном варианте «call-to-action button» – кнопку призывающую к действию.
Наконец, третий уровень является уже чисто коммерческим – там обычно размещаются ссылки на горячие разделы каталога, акции и прочие продвигаемые в настоящий момент страницы, услуги или товары. Отображать этот уровень уместно в том случае, если есть что продвигать или показать, иначе наполнять шапку «мусорными» ссылками не имеет смысла, а если важные ссылки есть, но их всего парочка, то можно попробовать поместить их на уровень выше, там им будет самое место.
Выводы
Анализ и полученный в результате паттерн это, конечно, хорошо, однако, важно не забывать о том, что порой не шаблонные решения тоже могут быть оправданы. При этом важно помнить одно – чтобы хорошо нарушать правила, нужно отлично в них разбираться. Экспериментируйте.😉
Кстати, подтверждением ваших слов о том, как должна выглядеть шапка на «обычном сайте» может служить ссылка на эту статью, поэтому не стесняемся делиться ею с друзьями.
Спасибо, что читаете! Надеюсь, эта статья была вам полезна.
Ставьте лайк 👍 и подписывайтесь на канал 📰