Разработка высокотехнологичных человеко-машинных интерфейсов. Часть 2

Опубликовано в номере:
PDF версия
В статье рассматривается развитие методологии построения высокоэффективных человеко-машинных интерфейсов. Во второй части публикации акцент сделан на точности по сравнению с контекстом, доступности, визуальной иерархии, анимации и статической индикации, а также на сравнении 2D- и 3D-экранов.

Основная цель человеко-машинного интерфейса (англ. HMI — human-machine interface) заключается в том, чтобы дать возможность пользователям взаимодействовать с процессом, выдавать предупреждения оператору, когда что-то пошло не так в функционировании технологического и производственного оборудования. Кроме того, необходимо формировать уведомления оператору о том, что действительно важно и критично в данной ситуации, при этом не загружая его внимание ненужной в данный момент информацией. Именно на удобство и простоту использования человеко-машинного интерфейса было обращено особое внимание в первой части данной публикации «Разработка высокотехнологичных человеко-машинных интерфейсов. Часть 1» (СЕ № 5’2016).

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

Рис. 1. Пример использования цифрового представления, когда точность важнее контекста

Рис. 1. Пример использования цифрового представления, когда точность важнее контекста

 

 

Точность в зависимости от контекста

Переменные могут быть представлены как в аналоговом, так и в цифровом виде. Когда точность значения параметра важнее контекста, то предпочтительно цифровое представление. В качестве альтернативы, когда более важен контекст, чем точность, желательно его аналоговое представление (рис. 1).

 

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

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

Для того чтобы выразить количество при аналоговом представлении данных, рекомендуется использовать изменение длины графического объекта вместо изменения его площади (рис. 2). Это связано с тем, что наш мозг лучше оценивает именно изменение длины, а не площади графического представления параметра.

 

Доступность

Как правило, сигналы тревоги связаны с уровнем тяжести от возможных последствий: высокий (1), средний (2) или низкий (3).

Рис. 3. Аварийные сигналы, дифференцированные по уровню тяжести последствий: 1) высокий; 2) средний и 3) низкий

Рис. 3. Аварийные сигналы, дифференцированные по уровню тяжести последствий: 1) высокий; 2) средний и 3) низкий

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

По данным сайта Национальной медицинской библиотеки США Genetics Home Reference, 8% мужчин и 0,5% женщин североевропейского происхождения не в состоянии отличить красный цвет от зеленого. Другие цветовые комбинации тоже могут вызвать проблемы у определенной категории людей. Но в подобных случаях процент людей, имеющих такие дефекты восприятия цвета, значительно ниже. Из-за этой проблемы интерфейс должен предоставить людям с такими особенностями цветового восприятия необходимые средства для безопасной дифференциации текущего оперативного статуса технологического оборудования и производственного процесса. Эффективный способ проверить, является ли данный разработанный интерфейс доступным для восприятия, — проанализировать его экраны, объекты и индикаторы в режиме оттенков серого.

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

Рис. 4. Два варианта представления одного и того же экрана. Слева на каждом рисунке они показаны с использованием цвета, а справа — в оттенках серого

Рис. 4. Два варианта представления одного и того же экрана. Слева на каждом рисунке они показаны с использованием цвета, а справа — в оттенках серого

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

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

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

Кроме того, для общего фона экрана следует избегать использования чистого черного или белого цвета. В дополнение к более светлым и темным оттенкам промежуточный оттенок позволяет легко идентифицировать более двух объектов (рис. 5). Другой важный аспект — неиспользование цвета, что подчеркивает статус объектов. Если насос находится под напряжением и это его нормальное состояние, то нет никаких причин привлекать внимание оператора его представлением графическим объектом, выделенным насыщенным цветом, например красным или зеленым.

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

Рис. 6. Создание визуальной иерархии на интерфейсе с помощью относительного размера графического объекта

Рис. 6. Создание визуальной иерархии на интерфейсе с помощью относительного размера графического объекта

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

 

Визуальная иерархия

