UX/UI разбор личных кабинетов транспортных компаний. Как добавить человечность в интерфейсы?

Дизайн, его UX/UI составляющая, во многом определяет популярность личного кабинета. Забота о пользователе, помощь и продуманный клиентский путь увеличивают доверие к грузоперевозчику. Дмитрий Баршев, наш UX/UI-специалист, сравнил отдельные клиентские сервисы в кабинетах грузоперевозчиков и определил лучшие практики дизайна.

Материал исследования и критерии сравнения

Материал исследования — дизайн личных кабинетов Maersk, CMA CGM, DP World, ТрансКонтейнер, MSC, ПГК, ТП РЖД, Credo Trans и Деловые линии. Метод сравнения — бенчмаркинг. Это изучение и адаптация лучших практик других компаний для оптимизации своего бизнеса.

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

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

Оценки выставлены на основе возможностей и удобства интерфейса от 0 до 3.

0 — функции не обнаружено.

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

2 — пользователь может решить проблему, не встречает препятствий.

3 — лучшая практика среди исследуемых систем.

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

Давайте для примера разберем оценку критерия — подобрать контейнер под конкретный груз:

• 1 балл. Credo Trans решили задачу через объемные статьи с иллюстрациями. Это информативно и понятно. Но пользователь тратит много времени, чтобы принять решение, система никак автоматически ему не подсказывает. Из существенных минусов — по отображенным размерам клиент не сможет понять, сколько контейнеров нужно.

• 2 балла. ТрансКонтейнер предлагают подобрать контейнер по параметрам груза. Управляя ползунками, пользователь оставляет данные груза, система автоматически подбирает контейнер. Этот простой калькулятор встроен в заявку, клиенту не мешают переходы по ссылкам, в блог, в FAQ, звонки менеджеру.

• 3 балла. Лучшим стало решение от DP World в их сервисе SeaRates. Подробный пошаговый калькулятор формирования контейнера отвечает на все вопросы: как будет перевезен груз, во что упакован, будут ли паллеты, как груз будет разложен по контейнеру. Клиент уверен в принятом решении. Калькулятор реализован как отдельное приложение, которое можно купить и подключить к своему порталу по API.

Алгоритм сравнения понятен. Переходим к лучшим практикам.

Показываем текущий срез

Клиент входит в личный кабинет и первое, что ему важно понять — текущее состояние перевозок. Где находятся грузы, в каком они состоянии, есть ли задолженности, простои. На эти вопросы отвечает грамотно составленный дашборд — «приборная панель», которая визуализирует и анализирует данные.

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

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

Ищем ставку

Клиент понял, как дела с текущими заказами. Следующий шаг — создать заявку на перевозку.

Калькулятор

В большинстве транспортных компаний (а из исследуемых — во всех) заполнение заявки начинается с поиска ставки. Подобрать вариант нужно быстро, качественно и просто. Решение от DP World нам показалось лучшим. Современный интерфейс с адаптированными b2c элементами из популярных агрегаторов типа Aviasales. Отсылки к известным паттернам облегчают работу с инструментом.

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

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

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

Традиционно операторы отвечают за перевозку от одной ЖД станции до другой, от порта до порта. Доставка от двери до двери — набирающая популярность услуга. Она предполагает, что транспортная компания берет на себя обязательства перевезти груз от места хранения до точного места получения. Например, с завода до склада магазина. Трансконтейнер оказывает эту услугу. В калькуляторе стоимости можно выбрать адрес с точностью до дома, кабинет подсказывает варианты, или использовать геолокацию и Яндекс.Карты.

Индивидуальный расчет

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

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

Можно последовать примеру CMA CGM и рекомендовать ближайшие варианты судов, если поиск не был успешным. Главное — не оставлять пользователя без ответа на вопрос «Что делать, если нет подходящей ставки?».

Частые запросы

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

Заполняем заявку

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

• «Простыня» информации на одной странице. Пользователь её скроллит, последовательно заполняет данные.
• Степпер. Заполнение разбито на шаги. Например, в системе MSC выделено целых 7 шагов. С одной стороны, клиент концентрируется на каждом, с другой, — много этапов пугают пользователя.

В самой форме заявки сложно придумать что-то новое и кардинально отстроиться от конкурентов. Поэтому мы посмотрим на нюансы заполнения.

Услуги

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

Груз

CMA CGM реализовали выбор груза из прошлых заявок, как было с поиском ставок. Последние введенные данные находятся рядом с поиском. Одним кликом клиент подставляет тот же груз в заявку, корректирует поля, если нужно. Это ускоряет заполнение формы.

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

Подходы CMA CGM и DP World могут удачно дополнять друга друга.

Участники перевозки

Груз выбран, нужно указать конечного получателя и плательщика. Эти значения также часто повторятся от заявки к заявке. Решение — добавить адресную книгу, как сделали Деловые линии. Она запоминает адреса контрагентов, которые пользователь прописал в заявке или добавил вручную.

Отличный пример заботы о клиенте — дисклеймер «изменения в адресах не повлияют на заполненные заявки». Пользователю естественно испытывать страх перед неизвестностью (правки это или переход на следующий шаг), предвосхищать его — задача интерфейса.

К таким же клиентоориентированным и простым элементам относится прогресс заполнения букинга. Есть в кабинете CMA CGM. Эта небольшая деталь подкрепляет уверенность пользователя в следующем шаге и в целом в заполнении заявки.

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

Проверка и оплата

