Книга «Дизайн маркетплейса» . Главная страница . Каталог

Каталог — основная часть маркетплейса, с которой работает покупатель на сайте. Результаты поиска, меню категорий, работа с фильтрами, различные баннеры — всё это ведёт в каталог товаров.

Товары — то, зачем вообще люди посещают магазины. В маркетплейсах чаще всего используют два варианта выкладки товаров: плитками и списком.

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

Плитки товаров хорошо разбавить баннером того же размера. Это делает список визуально интереснее и помогает продвижению товаров.

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

С плитками есть два неочевидных момента.

Первый — фото товара.

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

Белый товар на белом фоне, обрезанные картинки — часто это выглядит не очень хорошо.

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

Для решения проблемы с картинками стали прибегать к помощи серой подложки и фильтра наложения Darken. Благо, современный html/css позволяют спокойно применять такие вещи.

То есть серый фон у картинок товаров на Маркете, к примеру — это как раз такая конструкция. Фотографии в итоге выглядят более единообразно.

И это хорошо.

Второй момент — неодинаковое количество элементов в плитке.

Понятно, что название у всех товаров разное. У каких-то товаров есть отзывы, у каких-то нет. Цена может быть обычной, а может быть со скидкой. Могут добавляться данные о сроках доставки и доступных размерах. Всё это делает контент плитки очень неоднородным. При этом высота плитки в любом случае должна оставаться одинаковой.

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

Название товара обычно ограничивают 2 или 3 строками. Должно быть одно значение на весь маркетплейс.

Под рейтинг и количество отзывов выделяется ещё одна строка.

Далее — цена. Если старая и новая цена сделаны в две строки, выравниванием контент по верхнему краю.

Кнопку «Купить» всегда прикрепляем к нижнему краю плитки.

Таким образом, высота плитки у нас фиксируется, а контент постепенно поджимается к картинке.

Номенклатура товаров на некоторых маркетплейсах доходит до нескольких миллионов. Понятно, что ВЫБИРАТЬ из такого количества очень сложно. Нужны какие-то инструменты.

Сортировка — первый важный способ работы с выборкой товаров. Встречаются разные комбинации контролов и параметров.

Один из самых удобных для пользователя вариантов сортировки – это самые обсуждаемые. Я постоянно им пользуюсь. Такой вариант реализован у DNS. Однако, подавляющее большинство маркетплейсов напрочь игнорирует этот вариант. Лично для меня это остаётся загадкой. Если вы знаете почему, напишите в комментариях.

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

В некоторых интернет-магазинах (чаще всего fashion-сегмента) встречается горизонтальное расположение фильтров. Я такой использовал при редизайне интернет-магазина “Ручкапаркер”. Однако, это возможно когда фильтров не очень много. В маркетплейсах же их наоборот огромное количество.

С фильтрами есть только одна неочевидная проблема. Не все продавцы качественно заполняют характеристики товаров. Часто они пишут ключевые характеристики в название товара. Из-за этого фильтрам просто неоткуда брать информацию о характеристиках.

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

Обычно существует два основных варианта: бесконечный скрол и классический.

С бесконечным скролом всё ясно. В конце списка товаров располагают кнопку «Загрузить ещё». При клике на неё подгружается ещё часть товаров. Как таковых страниц тут, собственно, и нет. Плюс очевиден: пользователь никуда не переходит, внимание не теряется, да и товары грузятся обычно оперативно.

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

Классический вариант подразумевает стандартную строку с номерами страниц. Часто к ней добавляют выбор количества выводимых товаров на странице. А иногда и переход на конкретную страницу.

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

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

.

#ui #ux #uiux #дизайнинтерфейсов #маркетплейсы