Как дизайнеру сделать понятный интерфейс для B2B​-каталога техники

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

Рассказываем, как дизайнеру сделать такой интерфейс, который поможет продавать и не отвлечёт от сути.

Понять, кто именно будет пользоваться каталогом

Первое, с чего нужно начать — не с дизайна, а с изучения целевой аудитории. В B2B​-сегменте сайты используют:

  • Закупщики, которые ищут конкретную модель под ТЗ, ориентируются на цену и наличие;
  • Инженеры, которым важно изучить технические параметры и совместимость;
  • Менеджеры, которым нужно сравнить варианты, запросить КП или отправить ссылку начальству.

В отличие от B2C​-пользователей, они не станут изучать витрину, читать рекламные описания и смотреть слайдеры. Их цель — за 1–2 минуты найти подходящую позицию и понять, что с ней делать.

Например, инженер ищет погрузчик электрический вилочный, который поднимет 2 тонны на высоту 3,5 метра, работает от 48 В и проходит в узкие проходы. Его не интересует дизайн обложки каталога, но он точно оценит удобный фильтр и краткие характеристики прямо на карточке.

Продумать фильтры в первую очередь

Продумать фильтры в первую очередь

Фильтры — главный инструмент B2B​-каталога. Если они не работают или плохо оформлены, пользователь просто не сможет отобрать нужные модели.

Советы:

  • Размещайте фильтры в левом или верхнем блоке, всегда в пределах видимости.
  • Не прячьте параметры в выпадающие меню без необходимости. Лучше сразу показывать основные характеристики.
  • Используйте термины, принятые в отрасли. Если вся индустрия говорит «грузоподъёмность», не заменяйте это словом «нагрузка».
  • Добавьте фильтр по наличию, бренду, типу управления — это поможет отсеять лишнее.
  • Показывайте количество найденных товаров при каждом изменении фильтра, чтобы пользователь не терялся.

Хорошая идея — сохранить выбор пользователя, чтобы при возвращении на страницу не пришлось настраивать заново.

Сделать карточки товаров техническими и лаконичными

Сделать карточки товаров техническими и лаконичными

В B2B карточка товара — это не эмоция, а лист ТТХ. Но это не значит, что она должна быть скучной или нечитаемой.

Что должно быть в карточке:

  • Фото товара или схемы;
  • Название и артикул;
  • Краткие характеристики (грузоподъёмность, габариты, тип двигателя);
  • Кнопка «Запросить цену» или «Скачать спецификацию»;
  • Индикатор наличия;
  • Ссылка на PDF-файл с подробным описанием.

Полезно разместить блок с аналогами или рекомендациями: «Похожие модели», «Может подойти для…». Это помогает пользователю, если нужной позиции нет в наличии.

Убрать всё лишнее и не пытаться вдохновлять

В потребительских интернет-магазинах любят использовать баннеры, акции, яркие заголовки. В B2B​-каталоге это только мешает.

Не стоит добавлять:

  • Слайдеры и видео на главной;
  • Поп-апы с «успей заказать»;
  • Оформление в духе маркетплейсов.

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

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

Придумать логичную иерархию каталога

Придумать логичную иерархию каталога

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

Ошибки:

  • Слишком сложная структура с 5–6 уровнями вложенности;
  • Креативные названия разделов типа «Машины нового поколения»;
  • Разделение по внутренним бизнес-единицам компании.

Лучше:

  • Простой список категорий: «Погрузчики», «Штабелёры», «Тележки»;
  • Упорядочивание по назначению, а не по бренду;
  • Возможность быстро вернуться на уровень выше.

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

Добавить действия без регистрации

Закупщик не хочет регистрироваться, чтобы скачать спецификацию. Ему нужно:

  • Скачать PDF без лишних шагов;
  • Сравнить 2–3 модели по ключевым параметрам;
  • Отправить ссылку коллеге;
  • Запросить цену без ввода ИНН, КПП и наименования юрлица.

Удобные функции:

  • Кнопка «Отправить в Telegram» или «Скопировать ссылку»;
  • Сравнение по таблице;
  • Простой pop-up с формой на 2 поля: имя и телефон или e-mail.

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


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

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

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

Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте admin@rugraphics.ru

Оцените автора
( Пока оценок нет )
RuGraphics
Добавить комментарий