Как создать каталог товаров и услуг на сайте: структура и основные элементы товарного каталога

Мы создали десятки e-commerce проектов для b2c- и b2b-сегментов с учетом особенностей бизнеса. Основа создания каталога — большой выбор товаров и услуг в компании.

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

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

Как каталог повышает объем продаж

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

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

Если же в каталоге затруднен поиск, недостаточно информации о товаре или сложный интерфейс, люди уйдут на сайт конкурента, и привлечение аудитории окажется напрасным.

Как организовать каталог

Сайты e-commerce, как правило, претендуют на SEO-продвижение и генерацию трафика из поиска, поэтому для создания правильно организованного каталога проводим анализ поискового спроса перед составлением технического задания на разработку проекта.

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

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

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

Способы создания каталога

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

Сформировать каталог можно двумя способами.

В первом способе за основу берется структура каталога конкурента. Но здесь есть некоторые тонкости. Каталог конкурента может не подойти вашему бизнесу полностью: некоторые категории могут быть пропущены, организованы неудобно или могут содержать всего несколько товаров. Либо в нем есть ошибки, о которых вы узнаете уже после создания своего списка товаров. Если опираться на структуру каталога конкурента, то стоит делать это продуманно.

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

Элементы каталога и как их реализовать

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

Как оформить категории в каталоге

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

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

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

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

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

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

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

Если разместить все позиции на одной странице, это приведет к снижению скорости загрузки страницы. В этом случае стоит добавить либо пагинацию (переключение по страницам) либо вариант постепенной загрузки:

Чтобы было удобно, стоит предоставить возможность клиентам ввести номер нужной страницы и возможность указать, сколько товаров отображать на одной странице (например, 30/50/100).

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

Как оформить превью карточек в листинге

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

Например, для b2b-клиентов зачастую важнее найти определенную вещь по артикулу, а фото имеет меньшее значение, в этом случае превью может выглядеть так:

Помимо названия, изображения и цены в превью стоит добавлять информативные иконки. Например, в дизайн-концепции для Kama Tyres внутри карточки контент разделен на смысловые группы: иконка, выделяющая изделие среди других (хит продаж, новинка), акции, в которых участвует товар, отличительные особенности, цена, объединенная с кнопкой:

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

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

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

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

Как реализовать навигацию

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

Как сделать эффективный поиск

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

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

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

Как сделать функционал фильтрации и сортировки

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

Фильтры, как правило, располагаются в левой части экрана, если их много. Если фильтров мало, можно поместить их над списком товаров рядом с сортировкой:

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

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

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

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

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

Не используйте много критериев сортировки, выберите 3-4 основных, например, по цене, популярности, рейтингу.

Резюме

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

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

Больше наших кейсов, статей, практических рекомендаций для предпринимателей и маркетологов про разработку, маркетинг, аналитику, дизайн на нашем сайте: https://webest.ru/

Публикация перемещена в раздел «Вопросы»