Последний этап букинга — проверка на ошибки. Система CMA CGM выводит чек с основной информацией о заявке. Недостающие данные отмечены красным. Клик по ссылке возвращает к соответствующему полю.

Сформированная заявка требует подтверждения и оплаты. В b2b-секторе, чаще всего оплата производится по счетам и актам. Небольшим компаниям финансовая отчетность позволяет работать с картой, лучше предусмотреть такую возможность в кабинете. Трансконтейнер заимствует b2c-паттерны — оплата картой через систему ВТБ.

Управляем заявками

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

Список заявок

Лучшей практикой мы посчитали решение CMA CGM. Их реестр подробно и удобно систематизирован в гибкой таблице:

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

• Развернутая заявка. Внутри таблицы заявка раскрывается и доступна часть ее параметров: дислокация, статусы. Клиент быстро получает актуальную информацию о положении контейнеров и быстро принимает решение по изменениям.
• Два вида сортировки информации внутри заявки — по документам, по контейнерам. Различные разрезы интересны разным сотрудникам. Кто-то смотрит где контейнер, кто-то отслеживает состояние всей партии.

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

Детальная страница заявки

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

Есть акцентный блок с таймлайном. Статус и проблемные места выделены красным.

Движение контейнера показано в таблице. Иконки помогают сориентироваться в совершенном и текущем событиях.

Помогаем пользователю

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

• FAQ. Отдельный раздел с ответами на часто задаваемые вопросы. Например, в MSC вопросы фильтруются по категории, есть поиск, но нет ни скринов, ни видео.

• Система онбординга. Подсказки в режиме реального времени знакомят с системой или дают алгоритм решения задачи. Небольшие всплывающие окна направляют пользователя: куда нажать, какие поля заполнить, что открыть и какие параметры выбрать. В системе CMA CGM клиента всегда сопровождает «ушко» с перечнем частых вопросов. При клике на вопрос кабинет буквально начинает водить клиента за руку.

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

Сопровождаем заявку

Система уведомлений помогает контролировать подачу заявки и её выполнение. Вперед выходит CMA CGM с подробной настройкой оповещений:

• Дефолтное состояние. По умолчанию будут приходить пуши по параметрам, которые внутри системы, считаются существенными: одобренные заявки, подтверждающие документы, статусы. Эти уведомления решат задачи большинства пользователей.
• Кастомные настройки. Например, менеджер, ответственный за конкретный участок пути, хочет получать только соответствующие оповещения. И CMA CGM, объясняя значения нотификации, позволяет настроить индивидуальные уведомления. По каждому типу документа есть широкий спектр событий.

Управляем доступами

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

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

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

Какую пользу приносит бенчмаркинг?

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

• Снизу — прописаны крупные блоки, большие инструменты (калькулятор стоимости услуг, подача заявки, управление заявками).
• Сверху — отдельные части этих инструментов важные для удобного и бесшовного пути пользователя. Для подачи заявки это будет возможность оформить дополнительные услуги. Для управления заявками — возможность экспорта списка.

По вертикали идет шкала оценки от «Совсем не представлено» — 0 до «Лучшая практика» — 3. В кругах указано количество объектов анализа, которые имеют одинаковую оценку по параметру. Например, в семи личных кабинетах отсутствует дашборд, в одном — статусы заявок реализованы на отлично, в двух — система помощи клиентам реализована средне. Серая линия соединяет оценки условно «главного» личного кабинета, для преобразования которого выполнен бенчмаркинг.

График нужен, чтобы:

• Понять важность отдельного параметра в отрасли. Чем чаще встречается функция от кабинета к кабинету, тем ценность для клиента выше.
• Составить рекомендации для изменения кабинета. Бенчмаркинг чаще всего составляют для определенной компании. На поверхность выходят проседающие функции. Лучшие практики — список доработок, который останется адаптировать под специфику бизнеса и внедрить.
• Отстроиться от конкурентов. Если провести линию через группы оценок, в которые вошла ваша компания, станут явными сильные и слабые стороны, положение на рынке относительно других. Например, вы одни поддерживаете гибкую ролевую модель — клиент самостоятельно настраивает разные уровни доступа. Используйте это УТП в маркетинговых материалах.
• Оперативно ориентироваться в лучших практиках. Вместо перебирания информации в больших отчетах по каждому конкуренту, достаточно в интерактивном графике нажать на круг и посмотреть клиентские сервисы-лидеры по этому критерию.

Топ UX-практик в личном кабинете транспортной компании

• Подробный дашборд. Предоставьте клиенту сводку состояния перевозок и финансов удобную для быстрого сканирования. Подбирайте разные форматы презентации данных, подходящие конкретному параметру.
• Опыт из b2c. Адаптируйте знакомые пользователям паттерны. Система поиска в популярных агрегаторах — шаблон для калькулятора ставок.
• Повторное применение. Дайте клиенту возможность быстро использовать параметры прошлых запросов, букингов в новой задаче (отдельные каталог товаров, адресная книга, подсказки).
• Индивидуальный подход. Продумайте на каких этапах стандартных полей может не хватить и разрешите добавлять индивидуальные (неочевидные роли в перевозке).
• Гибкая система. Оставьте за клиентом право выбрать сортировку таблиц, вид заявки или набор уведомлений.
• Цветовые акценты. Выделяйте проблемные ситуации, статусы, важные показатели, совершенные действия. Управляйте вниманием пользователя.
• Иконки, иллюстрации. Визуализируйте сложные процессы, это поможет быстрее разобраться в ситуации и принять решение (подбор контейнера, выбор доставки, проверка букинга, движение контейнера).