Электронный каталог промышленной продукции: уменьшаем число ошибочных заказов

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

Выбор товара начинается с задачи

Если каталог не обозначает разницу в позициях, вопрос переходит к менеджеру. Он раз за разом объясняет, какая марка полимера подходит для выдува и чем HD12443 FE отличается от HD12503 FE. По данным Gartner, на встречи с поставщиками B2B-покупатели тратят около 17% времени закупки. Остальное время они изучают варианты сами, и каталог, который не отвечает на вопросы, этот этап только удлиняет.

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

Пример сложного каталога, в котором собраны визуально одинаковые товары — наш проект для СИБУРа. Одних только базовых полимеров в каталоге СИБУРа 473 позиции. Для покупателя большая часть из них визуально неотличима. Инженер выбирает материал под технологию переработки и требования к изделию, внешний вид ему ничего не сообщает.

Карточка применения вместо фото товара

В каталоге СИБУРа сценарий использования — основа каталога, он заложен в навигацию. Продукт можно искать по трем осям: отрасли, группе продуктов и методу переработки. Мы заложили все сценарии из множества отраслей: строительство, медицина, гибкая и жесткая упаковка, транспорт, агропромышленный комплекс. Методов переработки около тридцати: от литья под давлением до экструзии с раздувом. Благодаря такой структуре пользователь достигает цели в три клика.

В самой карточке принцип «от сценария пользователя» работает, если:

• область применения стоит выше технического описания;

• сценарии показаны тегами или пиктограммами, ведь одна марка часто подходит для нескольких изделий;

• из карточки можно перейти к другим маркам для того же применения.

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

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

Таблица характеристик как главный элемент страницы

Если продукт нельзя показать, его объясняют цифрами. Для вспенивающегося полистирола, например «Альфапор ПСВ марки 251», ключевые данные такие: размер гранул, плотность после вспенивания, содержание вспенивателя и группа горючести. Технолог завода пенопласта по ним сразу понимает, подойдет ли сырье для его плит и линии. Чтобы он быстро нашел нужное, таблица характеристик должна стоять в центре карточки, а не внизу под описанием и условиями доставки.

Сухую таблицу дизайнер превращает в структуру, которую удобно сканировать:

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

• второстепенные данные, например, остаточный стирол, влажность и тип упаковки, свернуты в раскрывающийся блок;

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

Последний пункт легко упустить. Плотность после вспенивания зависит от режима: однократного или многократного вспенивания, температуры и времени выдержки в паре. Если не указать условия, «низкую плотность» нельзя сравнить с данными другого производителя, и технолог снова звонит менеджеру.

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

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

Фильтры, с которых начинается выбор

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

Фильтры помогают, когда в них есть:

• названия на языке покупателя, а не внутренний код;

• диапазоны для числовых параметров вместо длинных списков значений;

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

• подсказка ближайших марок на случай пустой выдачи.

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

В каталоге СИБУРа фильтрация начинается прямо с главной страницы. Пользователь выбирает отрасль, группу продуктов или метод переработки и за три шага доходит до марки. Например, если выбрать экструзию с раздувом, останется 59 позиций. Дерево разделов никуда не делось, но перестало быть единственным путем.

В каталоге «Северсталь Стальные Решения» путь сокращает плоская структура. В ней три уровня вложенности, и самая дальняя страница находится в двух кликах от главной.

Цвет и форма как система идентификации

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

Ограничений три.

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

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

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

Каталог, с которым работают менеджеры

Хороший каталог разгружает не только покупателя, он упрощает жизнь и менеджеру. Например, в каталоге СИБУРа пользователь сам отмечает нужные марки, и система собирает PDF с коммерческим предложением в едином стиле с сайтом. Менеджерам больше не нужно верстать подборки вручную: каталог стал их ежедневным инструментом продаж. Полную версию каталога можно скачать в PDF, краткую — в PDF или XLS.

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

На заявки влияет и число призывов к действию. В каталоге «Северсталь Стальные Решения» их три-четыре на странице и не больше одного в экране, чтобы внимание не распадалось между кнопками. В СИБУРе у каждой марки в списке своя кнопка «Оставить заявку», и запрос сразу привязан к конкретной позиции.

Тест на 30 секунд

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

Проверить свой каталог можно так:

• дать пяти-шести пользователям из целевой аудитории задачу вроде «найдите марку для выдувного формования с ПТР от 0,3» и засечь время;

• посмотреть в аналитике, какая доля сессий использует фильтры;

• найти поисковые запросы и комбинации фильтров с пустой выдачей;

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

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