Привет, Хабр! Меня зовут Владимир Тихомиров, я дизайнер в компании «Цифра». Как я уже писал, я много занимаюсь проектированием и описанием мнемосхем. И в этот раз снова поговорим о них. А конкретно о том, как мы ускорили реакцию операторов, убрав лишнее.

На одном из заводов диспетчер пропустил аварию. Не потому, что не видел сигнал, а потому что не заметил его среди десятков мигающих индикаторов. На экране «горело» всё. И когда всё важно — смысл теряется. Это не единичный случай. Исследования Международной организации автоматизации (ISA) показывают: визуальный шум на экранах управления — одна из частых причин человеческих ошибок в промышленности.

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

Мы решили это изменить. Изучили современные подходы к промышленному дизайну, побывали на реальных объектах, протестировали гипотезы и создали обновленный гайдлайн.

В этой статье я расскажу:

• почему «красивому» дизайну не место в промышленности;

• как мы дошли до рабочих решений;

• как изменились интерфейсы и что это дало на практике.

Как всё начиналось

Для начала погрузимся в причины, почему такой дизайн был актуален. Как всегда важен контекст.

В 90-е и 2000-е 3D-графика была «вау-эффектом». Каждый заказчик хотел «красиво и дорого». И согласитесь, схема с 3D-объектами, да ещё и с анимацией действительно может вызвать то самое «Вау!». А для того времени это считалось не только красотой, но и признаком прогресса и мощи ПО, ведь не каждая система тогда могла сделать такое. Однако это не единственная причина, да и даже не главная.

Основная проблема — это отсутствие исследований юзабилити. Могу предположить, что даже сейчас можно услышать миф об «опытном операторе»: он и так всё знает, ему подсказки не нужны. Зачем тратить ресурсы на проектировку и тестирование интерфейса, если Петрович с какой-то там смены и так справляется? Отсюда и появился «приближенный к реальности» дизайн. Дизайнеры (на тот момент это и были сами инженеры) стремились сделать интерфейс «похожим на реальность». Они придерживались логики: «Я знаю, как работает этот насос, я нарисую его похожим на настоящий, чтобы оператор тоже понял». Считалось, что так оператору будет интуитивно понятнее. По факту же это приводило к следующим проблемам:

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

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

• Анимация забирает внимание. Мозг человека автоматически реагирует на любое движение. Ему не важно, насколько это полезно, он сразу делает. Теперь посмотрите на старую мнемосхему, где всё крутится, мигает, переливается и двигается. Лицо мозга представили? 

• Красный — это крик. В промышленном дизайне цвет — не просто декор ради красоты, это сигнал индикации. В первую очередь он сообщает о состоянии системы. Если использовать красный как для дизайна, так и для аварии, то его функция обесценивается. Стандарт ISA-18.2 предотвращает перегрузку оператора сигналами и требует, чтобы каждая тревога имела чёткую и обоснованную цель.

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

Ситуация начала меняться после серии крупных промышленных аварий. Например, на АЭС «Три-Майл-Айленд» (1979). Расследования подобных происшествий показали, что операторы получали всю необходимую информацию на экране, но не могли её корректно интерпретировать из-за визуального шума и когнитивной перегрузки. Такие события стали катализатором для организаций вроде Международного общества автоматизации (ISA). Именно они мотивировали на фундаментальные исследования, благодаря которым сформировались современные стандарты, регламентирующие дизайн человеко-машинного интерфейса, в частности, ISA-101.

Сохранить нельзя — выкинуть

Мы начали с аудита: собрали все существующие решения и зафиксировали их в руководстве версии 1.0. Тогда у нас были только светлая и тёмная темы, разработанные по старому принципу «красота ради красоты». Задачи оператора учитывали в последнюю очередь. Стало ясно: в промышленном дизайне на первом месте стоит не эстетика, а безопасность и скорость реакции. Взяв за основу этот принцип и современные стандарты, мы начали собирать новые решения. Каждый спорный вопрос решался просто: я представлял себя на месте диспетчера в 3 часа ночи. Так появились новые рекомендации, объединённые в первую итерацию новой версии гайдлайна.

Уборка

Первым делом мы отказались от всех прошлых решений, убрали всё, что не несло никакой ценности:

