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

Экран в Figma всегда выглядит идеально, но в цехе начинаются реальные условия: слепящие блики, перчатки на руках, двенадцатый час смены и ревущая сирена.

Я написала несколько статей на эту тему, выступала на конференциях, но вопросов у дизайнеров меньше не становилось. И в один прекрасный день решила собрать небольшой инструмент для автоматического аудита SCADA / MES интерфейсов, чтобы помочь сориентироваться тем, кто только начал разбираться в теме проектирования интерфейсов для промышленности и других критически важных сфер.

Что он измеряет:

  • расстояние от аварийных кнопок до обычных (ориентир от 50 мм);

  • размер критических кнопок для работы в перчатках (от 15 мм);

  • контраст текста (для экранов принятия решений — WCAG AAA, 7:1);

  • различимость цветовой индикации при дальтонизме;

  • число одновременно активных уведомлений и информационную плотность экрана.

Прототип, прошедший чеклист
Прототип, прошедший чеклист

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

Эти пункты отчет выводит отдельно, с объяснением, что именно проверить самостоятельно.

Сводка по правилам для экрана реактора выше
Сводка по правилам для экрана реактора выше

Так отмечаются потенциальные улучшения. Номер на экране совпадает с номером пункта в списке рекомендаций:

Экран сгенерирован для примера, разметка — реальный результат проверки
Экран сгенерирован для примера, разметка — реальный результат проверки

Как это работает:

  1. Вы загружаете скриншот, макет или прототип операторской панели. Фото тоже можно, но точность ниже.

  2. Инструмент сам находит аварийные кнопки, уведомления, индикаторы и текст.

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

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

Скриншот никуда не отправляется, что для промышленных интерфейсов важно!

Ограничения

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

Практическая польза

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

Проверить свой экран ➡️

Буду благодарна за примеры, на которых проверка ошиблась или что‑то пропустила: по ним буду дорабатывать правила.

Комментарии (12)


  1. Vlad-34
    28.10.2026 03:01

    Я тут загрузил экран Сбера, и оно показало уровень исполнения - днище))


    1. scarrydigital Автор
      28.10.2026 03:01

      Для пользовательских сайтов такие требования избыточны :)) Насколько мне известно, исследований там было очень много


  1. EmmGold
    28.10.2026 03:01

    На госуслугах пытался заполнить заявление, искал поле ввода, очень пригодился опыт квестов. Истыкал всю форму, но нашел...


    1. scarrydigital Автор
      28.10.2026 03:01

      Я проверила — с этими формами у них реально челлендж. Не замечала, видимо привыкла)

      Сделала еще один сервис для проверки обычных сайтов, пробую обучать сейчас на таких кейсах


  1. scarrydigital Автор
    28.10.2026 03:01

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


    1. Lizdroz
      28.10.2026 03:01

      Если действие необратимо или влечет списание денег, переспросить пользователя вполне разумно


      1. scarrydigital Автор
        28.10.2026 03:01

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

        В финтехе постоянно спотыкаешься об подобное


  1. sashacharly
    28.10.2026 03:01

    Очень круто! Хочу такую шпаргалку по всем интерфейсам))))


    1. scarrydigital Автор
      28.10.2026 03:01

      Спасибо!)) Ой да, судя по комментам — точно будет актуально)


  1. Lizdroz
    28.10.2026 03:01

    Переводить пиксели в миллиметры по заявленной диагонали экрана бесполезно без учета реального разрешения матрицы панели


    1. scarrydigital Автор
      28.10.2026 03:01

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


    1. scarrydigital Автор
      28.10.2026 03:01

      UPD — Добавила поля, теперь должно считать корректнее