🏭 Как мы сделали рабочие табличные интерфейсы для производства

Когда твои пользователи работают в защитных масках при плохом освещении, обычные подходы к дизайну не работают. Команда НЛМК ИТ провела месяцы в цехах, чтобы понять: промышленные интерфейсы — это совсем другая история.

Таблицы в производственных системах устроены совсем не так, как в привычных офисных программах. В цехе от них требуется читаемость при плохом освещении, возможность работать на мониторах среднего качества и удобство при длительном использовании. При этом на протяжении долгого времени в компании широко использовались Excel- и Oracle-системы. Это было удобно для быстрых расчетов и хранения данных, но в условиях производства такие решения показывали свои слабые стороны.

Мы в НЛМК ИТ решили перейти на собственные таблицы и довольно быстро столкнулись с тем, что стандартные подходы здесь не работают. Чтобы понять, что именно нужно нашим пользователям, команда дизайнеров много времени провела в цехах: наблюдали, как люди работают, какие действия выполняют, что им мешает и что облегчает работу. На основе этих наблюдений мы начали формировать требования к новым интерфейсам.

Всем привет! Меня зовут Рамазан Нурулаев, я ведущий UX-дизайнер НЛМК ИТ. Сегодня я расскажу о том, с какими вызовами мы столкнулись в процессе и к каким выводам пришли.

Рамазан Нурулаев

Особенности таблиц на производстве

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

Нашей первой мыслью было доработать привычные цифровые решения под запросы цехов. Однако стало понятно, что готовые продукты плохо адаптируются под такую специфику. Excel и аналоги рассчитаны на широкий круг пользователей, где каждый может выбрать свои шрифты, цвета и оформление. Для производства это неудобно: универсальные инструменты плохо учитывают баланс между информативностью и читаемостью. В них легко разместить большое количество данных, но на производстве это приводит к тому, что информация превращается в трудночитаемое полотно. Более того, здесь нужны единые правила, чтобы таблицы выглядели одинаково у всех сотрудников и не требовали дополнительных пояснений. Тогда мы решили строить свое решение с нуля.

Статья по теме

🎨✨ Как улучшить UI: 10 советов для начинающих фронтендеров

Проблемы и их решения

Перегруженность

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

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

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

Сложная иерархия

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

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

Редактирование данных

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

Цвета и визуал

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

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

Правила проектирования

Все эти решения мы собрали в набор правил, которыми пользуемся и сейчас.

• Цветовая схема основана на трех состояниях: зеленый — все в норме, желтый — следует обратить внимание, красный — критическая ситуация. Эти значения одинаковы для всех таблиц и никогда не меняются. Пользователь может добавлять свои цвета, но только через легенду, чтобы у каждого оттенка было понятное значение.
• Для числовых данных мы используем моноширинные шрифты. Это позволяет сравнивать данные без искажений: например, «11111111» и «8888888» больше не выглядят как строки разной длины, а воспринимаются правильно. Числа выравниваются по правому краю, текстовые поля — по левому.
• Высоту строк мы ограничили тремя вариантами: стандартные — 40 пикселей, компактные — 32, увеличенные — 56. Последние используются, если в ячейке есть дополнительные элементы.
• Мы также стараемся избегать горизонтальной прокрутки и предлагаем пользователям управлять набором колонок. Вертикальная прокрутка осталась, но заголовки теперь всегда фиксируются сверху, чтобы при скролле не терялся контекст.

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Чему научились

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

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

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