Как спроектировать каталог интернет-магазина

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

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

Поэтому правильный порядок такой: сначала проектирование структуры, затем дизайн и разработка. Ниже — как мы подходим к этому в студии Mevero при создании интернет-магазинов.

Начинаем с ассортимента и покупателя

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

Что изучить

• Ассортимент. Количество товаров, типы, общие и уникальные характеристики, сезонность, пополнение.
• Запросы в поиске. Как люди ищут товары: названиями, брендами, свойствами, задачами. Метод описан в статье про семантическое ядро.
• Поведение покупателей. Что спрашивают менеджеров, по каким критериям выбирают, что сравнивают.
• Конкуренты. Как они устроили категории и где оставили пробелы.
• Данные магазина. Если он уже работает, посмотрите внутренний поиск и популярные пути в аналитике.

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

Дерево категорий: принципы построения

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

Глубина и ширина

Оптимальная вложенность для большинства магазинов — два-три уровня. Первый уровень — крупные разделы, второй — типы товаров, третий — уточнения. Более глубокое дерево превращается в лабиринт: покупатель кликает снова и снова, не видя товаров. Слишком плоское, напротив, даёт на первом уровне десятки пунктов, которые невозможно охватить взглядом.

• Для меню первого уровня комфортно примерно от пяти до девяти пунктов.
• Если категорий больше, группируйте их по смыслу и используйте раскрывающееся меню с блоками.
• Категория, в которой всего несколько товаров, чаще всего лишняя: объедините её с соседней.
• Категория, где несколько сотен товаров, нуждается в подкатегориях или сильных фильтрах.

Один товар — один основной путь

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

Логика группировки

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

Названия категорий

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

• Используйте слова покупателя: «Холодильники», а не «Крупная бытовая техника для охлаждения».
• Избегайте внутренних терминов и аббревиатур, знакомых только сотрудникам.
• Не называйте разные категории похожими словами, чтобы не создавать путаницу.
• Не используйте расплывчатые «Прочее» и «Разное»: они становятся свалкой.
• Сохраняйте единый стиль: все во множественном числе или все с одинаковой структурой.

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

Атрибуты товаров: фундамент фильтров

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

Как организовать характеристики

1. Определите общие поля. Название, артикул, бренд, цена, наличие, описание, изображения.
2. Определите группы характеристик по типам товаров. У каждой категории свой набор.
3. Задайте формат значений. Числа с единицами измерения, списки допустимых значений, да или нет. Свободный текст там, где нужен фильтр, приводит к хаосу: «белый», «Белый», «белого цвета» превращаются в три разных значения.
4. Отметьте, какие характеристики участвуют в фильтрах, какие в сравнении, а какие только на странице товара.
5. Продумайте вариативность. Один товар в нескольких цветах и размерах: это один продукт с вариантами или разные карточки? Решение влияет на склад, цены и поиск.

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

Страница категории: из чего она состоит

Страница категории, или листинг, — самое посещаемое место после главной и карточки товара. Её задача — помочь выбрать и перейти к карточке.

Основные блоки

• Заголовок и хлебные крошки. Человек сразу понимает, где находится и как вернуться.
• Короткое вводное описание. Одно-два предложения с пользой для выбора. Развёрнутый текст можно разместить ниже товаров.
• Подкатегории. Визуальные плитки или ссылки для быстрого уточнения выбора.
• Фильтры и сортировка. Основной инструмент сужения.
• Сетка товаров. Карточки с главными данными.
• Постраничная навигация или подгрузка. Способ перейти к остальному ассортименту.
• Блок для SEO и помощи выбору. Полезный текст, ответы на вопросы, ссылки на популярные подборки.

Карточка товара в листинге

Миниатюра в списке должна дать ровно столько информации, сколько нужно для решения «открыть или пропустить»:

• Качественное изображение, при наведении или перелистывании — второй ракурс.
• Название с ключевыми характеристиками.
• Цена, а при скидке — старая цена и новая.
• Метки: «Новинка», «Хит», «Скидка», но без перегруза.
• Наличие и способ быстро добавить в корзину, если выбор прост.
• Рейтинг и число отзывов, если они есть.

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

Сортировка и количество товаров

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

• По умолчанию. Хорошо работает сортировка по популярности или по релевантности, а не по дате добавления: иначе первыми окажутся случайные новинки.
• По цене. По возрастанию и убыванию.
• По рейтингу. Если у товаров есть отзывы.
• По новизне. Для категорий, где важны свежие поступления.
• По размеру скидки. Для магазинов с распродажами.

