Редизайн промышленных интерфейсов: опыт и выводы НЛМК

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

В чем особенность промышленных интерфейсов?

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

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

Из-за этих сложностей, кстати, в промышленный UX/UI-дизайн (иными словами, дизайн интерфейсов) часто идут специалисты, уставшие от однотипных задач. Создать понятный и удобный интерфейс для промышленности — задача по-настоящему нетривиальная.

Как команда дизайнеров НЛМК смотрела на задачу?

Еще несколько лет назад за создание новых визуальных концепций интерфейсов НЛМК взялась одна очень известная дизайнерская студия. Спустя полгода дизайнеры предложили свое видение веб-систем. Однако приживаемость получившейся дизайн-концепции оказалась чересчур низкой — и специалисты на местах предпочли пользоваться старыми интерфейсами. Получилось, что визуальный концепт стал существовать отдельно, а веб-системы компании — отдельно.

Тогда за дело взялась собственная команда UX/UI-дизайнеров НЛМК. В процесс принятия решений и разработки помимо ИT-специалистов интегрировали конечных пользователей — тех сотрудников, которые ежедневно работают с интерфейсами. В результате взаимодействия появился четкий список запросов и ограничений, которым должны соответствовать интерфейсы.

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

С другой стороны, перед дизайнерами стояла задача разработать единые гайдлайны, единую дизайн-концепцию в перспективе для всех интерфейсов Группы НЛМК — не только тех, что прямо связаны с производством и существуют в довольно жестких условиях, но и тех, с которыми соприкасаются работники офисов или остальные сотрудники вне своего рабочего места.

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

Что представляет собой дизайн-система?

Дизайн-система — это набор стандартов, принципов, компонентов и инструментов, обеспечивающих единый подход к дизайну и разработке продуктов внутри компании.

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

Содержание дизайн-системы представляет собой комплексное решение, где собраны все элементы интерфейсов (в дизайне и в коде), готовые для использования различными подразделениями компании. Сюда входят гайдлайны, витрины, руководство по стилю, вся необходимая документация, UI-kit, Storybook, наборы UX-паттернов и т. д.

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

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

Создание дизайн-системы стало важным этапом на пути к редизайну всех интерфейсов. Дело в том, что разработкой интерфейсов в разных подразделениях и предприятиях Группы НЛМК занимаются различные команды, и на протяжении долгого времени каждая из них составляла свой список требований к веб-системам. Из-за этого пользователи при переходе, например, с одного предприятия на другое были вынуждены заново осваивать работу с интерфейсами. А сама разработка была бессистемной — для создания нового интерфейса ИT-специалисты иногда были вынуждены с нуля создавать визуальный стиль и «изобретать» компоненты интерфейса.

Какие результаты у редизайна?

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

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

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

По мере создания дизайн-системы UX/UI-команды стали работать над редизайном различных ИT-продуктов Группы НЛМК — это, например, «Сквозная прослеживаемость производства (СПЭП 2.0)», «Сталеплавильное производство», «Аглодоменное производство», «Прокатные системы», «Сменный рапорт доменной печи», «Оптимизатор состава шихты», «Метиз», «ВИЗ Сталь», «Электронный наряд-допуск 2.0», «Портал NLMK.ONE», «Портал MBO/MBI» и другие. На сегодняшний момент редизайну подверглись более 30 различных интерфейсов.

Также на компонентах дизайн-системы проектировались новые продукты компании: «HR-портал», «Система управления», «Карьера и развитие», «Профиль компетенций», «Адаптация», «Матрица 9 квадратов», «Управление КПЭ», «Эффективный найм», «Портал NLMK TMS», «Новая SRM-система» и другие.

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

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

За три года работы был проделан большой путь, и наша команда не собирается останавливаться. На данный момент составлена дорожная карта развития Дизайн-системы на несколько лет вперед. Также, мы опубликовали нашу Дизайн-систему в Open Source и проработали концепцию будущей монетизации.