Цель визуальной иерархии заключается в том, чтобы показать актуальность процесса. То есть разделить более или менее важные для пользователей объекты или элементы с одинаковым по важности значением, однако так, чтобы указать на возможную связь между ними. Есть несколько способов создать визуальную иерархию на интерфейсе. Наиболее простой способ — разделение с помощью размера представления объекта (рис. 6). Объекты с одинаковым размером указывают на сходство в их иерархических позициях. В то же время более крупные объекты передают концепцию более высоких уровней в иерархии.

Сравнение статической и динамической индикации

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

Для отображения состояния процесса, в частности вращения турбины, предпочтительно воспользоваться статическим показателем, который соответствует назначению и области применения. В противном случае интерфейс может выглядеть как развлекательная система, а не система диспетчерского контроля и сбора данных (англ. SCADA — supervisory control and data acquisition). Анимация же может быть полезной для предупреждения оператора о сигналах тревоги, которые раньше не были подтверждены его ответным действием, — например, мигающий индикатор.

 

Использование визуальной перспективы по отношению к точности восприятия

Использование «плоской» поверхности для представления информации обеспечивает ее лучшее восприятие, чем визуальная перспектива. Хотя 3D-диаграмма несомненно привлекательнее, но 2D-графика передает индикативные величины, да и воспринимается она однозначно (рис. 7).

Рис. 7. Сравнение диаграмм в 3D- и 2D-графике

Рис. 7. Сравнение диаграмм в 3D- и 2D-графике

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

Вот почему рекомендуется сначала определить функцию конкретного экрана человеко-машинного интерфейса, а затем уже решить, какое представление для этой функции будет лучше. На самом деле 3D-экраны дают ограниченное пространственное восприятие. Это связано с тем, что 3D по своей сути является оптической иллюзией — кажется, будто изображение имеет глубину, хотя в действительности оно плоское (рис. 8). Кроме того, чрезмерно реалистичный рендеринг (визуализация предметов в машинной графике) требует для успешного представления слишком много цветов и декоративных вспомогательных деталей, что перегружает ненужной информацией когнитивную систему оператора.

Рис. 7. Сравнение диаграмм в 3D- и 2D-графике

Рис. 7. Сравнение диаграмм в 3D- и 2D-графике

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

С другой стороны, 3D-графика, безусловно, эстетически более привлекательна, поэтому она используется для демонстрационных экранов, где самым важным моментом является презентация. Кроме того, 3D может выступать как индикатор чего-то общего, а не конкретного. Она полезна, если желательно создать навигационный экран с более широкой точки зрения на предприятие или на некоторую очень большую площадь — например, представление в виде объемной карты.

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

  • Набор 2D-экранов для управления технологическими и производственными процессами.
  • Меньший набор 3D-экранов для презентативных целей с детальной визуализацией, но не несущих какой-либо оперативной функции.
  • Один или несколько 3D-экранов для просмотра. Они используются в том случае, когда операторы нуждаются в общем обзоре более широкой области. Это может быть представление общего пространства предприятия или карта.

Вариант совмещения 3D-графики с 2D-графическими объектами, представляющими оперативную информацию, демонстрирует фрагментированный сценарий (рис. 9). Здесь каждый рисунок на экране представляет собой элемент общего сценария. Его цвета мягкие и не конкурируют с оттенками всех других эксплуатационных объектов. Тем не менее они интегрированы с этими объектами и с общим представлением о ходе процесса. В данном случае, для того чтобы избежать визуальных искажений и упростить их представление, рисунки созданы с помощью аксонометрической проекции (без точки схождения) вместо проекции в одну точку (с точкой схождения).

Рис. 9. Вариант совмещения 3D-графики с графическими объектами, представляющими оперативную информацию, демонстрирует фрагментированный сценарий, при этом каждый рисунок на экране представляет собой элемент общего сценария. Рисунки созданы с использованием аксонометрической проекции (без точки схождения) вместо проекции в одну точку (с точкой схождения)

Рис. 9. Вариант совмещения 3D-графики с графическими объектами, представляющими оперативную информацию, демонстрирует фрагментированный сценарий, при этом каждый рисунок на экране представляет собой элемент общего сценария. Рисунки созданы с использованием аксонометрической проекции (без точки схождения) вместо проекции в одну точку (с точкой схождения)

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *