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

Brighteye — бельгийская компания, разработчик Momentum, облачной программной платформы для управления производственными операциями (MOM), которая обеспечивает возможности системы управления производством (MES) на уровне предприятия, управление складом (WMS), расширенное планирование производства (APS) и многое другое.

Momentum разработан на технологиях Microsoft Azure и работает только на Windows. Причем работает не первый год — компания основана еще в 2003 году. Клиенты компании — такие гиганты, как Unilever, Olam, КАМАЗ.

Brighteye попал в ситуацию, в которой:

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

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

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

К нам заказчик пришел уже со своими наработками, аналитикой, документами с вариантами использования и видением, что должно получиться.

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

Перед этим специалист по тестированию и контролю качества Елизавета Вихрова и менеджер по исследованиям и разработкам Денис Бредихин из Brighteye подробно рассказали и показали, как вообще устроена работа оператора и в чем заключаются его трудовые обязанности. Это здорово нам помогло, потому что производственные процессы и так сложны, а в зависимости от отрасли еще и сильно различаются.

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

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

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

Добавили в расписание карточный вид — в нем помещается больше информации.

И расписание, и дашборд сделали в нескольких разрешениях — мы не знаем, какие планшеты закупит завод для операторов.

Дашборд состоит из виджетов. Каждый завод может собирать из них страницу под себя, как удобнее.

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

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

Второй шаг в запуске оборудования — настройка этикетки.

Третий шаг — проверка оборудования. В старом дизайне было гораздо больше параметров, но мы их спрятали, потому что в большинстве случаев оператор знает, как все настроено. Он запускает одни и те же процессы каждый день, это его линия, поэтому каждый раз проверять все числа не станет. А если захочет, нажмет кнопку «All Equipment Parameters».

Линия запускается только тогда, когда принимает конкретные параметры. Они обычно указаны по умолчанию, но их можно поменять.

А останавливается линия, когда принимает другие параметры. Правда, оператору все шаги проходить заново уже не нужно — достаточно нажать на «Break off». После получения параметров начинается само производство, за которым оператор следит на дашборде.

После этого сделали авторизацию. Она стандартная: достаточно ввести логин и пароль. А потом — выбрать рабочую зону и линию.

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

Ливен Декорте, продуктовый менеджер и основатель Brighteye, попросил сделать темную тему. Некоторые производства работают по ночам, и от белого экрана у оператора могут болеть глаза.

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

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

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

Brighteye начал внедрять дизайн, а мы перешли в режим поддержки.

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

Другие кейсы