Как сделать каталог товаров на сайте

На каких сайтах нужен каталог

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

Ниша, в которой каталог товаров является мастхэвом — e-commerce. Это направление бизнеса процветает, и все больше предпринимателей создают свои интернет-магазины и выходят на маркетплейсы — в 2022 году объем рынка вырос на рекордные 38%. 

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

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

Еще один проект Атвинты — сервис «Просто Вещи». Это многообещающий стартап в формате P2P, где пользователи могут онлайн сдавать и арендовать спорттовары, одежду, технику, оборудование и многое другое.

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

Каталоги товаров и услуг могут быть размещены и на некоторых корпоративных сайтах. Компания «Раймет», для которой мы создали сайт с эффектными 3D-моделями, поставляет метеорологическое оборудование. Бизнес работает в B2B и B2G-сегментах, и продукт настолько специфичен, что продажи осуществляются только через менеджеров. Поэтому на сайте вместо корзины и онлайн-оплаты есть только форма заявки.

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

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

Как каталог влияет на продажи

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

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

Каталог — это винтик в большой цепочке на пути к успешной сделке. Если клиент оказался на сайте, значит, вся предыдущая работа по привлечению клиента прошла успешно. Однако все может разрушить неудобный интерфейс.

В каталоге клиенту важны:

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

Качественный каталог не только поможет сделать выбор, но еще и увеличит чек покупки.

Например, в сервисе «Просто Вещи» мы отобразили размер скидки при долгосрочной аренде — чем больше дней проката, тем дешевле стоимость аренды в сутки. Увидев эту информацию в карточке, клиент может заинтересоваться более долгим сроком аренды. 

Разбор основных элементов каталога

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

Как оформить карточку товара

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

Задача карточки товара — предоставить краткую вводную информацию, чтобы клиент мог предварительно ознакомиться с товаром и перейти на страницу с подробной информацией. При заполнении карточки товара важно включать следующий обязательный минимум: 

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

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

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

В карточке может пригодиться экспресс-просмотр — функция позволяет вывести более развернутую информацию о продукте «поверх» уже открытой страницы. Главный плюс — в экономии времени и места. Пользователю не надо открывать еще одну вкладку и ждать прогрузку целой страницы.

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

Также полезно реализовать галерею фотографий, чтобы клиент мог рассмотреть товар с разных ракурсов.

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

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

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

Чтобы мотивировать клиента к покупке, можно размещать акцентные плашки прямо на фото товара, например, с размером скидки, отметкой bestseller и другими короткими информативными надписями, как мы это сделали в интернет-магазине уюта FindMood.

Как разместить карточки в каталоге

Чтобы карточки товаров не смешивались в интерфейсе, их нужно визуально отделить друг от друга.

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

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

В некоторых случаях возможна более креативная раскладка карточек. Нестандартный подход мы применили в арт-маркетплейсе TARA — площадке для онлайн-продажи предметов искусства.

В этом случае мы этично демонстрируем труд авторов и при этом заботимся о пользователе. Ему удобно просматривать каталог, потому что карточки достаточно крупные. Здесь мы отошли от общего правила по поводу выделения цены и все внимание направили на визуал, потому что эстетика — главный критерий при покупке предметов искусства.

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

Также карточки можно сверстать в построчном формате. 

Оптимальное количество карточек в строке для десктопной версии — 3-5 штук. В мобильной версии стоит размещать не более 2 карточек или реализовать поочередное пролистывание карточек скроллом.

Прием который добавит кастомизации сервису — возможность вывести товары списком или плиткой. Так клиент сможет выбрать наиболее удобный для себя способ отображения каталога.

Управление каталогом продукции

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

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

Навигация по каталогу

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

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

Например, кроме очевидной разбивки на макияж, волосы и другие категории в разделе «Красота», Wildberries предлагает ознакомиться с корейскими брендами, которые завоевали отдельное место в бьюти-индустрии.

Поиск

В поисковой строке пользователь может написать запрос на нужную позицию. 

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

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

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

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

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

Сортировка

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

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

Фильтрация 

Функция позволяет не прибегая к поиску отсеять лишнее и сформировать интересующую группу товаров.

В разработке системы фильтров катастрофически важна аналитика и понимание того, как размышляет пользователь во время интернет-шопинга. Какие параметры важны для него? На что обращает внимание в первую очередь? На какие ценовые категории делит товар? При этом важна и сама группа товаров — набор фильтров для платьев и игровых ноутбуков будет сильно отличаться по наполнению.

Зачем нужна аналитика в проекте?

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

Блоку с фильтрами не стоит отдавать много пространства — основную часть экрана должны занимать карточки.

Первыми необходимо разместить ключевые фильтры. Это те параметры, к которым пользователь обращается в первую очередь, например, цена и размер. 

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

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

Еще один прием, чтобы быстрее вовлечь клиента в поиск товаров — это быстрые фильтры, которые сразу переведут его в более релевантную категорию. 

Подведем итоги

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