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

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

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

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

Вводные

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

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

«Светофорные объекты»: один из модулей системы RITM³

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

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

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

Один из экранов модуля «Ситуационный центр»

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

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

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

❮ ❯

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

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

❮ ❯

Результат

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

Из отчета о UX-аудите геоинформационного модуля. Редактор карты

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

UX-аудит: экспертная оценка в Miro

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

Из отчета о UX-аудите геоинформационного модуля. Редактор карты

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

Из отчета о UX-аудите модуля «Ситуационный центр». Карта и виджеты

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

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

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

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

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

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

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

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

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

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

Из отчета о UX-аудите геоинформационного модуля. Респондент делится референсом

Показываем

Модуль «ГИС»

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

❮ ❯

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

1. Отредактировать геометрию модели (на карте)
2. Отредактировать атрибуты (справочник)
3. Подготовить визуализацию данных для отчета
4. Настроить внешний вид

❮ ❯

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

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)

❮ ❯

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

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

❮ ❯

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

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

Один из экранов модуля «Ситуационный центр»

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

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

Из отчета о UX-аудите модуля «Ситуационный центр». Видеокамеры

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

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

❮ ❯

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

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

• Разнести просмотр карты и дашборд по разным вкладкам.
• Дать возможность скрывать ненужные виджеты.
• Скрывать виджет, когда слой неактивен.
• Объединить виджеты с панелью слоев.
• При наведении на виджет подсвечивать на карте связанные с ним объекты / делать остальные объекты на карте менее акцентными. При нажатии на виджет сохранять такой вид для объектов, пока виджет выделен.

4. Для легенды:

• Разделить палитры для обозначения статусов и обозначения обычных объектов. Например, красный и зеленый использовать только для обозначения статусов.
• Использовать разные иконки для статичных объектов (светофоров, камер) и движущихся (транспорта, дорожной техники). Например, движущиеся объекты показывать в форме стрелки, а не круга.
• Использовать иконки без круглой обводки, чтоб они больше различались по силуэту.

❮ ❯

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

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

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

❮ ❯

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

1. Система не сообщает о текущем состоянии (Visibility of System Status)

• Не хватает состояний для наведения, выделения и выбора объекта.
• Во время построения маршрута не понятно какие остановки «подцепились» в маршрут.

2. Редактирование расписания не соответствует ожиданиям пользователей и привычному способу работы с расписанием (Mental Models). И в текущей реализации вызывает ряд вопросов:

• почему нужно создавать в два шага?
• почему при создании нельзя настроить время на остановках, а при редактировании нельзя изменить время отправки?
• как рассчитываются интервалы, как их изменить?

3. Проблемы редактора:

• Не работает отмена действий (Reset and Cancel Buttons)
• Некоторые действия (отмена, удаление построенного маршрута) можно совершить только с клавиатуры, что подходит для опытных пользователей, но не очевидно для новичков. (Accelerators Allow Experts to Increase Efficiency)
• Не хватает подсказок о том, что надо сделать чтобы сохранить маршрут.
• Маленькое рабочее пространство.
• Нельзя добавить новую остановку в ранее созданный маршрут.

4. Проблема с текстами: термины не из мира пользователя, сложно сформулированы подсказки, неточная информация в уведомлениях. (User-centric vs. Maker-centric Language: 3 Essential Guidelines)
5. Отсутствуют подсказки для иконок. (Icon Usability)

❮ ❯

❮ ❯

Итог

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

❮ ❯