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

Выбор товара в каталоге для B2B- и B2C-клиентов имеет свои особенности. Вот на что обращают внимание покупатели розничных онлайн-магазинов:

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

В нашем проекте мы сделали несколько вариантов отображения карточек каталога: плитка, таблица и список. Так, товары для B2C-клиентов, как правило, отображают плитками, поскольку изображение вызывает положительные эмоции и подталкивает к совершению покупки. Из текста на карточке размещается только название, цена и некоторые параметры.

Так выглядят карточки в виде плитки для B2C-пользователей.

B2B-клиенты выбирают товар по-другому. Оптовые покупатели чаще всего привыкли видеть товары в виде таблицы, как, например, в 1С, или в виде списка. Это позволяет пользователю увидеть на первом экране до 10 товаров, что удобно для сравнения цен и характеристик. В табличном виде фотографии обычно маленькие, так как здесь важнее вывести всю необходимую информацию, чем показать товар лицом. 

В итоге, оптовым покупателям в каталоге важно увидеть: 

•  • много товаров на первом экране: это позволяет быстро просмотреть варианты и сравнить их между собой; 

•  • артикул в карточке товара: чаще всего B2B-пользователи ищут товары по артикулу; 

•  • базовый набор характеристик: если в B2C для пользователя важнее фотография, то в B2B — базовые характеристики товара: габариты, вес, цвет и т.д.

Так выглядят карточки в виде таблицы в каталоге для B2В.

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

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

Мобильная и десктопная версии таблицы с контрагентами и договорами.

Эта функция работы с товарами характерна исключительно для пользователей B2B-магазинов. В проекте Meesenburg мы учитывали, что юридическим лицам часто важно добавлять товары на сайт из Excel-файлов. Для удобства этого процесса мы добавили в корзину кнопку «Добавить товары из файла». При нажатии на нее пользователь переходит на новую страницу, где пошагово описано, как загрузить файл с артикулами.

Кнопка «Добавить товары из файла» для загрузки товаров на сайт.

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

Так выглядит страница загрузки товаров из файла.

Внедрение этого функционала значительно облегчило и ускорило процесс добавления товаров для данной категории пользователей.

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

Если в B2B и B2C товары имеют множество различных характеристик, важно предусмотреть удобное их сравнение. Согласно исследованиям организации Baymard Institute, отображение сложных характеристик в виде таблицы позволяет пользователям эффективно и быстро находить нужные детали товара. Поэтому для Meesenburg мы разработали страницу «Сравнение товаров», где пользователи могут легко сравнивать характеристики товаров с помощью таблицы.

Таблица для сравнения характеристик товаров.

Как на B2B, так и на B2C-ресурсах важно уделять внимание отображению фильтров в каталоге, особенно при разработке адаптивных версий. Мобильная версия сайта часто не позволяет отображать фильтры так же, как в десктопной версии, из-за ограниченного размера экрана.

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

Категории фильтров в виде тегов.

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

Это решение мы и применили для интернет-магазина Meesenburg — процесс оформления заказа представлен в виде шагов на одной странице.

Процесс оформления заказа на одном экране.

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

В заключение, несмотря на значительные различия между B2B- и B2C-клиентами в бизнес-процессах и ожиданиях, дизайн интернет-магазина должен быть одинаково удобным и интуитивно понятным для всех пользователей. Будь то юридическое лицо, принимающее решения на основе множества данных, или частный покупатель, совершающий покупку на ходу, интерфейс магазина должен удовлетворять их потребности, обеспечивая комфортный и легкий опыт взаимодействия. Учитывая особенности каждой аудитории и применяя пользовательско-ориентированный подход, можно создать сайт, который будет эффективно работать как для бизнеса, так и для конечного потребителя — это мы проверили на практике в Digital Clouds.