Каталог продукции на корпоративном сайте: структура, данные и заявки

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

Каталог продукции на корпоративном сайте должен помогать покупателю выбрать решение и подготовить предметный запрос. Для B2B-продукта это часто важнее немедленной оплаты: посетителю нужны характеристики, совместимость, условия поставки и возможность передать выбранные позиции менеджеру. Если каталог показывает только фотографии и названия, он остаётся витриной и переносит всю работу по уточнению на отдел продаж. Ниже разберём устройство каталога для производителя, поставщика или сервисной компании: структуру, карточки, фильтры, документы и путь до заявки. Речь идёт о проектировании информационного продукта, а не о выборе CMS. Примеры условные и предназначены для проверки решений; они не описывают конкретного клиента 404gen и не обещают рост конверсии. Какую задачу решает каталог продукции Каталог продукции на сайте — система категорий, карточек и средств выбора, которая связывает ассортимент компании с задачами покупателя. Полезный каталог объясняет различия товаров, ограничения применения и следующий шаг: заказать, запросить расчёт, подобрать аналог или получить консультацию. Его качество оценивают по завершению этих сценариев и достоверности данных. Перед проектированием выберите основные ситуации. Человек может знать артикул, искать аналог, подбирать товар по характеристикам или изучать решения для отрасли. Для этих путей нужны разные входы. Поиск по коду не заменяет обзор категорий, а крупный баннер не помогает специалисту найти конкретную модификацию. Структура должна поддерживать реальные способы выбора. Отдел продаж полезен как источник вопросов, но его внутренние термины не всегда совпадают с языком покупателей. Соберите обращения, перечень типовых уточнений и реальные запросы поиска. Затем проверьте, может ли сайт ответить на вопрос без звонка. Цель не в том, чтобы убрать менеджера, а в том, чтобы разговор начинался с понятной потребности. Аудит ассортимента до дизайна Начните с данных: группы товаров, варианты, единицы, документы, фотографии и владельцы полей. Дизайн не исправит смешанные характеристики и отсутствие идентификаторов. Если один и тот же товар представлен в таблицах с разными названиями, потребуется сопоставление. Если документы не связаны с версиями продукта, посетитель может скачать неподходящую инструкцию. Составьте небольшой инвентаризационный набор, включающий сложные позиции: изделие с вариантами, комплект, расходный материал, товар под заказ и снятую с производства модель. На нём удобно проверить будущую структуру. Одна идеальная карточка не показывает, как система будет работать с неполными данными, длинными названиями и разными единицами измерения. Для каждого поля укажите источник и ответственного. Технические параметры подтверждает продуктовый специалист, условия поставки — коммерческий отдел, фотографии — редактор, остатки — учётная система. Ошибка часто возникает, когда удобный для заполнения CMS текст становится источником неподтверждённых характеристик. Сайт должен публиковать согласованные сведения. Какие позиции являются отдельными товарами, а какие — вариантами? Какие свойства обязательны для выбора и сравнения? Где хранится актуальная версия документа? Какие поля можно показывать публично? Кто подтверждает изменения и исправляет ошибки? Что делать с отсутствующей фотографией или характеристикой? Структура каталога: от задачи к категории Категории должны отражать устойчивые различия ассортимента, понятные покупателю. Не копируйте без проверки внутреннюю структуру склада или бухгалтерские группы. Они решают другой вопрос. Полезная категория объединяет товары, между которыми посетитель действительно выбирает, и даёт критерии дальнейшего уточнения. Учебный пример: поставщик предлагает насосы, комплектующие и сервис. Внутренняя группа «Прочее» удобна для учёта, но не объясняет задачу пользователя. На сайте можно разделить оборудование и расходные компоненты, а решения по применению сделать дополнительными входами. Конкретная иерархия проверяется с пользователями и специалистами по продукту. Избегайте слишком глубокой цепочки, в которой человек вынужден угадать каждое промежуточное название. При этом плоский список всего ассортимента тоже затрудняет выбор. Проверяйте структуру на характерных заданиях: найти известную позицию, подобрать продукт с ограничением, сравнить варианты. Результат проверки полезнее произвольного правила о допустимом числе уровней. Если товар относится к нескольким сценариям, можно дать несколько входов к одной карточке. Не нужно создавать независимые копии, которые затем расходятся в характеристиках и ссылках. Отраслевой раздел объясняет применение и ведёт к согласованным позициям. Основная карточка остаётся единым местом достоверных данных. Модель товара и варианта Разделите семейство продукта и конкретную поставляемую позицию. Семейство описывает общую технологию и назначение; вариант — характеристики, код, комплектность и условия заказа. Это особенно важно, когда разные размеры или исполнения отличаются не только цветом, но и совместимостью. Вариант должен быть однозначно выбран перед отправкой заявки. Если посетитель выбрал мощность, но не исполнение подключения, запрос может оказаться неполным. Интерфейс должен либо потребовать нужный параметр, либо явно отправить запрос на подбор. Нельзя отображать готовую спецификацию, если часть выбора ещё не сделана. У каждой позиции нужен устойчивый идентификатор. Публичный артикул и технический ключ могут различаться; важно сохранить связь с источником данных. Это помогает обновлять карточки, отслеживать заявку и связывать документ с товаром. При изменении названия прежние ссылки и история запросов не должны потерять смысл. Уровень Содержимое Действие посетителя Категория Назначение и различия групп Выбрать подходящий класс Семейство Общие свойства и варианты Понять возможности продукта Позиция Конкретные параметры и документы Добавить в запрос или заказать Решение по задаче Контекст применения и ограничения Перейти к подходящим позициям Карточка: что должно быть видно сразу Первый экран карточки должен позволять понять, тот ли это продукт. Нужны название, изображение, назначение, ключевые параметры и действие. Для сложной покупки добавьте способ уточнить совместимость. Подробные таблицы идут дальше, но критическое ограничение нельзя прятать в документе, который человек может не скачать. Пишите назначение конкретно. «Высокое качество и инновационная технология» не помогает выбирать. Полезнее назвать рабочую среду, диапазон применения и существенные условия установки — только по подтверждённым данным. Если сведений нет, отметьте необходимость консультации, а не заполняйте пробел правдоподобным предположением. Покажите, что именно входит в поставку. На фотографии могут быть дополнительные элементы, которые не входят в выбранную комплектацию. Подпись и список должны снимать эту неоднозначность. Если стоимость рассчитывается после уточнения, кнопка должна обещать расчёт, а не немедленную покупку по отсутствующей цене. Действие связывается с карточкой автоматически. Менеджеру полезно получить название, выбранный вариант, количество и вопрос клиента. Форма «Ваше имя и телефон» без контекста заставляет снова выяснять, что человек смотрел. Контекст следует передавать безопасно и проверять на сервере, не полагаясь только на скрытые поля браузера. Характеристики: единицы и сравнимость Характеристики должны быть нормализованы: одинаковое свойство имеет одно значение смысла, тип и единицу. Если мощность записана то числом, то строкой «примерно», фильтр и сравнение будут работать непредсказуемо. Сначала согласуйте модель данных, затем создавайте элементы управления. Разделяйте неизвестное, неприменимое и нулевое значение. Отсутствие параметра не означает, что он равен нулю. В таблице можно показать «не указано» или «не применяется» с понятным смыслом. Для фильтра выбирают правило включения таких позиций: они не должны исчезать случайно из-за технической пустоты. Проверяйте диапазоны и варианты записи. Если часть товаров использует миллиметры, а часть сантиметры, переводите значения согласованно и сохраняйте точность. Если характеристика зависит от исполнения, показывайте её после выбора варианта. Общая таблица семейства не должна создавать впечатление, что все параметры относятся к любой позиции. Для пользователя полезно объяснить сложное свойство рядом с полем: что оно означает и когда важно. Это снижает нагрузку на справочную страницу. Объяснение не должно заменять техническую документацию или обещать совместимость без основания. В сомнительном случае предложите проверку со специалистом по конкретным условиям. Фильтры: только полезные критерии Фильтр помогает сузить выбор по признакам, которые покупатель понимает и может указать. Не выводите каждое поле базы как отдельный элемент. Слишком длинная панель заставляет разбираться в структуре данных вместо выбора продукта. Начните с критериев, которые определяют совместимость, назначение и доступность. Показывайте выбранные условия и способ их отменить. Когда выдача пуста, объясните причину и предложите ослабить конкретный фильтр. Нельзя просто показать «ничего не найдено», если человек не понимает, какое сочетание исключило товары. Для сложной категории полезна возможность отправить параметры специалисту. Диапазоны проверяйте на реальных данных. Ползунок выглядит эффектно, но для точного технического значения иногда удобнее два поля. Множественный выбор требует понятной логики: значения одного свойства могут объединяться иначе, чем разные свойства. Пользователь должен предсказать результат без чтения инструкции. На телефоне фильтры должны сохранять состояние и ясно показывать число выбранных условий. Открытие панели не должно сбрасывать результаты или терять позицию в списке. Проверяйте клавиатуру, фокус, подписи и возможность завершить выбор одной рукой. Удобство определяется сценарием, а не количеством анимаций. Поиск по названию, артикулу и задаче Поиск должен учитывать характер запроса. Артикул предполагает точное совпадение или близкий код; задача — смысловую группу; название — варианты написания. Настройки ранжирования и подсказок зависят от модели ассортимента. Не стоит автоматически считать одинаково полезными все совпадения строки в описании. Соберите обезличенный список реальных запросов и ожидаемых результатов. Добавьте ошибки раскладки, сокращения, старые названия и отсутствие результата. Для каждого запроса определите, что пользователь должен увидеть и какое действие выполнить. Это станет проверочным набором при изменении поискового движка. Точное совпадение артикула полезно показывать явно. Если код найден только внутри длинного документа, это не равно найденной позиции. Если товар снят с производства, результат может вести на его карточку и объяснять дальнейший шаг, например запрос аналога. Не подменяйте неизвестную совместимость автоматической рекомендацией. Поиск — дополнительный вход, но карточки не должны существовать только за поисковой формой. В рекомендациях Google по структуре каталога описана доступность товаров через ссылки категорий. Поисковый робот обычно не заполняет внутреннюю форму поиска. Поэтому согласованная навигация важна отдельно от качества выдачи. Фотографии, схемы и документы Графика должна помогать оценить продукт: общий вид, важный узел, размерная схема или способ установки. Выбирайте материалы по задаче, а не по количеству изображений. Для технической продукции схема может быть полезнее декоративного рендера. При этом изображение обязано соответствовать выбранной модели и комплектации. Проверьте происхождение материалов и допустимость использования. Если фотографий пока нет, можно использовать явно обозначенную иллюстрацию, но нельзя выдавать сгенерированное изображение за подтверждённый вид конкретного изделия. Для продукции с важными конструктивными отличиями такая подмена способна привести к неправильному выбору. Документу нужны название, назначение, версия и связь с товаром. Ссылка «Скачать файл» не объясняет, что внутри. Уточняйте формат и размер там, где это полезно, проверяйте досту

Автор: Егор Лебедев, Frontend Developer, 404gen.