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

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

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

Brighteye помог более сотне компаний по всему миру

Ситуация

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

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

И вот вы уже поняли, почему заказчик решил переделать интерфейс

Задача

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

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

Как видите, интерфейс выглядит устаревшим

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

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

Процесс

Погружение

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

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

Нам дали доступ администратора, поэтому слева вы можете увидеть, сколько возможностей предоставляет Momentum. Мы в этом длинном списке выбирали пункт Operator и работали только над этим разделом

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

Связи между цистернами с компонентами для соусов и другим оборудованием

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

Дизайн

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

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

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

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

Любой процесс можно развернуть, чтобы получить еще больше информации

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

Если графики не помещаются в один дашборд, можно добавить слева вертикальные вкладки

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

Вариант дашборда для больших экранов компьютеров и телевизоров

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

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

Шагов может быть больше трех — мы оставили для них место

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

Настраивать текст на этикетке можно здесь же

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

Оставили только самые важные параметры — остальные обычно постоянны, оператор их знает назубок

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

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

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

Авторизоваться и выбрать производственную линию достаточно один раз — оператору не нужно проходить этот экран каждую смену

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

Часики тикают, а двадцать тонн карри еще не готовы

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

Иногда от светлого экрана могут болеть глаза — например, в темном помещении или когда за окном ночь

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

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

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

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

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

Финал

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

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

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