Почему типичные дизайн-подходы оказались неприменимы к интерфейсу для производств

252e92da849810f58cac104081ff6245.jpeg

После того как я впервые съездила на завод, стало понятно, почему в дизайнеров кидаются тапками.

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

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

Как было и зачем мы начали все обновлять

Представлюсь — меня зовут Анна Труфанова, руководитель отдела дизайна MES-систем. Мы стали одной из первых в России команд, практикующих UX-дизайн для производств. 

Старые производственные интерфейсы морально устарели: помните все эти экраны в духе Windows 98, с ярко-бирюзовым цветом — как на фото? Вот такое нам и нужно было превратить в современную систему, которой приятно и удобно пользоваться.

beccf2dd65ae838fe1a2b0edf720fe92.jpeg

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

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

Все не то, надо переделать

Как думаете, что не так с этой таблицей?

Версия 1.0

Версия 1.0

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

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

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

1f7d0dc75f132e27e6e918b5a1cca9b9.png

Даже, казалось бы, создание простой таблицы имеет нюансы: значение 11111111 (8 символов) визуально выглядит меньше, чем 9999999 (7 символов) из-за разной ширины цифр, и это может вводить в заблуждение при быстром сравнении значений. Моноширинный шрифт решает эту проблему: цифры одинаковой ширины, ориентироваться в таблице легче, данные достоверны. Уверенное начертание Medium (более жирный шрифт) также помогает быстрее считывать информацию.

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

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

Мы с командой дизайнеров составили план, на какие моменты обращать внимание в интервью с пользователями, и готовились к первой командировке:  

  • Освещение в помещении — не слепят ли пользователей белые экраны.

  • Состояние мониторов в цехах. Убедиться, что дело не в неправильной калибровке мониторов — это могло искажать передачу цвета.

  • Шрифты — насколько они хорошо считываются в условиях производства.

Первая командировка

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

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

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

  • Наши пользователи — не всегда люди с хорошим зрением, «тонкие и легкие» шрифты не способствовали скорости работы и воспринимались плохо. По дизайнерским представлениям, слишком жирный шрифт плохо смотрится на макетах —, но мы должны были поставить потребности пользователей на первое место.

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

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

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

  • шрифты стали жирнее, и пользователи стали хорошо считывать информацию;

  • была разработана темная тема, благодаря которой глаза пользователей перестали уставать от работы с интерфейсами в темных помещениях.

Результат

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

Новый интерфейс: темная тема и заметные, но не напрягающие глаза табличные цвета

Новый интерфейс: темная тема и заметные, но не напрягающие глаза табличные цвета

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

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

Тестирование интерфейса

Тестирование интерфейса

Особенности интерфейсов

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

Или явная, крупная индикация — вот так мы показываем ситуацию на панели горнового, когда ковш не установлен:

Отображение мнемосхемы и реального позиционирования

Отображение мнемосхемы и реального позиционирования

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

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

a249ac701537b5327b05cffc8d09a6bd.jpg

Мнемосхемы такого масштаба для КЦ-1 не было, и мы отрисовывали ее с технической схемы цеха, опираясь на визуал уже существующей мнемосхемы КЦ-2. Подробнее о работе мнемосхемы КЦ-2 можно почитать в статье https://habr.com/ru/companies/nlmk/articles/580270/

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

Мнемосхема разработана с учетом новой палитры, поддерживает автоматическое переключение тем (со светлой на темную) и акцентирует внимание на агрегатах, а не на рельсах — в отличие от старой.

На примере — старый интерфейс для второго конвертерного цеха:

98237e453af077b540987e119e2f9208.jpg

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

Универсальные интерфейсы ввиду особенностей производства изобрести невозможно — всегда будет не хватать деталей, а также живой обратной связи. Мнемосхемы похожи на интерфейсы игр:, но будет ли хватать производительности цеховым мониторам? Наша графика легкая и собрана на React JS: это современный фреймворк для создания активных приложений.

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

572b734c86da807c56fa477dda040d41.jpg

Помимо стандартной дизайн-системы, содержащей базовые компоненты (кнопки, таблицы, селекторы), мы сделали дизайн-систему MES, которая разработана с учетом специфики производства и содержит:

  • Набор особенных цветовых пар для светлой и темной темы.

  • Компонентную базу для создания мнемосхем.

  • UX-кейсы для применения в производственных интерфейсах.

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

© Habrahabr.ru