sobaka@pavlova.cc
+7 (921) 654-26-80
Click to order
Total: 
Напишите, пожалуйста, ваше имя и ваш рабочий e-mail, чтоб мы знали, кому и куда присылать уроки.
Ваше имя
Ваш Email
По закону мы обязаны спросить

Интерфейс оператора производственной линии и приложения для MOM Momentum от Brighteye

Мы должны были разработать интерфейс для одного-двух процессов, а потом на их основе собрать UI-кит.
Brighteye собирался обновить интерфейс оператора и адаптировать его под размер экрана планшета
Контекст
~ 1 000 000 ₽
Бюджет
Результат
2021
Brighteye — бельгийская компания, разработчик Momentum, облачной программной платформы для управления производственными операциями (MOM), которая обеспечивает возможности системы управления производством (MES) на уровне предприятия, управление складом (WMS), расширенное планирование производства (APS) и многое другое.
Momentum разработан на технологиях Microsoft Azure и работает только на Windows. Причем работает не первый год — компания основана еще в 2003 году. Клиенты компании — такие гиганты, как Unilever, Olam, КАМАЗ.
Логотипы клиентов
Brighteye помог более сотне компаний по всему миру

Ситуация

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

Задача

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

Процесс

Погружение

К нам заказчик пришел уже со своими наработками, аналитикой, документами с вариантами использования и видением, что должно получиться.
Еще он предоставил доступ к «тестовому заводу» — эмуляции производства соусов, которым можно управлять через интерфейс оператора: запускать линии, следить за процессами на дашборде и контролировать, чтобы в майонезе хватало растительного масла.
Старый интерфейс оператора производственной линии в Momentum
Нам дали доступ администратора, поэтому слева вы можете увидеть, сколько возможностей предоставляет Momentum. Мы в этом длинном списке выбирали пункт Operator и работали только над этим разделом
Перед этим специалист по тестированию и контролю качества Елизавета Вихрова и менеджер по исследованиям и разработкам Денис Бредихин из Brighteye подробно рассказали и показали, как вообще устроена работа оператора и в чем заключаются его трудовые обязанности. Это здорово нам помогло, потому что производственные процессы и так сложны, а в зависимости от отрасли еще и сильно различаются.
Старый интерфейс оператора производственной линии в Momentum
Связи между цистернами с компонентами для соусов и другим оборудованием
Подчеркнем отдельно: у нас не было задачи переделать логику рабочих процессов — интерфейс должен был работать как раньше. Поэтому после погружения мы сразу перешли к дизайну.

Дизайн

Мы поделили проект на несколько частей и начали со списка операций. Это основной интерфейс оператора, здесь он проводит большую часть времени.
В старом дизайне расписание процессов и дашборд делили одно пространство. Из-за этого графики не помещались в экран — приходилось скроллить. А еще это два разных фокуса внимания. Поэтому мы разделили расписание и дашборды на самостоятельные страницы.
Новый интерфейс оператора производственной линии в Momentum
Дашборды находятся в соседней вкладке — на них можно перейти тремя способами: нажать на соседнюю вкладку, строку в списке или зеленую кнопку
Добавили в расписание карточный вид — в нем помещается больше информации.
Новый интерфейс оператора производственной линии в Momentum
Любой процесс можно развернуть, чтобы получить еще больше информации
И расписание, и дашборд сделали в нескольких разрешениях — мы не знаем, какие планшеты закупит завод для операторов.
Дашборд оператора производственной линии в Momentum
Если графики не помещаются в один дашборд, можно добавить слева вертикальные вкладки
Дашборд состоит из виджетов. Каждый завод может собирать из них страницу под себя, как удобнее.
Дашборд оператора производственной линии в Momentum
Вариант дашборда для больших экранов компьютеров и телевизоров
После этого взялись за запуск процессов. В оригинальном дизайне, прежде чем оборудование запустится, система показывает оператору справку: смотри, сейчас мы будем делать вот это, а потом — вот это. Это страховка от человеческого фактора. Оператор должен подтвердить, что он все прочитал.
Мы предусмотрели место под текст — иногда одних изображений может быть недостаточно.
Новый интерфейс оператора производственной линии в Momentum
Шагов может быть больше трех — мы оставили для них место
Второй шаг в запуске оборудования — настройка этикетки.
Новый интерфейс оператора производственной линии в Momentum
Настраивать текст на этикетке можно здесь же
Третий шаг — проверка оборудования. В старом дизайне было гораздо больше параметров, но мы их спрятали, потому что в большинстве случаев оператор знает, как все настроено. Он запускает одни и те же процессы каждый день, это его линия, поэтому каждый раз проверять все числа не станет. А если захочет, нажмет кнопку «All Equipment Parameters».
Новый интерфейс оператора производственной линии в Momentum
Оставили только самые важные параметры — остальные обычно постоянны, оператор их знает назубок
Линия запускается только тогда, когда принимает конкретные параметры. Они обычно указаны по умолчанию, но их можно поменять.
А останавливается линия, когда принимает другие параметры. Правда, оператору все шаги проходить заново уже не нужно — достаточно нажать на «Break off». После получения параметров начинается само производство, за которым оператор следит на дашборде.
После этого сделали авторизацию. Она стандартная: достаточно ввести логин и пароль. А потом — выбрать рабочую зону и линию.
Страница авторизации в Momentum
Авторизоваться и выбрать производственную линию достаточно один раз — оператору не нужно проходить этот экран каждую смену
После этого осталось сделать разные состояния виджетов, показать раскрытый виджет расписания и экраны в разных разрешениях — верстка-то будет адаптивной, поэтому веб-приложение должно хорошо выглядеть даже в браузере на компьютере.
Новый интерфейс оператора производственной линии в Momentum
Часики тикают, а двадцать тонн карри еще не готовы
Ливен Декорте, продуктовый менеджер и основательница Brighteye, попросила сделать темную тему. Некоторые производства работают по ночам, и от белого экрана у оператора могут болеть глаза.
Темная тема интерфейса оператора производственной линии в Momentum
Иногда от светлого экрана могут болеть глаза — например, в темном помещении или когда за окном ночь

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

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

Финал

Brighteye начал внедрять дизайн, а мы перешли в режим поддержки.
В будущем компания продолжит редизайн своими силами. У Brighteye есть отличный штатный UX-дизайнер и крутые UX-аналитики, а к нам они обратились за свежим взглядом на UI и опытом разработки дизайна под Android. Теперь они есть, а собирать интерфейсы других частей системы они могут из компонентов UI-кита, который мы подготовили в конце проекта.
~ 1 000 000 ₽
Бюджет
Результат

Если у вас крупная система, обновляйте интерфейс маленькими порциями — не ошибетесь.

Другие кейсы