CC BY
16УДК 004.055
АЛГОРИТМ ОЦЕНКИ ГАРМОНИЧНОСТИ ЦВЕТОВОЙ СХЕМЫ ГРАФИЧЕСКИХ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ ИНФОРМАЦИОННОГО ОБЕСПЕЧЕНИЯ ДЕЯТЕЛЬНОСТИ ПОДРАЗДЕЛЕНИЙ МЧС РОССИИ
С.Н. Терёхин, доктор технических наук, профессор; Д.Ю. Минкин, доктор технических наук, профессор; А.В. Вострых.
Санкт-Петербургский университет ГПС МЧС России
Существующие методы оценки графических пользовательских интерфейсов носят по большей части субъективный характер, основанный на мнениях экспертов или проводимых тестирований, что не позволяет на научном уровне предоставить обоснованные результаты о степени качества интерфейсов. В статье разработан алгоритм оценки цветовой схемы интерфейсов, с помощью которого представляется возможным проведение оценки на предмет эстетичности и гармоничности цветовых решений интерфейсов специализированных информационных систем, обеспечивающих деятельность подразделений МЧС России.
Ключевые слова: графический пользовательский интерфейс, эффект стереохроматизма, информационная система, программный продукт, цветовая схема
ALGORITHM FOR ASSESSING THE HARMONY OF THE COLOR SCHEME OF GRAPHICAL USER INTERFACES FOR INFORMATION SUPPORT OF THE ACTIVITIES OF EMERCOM OF RUSSIA
S.N. Terekhin; D.Yu. Minkin; A.V. Vostrykh.
Saint-Petersburg university of State fire service of EMERCOM of Russia
The existing methods of evaluating graphical user interfaces are mostly subjective, based on the opinions of experts or conducted tests, which does not allow us to provide scientifically sound results about the degree of quality of the interfaces. In this article, an algorithm for evaluating the color scheme of interfaces is developed, with the help of which it is possible to evaluate the aesthetics and harmony of the color solutions of the interfaces of specialized information systems that support the activities of the departments of the Ministry of Emergency situations of Russia.
Keywords: graphical user interface, stereochromatic effect, information system, software product, color scheme
Сегодня развитие цифровых технологий достигло небывалого роста [1-4]. С каждым днём число новинок информационных систем (ИС) постоянно растёт, стремясь удовлетворить всевозможные информационные потребности пользователей различных целевых аудиторий. С этими изменениями, стремясь идти в ногу со временем, ИС постоянно усложняются как во «внутренней» части реализации программного кода, так и в визуальной составляющей [1]. Визуальная часть ИС представляется пользователям в виде графических пользовательских интерфейсов (ГПИ), основной задачей которых является обеспечение
66
качественной понятийной связи между когнитивной моделью целевой аудитории и моделью реализации программного кода [2-4]. Другими словами, ГПИ должен способствовать минимизации усилий пользователей по взаимодействию с программным продуктом (ПП) без необходимости углубленного изучения внутренних механизмов и процессов исполнения программного кода. Качественный ГПИ призван повысить эффективность работы пользователей по таким параметрам, как скорость работы в программной среде, скорость и лёгкость обучения, субъективная удовлетворённость от использования ПП и степень сохранения навыков оперирования, а также снизить количество возможных ошибок как со стороны пользователя, так и с программны [1, 5].
Данные показатели особенно важны в работе сотрудников МЧС России. Находясь на подотчетной территории в условиях постоянного напряжения и высокой ответственности за жизнь и здоровье населения операторы ИС испытывают высокие, а подчас и экстремальные нагрузки. Повышение эффективности ИС, используемых в работе сотрудниками, позволит снизит степень нагрузки и исключить возможность появления ошибок в работе операторов системы МЧС России.
Многочисленные исследования и личный опыт авторов статьи показали, что в настоящее время большинство ГПИ информационных систем, в том числе и специализированного профиля, обладают низкой эффективностью, одной из причин которой является отсутствие возможности проводить формализованную оценку интерфейсов [1-8]. Существующие методики по большей части носят субъективный характер, основанный на мнениях отдельных экспертов или проводимых тестирований на потенциальных пользователях [1-4, 6]. Данные подходы не дают однозначных решений и не способны на научном уровне предоставить обоснованные результаты о степени качества ГПИ. Также данные подходы не позволяют сравнивать ГПИ схожих по функционалу ИС между собой, что не даёт возможности рационального выбора наиболее подходящей системы. Таким образом, разработка формализованного алгоритма оценки эффективности ГПИ является актуальной задачей, требующей формализованного решения.
Так как интерфейсы в силу своей сущности «посредника» между пользователем и ИС являются многогранными и сложносоставными элементами ПП, методика оценки ГПИ также будет состоять из нескольких направлений, охватывающих в сумме все аспекты. Из проведённых многочисленных исследований были сделаны выводы о том, что большая часть информации о внешнем мире к человеку поступает через визуальный канал восприятия [5], тем самым одним из направлений оценки ГПИ должна стать оценка визуальной составляющей интерфейсов.
В настоящей статье разработан алгоритм оценки гармоничности цветовой схемы ГПИ, с помощью которого представляется возможным оценить интерфейсы как на предмет эстетичности, так и сравнить гармоничность цветовых решений ГПИ разных ПП.
В основе алгоритма лежат формулы и константы, полученные опытным путём в дисциплинах эргономики и инженерной психологии [5, 9]:
- область ясного видения пользователей, составляющая 240рх на 180рх. В пределах данной прямоугольной области большинство пользователей четко различают объекты с минимальными затратами оперативной памяти и безошибочно идентифицируют элементы ГПИ;
- общее количество цветов в интерфейсе не должно превышать четырех-пяти. Превышение данного параметра приводит к возрастанию когнитивной и визуальной нагрузок, что ведёт к увеличению числа ошибок в работе пользователей;
- соответствие цвета с ассоциацией функциональности;
- статистические данные гендерных предпочтений цветов;
- элементы интерфейса, а также сама структура ГПИ должна располагаться равномерно по рабочему пространству в определённых пропорциях. Например, использование правила «Золотого сечения», отношения большего по размерам элемента интерфейса к меньшему равняется 1,62.
67
Также необходимо учитывать наличие в ГПИ «эффекта стереохроматизма», способствующего возрастанию когнитивной и визуальной нагрузки, вследствие использования сочетаний сильно контрастирующих цветов в интерфейсах, которые негативно влияют на восприятие информации человеком.
Анализ цветовой схемы ГПИ предлагается осуществлять с помощью цветовой модели HSB [10] (от англ. hue-saturation-brightness) тон, насыщенность, яркость. Причиной выбора для анализа ГПИ именно цветовой модели HSB из не менее популярных, таких как RGB и CMYK, стали следующие преимущества [10]:
- HSB является расширенной версией RGB;
- HSB ближе к человеческому восприятию цвета, чем RGB и CMYK, которые определяют цвет как комбинацию основных цветов (красного, зелёного и синего или жёлтого, пурпурного, бирюзового и чёрного), в то время как компоненты цвета в HSB отображают информацию о цвете в более привычной человеку форме;
- аппаратная независимость. Задание значений цветового тона, насыщенности и яркости позволяют однозначно определить цвет без необходимости учета параметров устройства вывода;
- более простой и интуитивно понятный механизм управления цветом. Цветовой тон, насыщенность и яркость представляют собой независимые характеристики цвета. Например, чистый красный цвет расположен на цветовом круге под углом 0°. Если необходимо получить оранжевый цвет, то следует увеличить угол, определяющий цветовой тон. Для получения более тусклого оттенка необходимо снизить насыщенность, а для придания большей яркости соответственно увеличить значение яркости. Получение таких эффектов с помощью RGB-модели практически невозможно, поскольку значения ее цветовых компонентов очень сильно зависят друг от друга.
Рассмотрим механизм получения цветов в модели HSB.
Тон (от англ. hue) в цветовой модели определяется в градусах от 0 до 360 (рис. 1).
Рис. 1. Определение тона в цветовой модели HSB
68
Опорными точками в модели являются красный - 0°, зелёный - 120°, синий -240° цвета. В цветовом круге они равноудалены.
Насыщенность (от англ. saturation) в цветовой модели HSB представляется числовым диапазоном от 0 и 100 %, где 0 % - это светло-серый оттенок цвета, 100 % - предел красочности выбранного тона (рис. 2).
S: 100% 5:75% S: 50% S: 25% S: 0%
S: 100% S: 75% S: 50% S: 25% S: 0%
Рис. 2. Насыщенность в цветовой модели HSB
Яркость (от англ. brightness), как и насыщенность в модели представляется процентным соотношением от 0 до 100 %. При яркости 0 % - любой тон становится чёрным, вне зависимости от насыщенности, при яркости 100 % - тон становится белым только при условии, что насыщенность также равна 0 %. В противном случае, 100 % яркость - это очень яркий цвет (рис. 3).
Рис. 3. Яркость в цветовой модели HSB
Перед описанием алгоритма необходимо отметить некоторые данные, полученные экспериментальным путём, используемые для более точной оценки и результатов. К таким данным относятся гендерное предпочтение цветов и соответствие цвета элемента с его ассоциацией функциональности (табл.).
Анализ цветовой информации ГПИ и соотношение её с данными статистических показателей целевой аудитории пользователей (модель пользователя) позволит не ошибиться
69
при выборе доминирующего цвета, акцентного цвета и цветовой схемы, повысив тем самым субъективную удовлетворённость, которая непосредственно влияет на такие характеристики, как скорость работы и количество ошибок, а также внутреннее психологическое равновесие и удовлетворённость трудом.
Таблица. Гендерное предпочтение цветов и соответствие цвета элемента с его ассоциацией
функциональности
Предпочтение Предпочтение Возможность Ассоциации
Цвет мужского пола женского пола использования
+ % - % + % - % в ГПИ с функциональностью
Красный 7 % 2 % 9 % 1 % 0,13 Опасность, ошибка
Оранжевый 5 % 22 % 4 % 33 % -0,46 Призыв к действию
Желтый 1 % 13 % 3 % 13 % -0,22 Предупреждение
Зелёный 13 % 3 % 14 % 4 % 0,2 Безопасность
Синий 50 % 1 % 35 % 1 % 0,83 Обязательные условия
Фиолетовый 1 % 22 % 23 % 5 % -0,03 Нейтральное событие
Чёрный 15 % 1 % 6 % 1 % 0,19 Нейтральное событие
Коричневый 2 % 27 % 3 % 20 % -0,42 Нейтральное событие
Серый 3 % 4 % 1% 17 % -0,17 Нейтральное событие
Белый 2 % 4 % 1 % 3 % -0,04 Нейтральное событие
Также необходимо учитывать ассоциативное восприятие цвета. Цвет должен соответствовать принятым в целевой аудитории стереотипам. Так, например, красный означает сигнал опасности, синий и его тёмные оттенки подходят для реализации фона и рабочей области ГПИ. Желтый цвет используется в предупреждающих знаках, так как цвет стимулирует возбуждение центральной части мозга и повышает эмоциональность. Зеленый подходит для оформления, он ассоциируется с природой и окружающей средой, рекомендуется его использовать, чтобы вызвать у пользователей ассоциацию с чистотой и легкостью. Самыми распространенными цветами для призыва к действию являются: красный, зеленый, оранжевый, желтый. Более темные цвета, как черный, коричневый или фиолетовый имеют низкие показатели активности взаимодействия с пользователями.
При выборе цветовой схемы и акцентных цветов необходимо помнить о психологии цвета, которая тесно связана с памятью и опытом. Таким образом, выбор цветовой схемы ГПИ должен основываться на общепринятых функциональных предназначениях цветов, а не из субъективных соображений красоты и эстетики.
Немаловажным является вопрос соблюдения пропорций в ГПИ, от которых напрямую зависит визуальная привлекательность интерфейса. Использование принципа «Золотого сечения» или числового значения 1,62. Суть этого числа в том, что весь отрезок относится к большей его части так, как большая часть относится к меньшей. Например, общая ширина окна информационной системы 900 рх, делим это значение на 1,62, получаем 555 рх -ширину рабочей области.
Перед расположением элементов интерфейса их необходимо сгруппировать по значимости и функциональному назначению, определив более и менее важные. Отступы между элементами интерфейса должны быть равны или кратны друг другу.
Теперь перейдём к пошаговому рассмотрению разработанного алгоритма:
Шаг 1. Поиск и инициализация оттенков по всей области анализируемого интерфейса.
Шаг 2. Вычисление площади каждого найденного оттенка Бп.
Шаг 3. Вычисление коэффициента гармоничности оттенка:
70
где Sn - площадь, занимаемая оттенком в интерфейсе; Ws t, - коэффициента гармоничности.
Шаг 4. Вычисление гармоничности цветовой схемы по всей площади ГПИ:
J = Hs,wl + Hs,w2 + ■ • ■ + Hs,Wn = (s1 * Ws t, bl) + (s2 * Ws t, b2)+.. + (Sn * Ws t, bn) .
Данное выражение может быть использовано при промежуточной оценке или при сравнении интерфейсов ИС между собой. Чем больше полученное значение, тем удачнее выбрана цветовая схема у анализируемого ГПИ.
Шаг 5. Анализ ГПИ на предмет «эффекта стереохроматизма». Все полученные оттенки аккумулируются в 10 основных «цветов»: жёлтый, оранжевый, красный, фиолетовый, синий, голубой, зелёный, пурпурный, белый и чёрный.
Шаг 6. Вычисление общего количества цветов ГПИ и сравнение этой величины с оптимальной:
if qc< 5| fcc = 1 if 5 < qc < 8 | kc = 0 . 7 5 , if 8 < qc| kc = 0.5
где qc - общее количество цветов в ГПИ; kc - коэффициент оптимальности цветовой нагрузки.
Шаг 7. Сегментация всей области интерфейса на прямоугольники размером ясного видения пользователей.
Шаг 8. Анализ каждого из полученных сегментов на наличие «эффекта стереохроматизма». Данный шаг состоит из нескольких подшагов:
8.1. Определение объектов ГПИ и их цветов внутри анализируемого сегмента;
8.2. Определение площади объектов и их положения относительно друг друга;
8.3. Анализ на присутствие «эффекта стереохроматизма» и подсчёт коэффициента cn. При определении вложенности объектов происходят вычисления, коэффициента с:
if(s0as0 G cs{c})a (s0 < sf) л (3% < s0 < 90% G sf) => 0.45 < cn < 0,95 if(s0as0 G cs{c})a (s0 < sf) л (90% < s0 < 99% G sf) => cn = 1 if(s0as0 e cs{c})a (s0 < sf) л (1% < s0 < 3% e sf) => cn = i
Шаг 9. Вычисление общего значения воздействия «эффекта стереохроматизма» С по всей области ГПИ:
С = cl * c2 * ... * cn .
Чем ближе значение C к единице, тем значение «эффекта стереохроматизма» ниже, и тем самым ГПИ более приятен для восприятия пользователем.
Шаг 10. Вычисление общей оценки гармоничности цветовой схемы ГПИ:
Mall = J*C .
Чем ближе полученный результат общей гармоничности к единице, тем лучше подобрана цветовая схема ГПИ.
Шаг 11. Оценка интерфейса на соблюдение пропорций по правилу «Золотого сечения». Вычисление и сравнение площадей основных и дочерних элементов.
Шаг 12. Проверка отношения большего по размерам элемента интерфейса к меньшему на соответствие значению 1,62.
Шаг 13. Сравнение всех полученных ранее значений с характеристиками моделей пользователей.
71
Таким образом, разработанный алгоритм позволяет проводить оценку интерфейсов как общераспространённых ИС, так и специализированных, например, ИС, спроектированных под нужды МЧС России, на степень гармоничности цветовой схемы и её соответствие характеристикам, целям и мотивам пользователей целевой аудитории.
Полученные в результате вычислений численные оценки и параметрические карты в виде матриц позволяют сравнивать интерфейсы различных ИС между собой на эффективность и привлекательность цветовой схемы.
Также полученные промежуточные значения вычислений могут быть использованы для выявления проблематичных участков интерфейсов по отдельным направлениям:
- наличию «эффекта стереохроматизма»;
- степень гармоничности цветовой схемы;
- гармоничность пропорций интерфейса;
- степень соответствия цветовых решений общепринятым ассоциациям. Реализация данного алгоритма в программном приложении позволит проводить
автоматизированную оценку ГПИ и сократить время и когнитивные ресурсы специалистов на проведение вычислений.
Литература
1. Головач В.В. Дизайн пользовательского интерфейса. Usethics, 2005-2008. 97 c.
2. Купер А., Рейман Р., Кронин Д. Основы проектирования взаимодействия. СПб.: Символ, 2010. 688 с.
3. Купер А. Психбольница в руках пациентов или почему высокие технологии сводят нас с ума и как восстановить душевное равновесие: пер. с англ. СПб.: Символ-Плюс, 2004. 336 c.
4. Джеф Р. Интерфейс Новые направления в проектировании компьютерных систем. СПб.-М.: Символ, 2007. 257 с.
5. Уэйншенк С. 100 главных принципов дизайна. Как удержать внимание. СПб.: «Питер», 2011. 272 с.
6. Вострых А.В. Сравнительный анализ методов оценки человеко-машинных интерфейсов // Актуальные проблемы инфо-телекоммуникаций в науке и образовании. 2019. С.179-184.
7. Ахунова Д.Г., Вострых А.В. Преимущества перехода на целеоринтированное проектирование интерфейсов для мобильных пользователей информационных систем // Р0СИНФ0К0М-2019. С. 5-9.
8. Буйневич М.В., Максимов А.В., Вострых А.В. Анализ результатов аудита сетевых информационных ресурсов МЧС России // Науч.-аналит. журн. «Вестник С.-Петерб. ун-та ГПС МЧС России». 2020. № 1. С. 101-110.
9. Алефиренко В.М., Шамгин Ю.В. Инженерная психология. Практикум. Минск, 2005. 37 с.
10. Иофис Е.А. Синтез цвета // Фотокинотехника: Энциклопедия. М.: Советская энциклопедия, 1981. 447 с.
References
1. Golovach V.V. Dizajn pol'zovatel'skogo interfejsa. Usethics, 2005-2008. 97 c.
2. Kuper A., Rejman R., Kronin D. Osnovy proektirovaniya vzaimodejstviya. SPb.: Simvol,
2010. 688 c.
3. Kuper A. Psihbol'nica v rukah pacientov ili pochemu vysokie tekhnologii svodyat nas s uma i kak vosstanovit' dushevnoe ravnovesie: per. s angl. SPb.: Simvol-Plyus, 2004. 336 c.
4. Dzhef R. Interfejs Novye napravleniya v proektirovanii komp'yuternyh sistem. SPb.-M.: Simvol, 2007. 257 s.
5. Uejnshenk S. 100 glavnyh principov dizajna. Kak uderzhat' vnimanie. SPb.: «Piter»,
2011. 272 c.
72
6. Vostryh A.V. Sravnitel'nyj analiz metodov ocenki cheloveko-mashinnyh interfejsov // Aktual'nye problemy info-telekommunikacij v nauke i obrazovanii. 2019. S. 179-184.
7. Ahunova D.G., Vostryh A.V. Preimushchestva perekhoda na celeorintirovannoe proektirovanie interfejsov dlya mobil'nyh pol'zovatelej informacionnyh sistem // ROSINFOKOM-2019. S. 5-9.
8. Bujnevich M.V., Maksimov A.V., Vostryh A.V. Analiz rezul'tatov audita setevyh informacionnyh resursov MCHS Rossii // Nauch.-analit. zhurn. «Vestnik S.-Peterb. un-ta GPS MCHS Rossii». 2020. № 1. S. 101-110.
9. Alefirenko V.M., Shamgin Yu.V. Inzhenernaya psihologiya. Praktikum. Minsk, 2005.
37 c.
10. Iofis E.A. Sintez cveta // Fotokinotekhnika: Enciklopediya. M.: Sovetskaya enciklopediya, 1981. 447 s.
73