Сколько товаров показывать на странице? Баланс между полнотой и скоростью. Слишком мало приводит к бесконечному перелистыванию, слишком много замедляет загрузку, особенно на мобильных устройствах. Типичное решение — от двадцати до сорока позиций, а для длинных списков кнопка «Показать ещё» либо классическая нумерация страниц. Бесконечная прокрутка удобна, но ломает возврат к месту и затрудняет добраться до подвала. Если вы выбираете её, обязательно сохраняйте позицию при возврате из карточки.

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

Покупатель должен всегда понимать, где он находится, и иметь несколько путей к нужному товару.

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

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

SEO-проектирование каталога

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

Как заложить SEO в структуру

1. Сопоставьте запросы и категории. Каждому кластеру запросов должна соответствовать страница. Если спрос есть на «угловые диваны», а такой страницы нет, вы упускаете трафик.
2. Определите, какие фильтры дают отдельные страницы. Комбинации с реальным спросом («диваны угловые серые») лучше превратить в самостоятельные страницы с уникальным заголовком и текстом, а остальные закрыть от индексации.
3. Продумайте адреса. Понятные, иерархичные, без лишних параметров.
4. Выстройте перелинковку. Из категорий — в подкатегории, из карточек — в категории и соседние товары, из статей — в нужные разделы. См. материал про внутреннюю перелинковку.
5. Решите вопрос с пагинацией и дублями. Корректные канонические адреса и настройки для страниц списка.
6. Настройте разметку. Для списков и карточек пригодится структурированная запись данных, как в статье про микроразметку Schema.org.
7. Продумайте поведение товаров, снятых с продажи. Страница должна перенаправлять на аналог или категорию либо сообщать о недоступности и предлагать альтернативы.

Технические настройки обхода важны особенно для больших каталогов, подробности — в статье про robots.txt и sitemap.xml. А как заложить всё это с самого начала, описано в статье SEO на этапе разработки.

Каталог и управление: думайте о менеджере

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

• Массовые операции. Импорт и экспорт, пакетное редактирование цен, статусов и категорий.
• Шаблоны и правила. Автоматическая генерация заголовков, описаний и адресов по правилам с возможностью ручной правки.
• Проверки данных. Обязательные поля, контроль дублей, предупреждения о пустых изображениях и описаниях.
• Роли и права. Кто может создавать, редактировать и публиковать.
• Интеграция с учётом. Остатки и цены обновляются автоматически.

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

Пример: каталог магазина мебели

Для проекта интернет-магазина мебели «Древо», который вы можете посмотреть в портфолио, ключевой задачей было сочетание двух логик выбора: по типу мебели и по помещению. Покупатель мог начать с «диваны» и дальше уточнить параметры, а мог зайти из раздела «Гостиная» и увидеть собранный набор. Основное дерево строилось по типам товаров, а выбор по помещениям реализован отдельными подборками, которые ссылаются на те же карточки без дублирования адресов.

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

Типичные ошибки проектирования каталога

• Структура по логике склада. Категории отражают устройство компании, а не мышление покупателя.
• Слишком глубокое дерево. Пять-шесть уровней вложенности.
• Дублирование товаров по разным путям. Несколько адресов на одну карточку без главного.
• Размытые названия. «Аксессуары», «Прочее», «Разное».
• Несогласованные характеристики. Разные единицы измерения и написания в одном поле.
• Игнорирование семантики. Структура не учитывает реальные запросы, и спрос остаётся без страниц.
• Перегруженные листинги. Слишком много информации и кнопок в миниатюре.
• Пустые категории. Страницы без товаров или с единственной позицией.
• Нет плана для снятых с продажи товаров. Покупатели попадают на страницу ошибки.
• Фильтры без продуманных данных. Они показывают пустые результаты или нелепые комбинации.

Пошаговый план проектирования

1. Соберите данные об ассортименте и составьте его инвентаризацию.
2. Изучите поисковые запросы и поведение покупателей.
3. Проведите карточную сортировку или опрос и выявите естественные группы.
4. Составьте черновое дерево категорий на два-три уровня.
5. Определите наборы характеристик для каждого типа товаров и формат значений.
6. Сопоставьте категории и запросы, определите страницы под фильтры и подборки.
7. Нарисуйте прототипы страницы категории и меню каталога. О том, как это делать, — в статьях про прототипирование сайта и wireframe.
8. Проверьте структуру на нескольких сценариях: «найти товар по типу», «найти по задаче», «сравнить два варианта».
9. Согласуйте процессы наполнения и обмена данными с учётной системой.
10. Запустите с небольшим набором, соберите обратную связь и доработайте.

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

Итог

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

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