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

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

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

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

Шапка сайта

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

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

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

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

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

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

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

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

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

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

Первый экран

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

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

Что не так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Получить базовый анализ сайта бесплатно

  • Определим цели и задачи
  • Проведем анализ сайта
  • Подготовим план работ и смету

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

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

Комментарии (0)

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

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

Запросы для проверки
Регион для проверки
Оставить коммент к статье

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

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

Ваш email

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

Я уже с вами

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

×