UX/UI разбор личных кабинетов транспортных компаний. Как добавить человечность в интерфейсы?
Дмитрий Баршев, наш UX/UI-специалист, сравнил отдельные клиентские сервисы в кабинетах грузоперевозчиков и определил лучшие практики дизайна.
Дизайн, его UX/UI составляющая, во многом определяет популярность личного кабинета. Забота о пользователе, помощь и продуманный клиентский путь увеличивают доверие к грузоперевозчику. Дмитрий Баршев, наш UX/UI-специалист, сравнил отдельные клиентские сервисы в кабинетах грузоперевозчиков и определил лучшие практики дизайна.
Материал исследования и критерии сравнения
Материал исследования — дизайн личных кабинетов Maersk, CMA CGM, DP World, ТрансКонтейнер, MSC, ПГК, ТП РЖД, Credo Trans и Деловые линии. Метод сравнения — бенчмаркинг. Это изучение и адаптация лучших практик других компаний для оптимизации своего бизнеса.
Критерии сравнения — клиентские сервисы, которые решают первостепенную задачу личного кабинета — автоматизировать типовые процессы, позволить клиентам самостоятельно принимать решения и выходить из затруднительных ситуаций без помощи менеджера. Определить, какие именно интерфейсы входят в этот список, помог опыт работы и общения не с одной транспортной компанией, погруженность в отрасль.
Мы сформировали карту потребностей клиента, она повторяет стандартный пользовательский путь: понять текущее состояние перевозок, найти ставку для новой перевозки, оформить заявку, оплатить её, отследить статусы, оперативно получить помощь, не пропустить уведомление. Оценки выставлены на основе возможностей и удобства интерфейса от 0 до 3. 0 — функции не обнаружено. 1 — функция реализована, но плохо, при использовании встречаются барьеры или функция не до конца решает задачу пользователя. 2 — пользователь может решить проблему, не встречает препятствий. 3 — лучшая практика среди исследуемых систем. ??? — не удалось найти функцию, но возможно она есть (полноценный доступ к некоторым кабинетам ограничен, мы не могли оценить скрытые возможности). Давайте для примера разберем оценку критерия — подобрать контейнер под конкретный груз: Алгоритм сравнения понятен. Переходим к лучшим практикам. Клиент входит в личный кабинет и первое, что ему важно понять — текущее состояние перевозок. Где находятся грузы, в каком они состоянии, есть ли задолженности, простои. На эти вопросы отвечает грамотно составленный дашборд — «приборная панель», которая визуализирует и анализирует данные. Вперед выбивается дашборд из личного кабинета ПГК. Он подробный и разбит на блоки, каждый блок посвящен отдельному вопросу: подход, прогноз прибытия, простой, динамическое сальдо. Система не пугает пользователя бесконечными таблицами. Наоборот — разные формы презентации подобраны специально для отдельных параметров, а цвета определяют критичность ситуации. Интерфейс сопровождает клиента, помогает разобраться в аналитике. Кроме быстрого считывания информации, дашборд может нативно предлагать дополнительные услуги. Например, в случае со сверхнормативным простоем, кабинет ПГК рекомендует заказать «Логистический консалтинг». Клиент понял, как дела с текущими заказами. Следующий шаг — создать заявку на перевозку. Калькулятор В большинстве транспортных компаний (а из исследуемых — во всех) заполнение заявки начинается с поиска ставки. Подобрать вариант нужно быстро, качественно и просто. Решение от DP World нам показалось лучшим. Современный интерфейс с адаптированными b2c элементами из популярных агрегаторов типа Aviasales. Отсылки к известным паттернам облегчают работу с инструментом. Есть быстрая фильтрация: самые дешевые ставки, самые быстрые предложения и оптимальные. Переключаясь между фильтрами, пользователь быстро отсеет неподходящие предложения. Есть боковой фильтр, по аналогии с интернет-магазинами, который более точно отберет интересные предложения. Карточка ставки имеет два состояния: свернутое и развернутое. В первом случае клиент ориентируется только на цену и географические точки, через которые пройдет груз. Во втором — настраивает дополнительные услуги, меняет стоимость, подстраивает предложение под свою задачу. Такое решение экономит время и место. Скроллить меньше и не нужно переходить на другие страницы, чтобы отредактировать и выбрать ставку. Похожим образом устроена карточка ставки в кабинете MAERSK. Можно развернуть и рассмотреть состав услуги, который разбит на вкладки. Традиционно операторы отвечают за перевозку от одной ЖД станции до другой, от порта до порта. Доставка от двери до двери — набирающая популярность услуга. Она предполагает, что транспортная компания берет на себя обязательства перевезти груз от места хранения до точного места получения. Например, с завода до склада магазина. Трансконтейнер оказывает эту услугу. В калькуляторе стоимости можно выбрать адрес с точностью до дома, кабинет подсказывает варианты, или использовать геолокацию и Яндекс.Карты. Среди предложений может не оказаться подходящего. DP World предлагают оставить запрос на индивидуальный расчет. Кнопка для перехода к форме прямо внизу списка ставок, клиент не будет блуждать по кабинету в поисках запроса котировок. В индивидуальную заявку подтягиваются данные из фильтрации. Если текущая цена не устраивает, система предлагает подписаться на изменения в стоимости выбранных рейсов. Можно последовать примеру CMA CGM и рекомендовать ближайшие варианты судов, если поиск не был успешным. Главное — не оставлять пользователя без ответа на вопрос «Что делать, если нет подходящей ставки?». Частые запросы Постоянные клиенты оператора могут систематически повторять перевозку одинаковых партий груза в одинаковом направлении. CMA CGM реализовали простое и информативное решение, чтобы избавить менеджеров от рутины. Кабинет запоминает данные последних поисков и выводит информационный блок про повторное применение. Если на него нажать, то по параметрам прошлых запросов сформируется список ставок на текущую дату. Подходящая ставка выбрана, переходим к заполнению заявки — букингу. Этот достаточно шаблонный элемент можно реализовать двумя способами: В самой форме заявки сложно придумать что-то новое и кардинально отстроиться от конкурентов. Поэтому мы посмотрим на нюансы заполнения. Услуги Заполнение начинается с выбора услуг. В личном кабинете DP World разные формы доставки дополнены иллюстрацией. Забрать из порта и доставить в пункт назначения или перевезти груз из порта в порт. При выборе разных форм соответствующая часть дороги окрашивается. Новый пользователь оперативно сориентируется, а опытный логист быстро проверит состав услуг. Груз CMA CGM реализовали выбор груза из прошлых заявок, как было с поиском ставок. Последние введенные данные находятся рядом с поиском. Одним кликом клиент подставляет тот же груз в заявку, корректирует поля, если нужно. Это ускоряет заполнение формы. DP World пошли немного дальше и предложили пользователям вручную составить каталог товаров. Например, металлургический завод постоянно переправляет морем десять наименований труб. Логист единожды фиксирует в каталоге параметры груза и при составлении новой заявки минует общие справочники, обращаясь только к своему индивидуальному списку. Подходы CMA CGM и DP World могут удачно дополнять друга друга. Участники перевозки Груз выбран, нужно указать конечного получателя и плательщика. Эти значения также часто повторятся от заявки к заявке. Решение — добавить адресную книгу, как сделали Деловые линии. Она запоминает адреса контрагентов, которые пользователь прописал в заявке или добавил вручную. Отличный пример заботы о клиенте — дисклеймер «изменения в адресах не повлияют на заполненные заявки». Пользователю естественно испытывать страх перед неизвестностью (правки это или переход на следующий шаг), предвосхищать его — задача интерфейса. К таким же клиентоориентированным и простым элементам относится прогресс заполнения букинга. Есть в кабинете CMA CGM. Эта небольшая деталь подкрепляет уверенность пользователя в следующем шаге и в целом в заполнении заявки. Кроме получателя, плательщика в букинге могут участвовать другие стороны: несколько извещаемых, таможенный представитель, или специфичный для конкретной компании партнер. Кабинет CMA CGM предлагает добавить непредусмотренные роли. Проверка и оплата Последний этап букинга — проверка на ошибки. Система CMA CGM выводит чек с основной информацией о заявке. Недостающие данные отмечены красным. Клик по ссылке возвращает к соответствующему полю. Сформированная заявка требует подтверждения и оплаты. В b2b-секторе, чаще всего оплата производится по счетам и актам. Небольшим компаниям финансовая отчетность позволяет работать с картой, лучше предусмотреть такую возможность в кабинете. Трансконтейнер заимствует b2c-паттерны — оплата картой через систему ВТБ. Заявка оплачена и отправлена. Следующий шаг — наблюдение, слежение и управление заявками. Список заявок Лучшей практикой мы посчитали решение CMA CGM. Их реестр подробно и удобно систематизирован в гибкой таблице: Непосредственно поля таблицы полностью зависят от бизнес-процессов компании и запросов клиентов. Но при любой информации она должна оставаться удобной для поиска и сортировки, практичной для оперативных правок заявки. Детальная страница заявки Кабинет Maersk оптимально организует данные заявки. Основная информация вынесена в шапку: номер перевозки, отправление, прибытие, дата, время. Навигация очевидна, действия отделены от обзора перевозки и хорошо видны. Есть акцентный блок с таймлайном. Статус и проблемные места выделены красным. Движение контейнера показано в таблице. Иконки помогают сориентироваться в совершенном и текущем событиях. Помогаем пользователю Бизнес-процессы в личном кабинете могут оказаться сложными для понимания, состоять из множества шагов, занимать много времени. Если взять за аксиому, что 90% времени пользователи проводят не в личном кабинете, то отдельные функции могут забываться. Здесь на помощь приходит система поддержки, которую можно реализовать по-разному: Онбординг хорошо ложится в опыт пользователя. Существует большая вероятность быстро запомнить последовательность и не обращаться в техподдержку. Система уведомлений помогает контролировать подачу заявки и её выполнение. Вперед выходит CMA CGM с подробной настройкой оповещений: Представим, что условная компания «Металл» производит железные трубы и для перевозки товаров пользуется услугами и личным кабинетом условного перевозчика «Много вагонов». В «Металле» одни сотрудники подает заявки, другие отвечают за документы и оплаты, а третьи только отслеживают груз. Каждый участник процесса должен иметь свой доступ в кабинет, видеть часть информации, за которую несет ответственность, использовать только нужные инструменты. Руководить учетными записями может только специальный человек из административной части. В таком случае управление системой становится негибким. Вариант лучше — поддерживать ролевую модель непосредственно из личного кабинета. В кабинете Maersk есть полноценная система настройки учетных записей и зон видимости для каждого пользователя. Эта функция доступна не всем пользователям, а только администраторам со стороны клиента. Важный артефакт появляется в финале исследования — график. По горизонтали идут критерии, часть которых мы разобрали в статье: По вертикали идет шкала оценки от «Совсем не представлено» — 0 до «Лучшая практика» — 3. В кругах указано количество объектов анализа, которые имеют одинаковую оценку по параметру. Например, в семи личных кабинетах отсутствует дашборд, в одном — статусы заявок реализованы на отлично, в двух — система помощи клиентам реализована средне. Серая линия соединяет оценки условно «главного» личного кабинета, для преобразования которого выполнен бенчмаркинг. График нужен, чтобы:
Показываем текущий срез
Ищем ставку
Заполняем заявку
Управляем заявками
Сопровождаем заявку
Управляем доступами
Какую пользу приносит бенчмаркинг?
Топ UX-практик в личном кабинете транспортной компании