Редизайн панели управления фасовочным оборудованием

Клиент

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

Задачи

Редизайн интерфейса панели управления конвейеров для фасовки разной продукции;
Создание проморолика.

Аналитическая часть

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

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

На старте проекта провели детальный анализ текущего интерфейса, обозначили проблемы и варианты решения. Дополнительно проанализировали доступные аналоги — платформы Siemens HMI и Rovema HMI.

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

Презентация прошла отлично, заказчик остался доволен и одобрил первые варианты концепции. Мы продолжили работу.

Клиент подтвердил, что выбрали верное направление

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

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

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

Менеджер проекта об особенностях разработки для офлайна

При проектировании мы вдохновлялись гайдлайнами Siemens и их воркбуком Human Machine Interfaces. Клиент тестировал прототипы на производстве и возвращался к нам с корректировками, связанными именно с тем, что интерфейсом будут пользоваться конкретные люди на конвейере — операторы и механики-наладчики. Такие моменты сложно учесть и предсказать заранее.

Ограничения

После февраля 2022 года у клиента возникли проблемы с поставками, и нам пришлось адаптировать все экраны под другие разрешения. Основная работа по редизайну на тот момент уже была завершена. Мы сделали адаптивные варианты размещения элементов интерфейса на экранах меньшего размера с более низким разрешением.

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

Основные UX-проблемы старой версии интерфейса

В ходе детального исследования старой версии интерфейса выявили основные проблемы:

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

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

Разработка нового дизайна: как работали с главным экраном

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

Мокап главного экрана управления фасовочным станком

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

UI Kit

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

Библиотека компонентов для панелей управления оборудованием

Работа с промороликом

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

Наши ощущения от работы над офлайн-проектом

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

Ощущения от проектирования реального интерфейса

Сроки

Май 2021 — март 2022

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

Результат

Мы смогли предвосхитить ожидания заказчика. Разработанный нами интерфейс успешно применяется в производстве. Более того, на данный момент все оборудование распродано. Заказчик обещает позвать нас в гости, когда будет готова следующая партия, чтобы мы смогли увидеть результаты своего труда.

Со своей стороны можем описать проект тремя словами: «Полезно, жизненно, безбарьерно». Это был интересный опыт, и мы надеемся, что Сигнал-Пак в будущем еще вернуться к нам с новыми задачами.