---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-08-16
publishYear: 2021
name: Brighteye
title: Интерфейс оператора производственной линии и приложения для MOM Momentum от Brighteye
excerpt: "Осовременили, упростили и адаптировали для планшета интерфейс рабочего места оператора производства."
context: Brighteye собирался обновить интерфейс оператора и адаптировать его под размер экрана планшета. Мы должны были разработать интерфейс для одного-двух процессов, а потом на их основе собрать UI-кит.
logo:
src: ~/assets/images/portfolio/brighteye/logo.jpg
alt: Brighteye logo
link: https://www.brighteye.be/
image: ~/assets/images/portfolio/brighteye/brighteye.png
imageAlt: Интерфейс оператора производственной линии и приложения для MOM Momentum
thumbnail:
src: ~/assets/images/portfolio/cards/brighteye.svg
src2: ~/assets/images/portfolio/cards-l/brighteye_big.svg
alt: Собака Павлова • Brighteye • Интерфейс оператора производственной линии
isDark: true
doubleSize: true
tags:
- prom
- ux-design
- prof
- mob
tags2:
- Промышленность
- Сложные системы
- UI-кит
- Дизайн рабочего места
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: res
- collection: portfolio
page: remtech
- collection: portfolio
page: gazprom-neft
- collection: portfolio
page: veza
- collection: portfolio
page: pgk
- collection: portfolio
page: geonaft
- collection: portfolio
page: nlmk
- collection: portfolio
page: flarm
outcome:
title: Некоторые цифры
numbers:
- title: Спроектировали
number: '46 экранов'
text: интерфейса
- title: Нарисовали
number: '6 размеров'
text: экранов системы
- title: Предусмотрели
number: '2 темы'
text: темную и светлую
result:
- text: Наш дизайн внедрили и используют.
link: https://www.brighteye.be/articles/momentum-176-release-big-changes-momentum-supervisor-mqtt-client-and-more
budget: ~ 1 200 000 ₽
review:
text: |
Перед нами стояла очень сложная задача. Новый интерфейс оператора производственных линий, который нам предстояло разработать, должен был быть с одной стороны универсальным (т.к. каждое производство индивидуально), с другой стороны – простым в использовании. Помимо этого, мы перешли с привычной нам разработки десктопных приложений на разработку веб-приложений с использованием новых для нас технологий.
Несмотря на то, что в штате у нас уже был UX/UI дизайнер, мы поняли, что в одиночку он не справится с такой сложной задачей. Поэтому мы приняли решение обратится к специалистам по разработке сложных пользовательских интерфейсов – «Собаке Павлова». Наш штатный UX/UI дизайнер провел большую предварительную работу по анализу требований, составлению дорожной карты проекта, а также сделал предварительные наброски того, что мы хотели бы видеть в новом интерфейсе.
Работа как нами, так и «Собакой Павлова» была проделана очень большая. Дополнительной сложностью было то, что на многие вопросы, важные для построения интерфейса, невозможно было дать точный ответ. Доступ к конечным клиентам приложения у нас очень ограничен, да и требования часто бывают противоречивые. Многое приходилось делать настраиваемым или адаптирующимся под очень разные данные разных клиентов.
Несмотря на все эти сложности, мы все вместе справились с этой задачей, за что больше спасибо профессионалам из «Собаки». Они передали нам все материалы и UI-кит, мы продолжаем развивать проект своими силами. Но впереди еще много сложных и интересных задач, связанных как с этим модулем системы, так и с другими, и мы планируем и дальше сотрудничать с «Собакой», когда мы увидим что наших собственных сил недостаточно.
person: Денис Бредихин,
position: R&D Manager
director: Если у вас крупная система, обновляйте интерфейс маленькими порциями — не ошибетесь.
metadata:
canonical: https://sobakapav.ru/portfolio/brighteye
title: Интерфейс для планшета • Рабочее место оператора производственной линии
description: "Осовременили и упростили дизайн рабочего места оператора производства: адаптировали интерфейс для планшета, упростили настройку дашборда и подготовили UI-кит."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/brighteye/brighteye.png'
width: 1448
height: 1032
---
import TOC from '~/components/widgets/TOC.astro';
<TOC> [Заказчик](#anchor1) • [Ситуация](#anchor2) • [Задача](#anchor3) • [Погружение](#anchor4) • [Дизайн интерфейса](#anchor5) • [Тестирование](#anchor6) • [Финал](#anchor7) • [Отзыв, цены, сроки](#anchor8)</TOC>
## <a name="anchor1" />Заказчик
[Brighteye](https://www.brighteye.be/) — бельгийская компания, разработчик Momentum, облачной программной платформы для управления производственными операциями (MOM), которая обеспечивает возможности системы управления производством (MES) на уровне предприятия, управление складом (WMS), расширенное планирование производства (APS) и многое другое.
Momentum разработан на технологиях Microsoft Azure и работает только на Windows. Причем работает не первый год — компания основана еще в 2003 году. Клиенты компании — такие гиганты, как Unilever, Olam, КАМАЗ.
_Brighteye помог более сотне компаний по всему миру_
## <a name="anchor2" />Ситуация
Brighteye попал в ситуацию, в которой:
- часто обновлять софт нельзя — могут слететь производственные цепочки на миллионы долларов;
- интегрировать софт в производства, работающие вне экосистемы Microsoft, невозможно;
- интерфейс выглядит старомодным — это вроде не беда, но операторам в нем ориентироваться сложно, да и паттерны давно устарели.
_И вот вы уже поняли, почему заказчик решил переделать интерфейс_
## <a name="anchor3" />Задача
Для начала Brighteye решили сделать Momentum веб-приложением. Для оператора линии это изменение означает, что он наконец-то сможет встать из-за рабочего компьютера и пойти гулять по цеху с рабочим планшетом.
К нам заказчик пришел, чтобы переделать интерфейс оператора — человека, запускающего производственную линию и следящего за оборудованием. Например, за двенадцатью станками, которые целый день работают параллельно. Пока один что-то насыпает, другой перемешивает, третий запекает, четвертый нарезает и так далее.
_Как видите, интерфейс выглядит устаревшим_
Причины были не только эстетическими — интерфейс планшета сильно отличается от десктопного. Вместо основного двойного клика у него одинарный, контролы больше и рассчитаны под палец, есть свайп и мультитач — почти все паттерны другие.
_Слева — список оборудования, которое участвует в производстве. Мышкой на компьютере в него попасть легко, а вот пальцем на восьмидюймовом планшете — сложновато_
## <a name="anchor4" />Погружение
К нам заказчик пришел уже со своими наработками, аналитикой, документами с вариантами использования и видением, что должно получиться.
Еще он предоставил доступ к «тестовому заводу» — эмуляции производства соусов, которым можно управлять через интерфейс оператора: запускать линии, следить за процессами на дашборде и контролировать, чтобы в майонезе хватало растительного масла.
_Нам дали доступ администратора, поэтому слева вы можете увидеть, сколько возможностей предоставляет Momentum. Мы в этом длинном списке выбирали пункт Operator и работали только над этим разделом_
Перед этим специалист по тестированию и контролю качества Елизавета Вихрова и менеджер по исследованиям и разработкам Денис Бредихин из Brighteye подробно рассказали и показали, как вообще устроена работа оператора и в чем заключаются его трудовые обязанности. Это здорово нам помогло, потому что производственные процессы и так сложны, а в зависимости от отрасли еще и сильно различаются.
_Связи между цистернами с компонентами для соусов и другим оборудованием_
Подчеркнем отдельно: у нас не было задачи переделать логику рабочих процессов — интерфейс должен был работать как раньше. Поэтому после погружения мы сразу перешли к дизайну.
## <a name="anchor5" />Дизайн интерфейса
Мы поделили проект на несколько частей и начали со списка операций. Это основной интерфейс оператора, здесь он проводит большую часть времени.
В старом дизайне расписание процессов и дашборд делили одно пространство. Из-за этого графики не помещались в экран — приходилось скроллить. А еще это два разных фокуса внимания. Поэтому мы разделили расписание и дашборды на самостоятельные страницы.
_Дашборды находятся в соседней вкладке — на них можно перейти тремя способами: нажать на соседнюю вкладку, строку в списке или зеленую кнопку_
Добавили в расписание карточный вид — в нем помещается больше информации.
_Любой процесс можно развернуть, чтобы получить еще больше информации_
И расписание, и дашборд сделали в нескольких разрешениях — мы не знаем, какие планшеты закупит завод для операторов.
_Если графики не помещаются в один дашборд, можно добавить слева вертикальные вкладки_
Дашборд состоит из виджетов. Каждый завод может собирать из них страницу под себя, как удобнее.
_Вариант дашборда для больших экранов компьютеров и телевизоров_
После этого взялись за запуск процессов. В оригинальном дизайне, прежде чем оборудование запустится, система показывает оператору справку: смотри, сейчас мы будем делать вот это, а потом — вот это. Это страховка от человеческого фактора. Оператор должен подтвердить, что он все прочитал.
Мы предусмотрели место под текст — иногда одних изображений может быть недостаточно.
_Шагов может быть больше трех — мы оставили для них место_
Второй шаг в запуске оборудования — настройка этикетки.
_Настраивать текст на этикетке можно здесь же_
Третий шаг — проверка оборудования. В старом дизайне было гораздо больше параметров, но мы их спрятали, потому что в большинстве случаев оператор знает, как все настроено. Он запускает одни и те же процессы каждый день, это его линия, поэтому каждый раз проверять все числа не станет. А если захочет, нажмет кнопку «All Equipment Parameters».
_Оставили только самые важные параметры — остальные обычно постоянны, оператор их знает назубок_
Линия запускается только тогда, когда принимает конкретные параметры. Они обычно указаны по умолчанию, но их можно поменять.
А останавливается линия, когда принимает другие параметры. Правда, оператору все шаги проходить заново уже не нужно — достаточно нажать на «Break off». После получения параметров начинается само производство, за которым оператор следит на дашборде.
После этого сделали авторизацию. Она стандартная: достаточно ввести логин и пароль. А потом — выбрать рабочую зону и линию.
_Авторизоваться и выбрать производственную линию достаточно один раз — оператору не нужно проходить этот экран каждую смену_
После этого осталось сделать разные состояния виджетов, показать раскрытый виджет расписания и экраны в разных разрешениях — верстка-то будет адаптивной, поэтому веб-приложение должно хорошо выглядеть даже в браузере на компьютере.
_Часики тикают, а двадцать тонн карри еще не готовы_
Ливен Декорте, продуктовый менеджер и основатель Brighteye, попросил сделать темную тему. Некоторые производства работают по ночам, и от белого экрана у оператора могут болеть глаза.
_Иногда от светлого экрана могут болеть глаза — например, в темном помещении или когда за окном ночь_
## <a name="anchor6" />Тестирование
Закончили дизайн и пошли его тестировать. Проверяли работоспособность дизайна на разработчиках и одном интеграторе софта. Главной задачей было посмотреть, сможет ли знакомый со старым интерфейсом человек быстро разобраться в новом дизайне.
Составили сценарии и подготовили для себя таблицу с оценками, насколько успешно тестируемый справился с задачами. Мы, конечно, не озвучивали их напрямую — получились бы слишком наводящие вопросы, но старались ненавязчиво провести респондентов по всем функциям интерфейса: просили решить рабочую задачу и по ходу проверяли, справился ли пользователь с мелкими подзадачами.
_Протестировали, насколько удобно пользоваться новым интерфейсом_
Поняли, где узкие места, и быстро исправили их. Передали финальный дизайн заказчику.
## <a name="anchor7" />Финал
Brighteye начал внедрять дизайн, а мы перешли в режим поддержки.
В будущем компания продолжит редизайн своими силами. У Brighteye есть отличный штатный UX-дизайнер и крутые UX-аналитики, а к нам они обратились за свежим взглядом на UI и опытом разработки дизайна под Android. Теперь они есть, а собирать интерфейсы других частей системы они могут из компонентов UI-кита, который мы подготовили в конце проекта.
## <a name="anchor8" />