Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / UX-аудит системы транспортного моделирования

2022

UX-аудит системы транспортного моделирования

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

Цена

250 000 ₽

Сроки

3 месяца
Собака Павлова • Simetra • Система транспортного моделирования

Компания Simetra занимается исследованием транспорта, моделированием транспортных систем и прогнозированием транспортных потоков.

Simetra с 2018 года разрабатывает и развивает цифровую платформу RITM³ для моделирования, мониторинга и управления транспортными системами. Название расшифровывается как Realtime Integrated Traffic Modeling / Monitoring / Management.

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

Вводные

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

Часто, но не всегда. Платформа RITM³ — отпределенно исключение из этого правила. Во-первых, модульная архитектура позволяет не впихивать миллиард функций в один интерфейс. Во-вторых, систему постоянно развивают, и легаси-решения в интерфейсе не задерживаются.

UX-аудит системы транспортного моделирования • Собака Павлова «Светофорные объекты»: один из модулей системы RITM³

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

UX-аудит системы транспортного моделирования • Собака Павлова Один из экранов модуля «Общественный транспорт»

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

UX-аудит системы транспортного моделирования • Собака Павлова Один из экранов модуля «Ситуационный центр»

В общем, не удивительно, что перед очередной модернизацией Simetra обратилась к нам за UX-аудитом интерфейса несколькольких модулей платформы [RITM³].

Бизнес-задача

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

Добавление пользовательского маршрута в модуле «Общественный транспорт». 1, 2, 3, 4, 5

Дизайн-задачи

  1. Протестировать интерфейс и выявить проблемы и слабые места, как специфичные для отдельных модулей, так и сквозные, общие для всей системы.
  2. Предложить и обосновать решения этих проблем.
  3. Передать некоторые UX-компетенции заказчику.
Фрагмент отчета об аудите модуля «Общественный транспорт». Добавление пользовательского маршрута. 1, 2, 3, 4, 5

Результат

  1. Мы провели экспертную оценку и пользовательское тестирование трех модулей системы RITM³: геоинформационного модуля «ГИС», ситуационного центра и модуля «Общественный транспорт».

UX-аудит системы транспортного моделирования • Собака Павлова Из отчета о UX-аудите геоинформационного модуля. Редактор карты

  1. Результаты экспертной оценки оформили отдельными досками в Miro. Наши эксперты оставили на них более 150 комментариев с описанием интерфейсных проблем и возможных решений. Это немного: в плохом интерфейсе было бы гораздо больше.

UX-аудит системы транспортного моделирования • Собака Павлова UX-аудит: экспертная оценка в Miro

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

UX-аудит системы транспортного моделирования • Собака Павлова Из отчета о UX-аудите геоинформационного модуля. Редактор карты

UX-аудит системы транспортного моделирования • Собака Павлова Из отчета о UX-аудите геоинформационного модуля. Справочник, вид по умолчанию

UX-аудит системы транспортного моделирования • Собака Павлова Из отчета о UX-аудите модуля «Ситуационный центр». Карта и виджеты

Экстра-польза

Мы уже упоминали, что одной из наших дизайн-задач была передача некоторых UX-компетенций заказчику.

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

Во время этого UX-аудита мы решили дополнить отчет ссылками на источник знания. Описываем интерфейсную проблему — даем ссылку. Никаких вольных популярных пересказов: обязательно на первоисточник, англоязычный, как правило.

Список литературы получился, по сути.

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

Нюансы и особенности процесса

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

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

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

UX-аудит системы транспортного моделирования • Собака Павлова Из отчета о UX-аудите геоинформационного модуля. Респондент делится референсом

Показываем

Модуль «ГИС»

Геоинформационная система сбора, хранения, анализа и графической визуализации данных (ГИС) – это основной модуль, остальные модули используют его для визуализации и работы с пространственными и картографическими данными.

Из отчета о UX-аудите геоинформационного модуля. Карта. 1, 2, 3, 4, 5, 6, 7, 8

