с 01.01.2005 по настоящее время
Санкт-Петербург, г. Санкт-Петербург и Ленинградская область, Россия
Санкт-Петербург, г. Санкт-Петербург и Ленинградская область, Россия
студент с 01.01.2022 по 01.01.2025
Санкт-Петербург, г. Санкт-Петербург и Ленинградская область, Россия
УДК 159.9 Психология
В работе представлена авторская методика проведения экспериментального исследования влияния графического исполнения пиктограмм, используемых в управляющих элементах пользовательского интерфейса, на скорость взаимодействия оператора с системой. Цель исследования – выявить зависимость скорости считывания зрительной информации от формы пиктограмм в пользовательском интерфейсе. Задача работы заключалась в экспериментальной оценке эффективности различных геометрических форм пиктограмм с использованием методов окулографии. Эксперимент проводился в лаборатории человеко-компьютерного взаимодействия Санкт-Петербургского политехнического университета с применением специализированного программно-аппаратного комплекса айтрекинга. Для обработки результатов исследования применялись методы статистического анализа данных. В эксперименте приняли участие 37 испытуемых. Новизна работы состоит в систематизации факторов, влияющих на восприятие графических элементов, и разработке рекомендаций по оптимизации дизайна интерфейсов. Результаты показали, что факторы формы, подложки, цвета, композиции меню влияют на скорость считывания информации. Полученные результаты целесообразно использовать при разработке эффективных пользовательских интерфейсов эргатических систем.
пользовательский интерфейс, управляющие элементы, пиктограммы, экспериментальное исследование, технология айтрекинга, факторный анализ, статистическая обработка
Введение
Технический прогресс компьютерных технологий обуславливает повышение степени автоматизации разрабатываемых средств и комплексов связи, что приводит к повышению сложности программных продуктов управления динамическими объектами. Ввиду ограниченных возможностей человека, актуализируется вопрос эргономичности человеко-машинных интерфейсов. Решение этого вопроса позволит увеличить эффективность всей эргатической системы [1]. Другой аспект пользовательских интерфейсов сложных объектов управления большое количество контролируемых параметров. При управлении такими объектами возрастает значение человеческого фактора, который во многих случаях становится причиной аварийных ситуаций [2].
Исследования эргономичности пользовательского интерфейса сложных систем ведутся в двух направлениях: использование искусственного интеллекта в работе оператора и анализ разрабатываемых интерфейсов с применением средств юзабилити тестирования. Одним из способов повышения эффективности пользовательских интерфейсов является учет особенностей восприятия визуальной информации потенциальными пользователями [3] или настройка уже эксплуатируемой информационной системы под особенности восприятия зрительной информации сотрудников конкретного предприятия с применением специализированных программных приложений [4].
Пользовательский интерфейс большинства систем управления состоит из двух составляющих: зона визуального отображения управляемого объекта и зона управляющих элементов [5]. В графическом интерфейсе управляющие элементы представляются в виде кнопок с обозначением их функционала. Часто, для обозначения функционала управляющего элемента используются пиктограммы. Проведенные экспериментальные исследования с применением технологии айтрекинга в лаборатории человеко-компьютерного взаимодействия Санкт-Петербургского политехнического университета Петра Великого выявили статистически значимое ускорение поиска управляющего элемента с пиктограммой в сравнении с текстовым обозначением [6].
Актуальность представленной работы обусловлена возрастающими требованиями к юзабилити интерфейсов. Несмотря на распространенность используемых в обозначении управляющих кнопок графических элементов, их форма часто выбирается интуитивно, без учета психофизиологических особенностей восприятия. В данной работе исследуется влияние графического оформления управляющих элементов пользовательского интерфейса на скорость их поиска и интерпретации оператором.
Материалы, модели, эксперименты и методы
В представленной работе авторы исследуют влияние графического изображения пиктограмм, которые используются в управляющих элементах пользовательского интерфейса на скорость решения задачи эксперимента испытуемым.
Графическое изображение пиктограмм авторы определяют, как фактор стилизации, который определяет сложность прорисовки графического элемента. Исходя из графического построения пиктограммы пердлагается разделить на простые и сложные.
Простые пиктограммы. Они обычно имеют минималистичный дизайн, состоящий из базовых форм и ограниченного цветового набора, как правило монохромного. Простые пиктограммы легки для восприятия и понимания, что делает их идеальными для использования в пользовательских интерфейсах, позволяют быстро передать смысл и функциональность, минимизируя визуальный шум.
Сложные пиктограммы. Сложные пиктограммы представляют собой более детализированные и многослойные изображения, которые могут включать дополнительные элементы, текстуры и цвета. Они могут содержать больше информации и передавать более разнообразные концепции или эмоциональные состояния. Однако сложные пиктограммы могут быть более трудными для восприятия и требовать больше времени для осмысления, что может сказаться на скорость взаимодействия с интерфейсом.
Выбор между простыми и сложными пиктограммами в интерфейсе зависит от поставленных задач при разработке дизайна, целевой аудитории и контекста использования. Простые пиктограммы лучше подходят для быстрого восприятия, в то время как сложные могут добавить глубину и индивидуальность, но требуют внимательного подхода к ясности и распознаваемости. Правильное сочетание этих двух подходов может улучшить восприятие зрительной информации в интерфейсе и повысить эффективность взаимодействия. Однако, конкретных исследований по изучению скорости считывания пиктограмм в зависимости от их визуального исполнения и визуального окружения не проводилось. Именно этот вопрос и поднимается в данной работе.
Чтобы упростить определение сложности прорисовки пиктограмм, в работе было принято решение конкретизировать описание графического решения пиктограмм. Простые пиктограммы – графическое решение состоит из одного элемента, сложные пиктограммы – графическое решение состоит из двух элементов. Вторым критерием графического решения было определено: контурное исполнение или заливка контура. Для сложных пиктограмм вариант с заливкой не рассматривался.
Исходя из вышеперечисленного, для проведения эксперимента были определены следующие факторы исследования:
- фактор стилизации пиктограмм (графического решения);
- фактор наличие/отсутствие подложки;
- фактор цвет активного элемента;
- фактор композиции меню (горизонтальное или вертикальное).
Фактор стилизации принимает значения: пиктограмма заливка, пиктограмма контур, пиктограмма, состоящая из двух элементов (рис.1).
Рис. 1. Фактор стилизации пиктограмм
Fig. 1. Styling of icons
Фактор подложки принимает значения: пиктограмма без подложки фоне (рис.2), пиктограмма на подложке (рис.3).
Фактор композиции меню принимает значения: горизонтальное меню (рис.2), вертикальное меню (рис.3).
Рис. 2. Стимул с пиктограммами без подложки, меню горизонтальное
Fig. 2. Stimulus with pictograms without background, horizontal menu
Рис. 3. Стимул с пиктограммами на подложке, меню вертикальное
Fig. 3. Stimulus with icons on the background, vertical menu
Фактор цвета был выбран согласно цветовой модели восприятия зрительной информации человеком [7]. Фактор цвета активного элемента принимает значения: красный (RGB=FF0000), зеленый (RGB=6EFF51), синий (RGB=6397FF) и желтый (RGB=FFE45B) (рис.4).
Рис. 4. Стимулы с различным значением цвета активного элемента
Fig. 4. Stimuli with different active element color values
Всего было разработано 48 стимулов с различной комбинацией факторов эксперимента.
Для получения достоверных результатов тестирования необходимо четко структурировать задачу эксперимента [8]. Соответственно, при проведении эксперимента была разработана зрительная задача для испытуемых, которую им нужно было решить при наблюдении стимульного материала. Задача ставилась следующая: найти в стимуле выделенный цветом активный блок, определить в нем пиктограмму, найти соответствующую пиктограмму в панели меню управления, нажать на нее мышкой.
Эксперимент проводился в лаборатории человеко-компьютерного взаимодействия Санкт-Петербургского политехнического университета Петра Великого с применением специализированного программно-аппаратного комплекса айтрекинга SMI RED 250 [9].
Результаты эксперимента
В эксперименте участвовали 37 испытуемых из числа студентов Санкт-Петербургского политехнического университета Петра Великого. Всего было собрано 15059 фиксаций и 14833 саккад.
Статистическая обработка полученных параметрических данных шаблона рассматривания производилась посредством многофакторного дисперсионного анализа ANOVA [10] в автоматизированном программном комплексе «Статистика» [11]. Уровень критерия значимости p-value был принят равным 0.05.
Параметрические данные шаблона рассматривания стимульного материала, которые анализировались методами статистического анализа: время рассматривания стимула, количество фиксаций при рассматривании стимула, время фиксаций при рассматривании стимула, количество саккад при рассматривании стимула, время саккад при рассматривании стимула, путь взора при рассматривании стимула.
Результаты статистической обработки представлены на нижерасположенных графиках.
Значения переменных:
- фактор стилизации пиктограмм (Style): «S» - контур, «F» - заливка, «M» - двухэлементная;
- фактор подложки (Substr): «N» - нет подложки, «W» - есть подложка;
- фактор композиции меню (Com): «V» - вертикальное меню, «H» - горизонтальное меню.
Результаты статистической обработки параметрических данных шаблона рассматривания стимульного материала: времени решения зрительной задачи эксперимента в зависимости от факторов композиции меню, стилизации пиктограмм и наличия подложки представлены в таблице 1 и на рисунке 5.
Таблица 1
Результат вычислений процедуры дисперсионного анализа ANOVA для времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов стиля пиктограмм (Style), подложки (Substr), композиции меню (Com)
Table 1
The result of calculations of the ANOVA variance analysis procedure for the time of solving the experimental problem when observing a stimulus (in milliseconds), depending on the factors of the icon style (Style), substrate (Substr), menu composition (Com)
|
фактор |
p-value |
F значение |
|
Com |
≤0,001 |
11,95 |
|
Substr |
0,92 |
0,01 |
|
Style |
0,034 |
3,38 |
Рис. 5. График зависимости значений времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов стиля пиктограмм (Style), подложки (Substr), композиции меню (Com)
Fig. 5. The graph shows the results of the study of reaction time (in milliseconds) in the perception of icons depending on: icon style (Style), background (Substr), menu composition (Com)
На правом графике (рис.5), где отражены данные для пиктограмм, решенных в заливке контура, мы можем наблюдать похожую картину, но при отсутствии подложки.
В целом, следует отметить, что в вертикальном меню скорость решения задачи выше для всех стилей пиктограмм (рис.6)
По результатам статистического анализа было выявлено статистически значимое влияние фактора композиции меню и стилизации пиктограмм (табл.1). Фактор наличия подложки прямого статистического влияния на параметры шаблона рассматривания стимульного материала по результатам вычислений на имеет. Однако, если внимательно проанализировать график распределения значений времени рассматривания стимула эксперимента в зависимости от факторов композиции меню, стилизации пиктограмм и наличия подложки (рис.5), можно обратить внимание на некоторое совокупное влияние подложки на скорость решения задачи эксперимента. На левом графике (рис.5) при использовании в стимулах контурных пиктограмм (S) и наличие подложки можно наблюдать значительное различие во времени решения задачи при различном меню. Т.е. при вертикальном меню скорость решения задачи больше, чем при вертикальном (рис.5).
Рис. 6. График зависимости значений времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов стиля пиктограмм (Style) и композиции меню (Com)
Fig. 6. Graph of the dependence of the values of the time to solve the experimental task when observing the stimulus (in milliseconds) depending on the factors of the icon style (Style) and the menu composition (Com)
Результаты статистического анализа зависимости времени наблюдения стимула в зависимости от факторов активного цвета, композиции меню и стилизации пиктограмм представлены в таблице 2 и на рисунке 7. Все перечисленные факторы имеют статистически значимое влияние на параметры шаблона рассматривания стимулов испытуемыми (табл.2).
Таблица 2
Результат вычислений процедуры дисперсионного анализа ANOVA для времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов стиля пиктограмм (Style), цвета активного элемента (Color), композиции меню (Com)
Table 2
The result of calculations of the ANOVA variance analysis procedure for the time of solving the experimental problem when observing a stimulus (in milliseconds), depending on the factors of the icon style, the color of the active element, and the composition of the menu
|
фактор |
p-value |
F значение |
|
Color |
0,0153 |
3,48 |
|
Com |
≤0,001 |
12,5 |
|
Style |
0,0294 |
3,53 |
Влияние фактора цвета имеет сложный характер, согласно графика на рисунке 7. Для более точного анализа был выведен график зависимости времени рассматривания стимула в зависимости от факторов активного цвета, композиции меню и наличия подложки, которые представлены в таблице 3 и на рисунке 8.
Таблица 3
Результат вычислений процедуры дисперсионного анализа ANOVA для времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов цвета активного элемента (Color), подложки (Substr) и композиции меню (Com)
Table 3
The result of calculations of the ANOVA variance analysis procedure for the time of solving the experimental problem when observing a stimulus (in milliseconds), depending on the factors of the color of the active element (Color), substrate (Substr) and menu composition (Com)
|
фактор |
p-value |
F значение |
|
Color |
0,016 |
3,43 |
|
Com |
≤0,001 |
12,31 |
|
Substr |
0,92 |
0,01 |
Рис. 7. График зависимости значений времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов стиля пиктограмм (Style), цвета активного элемента (Color), композиции меню (Com)
Fig. 7. Graph of the distribution of time values (in milliseconds) of looking at a stimulus depending on the factors Color, Style (icon style) and Composition (menu orientation)
Рис. 8. График распределения значений времени решения задачи эксперимента при наблюдении стимула (в миллисекундах) в зависимости от факторов цвета активного элемента (Color), подложки (Substr) и композиции меню (Com)
Fig. 8. Graph of the distribution of time values (in milliseconds) of looking at a stimulus depending on the factors Color, Substrate and Composition (menu orientation)
Анализ графика на рисунке 8 позволяет сделать интересные наблюдения:
- график справа на рисунке 8 говорит о том, что при наличии подложки решение зрительной задачи испытуемыми происходит более ровно;
- при отсутствии подложки мы видим сильное влияние фактора композиции меню (рис.8, левый график).
Причем, есть явно выраженный факт: в случае горизонтального меню испытуемые быстрее решают задачу в красно-зеленном активном цвете, в случае вертикального меню – в сине-желтом цвете.
Выводы
Разработанная в работе методика проведения экспериментальных исследований влияния графического решения пиктограмм на скорость поиска элементов меню показала свою состоятельность. Подобные исследования являются важным фактором проектирования эффективного пользовательского интерфейса эргатических систем.
Основные результаты, которые можно рекомендовать к практическому применению сводятся к тому, что при использовании контурных пиктограмм следует использовать подложку, а при использовании пиктограмм с заливкой от подложки можно отказаться. Использование многоэлементных пиктограмм будет приводит к увеличению скорости интерпретации элементов графического интерфейса пользователем.
В заключении следует отметить, что к разработке пиктограмм используемых в пользовательском интерфейсе нужно подходить очень ответственно, уделяя особое внимание их графическому исполнению.
1. Fedorovа S.V. Detection of a multi-criteria indicator of the quality of the graphical interface of the software and hardware communication complex. H&ES Research. 2021;13(3):20–27. DOIhttps://doi.org/10.36724/2409-5419-2021-13-3-20-27.
2. Косников Ю.Н. Построение интерфейса человек–компьютер для системы автоматизированного управления сложными объектами // Известия высших учебных заведений. Поволжский регион. Технические науки. 2014. № 4 (32). С. 82–92.
3. Сергеев С.Ф., Падерно П.И., Назаренко Н.А. Введение в проектирование интеллектуальных интерфейсов: учеб. пособие. СПб.: СПбГУ ИТМО, 2011. 108 с. EDN ZUXZXD.
4. Попов А.А. Программное приложение для анализа восприятия визуальной информации пользователем информационной системы // Успехи современной науки. 2016. № 10. Т. 2. С. 63–68. EDN UUHMKN.
5. Силуянов А.В., Пономаренко И.Н. Анализ эргономичности интерфейсов управления интеллектуальными зданиями // Электротехнические и информационные комплексы и системы. 2012. Т. 8. № 3. С. 3-8. EDN PBMFQZ.
6. Золотарев К.И., Боревич Е.В., Никитина Т.А., Янчус В.Э. Исследование влияния элементов графического интерфейса на считывание зрительной информации // Психология и Психотехника. 2025. № 1. С. 199-214. DOIhttps://doi.org/10.7256/2454-0722.2025.1.73633. EDN YTZFPR.
7. Юрьев Ф.И. Гармония сфер: в 2 т. Т. 2: Цветовая образность информации. Киев: ЭКОГИНТОКС, 2007. 327 с.
8. Сергеев С.Ф. Методы тестирования и оптимизации интерфейсов информационных систем: учебное пособие. Санкт-Петербург: НИУ ИТМО, 2013. 117 с. ISBN 978-5-8465-1495-9.
9. Новый стиль. Система удаленного трекинга глаз RED 250 / RED 500. URL: https://newstyle-y.ru/high-school/group_2164/group_2166/item_11065/ (дата обращения 21.12.22).
10. Шеффе Г. Дисперсионный анализ. / Г. Шеффе: пер. с англ. Москва: Наука, 1980. 512 с.
11. Стукач О.В. Программный комплекс Statistica в решении задач управления качеством: учебное пособие. Томск: Изд-во Томского политехнического университета, 2011. 163 с.
