Каталог — основная часть маркетплейса, с которой работает покупатель на сайте. Результаты поиска, меню категорий, работа с фильтрами, различные баннеры — всё это ведёт в каталог товаров.
Список товаров
Товары — то, зачем вообще люди посещают магазины. В маркетплейсах чаще всего используют два варианта выкладки товаров: плитками и списком.
Также стали встречаться альтернативные варианты раскладок для отдельных категорий. Например, обуви и электроники. В них используется более крупное фото товара или выделяется больше места под технические характеристики.
Плитки товаров хорошо разбавить баннером того же размера. Это делает список визуально интереснее и помогает продвижению товаров.
В плитке товара обычно должно помещаться множество функций. Самым компактным, и при этом, самым удобным способом:
- Фото товара. Часто при наведении мышки (или автоматически) фотографии листаются.
- Название. Здесь нужно следить за размером текста. Я встречал “мемуары” в несколько сотен символов.
- Категория или бренд. Иногда враз. У WB можно встретить подобные конструкции.
- Оценка и количество отзывов. Оценки бывают и в цифрах, и в звёздах. А вот количество отзывов – очень полезная штука.
- Цена, конечно. Надо помнить про вариант распордажи. Когда есть две цены: старая перечёркнутая и новая. Дополнительно бывает приписка “от”.
- Иконка добавления в список избранного.
- Иконка добавления в список сравнения.
- Кнопка “Купить”, конечно. Или “В корзину”.
- Иногда в плитку добавляют список доступных размеров или цветов.
Пара моментов
С плитками есть два неочевидных момента.
Первый — фото товара.
Проблема в том, что фото у всех товаров разные. Кто-то заказывает прямо дизайнерское оформление. А кто-то может загрузить первое попавшееся фото из интернета.
Белый товар на белом фоне, обрезанные картинки — часто это выглядит не очень хорошо.
Плюс, сами товары бывают и горизонтальные, и вертикальные, и условно квадратные. Из-за этого картинки выглядят разношёрстными и могут поломать вам стиль оформления.
Для решения проблемы с картинками стали прибегать к помощи серой подложки и фильтра наложения Darken. Благо, современный html/css позволяют спокойно применять такие вещи.
То есть серый фон у картинок товаров на Маркете, к примеру — это как раз такая конструкция. Фотографии в итоге выглядят более единообразно.
И это хорошо.
Второй момент — неодинаковое количество элементов в плитке.
Понятно, что название у всех товаров разное. У каких-то товаров есть отзывы, у каких-то нет. Цена может быть обычной, а может быть со скидкой. Могут добавляться данные о сроках доставки и доступных размерах. Всё это делает контент плитки очень неоднородным. При этом высота плитки в любом случае должна оставаться одинаковой.
Для фиксации высоты плитки используется гибридный подход с ограничением количества символов текста и выравниванием по высоте.
Название товара обычно ограничивают 2 или 3 строками. Должно быть одно значение на весь маркетплейс.
Под рейтинг и количество отзывов выделяется ещё одна строка.
Далее — цена. Если старая и новая цена сделаны в две строки, выравниванием контент по верхнему краю.
Кнопку «Купить» всегда прикрепляем к нижнему краю плитки.
Таким образом, высота плитки у нас фиксируется, а контент постепенно поджимается к картинке.
Сортировка
Номенклатура товаров на некоторых маркетплейсах доходит до нескольких миллионов. Понятно, что ВЫБИРАТЬ из такого количества очень сложно. Нужны какие-то инструменты.
Сортировка — первый важный способ работы с выборкой товаров. Встречаются разные комбинации контролов и параметров.
Один из самых удобных для пользователя вариантов сортировки – это самые обсуждаемые. Я постоянно им пользуюсь. Такой вариант реализован у DNS. Однако, подавляющее большинство маркетплейсов напрочь игнорирует этот вариант. Лично для меня это остаётся загадкой. Если вы знаете почему, напишите в комментариях.
Фильтры и теги
Второй важный инструмент работы со списком товаров – конечно, всевозможные фильтры. Они появились вместе с первым интернет-магазином и до сих пор позволяют существенно сократить список товаров в выборке.
В некоторых интернет-магазинах (чаще всего fashion-сегмента) встречается горизонтальное расположение фильтров. Я такой использовал при редизайне интернет-магазина “Ручкапаркер”. Однако, это возможно когда фильтров не очень много. В маркетплейсах же их наоборот огромное количество.
С фильтрами есть только одна неочевидная проблема. Не все продавцы качественно заполняют характеристики товаров. Часто они пишут ключевые характеристики в название товара. Из-за этого фильтрам просто неоткуда брать информацию о характеристиках.
Тут важно поработать с продавцами, показать шаблоны карточек и требовать заполнения ключевых характеристик.
«Пагинация»
Обычно существует два основных варианта: бесконечный скрол и классический.
С бесконечным скролом всё ясно. В конце списка товаров располагают кнопку «Загрузить ещё». При клике на неё подгружается ещё часть товаров. Как таковых страниц тут, собственно, и нет. Плюс очевиден: пользователь никуда не переходит, внимание не теряется, да и товары грузятся обычно оперативно.
Минусы чуть менее очевидны. Во-первых, очень длинный список рано или поздно начинает нагружать браузер и процессор. Во-вторых, найти повторно какой-либо заинтересовавший товар в этом списке становится невыполнимой задачей.
Классический вариант подразумевает стандартную строку с номерами страниц. Часто к ней добавляют выбор количества выводимых товаров на странице. А иногда и переход на конкретную страницу.
Напоследок
На главной странице я отбиваю две строки с плитками товаров горизонтальным баннером-перетяжкой. На странице самого каталога такого лучше не делать. Мозг посетителя начинает воспринимать строки товаров до баннера как рекламу. По аналогии с поиском. Из-за этого автоматически включается фильтр восприятия, и товары выпадают из поля внимания.
Вообще, маркетплейс до сих пор остаётся обширным полем для экспериментов. И список товаров не исключение. Поэтому, не стесняйтесь подходить к этой задаче творчески. Но не забудьте посоветоваться с маркетологами и аналитиками.