Задачи пользователей в этом модуле:

  1. Отредактировать геометрию модели (на карте)
  2. Отредактировать атрибуты (справочник)
  3. Подготовить визуализацию данных для отчета
  4. Настроить внешний вид
Из отчета о UX-аудите геоинформационного модуля. Карта. 1, 2, 3, 4, 5, 6, 7, 8

Сквозные проблемы

  1. Система не сообщает о текущем состоянии. Например, в таблице и в настройках не отображаются примененные параметры. (Visibility of System Status. Usability Heuristic #1)
  2. Система не сохраняет данные автоматически, не хранит глобальную историю и не дает отменить действие. (Designing a user-friendly autosave functionality)
  3. Модальность часто используется там, где она не нужна. (Popups: 10 Problematic Trends and Alternatives)
  4. Система постоянно просит подтвердить сохранение (Modal & Nonmodal Dialogs: When (& When Not) to Use Them)
  5. Не всегда уместно используются элементы интерфейса. Например, спойлеры и обрезанные по высоте модальные окна.
  6. Не хватает проверенных лучших практик для работы с таблицей (Designing better data tables for enterprise UX)
  7. Не хватает проекций для визуализации связи между слоем и объектом на карте.
  8. Не всегда отзывчивый интерфейс, часто не хватает мгновенного фидбэка: хинты, подсказки (Usability Testing of Icons)
  9. Система не учитывает цифровые привычки пользователя, сформированные другими продуктами. Например, не работает базовая горячая клавиша «отмена» (Don’t Prioritize Efficiency Over Expectations)
Из отчета о UX-аудите геоинформационного модуля. Справочник. 1, 2, 3, 4, 5, 6, 7, 8

Дополнительные идеи и предложения:

  1. Дать возможность при проверке графа на актуальность штатными средствами системы помечать проверенные и отредактированные объекты. Респонденты за неимением такой возможности использовали для этого дополнительные атрибуты объектов.
  2. Дать возможность сворачивать обвязку интерфейса модуля во время редактирования объектов или предусмотреть специальный режим. Сейчас, если нужно разделить экрана (чтобы свериться с документами, другой системой или яндекс картами), интерфейс перекрывает большую часть основной рабочей области.
  3. Сделать принцип редактирования объектов в основном редакторе модуля ГИС таким же, как в редакторе объектов дорожного движения. более удобный и современный.
Добавление дорожного знака в редакторе объектов дорожного движения модуля «ГИС». 1, 2, 3, 4, 5, 6

Модуль «Ситуационный центр»

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

UX-аудит системы транспортного моделирования • Собака Павлова Один из экранов модуля «Ситуационный центр»

Ключевые задачи пользователей:

  1. Проверить текущее состояние УДС
  2. Проверить статус проблемного объекта
  3. Подготовить данные для отчета

UX-аудит системы транспортного моделирования • Собака Павлова Из отчета о UX-аудите модуля «Ситуационный центр». Видеокамеры

Сквозные проблемы

  1. Не хватает проекций для визуализации связи между объектом на карте и детальной информацией.
  2. Несогласованность элементов (режим выделения объекта выглядит как негативный статус). Maintain Consistency and Adhere to Standards (Usability Heuristic #4)
  3. Задача «Подготовить данные для отчета» не выполняется.
  4. При большом количестве разных слоев с объектами легенда не информативна. (5 Principles of Visual Design in UX)
  5. Виджеты не связаны с панелью слоев. При большом количестве виджетов сложно считать, какие объекты сейчас отображены на карте.
Из отчета о UX-аудите модуля «Ситуационный центр». Карты и виджеты. 1, 2, 3, 4, 5, 6, 7, 8

Также мы предложили:

  1. Для выделения объекта использовать нейтральный цвет, например белый или синий. Не перекрашивать иконку выделенного объекта, а использовать подложки или обводку.
  2. Для подготовки данных для отчета добавить возможность экспортировать данные с виджетов в файл, и возможность сохранить скриншот.
  3. Для виджетов:
  • Разнести просмотр карты и дашборд по разным вкладкам.
  • Дать возможность скрывать ненужные виджеты.
  • Скрывать виджет, когда слой неактивен.
  • Объединить виджеты с панелью слоев.
  • При наведении на виджет подсвечивать на карте связанные с ним объекты / делать остальные объекты на карте менее акцентными. При нажатии на виджет сохранять такой вид для объектов, пока виджет выделен.
  1. Для легенды:
  • Разделить палитры для обозначения статусов и обозначения обычных объектов. Например, красный и зеленый использовать только для обозначения статусов.
  • Использовать разные иконки для статичных объектов (светофоров, камер) и движущихся (транспорта, дорожной техники). Например, движущиеся объекты показывать в форме стрелки, а не круга.
  • Использовать иконки без круглой обводки, чтоб они больше различались по силуэту.
Из отчета о UX-аудите модуля «Ситуационный центр». Видеокамеры. 1, 2, 3, 4

Модуль «Общественный транспорт»

Задачи пользователей

  1. Добавить маршрут общественного транспорта
  2. Изменить существующий маршрут общественного транспорта
  3. Изменить расписание маршрута
  4. Добавить остановку
  5. Изменить существующую остановку
  6. Привязать к маршруту ТС
  7. Построить пользовательский маршрут
  8. Передать информацию о маршруте во внешние сервисы
Из отчета о UX-аудите модуля «Общественный транспорт». Карта. 1, 2, 3

Сквозные проблемы

  1. Система не сообщает о текущем состоянии (Visibility of System Status)
  • Не хватает состояний для наведения, выделения и выбора объекта.
  • Во время построения маршрута не понятно какие остановки «подцепились» в маршрут.
  1. Редактирование расписания не соответствует ожиданиям пользователей и привычному способу работы с расписанием (Mental Models). И в текущей реализации вызывает ряд вопросов:
  • почему нужно создавать в два шага?
  • почему при создании нельзя настроить время на остановках, а при редактировании нельзя изменить время отправки?
  • как рассчитываются интервалы, как их изменить?
  1. Проблемы редактора:
  • Не работает отмена действий (Reset and Cancel Buttons)
  • Некоторые действия (отмена, удаление построенного маршрута) можно совершить только с клавиатуры, что подходит для опытных пользователей, но не очевидно для новичков. (Accelerators Allow Experts to Increase Efficiency)
  • Не хватает подсказок о том, что надо сделать чтобы сохранить маршрут.
  • Маленькое рабочее пространство.
  • Нельзя добавить новую остановку в ранее созданный маршрут.
  1. Проблема с текстами: термины не из мира пользователя, сложно сформулированы подсказки, неточная информация в уведомлениях. (User-centric vs. Maker-centric Language: 3 Essential Guidelines)
  2. Отсутствуют подсказки для иконок. (Icon Usability)
Из отчета о UX-аудите модуля «Общественный транспорт». Редактор маршрутов. 1, 2, 3, 4, 5, 6, 7, 8, 7, 8 Отчет об аудите модуля «Общественный транспорт». Остановки. 1, 2, 3, 4, 5, 6, 7

Итог

Компания доработала интерфейс системы, использовав результаты нашего UX-аудита. С тех пор цифровая платформа [RITM³] сильно изменилась (не удивительно - ее постоянно развивают и улучшают), а наш отчет о UX-аудите до сих пор используют в Simetre для обучения новых UX-дизайнеров.

Из отчета о UX-аудите модуля «Общественный транспорт». Информация о маршруте. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14

Некоторые цифры

Исследовали

150 экранов 

системы RITM³

Оставили в Miro

186 комментариев 

с проблемами и решениями

Составили

отчета 

общим объемом в сотню страниц

Похожие проекты

Отзыв заказчика

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

Цена

250 000 ₽

Сроки

3 месяца

Пишите нам: @sobakapavpro