Проверяем промышленный интерфейс на прочность: шпаргалка для UX-дизайнеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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