• 3D-объекты, градиенты, тени и прочий визуальный шум. Этот подход прямо закреплён в стандарте ISA-101.01 и философии High Performance HMI: интерфейс должен быть инструментом для принятия решений, а не картинкой, имитирующей реальность. Это также подкрепляется и исследованиями когнитивной психологии. Например, работы Р. Майера показали, что декоративные элементы, не несущие информации, снижают скорость восприятия и запоминания ключевых данных.

• Анимация. Моё мнение (и оно совпадает со стандартами) — если на схеме всё в порядке, она не должна привлекать внимание. Критические ситуации же легче выделить цветом, который сразу бросится диспетчеру в глаза. Для анимации мозгу нужно чуть больше времени: сначала отфильтровать, проанализировать, а затем уже среагировать. Исследования в области нейрофизиологии (например, Journal of Vision, PubMed, PMID: 2377416) показывают, что мозгу сложнее обработать динамические стимулы, чем статичные сигналы.

• Имитация реальности в пользу функциональной ясности. Стандарт ISA-101.01 и High Performance HMI прямо рекомендуют этот пункт. Вместо точных копий труб и приборов нужно использовать абстрактные схемы, которые отражают состояние процесса.

Так мы начали с нуля и принялись создавать интерфейсы, где внимание оператора направляется не на декоративные элементы, а на критически важные параметры процесса.

Переосмыслить цвета

Конечно, пёстрые интерфейсы смотрятся эффектно, но вряд ли уставший диспетчер под конец своей 12-часовой смены скажет за них спасибо.

За основу мы взяли принцип: «Если с системой всё в порядке, не беспокой оператора». Поэтому основные цвета — спокойные и нейтральные. Это может не вызывать «вау-эффекта», но зато снижает нагрузку на зрение, когнитивные способности, уменьшает уровень усталости. Яркие цвета мы использовали только для индикации состояний и тестировали их на старых мониторах. Цвет, который выглядел контрастным в офисе, на запыленном экране в полумраке терялся. Поэтому мы скорректировали насыщенность сигнальных цветов. Так сформировались палитры для трёх тем: светлой, тёмной и приближенной к стандартам HMI.

Улучшение и унификация отображения оборудования

Вместо 3D-моделей, имитирующих физическое оборудование, мы перешли к упрощенным 2D-символам с узнаваемым силуэтом. Тут важен баланс: нельзя превращать всё в прямоугольники, но и излишняя детализация превращает элемент в визуальное пятно.

Главное изменение — единая библиотека. Раньше один и тот же клапан на разных схемах выглядел по-разному. Теперь, если на проекте нужен насос, дизайнер берет готовый символ из базы. Благодаря этому сборка схемы ускорилась в разы. На первых проектах мы замеряли разницу — дизайнер тратил в 5-6 раз меньше времени.

Исследования юзабилити

Руководство и наши рекомендации остались бы поверхностными без практической проверки. Чтобы исключить субъективные решения, мы пошли по следующей схеме:

1. Сбор требований. Благодаря подробному шаблону «Необходимая входящая информация от заказчика для адаптации руководства по проектированию под проект заказчика» мы собираем полную информацию ещё до начала работ над проектом.

2. Анализ обратной связи. Мы изучаем все комментарии и обратную связь заказчиков, включая критические. Многие пункты гайдлайна были скорректированы именно на основе реального опыта пользования.

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

4. Тестирование совместимости. Купили старый монитор и проверяли интерфейсы в разных условиях. Это выявило ряд проблем с цветовыми темами, которые устранили в руководстве.

Подать под правильным соусом

Оказалось, что нарисовать стандарт — не самая сложная задача. Куда сложнее заставить по нему работать. Люди привыкли к старым подходам, поэтому сопротивление было серьёзным.

Сначала мы провели знакомство для дизайнеров. Другие команды знакомились с гайдлайном параллельно во время проектирования мнемосхем в рамках новых задач. Мы не раз публиковали руководство, и я лично презентовал его на ежегодном мероприятии компании. Были споры и разногласия, но результаты и тесты на скорость реакции оператора подтверждают корректность рекомендаций. Количество правок от заказчика сократилось: теперь обычно хватает 1-2 итераций.

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

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

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

Вывод

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

Статью хотелось бы закончить одной мудрой, но немного изменённой под наш кейс цитатой Дональда Нормана:

«Хороший промышленный дизайн незаметен. Его не хвалят за красоту. Его замечают только тогда, когда он помогает избежать аварии».