После по просьбам телезрителей читателей подготовили разбор основных блоков для сайтов из B2B-сегмента.
Несмотря на то, что в B2B продажи осуществляются между юридическими лицами, и в целом процесс выглядит формальнее, стоит помнить, что на сайт заходят всё те же люди. Поэтому интерфейс должен быть понятным и информативным.
Но чаще всего посетитель ищет не для себя, процесс заказа — это часть его работы, поэтому нужно максимально упростить поиск информации.
Шапка сайта
Первый пример — шапка сайта производителя металлического профиля:
Что стоит доработать:
- Совсем нет информации о компании: чем занимается, в каких регионах. Логотипа и текста «Выбор профессионалов!» недостаточно.
- Не указана контактная информация и/или ссылки на формы для связи.
- Для B2B-сектора важно выделить в отдельный раздел информацию о доставке и показать его в горизонтальном меню.
- Данный сегмент предполагает долгое сотрудничество с клиентом, поэтому возможно стоит добавить личный кабинет, чтобы упростить процесс оформления заявок.
- Если у компании много филиалов, региональных представительств, то их тоже можно показать в меню отдельной ссылкой.
- Кнопка смены языка интерфейса незаметна (справа от логотипа).
- В форме поиска лучше сделать кнопку отправки запроса крупнее, чтобы пользователю было проще кликать по ней.
С другой стороны, шапка сайте не перегружена, в ней отсутствуют часто неуместные изображения и иконки. Есть форма поиска и показаны основные разделы сайта.
Рекомендуемые изменения:
Что изменилось:
- Разместили краткую информации о компании (чем занимается, в какие регионы поставляет), номер телефона и режим работы.
- Лучше добавить ссылки и на форму заказа обратного звонка, и на отправку письма в компанию, так как в B2B-секторе люди нередко ведут общение по email.
- Для формы поиска увеличили поле ввода и кнопку отправки запроса.
- Также сделали кнопки переключения языка заметнее. Можно дополнительно визуально выделять выбранную версию.
- Добавили ссылку на личный кабинет.
- В основном горизонтальном меню добавили ссылки на страницы с информацией о доставке и филиалах.
Информативная шапка сайта поможет снять основные вопросы и сориентировать по навигации у нового посетителя сайта.
Первый экран
Следующее, на что обратит внимание клиент — это первый экран. Пример с сайта по продаже упаковки:
Что не так:
- Простой лаконичный слайдер, но этот инструмент больше подходит для B2C-сегмента. Основные продукты лучше показать статичным блоком ниже.
- В первом экране стоит рассказать об основных преимуществах. Клиент смотрит несколько сайтов, поэтому важно кратко осветить, чем компания отличается от конкурентов. Сейчас преимущества показаны ниже и не сразу заметны.
- После преимуществ стоит добавить кнопку «Перейти в каталог» для ознакомления с продукцией или разместить ссылку на форму консультации.
- Можно показать информацию по бонусным программам, скидкам или услугам.
Рекомендуемые изменения:
Стоит заменить слайдер на статичное представление информации — так меньше вероятность, что пользователь что-то пропустит
Что изменилось:
- Показали преимущества выше, чтобы больше пользователей заметило их. В тексте важно рассказать, чем вы полезны клиенту и сколько он сможет заработать на использовании данных товаров (или какой доход получить от применения услуг).
- Добавили ссылку на каталог, чтобы направить посетителей ознакомиться с важнейшим разделом.
- Дополнительно разместили ссылки-анонсы разделов с бонусной программой, акционными товарами и новинками.
Многие пользователи не прокручивают страницу ниже или просматривают информацию бегло, поэтому важно максимально заинтересовать новых посетителей сайта первым экраном.
Каталог товаров
Далее пользователь переходит в каталог, чтобы ознакомиться с ассортиментом. Рассмотрим, как представлены товары в интернет-магазине полотенец и махровых изделий:
Основные недочеты:
- Форму поиска достаточно показать в шапке сайта.
- Если список категорий больше 5-7 позиций, то боковое меню лучше показать компактно, по умолчанию спрятав часть категорий.
- Лучше использовать две системы разделения товаров на категории, например, по задаче пользователя и по виду товара. Хорошо работают подборки с готовыми решениями, которые можно также разделить по задаче и бюджету.
- Названия товаров стоит доработать, оформив в едином стиле. Например, название товара + размер + плотность. Так пользователю будет легче ориентироваться в списке.
- В данном примере немного товаров, но на будущее стоит добавить блок с фильтрами по цене, материалу, производителю и т.д. Кнопку сброса для типа сортировки и вида отображения списка лучше убрать, такая кнопка больше подходит для блока с фильтрами.
- На странице стоит разместить ссылки на популярные услуги, инструкции. Также правильно добавить ссылки на сертификаты и/или технические документы в виде pdf-файлов.
- Для товаров можно кратко указать артикул, количество позиций на складе, срок доставки. Так пользователю будет легче сориентироваться.
- На странице слишком много общего текста, лучше перед списком товаров разместить краткую информацию о схеме работы, условиям заказа, акциям, а под списком товаров добавить небольшой оптимизированный текст для продвижения каталога в поиске.
- Для номера телефона в боковом меню стоит добавить призыв к действию «Позвонить специалисту».
- На страницах сайта не должно быть пустых блоков, как в нашем примере «Последние просмотренные товары».
Рекомендуемые изменения:
Что изменилось:
- Убрали форму поиска (предполагается, что она будет в шапке сайта).
- Изменили структуру каталога, чтобы пользователь мог искать товары по виду компании и типу товара.
- Добавили компактный блок с фильтрами. При необходимости пользователь сможет развернуть полный список фильтров.
- Доработали названия товаров и добавили артикул, примерное количество позиций на складе и срок доставки.
- Информацию по условиям заказа разместили перед списком товаров, а оптимизированный текст внизу страницы. Добавили ссылку на сертификаты.
- Добавили в боковом меню ссылки на популярную информацию.
- К номеру телефона добавили призыв к действию.
- Убрали пустой блок «Последние просмотренные товары».
В отличие от B2C-сферы на страницах каталога можно добавлять профессиональные термины, но в пределах разумного. Категории и фильтры стоит создавать на основе популярных вопросов клиентов.
Страница товара
Ссылки на страницы товаров лучше открывать в новых вкладках браузера, чтобы у пользователя оставалась открытой страница каталога с выбранными параметрами. Поверьте, многие клиенты будут вам за это благодарны =).
А теперь разберем ошибки страницы товара сайта бизнес-сувениров:
На что обратить внимание и справить:
- Боковое меню в данном случае показано компактно, но лучше его убрать, так как у пользователя будет открыта страница каталога в соседней вкладке (если вы последуете совету выше).
- Для товара стоит добавлять несколько фотографий, чтобы клиент смог рассмотреть детали.
- Основные характеристики (справа от товара) показаны в куче — тяжело воспринимается.
- Информацию по услугам нанесения показали и в кратком описании товара, и ниже отдельным блоком. Лучше оставить один блок, например, предложить пользователю выбрать сопутствующую услугу.
- Помимо добавления товара в корзину стоит добавить форму заказа.
- Если у вас цена зависит от размера партии, рекомендуем указать данные диапазоны.
- Стоит добавить ссылки на прайс-листы, необходимые технические документы.
- Кнопки на соцсети лучше дополнить возможностью отправить ссылку в мессенджеры, например, в WhatsApp, Viber, Telegram.
- Для продвижения страницы стоит добавить небольшое описание товара. Для клиентов можно после текста разместить небольшие видео-обзоры продукции.
- На странице нет информации об условиях заказа, минимальном размере партии, вариантах доставки и т.д — необходимо добавить.
- Для повышения доверия к организации и продукции следует добавить краткую информацию о компании, ссылки на сертификаты.
- Стоит показать другие товары из данной категории каталога и/или комплектующие к данному товару.
Рекомендуемые изменения:
Что изменилось:
- Убрали боковое меню и сосредоточили внимание пользователя на описании товара.
- Представили характеристики товара более наглядно, добавили вкладку с описанием товара.
- Блок с краткой информацией по условиям заказа расположили справа от фотографии товара.
- Добавили возможность выбрать сопутствующую услугу, а также заполнить форму быстрого заказа. И продублировали номер телефона для консультации со специалистами.
- Информацию о компании и сопутствующие товары показали в виде вкладок, чтобы не удлинять страницу.
- Добавили ссылки на популярные мессенджеры, чтобы пользователь мог быстро переслать коллегам ссылку на товар.
- Показали другие товары из категории каталога.
- Появилась возможность добавить товар в список сравнения (не обязательная функция).
Дополнительно на страницах товаров рекомендуем показывать стоимость готовых решений, например, в нашем случае партия flash-карт 100 шт. с нанесением логотипа размером 60×100. Для составления списка ориентируйтесь на частые заказы клиентов.
Далее пользователь переходит либо в корзину, либо оформляет заявку. О том, какой должна быть корзина, рассказали в , а про форму заказа писали .
Заключение
Вот так выглядит основная доработка интерфейса B2B-сайта. Главное и самое правильное решение — ориентироваться на популярные вопросы и действия ваших пользователей. Если клиенту необходим импорт списка в Excel, подключение к ERP-системе или возможность повторения ранних заказов, продумайте и внедрите данные функции. Проектирование интерфейса — это финальный этап, сначала необходимо изучить свою аудиторию, провести опросы, чтобы понимать их проблемы и потребности.
Для тех, кому нужна помощь в анализе аудитории и поиске недочетов, рекомендуем обратиться к .