VS Control Mobile

Подробнее о процессе

Кто пользователь

Дежурный инженер телеканала. Он отвечает за оборудование нескольких студий и аппаратных и почти не сидит у монитора.

С телефона ему нужно сразу узнать о сбое, понять, что случилось, и отметить, что он этим занимается.

Свой канал оповещений

Заказчику было важно, чтобы оповещения приходили в собственное приложение продукта.

Приложение сделали как PWA. Это веб-приложение, которое устанавливают на главный экран телефона, публиковать его в App Store и Google Play не нужно.

Моя роль

Юзкейсы продакт описал к веб-интерфейсу. Мне нужно было решить проблему инженеров и адаптировать эти сценарии под телефон. Приложение и его логику я спроектировала сама. Лид-дизайнер смотрел макеты на финальном ревью.

Ключевые решения

Решение 1. Лента событий

События идут лентой, как уведомления: новые сверху. В строке уровень (Авария, Ошибка, Внимание, Норма), название события, устройство, контур и время.

Под каждым событием есть чип со статусом подтверждения: «Требует подтверждения», «Подтверждено» или «Подтверждение не требуется». Непросмотренные события выделены фоном, а их число видно на бейдже вкладки.

Искать можно по названию события и устройства. Фильтровать можно по контуру, периоду, уровню, подтверждению и типу события, есть сортировка и показ завершённых. Применённые фильтры видны чипами над списком.

Решение 2. Подтверждение с комментарием для коллег

Из пуша инженер попадает в карточку события. Там уровень события, сколько прошло времени, устройство, метрика с её значением и время начала. Ниже написано, что случилось и что проверить. Этот текст берётся из правила оповещения в драйвере устройства.

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

Решение 3. Профилактика с телефона

В карточку устройства инженер попадает из события или из вкладки «Устройства». Во вкладке есть сводка: сколько устройств в аварии, ошибке, внимании и на профилактике.

Профилактику запускают у самого оборудования, поэтому кнопка для неё есть в карточке устройства. Запустить можно сразу или по расписанию. К запуску можно оставить комментарий для коллег.

Пока идут работы, устройство стоит в статусе «Профилактика», и все видят, кто его обслуживает и с какого времени. Завершает профилактику инженер вручную. Если какая-то метрика ещё не в норме, приложение об этом предупреждает. Начало и конец профилактики записываются в журнал событий с именем инженера.

Решение 4. Аварии нельзя пропустить

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

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

Интерфейс как в вебе

Цвета статусов, шрифт, тёмная тема и названия взяты из дизайн-системы веб-версии, поэтому переучиваться инженерам не нужно. На её основе я собрала мобильный UI-кит, из него сделаны все экраны.

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

Зоны нажатия не меньше 44 px, текст не мельче 11 px, снизу учтена безопасная зона, контраст текста соответствует WCAG.

Для пустых экранов есть отдельные состояния. Без связи плашка под заголовком показывает, на какое время актуальны данные. Когда активных событий нет, приложение прямо пишет, что всё в норме. Если поиск ничего не нашёл, есть подсказка, по каким полям он ищет.

Результат

Приложение запущено, инженеры им пользуются.