Акция
Акция

Проектирование интерфейсов B2B-сайтов: разбираем, как представить основную информацию 

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

Для начала определим особенности принятия решений в сфере В2В о заказе услуги или покупке товара:

  • Отсутствие спонтанности. Чаще всего заказ оформляет менеджер, у которого есть четкий список характеристик и условий, согласно которому идет отбор компании. Решение согласовывается с начальством и в среднем может занимать от нескольких дней до полугода.
  • Продукт должен подойти к системе. Новая закупка товаров должна стать частью сформированной базы, а услуги должны войти в бизнес-процессы компании. Например, новое ПО должно подойти к ранее купленному оборудованию или услугам аутсорсинга.
  • Сложное ценообразование. В B2C цены обычно простые и не зависят от конкретного клиента, в B2B же много факторов, которые влияют на конечную стоимость. Цены часто обсуждаются с клиентом, после чего формируется персональное коммерческое предложение.
  • Клиент заинтересован стать постоянным покупателем. У менеджера есть задача – найти надежного поставщика, чтобы в дальнейшем обращаться только к нему и закрыть текущую нехватку товаров/услуг.
  • Клиент часто не ориентируется в тематике. Менеджер обычно посредник между начальником и отделом, для которого приобретаются товары или услуги. Несмотря на то, что есть список требований, у менеджера нет полного понимания об особенностях товара или услуги.

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

Адаптируем сайт под запросы B2B-сегмента

Разделим процесс оформления заказа на условные этапы и разберем каждый подробнее.

  1. Первое впечатление о В2В сайте

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

    В формировании доверия поможет следующая информация на сайте:

    Сведения о компании

    Рекомендуем кратко рассказать об опыте компании на главной странице, а подробную информацию разместить в соответствующем разделе «О компании».

    Пример блока о компании для главной страницы:

    Пример блока о компании для главной страницы В2В сайта

    Перечислите основные достижения, также можно добавить небольшое видео (2-3 минуты), показать географию работы и т.д.

    Пример раздела о компании с более подробной информацией:

    Раздел о компании В2В сайта

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

    Информация о гарантиях

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

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

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

    Информация о гарантиях 

    Если позволяет тематика продукта, рекомендуем подкреплять гарантии сертификатами и документами:

    Паспорт качества продукции

    Партнеры

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

    Оформить блок с партнерами рекомендуем следующим образом:

    Блок с логотипами партнеров

    Клиенты и их отзывы

    Такая информация поможет подтвердить, что компания работает не первый день и уже заслужила доверие. Регулярно собирайте отзывы у клиентов и публикуйте их на сайте. На главной показываем несколько последних отзывов, а под остальные лучше сделать соответствующую страницу «Отзывы».

    Пример оформления блока с отзывами:

    Блок с отзывами клиентов

    Подборка лайфхаков как собрать отзывы у клиентов.

    Дизайн и верстка.

    Да-да, на это тоже обращают внимание. Если у компании лаконичный современный дизайн да еще есть фирменный стиль – это повышает доверие.

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

    Рекомендуем к прочтению статьи по данной теме:

  2. Выбор товаров и услуг

    После того как менеджер решил, что компания заслуживает доверия, начинается детальное изучение товаров или услуг. Элементы, которые помогут сделать выбор:

    Описание товара или услуги

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

    В описании услуги полезно добавить список работ, схему работы, этапы выполнения и как проходит согласование работ, особенности услуги. Показываем примеры работ, кейсы.

    Вот пример оформления списка работ, разделенных на этапы:

    Описание этапов работ

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

    Описание характеристик товара

    Тендеры

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

    Пример инструкции по формированию заявки для участия в тендере

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

    Согласование

    Стоит добавить возможность переслать страницу продукта на почту или в мессенджер и добавить ссылку на печать страницы. Это упростит клиенту обсуждение продукта с начальством и коллегами. Разместить кнопки можно следующим образом:

    Пример размещения возможность расшаривания страницы и печати

    Стоимость

    Рекомендуем указывать хотя бы примерную стоимость, чтобы сориентировать пользователей. Особенно если ваши конкуренты разместили цены на сайте.

    Примеры работ могут рассказать и о стоимости:

    Примеры работ со стоимостью

    Или в целом расскажите, из чего складывается цена:

    Пример текста об условиях формирования стоимости

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

    Пример информации об оптовых ценах

    Условия работы

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

    Пример описания условий лизинга:

    Пример блока с условиями лизинга

    Вспомогательный контент

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

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

    Например, следующим образом стоит показать видеообзоры:

    Пример блока с видео о продукте

    Демоверсия или тестовый образец

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

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

    Информация о демо-доступе для сервиса

  3. Процесс покупки

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

    Множественное добавление в корзину

    Например, клиент хочет добавить в корзину партию одежды разных размеров и цветов. И чтобы ему сделать это максимально быстро, рекомендуем сделать возможность выбора размеров и цветов в одном блоке.

    Пример добавления нескольких позиций в каталоге:

    Пример добавления нескольких товаров на странице каталога

    И стоит продублировать данную функцию на странице товара:

    Пример добавления нескольких товаров на странице корзины

    Выбор дополнительных услуг

    На этапе оформления заказа рекомендуем предложить клиенту выбрать дополнительные услуги. Так вы подчеркнете комплексность предложения.

    Пример выбора дополнительных услуг в форме заказа

    Согласование заказа

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

    Пример ссылки на скачивание или печать заказа

    При участии в тендере также добавляем соответствующую функцию скачивания документации:

    Пример ссылки на скачивание документации по заказу для тендера

    Остаемся на связи

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

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

    /files/blog/2022/proektirovanie-interfejsov-b2b/22-lk.jpg

    Дополнительные рекомендации по UX для B2B сайтов

    Чтобы лучше понимать целевую аудиторию и повышать конверсию сайта, рекомендуем регулярно:

Подборка сервисов для работы с юзабилити сайта.

Проектирование интерфейсов B2B-сайтов: разбираем, как представить основную информацию

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

Шапка сайта

Первый пример — шапка сайта производителя металлического профиля:

Шапка сайта производителя металлического профиля

Что стоит доработать:

  • Совсем нет информации о компании: чем занимается, в каких регионах. Логотипа и текста «Выбор профессионалов!» недостаточно.
  • Не указана контактная информация и/или ссылки на формы для связи.
  • Для B2B-сектора важно выделить в отдельный раздел информацию о доставке и показать его в горизонтальном меню.
  • Данный сегмент предполагает долгое сотрудничество с клиентом, поэтому возможно стоит добавить личный кабинет, чтобы упростить процесс оформления заявок.
  • Если у компании много филиалов, региональных представительств, то их тоже можно показать в меню отдельной ссылкой.
  • Кнопка смены языка интерфейса незаметна (справа от логотипа).
  • В форме поиска лучше сделать кнопку отправки запроса крупнее, чтобы пользователю было проще кликать по ней.

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

Рекомендуемые изменения:

Шапка сайта после внесения изменений

Что изменилось:

  • Разместили краткую информации о компании (чем занимается, в какие регионы поставляет), номер телефона и режим работы.
  • Лучше добавить ссылки и на форму заказа обратного звонка, и на отправку письма в компанию, так как в B2B-секторе люди нередко ведут общение по email.
  • Для формы поиска увеличили поле ввода и кнопку отправки запроса.
  • Также сделали кнопки переключения языка заметнее. Можно дополнительно визуально выделять выбранную версию.
  • Добавили ссылку на личный кабинет.
  • В основном горизонтальном меню добавили ссылки на страницы с информацией о доставке и филиалах.

Информативная шапка сайта поможет снять основные вопросы и сориентировать по навигации у нового посетителя сайта.

Первый экран

Следующее, на что обратит внимание клиент — это первый экран. Пример с сайта по продаже упаковки:

Первый экран сайта по продаже упаковки

Что не так:

  • Простой лаконичный слайдер, но этот инструмент больше подходит для B2C-сегмента. Основные продукты лучше показать статичным блоком ниже.
  • В первом экране стоит рассказать об основных преимуществах. Клиент смотрит несколько сайтов, поэтому важно кратко осветить, чем компания отличается от конкурентов. Сейчас преимущества показаны ниже и не сразу заметны.
  • После преимуществ стоит добавить кнопку «Перейти в каталог» для ознакомления с продукцией или разместить ссылку на форму консультации.
  • Можно показать информацию по бонусным программам, скидкам или услугам.

Рекомендуемые изменения:

Стоит заменить слайдер на статичное представление информации — так меньше вероятность, что пользователь что-то пропустит

Первый экран сайта после доработок

Что изменилось:

  • Показали преимущества выше, чтобы больше пользователей заметило их. В тексте важно рассказать, чем вы полезны клиенту и сколько он сможет заработать на использовании данных товаров (или какой доход получить от применения услуг).
  • Добавили ссылку на каталог, чтобы направить посетителей ознакомиться с важнейшим разделом.
  • Дополнительно разместили ссылки-анонсы разделов с бонусной программой, акционными товарами и новинками.

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

Каталог товаров

Далее пользователь переходит в каталог, чтобы ознакомиться с ассортиментом. Рассмотрим, как представлены товары в интернет-магазине полотенец и махровых изделий:

Список товаров интернет-магазина полотенец и махровых изделий

