Полезная визуализация данных в интерфейсе биореактора


Графики, диаграммы, картограммы и другие способы наглядно показать цифры встречаются в интерфейсах очень часто. Обычно они круто выглядят и радуют пользователей: красота линий и магия цифр создаёт иллюзию научной точности и придаёт «особую осмысленность» всем действиям на этом экране.

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

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

Тэги:
• дизайн интерфейса
• визуализация данных
• SCADA
• искрографики

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

Контекст

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

Эти биореакторы управляются единой SCADA системой, разработанной и поддерживаемой внутри компании. Своё маленькое открытие я сделал работая над проектом редизайна этий системы.

Биореакторы применяются для лабораторного и промышленного выращивания лечебных препаратов путем микробиологического синтеза.

Интерфейс системы работает с биореакторами разного объема — от 0.5 до 50 литров.

Было

Исходный интерфейс был выполнен в традиционной для SCADA-систем стилистике «инженерно-пиксельного киберпанка». Он служил верой и правдой не один год, но устарел и накопил проблемы,  которые решались при редизайне.

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

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

bioReactor-quiet-focus

Модуль отображения состояния биореактора

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

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

Немаловажно, что действия для нормализации состояния предпринимаются в других «блоках» интерфейса (например включается насос в зоне управления насосами, регулируется температура или в зоне MFC корректируется подача азота, кислорода и тд).

Задача модуля отображения состояния – проинформировать оператора о текущем состоянии биореактора.

Условия и ограничения

В зависимости от объема и назначения, в биореакторы встроено от 4 до 6 датчиков — температура, кислотность, кислород, углекислый газ и тд (всего не более десяти).

Так выглядели наборы датчиков в исходном интерфейсе. Слева — биореактор объемом 0.5л, справа — 500 литров.

Так выглядели наборы датчиков в исходном интерфейсе.
Слева — биореактор объемом 0.5л, справа — 50 литров.

Особенности

 Некоторые из датчиков дублируются, на случай, если основной выходит из строя. Такие датчики в названии имеют индекс (например «dO2—2»)

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

 Некоторые важные показатели приходят вычисляются по показаниям нескольких датчиков

 Иногда важно показать просто состояние индикатора вспомогательных аппаратов — например, включена ли лауда (штука, которая «подогревает» реактор)

 Интерфейс использует английский язык (биореакторы функционируют не только в России)

Биореакторы управляются с рабочих станций, оснащённых 24-дюймовыми мониторами в разрешении FullHD (1920×1080 точек) при помощи мыши. 

Сценарий использования  

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

1. Наблюдение. Иначе говоря, оператор смотрит на показания датчиков

В исходном интерфейсе в аварийных ситуациях подложка заливалась цветом в зависимости от уровня угрозы. Доводим эту функцию до ума: маркируем индикаторы цветом согласно шкале «всё хорошо / требуется внимание / аварийная ситуация»

← Берем на вооружение цветовое кодирование для индикации состояния.

2. Анализ. Оператор сравнивает текущие показания с прописанными в регламенте.

Здесь оператору важно ответить на вопросы: а) Текущее значение в пределах нормы? б) Значение увеличивается или уменьшается? в) Какова динамика изменения? Как это изменение влияет на процесс?

В этот момент появляется понимание, что для принятия взвешенного решения недостаточно знать только текущее показание датчиков. Оператору надо дать больше информации:

→ показать изменения параметра во времени (за последний релевантный период).
→ показать не только значения нормы, но и допустимых по регламенту отклонений рядом или вместе с текущим значением.

Для синтеза разных препаратов разработаны разные регламенты.

Может среда уже перегрета настолько, что культура погибла и надо начинать процесс заново? Клетки задыхаются и надо срочно повысить уровень кислорода?

← Идея-гипотеза: 

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

Это поможет оператору принимать решения без лишней беготни по «истории» показаний. Экономим внимание, время и клики.

3. Действие. При отклонениях показаний — корректировка состояния среды биореактора.

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

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

Гипотеза: «Оператор сможет принимать решение более взвешенно, если компактно показать динамику параметра, рамки нормы и допустимых отклонений.» 

Визуализация данных

Для начала попробуем найти интерфейсное решение гипотезы. Забегая вперёд, скажу что сработала цепочка ГрафикИскрографикГибридный искрографик. Вот как это получилось:

График

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

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

evolution re1

Отображение нормы (SetPoint, SP), предельных (Hi/Lo) и критических (HiHi/LoLo) значений делают график тяжёлым для восприятия 

Искрографик

Графики выглядят сложнее чем надо и создают перегрузку. → Думаю, как их упростить, сделать лёгкими, инлайновыми

Решение приходит в форме искрографиков — лаконичных графиков, изобретённых Эдвардом Тафти, которые показывают только самую суть изменений. 

text to sparkline

Канонический искрографик прекрасно показывает динамику во времени, но нам важны ещё две важных характеристики — предельно-допустимые значения и индикация выхода показаний за эти границы. 

Гибридный искрографик

Уложняем обратно (sic!): добавляем предельные значения и окрашиваем линию градиентом с подсветкой предельных значений. Также отметки шкалу времени. Получается вот такой гибрид:

evolution re2

Отрабатываем остальные элементы интерфейса и можно будет собирать весь модуль.

Гибриды могут быть опасны (мы могли потерять и краткость искрографика и подробности графика). Проверяем ещё раз критическим взглядом и собираем модуль из 4-6 датчиков.

! В группах такие гибриды работают неплохо → Берем их в работу.

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

evolution re5

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

Модуль отображения состояния биореактора в сборе

bioreactor-screen-t

Модуль отображения состояния биореактора набирается, как слоёный торт, из слоёв датчиков и индикаторов статуса. 

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

Цветовое кодирование помогает не пропустить момент, когда необходимо вмешаться и откорректировать значения.

Такое решение в интерфейсе экономит клики, время и внимание пользователя. 

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

Индикация цветом предостерегает от ошибок, помогая оператору с одного взгляда оценить состояние:

Цветовая индикация 

1) Белый — показания датчика в норме
2) Оранжевый — требуется внимание оператора
3) Красный — аварийная ситуация, требуется незамедлительное вмешательство оператора

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

alarm-states-bars

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

***

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

footnote