Шапку часто перегружают огромным количеством информации. Считывать её сложно, глаза разбегаются. Поэтому ключевой подход к дизайну шапки маркетплейса — баланс. Как, впрочем, и к дизайну всего маркетплейса.
Структура
Шапка по-прежнему служит для мгновенного понимания пользователем где он находится. Так же в шапке располагается основная навигация. Для маркетплейса дополнительно — это кнопка каталога, поиск и ссылки на статичные страницы. Здесь же находятся ссылки перехода в кабинет и корзину.
Более-менее классический вариант шапки маркетплейса на середину 2023 года выглядит так:
И включает в себя:
- Логотип
- Гео: текущий город + дроп выбора
- Кнопка отображения каталога товаров
- Поиск + автокомплит
- Ссылки на статичные страницы (4-5 штук)
- Ссылка на личный кабинет
- Ссылка на корзину
Что часто забывают дизайнеры — шапка до авторизации и после неё сильно отличаются набором элементов. Точнее левая часть остаётся без изменений, а вот блок кабинета и корзины меняются радикально.
Старайтесь везде использовать понятные иконки и счётчики. Иконки в шапке, к тому же, играют роль носителей фирменного стиля. Важно делать их уникальными.
Геолокация
Любому маркетплейсу важна информация о пользователях. Не только для нужд персонализации.
Часть товаров на крупных маркетплейсах бывает доступна не во всех регионах и не во всех странах. Плюс, на эту же геолокацию завязана логистика продавцов.
Работа с Гео состоит из двух моментов. На старте всегда выводится информирующий попап с автоматически опредлённым регионом:
Если пользователь хочет изменить регион, попап меняется на другой.
Здесь нужно дать возможность найти свой регион в поиске или вернуться назад:
Некоторые нишевые маркетплейсы выводят блок с популярными регионами. Для РФ часто делят попап на две части: слева выводят области, а справа — города. Однако, поиск всё таки оптимальнее.
Почему я всё время пишу “регион”, а не “город”. В РФ помимо городов есть множество сёл, деревень и других мест. В других странах это могут быть районы, мухафазы, провинции, префектуры, федеральные земли и Бог знает что ещё.
Меню каталога
Каталог всегда максимально выделяют из навигации. Иногда делают просто “гамбургер”, иногда полноценную кнопку “Каталог”. Но всегда это самая заметная кнопка на странице.
Как вариант, я вывел справа сразу два уровня. Третий — заголовком, четвертый — блоком ссылок.
Каталоги в маркетплейсах бывают поистине безразмерные. Несколько тысяч категорий и свыше миллиона товаров — легко. Поэтому, делая меню, помните про масштабирование по всем направлениям. При этом вложенность не должна превышать 3-4 уровней в идеале. Я видел вложенность и в 8 уровней — это сущий ад для покупателя.
Поиск
Поиск — одно из самых важных мест на маркетплейсе. Объект повышенного внимания покупателей.
Изначально он работал просто как поле для ввода текста и перехода на страницу с результатами. Современный же поиск — это гораздо более сложный инструмент.
Он умеет предлагать варианты из товаров, категорий и брендов. Умеет угадывать и исправлять морфологию. Словом, старается додумать что же ищет пользователь.
Поэтому важно уметь грамотно всё это оформить:
С технической точки зрения автокомплит может ощутимо нагружать сервер. Ведь нужно постоянно пробегать каталог товаров и бренды.
Имеет смысл заранее выянсить у команды разработчиков, есть ли какие-то особенные технические ограничения.
Настройки пользователя
Для международных маркетплейсов на видное место выносят настройки пользователя: выбор языковой версии и выбор валюты.
В некоторых странах, кстати, параллельно существует несколько языков. Например, в Канаде — это английский и французский.
И, конечно, не забываем про меню пользователя. Здесь важно дать ссылки на все ключевые разделы личного кабинета.
Правда, и тут бывают перегрузы. Поэтому снова соблюдаем баланс!
Корзина
Я считаю, что забота о пользователе — одна из важнейших задач дизайнера. Многие про это забывают в угоду продажам. Я стараюсь экономить время и клики пользователей.
Например, “выпадающий” попап с содержимым корзины не является обязательным. Однако, он удобен:
Отдельно можно сказать ещё про “клейкую/sticker” шапку. Это тоже очень удобный инструмент для маркетплейса. Она должна занимать меньше места, чем стартовый блок, но давать возможность перехода по категориям и воспользоваться поиском.
Напоследок
Казалось бы, шапка — простейший блок на сайте. Но в проектировании и дизайне маркетплейса она становится одним из важнейших элементов.