Основные недочеты:

  • Форму поиска достаточно показать в шапке сайта.
  • Если список категорий больше 5-7 позиций, то боковое меню лучше показать компактно, по умолчанию спрятав часть категорий.
  • Лучше использовать две системы разделения товаров на категории, например, по задаче пользователя и по виду товара. Хорошо работают подборки с готовыми решениями, которые можно также разделить по задаче и бюджету.
  • Названия товаров стоит доработать, оформив в едином стиле. Например, название товара + размер + плотность. Так пользователю будет легче ориентироваться в списке.
  • В данном примере немного товаров, но на будущее стоит добавить блок с фильтрами по цене, материалу, производителю и т.д. Кнопку сброса для типа сортировки и вида отображения списка лучше убрать, такая кнопка больше подходит для блока с фильтрами.
  • На странице стоит разместить ссылки на популярные услуги, инструкции. Также правильно добавить ссылки на сертификаты и/или технические документы в виде pdf-файлов.
  • Для товаров можно кратко указать артикул, количество позиций на складе, срок доставки. Так пользователю будет легче сориентироваться.
  • На странице слишком много общего текста, лучше перед списком товаров разместить краткую информацию о схеме работы, условиям заказа, акциям, а под списком товаров добавить небольшой оптимизированный текст для продвижения каталога в поиске.
  • Для номера телефона в боковом меню стоит добавить призыв к действию «Позвонить специалисту».
  • На страницах сайта не должно быть пустых блоков, как в нашем примере «Последние просмотренные товары».

Рекомендуемые изменения:

Список товаров интернет-магазина после внесения доработок

Что изменилось:

  • Убрали форму поиска (предполагается, что она будет в шапке сайта).
  • Изменили структуру каталога, чтобы пользователь мог искать товары по виду компании и типу товара.
  • Добавили компактный блок с фильтрами. При необходимости пользователь сможет развернуть полный список фильтров.
  • Доработали названия товаров и добавили артикул, примерное количество позиций на складе и срок доставки.
  • Информацию по условиям заказа разместили перед списком товаров, а оптимизированный текст внизу страницы. Добавили ссылку на сертификаты.
  • Добавили в боковом меню ссылки на популярную информацию.
  • К номеру телефона добавили призыв к действию.
  • Убрали пустой блок «Последние просмотренные товары».

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

Страница товара

Ссылки на страницы товаров лучше открывать в новых вкладках браузера, чтобы у пользователя оставалась открытой страница каталога с выбранными параметрами. Поверьте, многие клиенты будут вам за это благодарны =).

А теперь разберем ошибки страницы товара сайта бизнес-сувениров:

Страница товара сайта бизнес-сувениров

На что обратить внимание и справить:

  • Боковое меню в данном случае показано компактно, но лучше его убрать, так как у пользователя будет открыта страница каталога в соседней вкладке (если вы последуете совету выше).
  • Для товара стоит добавлять несколько фотографий, чтобы клиент смог рассмотреть детали.
  • Основные характеристики (справа от товара) показаны в куче — тяжело воспринимается.
  • Информацию по услугам нанесения показали и в кратком описании товара, и ниже отдельным блоком. Лучше оставить один блок, например, предложить пользователю выбрать сопутствующую услугу.
  • Помимо добавления товара в корзину стоит добавить форму заказа.
  • Если у вас цена зависит от размера партии, рекомендуем указать данные диапазоны.
  • Стоит добавить ссылки на прайс-листы, необходимые технические документы.
  • Кнопки на соцсети лучше дополнить возможностью отправить ссылку в мессенджеры, например, в WhatsApp, Viber, Telegram.
  • Для продвижения страницы стоит добавить небольшое описание товара. Для клиентов можно после текста разместить небольшие видео-обзоры продукции.
  • На странице нет информации об условиях заказа, минимальном размере партии, вариантах доставки и т.д — необходимо добавить.
  • Для повышения доверия к организации и продукции следует добавить краткую информацию о компании, ссылки на сертификаты.
  • Стоит показать другие товары из данной категории каталога и/или комплектующие к данному товару.

Рекомендуемые изменения:

Страница товара сайта бизнес-сувениров после внесения изменений

Что изменилось:

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

Дополнительно на страницах товаров рекомендуем показывать стоимость готовых решений, например, в нашем случае партия flash-карт 100 шт. с нанесением логотипа размером 60×100. Для составления списка ориентируйтесь на частые заказы клиентов.

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

Итоги

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

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

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

7 чел. оценили, средняя оценка 4.9

Чек-лист «Юзабилити интернет-магазина»

Узнайте, какие моменты нужно учесть, чтобы пользователь не заблудился в вашем интернет-магазине, как в лабиринте Минотавра.

Получить чек-лист
Комментарии для сайта Cackle

Популярные статьи

Все популярные статьи »

Проверить позиции сайта

Запросы для проверки
Регион для проверки
Акция

Полетели к ТОПу!

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

Более 250 000 человек уже с нами!
Или подпишитесь на нас:

Летим с нами в ТОП

Подписывайтесь на рассылку и получайте практические советы по продвижению сайта

Ваш email

Нажимая на кнопку «Подписаться», вы соглашаетесь на обработку персональных данных

Я уже с вами

Мы понимаем, что всплывающие окна – это зло =( Но пока по-другому не получается предупредить вас об использовании куки-файлов на нашем сайте. Так мы с каждым днем будем становиться лучше и полезнее для вас!

×

Тяните за рычаг
и выигрывайте классные подарки

Главный приз – бесплатное продвижение сайта в течение 1 месяца!

Введите свой email и нажмите на кнопку

Да вы настоящий везунчик!

Активировать выигрыш

Повезет в любви! =)

Но не вешайте нос – попытайте удачу еще раз.

Сыграть заново

Закрыть и не показывать больше