from 01.01.2005 until now
St. Petersburg, St. Petersburg, Russian Federation
St. Petersburg, St. Petersburg, Russian Federation
student from 01.01.2022 to 01.01.2025
St. Petersburg, St. Petersburg, Russian Federation
UDC 159.9
The paper presents the authors’ methodology for an experimental study of the influence of the graphic design of pictograms applied in user interface control elements on the speed of operator interaction with the system. The aim of the research is to identify the dependence of visual information readout speed on the shape of pictograms in a user interface. The objective of the work is to experimentally evaluate the effectiveness of various geometric shapes of pictograms using oculography methods. The experiment is conducted in the Human-Computer Interaction Laboratory of Peter the Great Saint Petersburg Polytechnic University using a specialized software and hardware eye-tracking complex applying statistical data analysis methods to process the research results. The experiment involved 37 subjects. The novelty of the work lies in systematizing factors influencing the perception of graphic elements and developing recommendations for optimizing an interface design. The results show that factors such as shape, background, colour, and menu composition affect the information readout speed. The obtained results are advisable to be used in developing effective user interfaces for ergatic systems.
user interface, control elements, pictograms, experimental study, eye-tracking technology, factor analysis, statistical processing
Введение
Технический прогресс компьютерных технологий обуславливает повышение степени автоматизации разрабатываемых средств и комплексов связи, что приводит к повышению сложности программных продуктов управления динамическими объектами. Ввиду ограниченных возможностей человека, актуализируется вопрос эргономичности человеко-машинных интерфейсов. Решение этого вопроса позволит увеличить эффективность всей эргатической системы [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. Fedorova 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. Kosnikov Yu.N. Building of the “Human-Computer” Interface for the System of Complex Objects Automatic Control. University Proceedings. Volga Region. Technical Sciences. 2014;4(32):82-92.
3. Sergeev S.F., Paderno P.I., Nazarenko N.A. Introduction to the Design of Intelligent Interfaces. Saint Petersburg: SPbSU ITMO; 2011. 108 p.
4. Popov A.A. Software Application for Analyzing User Perception of Visual Information in an Information System. Advances in Modern Science. 2016;10(2):63-68.
5. Siluyanov A.V., Ponomarenko I.N. Analysis of the Ergonomics of Control Interfaces for Intelligent Buildings. Electrotechnical and Information Complexes and Systems. 2012;8(3):3-8.
6. Zolotarev K.I., Borevich E.V., Nikitina T.A., et al. Investigation of the Influence of Graphical Interface Elements on the Reading of Visual Information. Psychology and Psychotechnics. 2025;1:199-214. DOIhttps://doi.org/10.7256/2454-0722.2025.1.73633.
7. Yuriev F.I. Harmony of Spheres. Vol. 2: Colour Imagery of Information. Kiev: Ekogintocs; 2007. 327 p.
8. Sergeev S.F. Methods for Testing and Optimizing Information Systems Interfaces. Saint Petersburg: ITMO; 2013. 117 p.
9. New Style. RED 250 / RED 500 Remote Eye Tracking System [Internet] [cited 2022 Dec 21]. Available from: https://newstyle-y.ru/high-school/group_2164/group_2166/item_11065.
10. Scheffé H. The Analysis of Variance. Moscow: Nauka; 1980. 512 p.
11. Stukach O.V. Statistica Software Package for Solving Quality Management Problems. Tomsk: Publishing House of Tomsk Polytechnic University; 2011. 163 p.
