ВведениеИсследование направлено на разработку математических моделей и автоматизацию ресурсоемких задач процессов тестирования и проектирования пользовательского интерфейса на этапе разработки программного обеспечения. Целью работы является создание автоматизированной системы проектирования и тестирования интерфейсов для повышения качества и скорости их разработки.С 2000-х годов произошел бурный рост приложений с графическим интерфейсом и каждый год наблюдается появление многих тысяч новых веб-приложений, мобильных и настольных приложений, которые становятся все более доступными для всех пользователей (детей, взрослых, пожилых людей) с помощью компьютеров, планшетов и смартфонов. Разработчикам приходится разрабатывать варианты одного приложения для нескольких устройств с различными форматами экрана или операционных систем, что приводит к огромным затратам на анализ, разработку и тестирование. В пользовательских интерфейсах приложений может возникнуть множество проблем, таких как несовместимость с различными разрешениями экранов, перегруженность элементами управления, неадекватная терминология, отсутствие единого стиля, ошибки в структуре интерфейса, ошибки классификации объектов и несоответствующие пиктограммы, что вызывает недовольство пользователей, замедляет скорость использования и увеличивает количество ошибок [1].Для решения этих проблем ИТ-компании включают экспертов в команду разработчиков, чтобы обнаружить и исправить недостатки пользовательского интерфейса в графических приложениях до их внедрения [1]. Также тестирование проводится с участием пользователей, чтобы убедиться, что приложения понятны и удобны потребителю. Однако оба эти метода требуют больших затрат времени и ресурсов для реализации. Использование существующих программных решений и методов не позволяет в полной мере сочетать автоматизацию проектирования интерфейсов с их качественным и быстрым тестированием [2]. Существующие решения ориентированы либо на проектирование, либо на тестирование и не позволяют автоматизировать всестороннюю экспертную оценку качества интерфейса [2, 3]. В работах [4-7] предлагаются методы экспертной оценки качества интерфейсов, которые требуют формализации для построения на их основе автоматизированной системы для создания и тестирования пользовательских интерфейсов.1. Анализ и формализация моделей оценки пользовательского интерфейсаПлан исследования включает следующие этапы: анализ предметной области и методов тестирования пользовательских интерфейсов; выбор критериев оценивания и построение математических моделей оценивания качества пользовательского интерфейса; разработка архитектуры и проектных моделей автоматизированной системы; программная реализация системы проектирования и тестирования интерфейсов; оценивание результатов работы созданной системы.1.1. Анализ текущего процесса проектирования и тестирования графического интерфейса пользователя.Схема бизнес-процесса проектирования и тестирования пользовательского интерфейса показана на рис. 1. Анализ процесса показал, что процесс является итерационным [1] и во время итераций выполняются практически одни и те же задачи. Существует три уровня итераций: итерация между проектированием основного экрана и тестированием на низком уровне; возврат с проектирования низкого уровня на высокий уровень; возврат с проектирования низкого уровня на этап постановки задачи.  Рис. 1. Схема процесса проектирования и тестирования графического интерфейса пользователяFig. 1. Diagram of the graphical user interface design and testing process Установлено, что задачи первого уровня итераций, включая анализ элементов интерфейса и результатов после тестирования юзабилити, являются наиболее трудоемкими повторяющимися задачами, поэтому их автоматизация позволит сократить время выполнения процесса проектирования и тестирования пользовательского интерфейса. 1.2. Формализация методов автоматической оценки пользовательского интерфейсаДля достижения поставленной цели необходимо: автоматизировать оценку элементов интерфейса (до юзабилити-тестирования) и нескольких критериев анализа (после юзабилити-тестирования).Автоматическая оценка интерфейса включает анализ гармонии цветов, видимости объектов, шрифтов, выравнивания, баланса, пространства между элементами, соблюдения пропорций и единства стиля [8]. Определим критерии оценивания пользовательского интерфейса, методики оценивания качества каждого критерия и весовые коэффициенты.Гармония цветовПредлагается цветовую гармонию оценивать от 0 до 12 баллов. Оценка гармонии цветов основывается на трех критериях: количество цветов; совместимость; использование. Каждому из них присвоим равные весовые коэффициенты – 4 балла.Количество цветов. По правилам дизайна количество цветов должно быть между 2-4 для хорошего восприятия пользователем [9]. В случае соблюдения правила получаем максимальную оценку 4. Формально данное правило выражается следующим образом:Sk(x)={4x+1,x>4;x2+1,3,x<2;4,x∈[2;4].          (1)  Где: x — количество цветов в интерфейсе;Sk — удовлетворение от количества цветов.Совместимость цветов. Два или четыре цвета совместимы тогда и только тогда, когда они формируют палитру в цветовом круге [8]. Кроме белого, серого и коричневого, каждый цвет представлен в цветовом круге значением. Необходимо проверить, формируют ли цвета интерфейса действительную палитру: комплементарную, сплит-комплементарную, тетрадичную, триадичную или аналоговую. Таким образом, совместимость выражается следующим образомSc(x)={4,x=1;0,x=0.               (2)Где:x — индикатор совместимости цветов (1 – совместимые цвета, 0 – несовместимые цвета);Sc — удовлетворение совместимостью цветов.Использование цвета. Использование цвета выражается в соответствии с правилом 60-30-10 [6], которое гласит, что: 60% – доминирующий цвет, 30% – вторичный цвет, а 10% – цвет акцента. Применим линейную зависимость для определения степени выполнения данного правила. Общая удовлетворенность использованием цветов является суммой удовлетворённостей количеством использования каждого из трех цветов. Si=Si1+Si2+Si3                        (3)Где:Si   — общая удовлетворенность использованием цветов.Si1 — удовлетворенность колоризацией основного цвета;Si2 — удовлетворенность колоризацией вторичного цвета;Si3 — удовлетворенность колоризацией цвета акцента.При точном выполнении правила для доминирующего цвета (60%) получим максимальное значение качества 1,34, в остальных случаях используем формулу:Si1(x)={1,34*100-s140,s1∈[60;100];1,34*s1-2040,s1∈(20;60].   (4)При точном выполнении правила для вторичного цвета (30%) получим максимальное значение качества 1,33, в остальных случаях используем формулу:Si2(x)={1,33*s230,s2∈[0;30];1,33*60-s230,s2∈(20;60]  (5)При точном выполнении правила для цвета акцента (10%) получим максимальное значение качества 1,33, в остальных случаях используем формулу:Si3(x)={1,33*s310,s3∈[0;10];1,33*20-s310,s3∈(10;20] (6)Где:s1 — процент использования первого доминирующего цвета;s2 — процент использования второго доминирующего цвета;s3 — процент использования остальных цветов.Таким образом, гармония цветов выражается следующей формулой:          S=Sk+Si+Sc                     (7)ВидимостьВидимость зависит от двух типов элементов: AAA для элементов, которые должны привлекать внимание пользователя, и AA для остальных элементов [8]. Видимость определяется контрастом между яркостью цвета элемента и яркостью цвета его контейнера. Контраст выражается по формуле:L = (L1 + 0,05) / (L2 + 0,05)          (8)Где:L1 — яркость цвета элемента [0; 100];L2 — яркость цвета контейнера [0; 100].В табл.1 приведены правила для определения видимости элемента по контрасту с его контейнером.  Критерий видимости оценивается до 20 баллов в соответствии с выражением:C=Nf-k-kcNf*20                 (9)Где:Nf — общее количество элементов в интерфейсе;k — количество элементов с низкой видимостью;kc — количество контейнеров без элементов AAA.ШрифтШрифты интерфейса должны соответствовать следующим правилам [10]:Максимальное количество шрифтов 2.Высота строки (межстрочный интервал): не менее чем в 1,5 раза больше размера шрифта.Расстояние между абзацами не менее чем в два раза превышает размер шрифта.Расстояние между буквами (трельяж) должно быть не менее 0,12 размера шрифта.Расстояние между словами должно быть не менее 0,16 размера шрифта.Оценка шрифта по этим правилам определяется следующим образом:  W=(8n℘+nWL-nWLXnWL+3nWA-nWAXnWA+nWB-nWBXnWB+2nM-nDLX-nMTnM)*20    (10)  Где:nWP — количество шрифтов в интерфейсе;nWL — количество строк;nWLX — количество строк с высотой менее 1,5 размера шрифта;nWA — количество абзацев;nWAX — количество абзацев с пробелами менее двух размеров шрифта;nWB — количество букв;nWBX — количество букв с пробелом менее 0,12 размера шрифта;nM — количество слов;nMT — количество слов с размером шрифта менее 10px;nDLX — количество слов с расстоянием от соседних менее 0,16 размера шрифта.Критерий качества шрифта оценивается из 20 баллов.                                                                                    Таблица 1.Правила видимостиTable 1.Visibility rulesТип элементаКатегория элемента (размер в пикселях)Пропорция контрастности (цвет элемента и цвет его контейнера)AAтекстразмер > 193:1размер < 194:5другие3:1AAAтекстразмер > 194:5размер < 197:1другие4:5 ВыравниваниеВыравнивание создает ощущение единства в графическом интерфейсе пользователя. Оно также позволяет размещать элементы иерархически. Оценка выравнивания основана на двух правилах [8]:считается, что каждый элемент расположен в контейнере на позиции x и y, при этом основным контейнером является экран; на каждом иерархическом уровне (внутри каждого контейнера) каждый элемент должен быть выровнен по вертикали, горизонтали или центру относительно своих соседей или своего контейнера.Таким образом, критерий выравнивания выражается следующим образом:E = 15*(nA/N)                   (11)Где:nA — количество элементов, не выровненных по вертикальной, горизонтальной или центральной оси;N — количество элементов на экране. Визуальный балансБаланс интерфейса зависит от визуального веса элементов в интерфейсе. Воспринимаемый вес элемента – это мера того, что позволяет отличить один элемент от других. Поэтому этот показатель важен, так как помогает  узнать, какие элементы могут быстро привлечь внимание пользователей в интерфейсе. Мера визуального веса зависит от трех характеристик [4]:цветовой контраст L элемента и его контейнера от 1 до 21;положение P элемента по отношению к ориентации считывания (P = 5, если элемент находится в зоне F или Z шаблона Гутенберга [12] и P = 2 в противном случае);площадь T элемента (здесь каждый элемент рассматривается как прямоугольник)T={10,H*W>999H*W*10-2,H*W≤999     (12)   где:H — длина элемента;W — ширина элемента. Вес определяется в соответствии со следующим выражением:  V = L+P+T                     (13) Критерий визуального баланса оценивается из 20 баллов по следующей формуле:VB=N-2VS-VGN*20  (14)где:N — количество элементов в интерфейсе;VS — общее количество элементов всех групп с V > 30 (подсчитывается количество групп включающих в себя более чем 3 элемента);VG — количество групп без элементов с V  > 30.ПространствоБелое пространство – это пустая область вокруг, внутри или между элементами интерфейса. Без создания достаточного пространства между элементами нельзя спроектировать качественный дизайн. Он усиливает фокус, понимание, баланс, различия, взаимосвязи, визуальную иерархию и ритм дизайна.Существует несколько способов оценки белого пространства, выбранный в данном случае – нелинейное программирование [5]. Приведенные ниже правила позволяют оценить белое пространство в интерфейсе:Для мобильных экранов отступ элемента контейнера должен составлять не менее 16 пикселей.Для планшетов и настольных компьютеров отступ элемента контейнера должен составлять не менее 24 пикселей.Минимальное расстояние между элементами должно составлять 8 пикселей.Другой подход, используемый дизайнерами, заключается в том, что размеры пространства определяются золотым сечением.Пространство оценивается из 20 баллов в соответствии с выражением:  HS = 20*(H/𝑁)                  (15)Где:H — количество элементов, которые не соблюдают не более одного правила пространства;N — количество элементов на экране. ПропорцииПропорции элементов определяют элегантность в дизайне. Наиболее популярным правилом, используемым в графических интерфейсах для определения пропорций элементов, является «золотое» сечение [6]. Оно определяет возможные диапазоны размеров элементов в зависимости от размера экрана. В данной статье размеры ограничены уровнем 10 от размера экрана. Оценка критерия пропорции оценивается из 14 по следующей формуле:𝑃𝑟 = 14*(N𝐸 − 𝑃𝑟𝑥 )/N𝐸     (16)где:NE — количество элементов и пространств;Prx — количество элементов и пространств, в которых золотое сечение не представлено.Единый стильЕдиный стиль – это критерий, который оценивает соблюдение единого стиля на всех экранах приложения. Таким образом, он зависит от трех других критериев, а именно гармонии цветов, шрифтов и пропорций. Единый стиль определяется по следующей формуле:  𝑆𝑡 = 14*(𝑃A/14 + 𝑆A/12 + 𝑊A/20)/3  (17)Где:PA — значение критерия пропорции на всех экранах;SA — значение критерия гармонии цвета на всех экранах;WA — значение критерия шрифта на всех экранах.ЮзабилитиКритерии анализа юзабилити интерфейса [11], предполагающие их автоматическое определение по результатам проведения юзабилити тестирования, выбраны следующие:минимальное время для выполнения задания и время между взаимодействиями;фокус пользователя;щелчки, пропущенные пользователем, и его путешествие по интерфейсу;коэффициент ошибок по типам пользователей в каждом интерфейсе;видеозапись с субтитрами по заданиям.После формализации правил дизайна и юзабилити переходим к проектированию автоматизированной системы.2. Проектирование веб-приложения 2.1. Архитектура программного обеспеченияАрхитектура веб-приложения показана на рис. 2. Для реализации была выбрана архитектура клиент-сервер и модель MVC. Серверная часть подразделяется на две части:- основные контроллеры, состоящие из маршрутов для выполнения процессов приложения;- аутентификация, авторизация и регистрация пользователя.Представления также были разделены на две части: модули пользователя, зарегистрированного в приложении; модули участников тестирования.Для сервера были использованы фреймворки Nestjs 8.4.7 (JavaScript) и Vert.x (Java) 4.2.1, а для части представления – VueJS 2 (JavaScript). Выбранная система управления базами данных – MongoDB версии 4.4. Рис. 2. Архитектура программного обеспеченияFig. 2. Software architecture  2.2. Функциональное моделированиеДиаграмма состоит из 14 вариантов использования и 3 акторов: дизайнера, эксперта и участника тестирования. Дизайнер занимается редактированием интерфейсов, эксперт – созданием, настройкой тестов и оценка интерфейса, а участник - заполнением анкеты и выполнением тестовых заданий.  Эксперт и дизайнер зарегистрированы в системе и имеют доступ по авторизации.2.3. Разработка веб-приложенияИнтерфейс оценивания качества элементов интерфейса представлен на рис. 4. В примере показана ошибка цветовой палитры в наборе интерфейсов, поэтому система предлагает палитры, сформированные на основе теории цвета.Интерфейс анализа результатов юзабилити-тестирования представлен на рис.5. Показан процент заданий, выполненных в интерфейсе участником тестирования. Разработанная система позволяет эксперту быстро оценить параметры интерфейса и предлагает рекомендации в случае низкого показателя или несоответствия эргономическим критериям. Для анализа результатов юзабилити-тестирования реализованы следующие функции: определение фокуса внимания пользователя, траектории движения указателя мыши, времени выполнения задачи, а также определение экранов, на которых пользователи сталкиваются с наибольшими трудностями. Рис. 3. Диаграмма вариантов использованияFig. 3. Diagram of use cases Рис. 4. Интерфейс оценивания элементовFig. 4. Element evaluation interfaceРис. 5. Интерфейс анализа результатов юзабилити-тестированияFig. 5. Interface for analyzing the results of usability testing ЗаключениеВ результате выполненной работы была разработана автоматизированная система для создания и тестирования прототипов пользовательских интерфейсов.По результатам анализа предметной области выявлена необходимость автоматизации процессов проектирования и тестирования пользовательских интерфейсов. Анализ аналогичных программных средств, используемых для автоматизированного проектирования и тестирования, выявил практическое отсутствие в них автоматизированной экспертной оценки качества интерфейса и узкую специализацию большинства из них только на проектирование или только на тестирование интерфейсов. По результатам анализа было сформулировано техническое задание.На основе правил дизайна и эстетики была создана методика оценки элементов интерфейса, состоящая из методов проверки гармонии цветов, видимости элементов интерфейса, баланса интерфейса, соответствия текстов, соблюдения пропорций, пробелов между элементами, выравнивания элементов и соблюдения уникального стиля в интерфейсе.На этапе проектирования автоматизированной системы была выбрана клиент-серверная архитектура. Были разработаны алгоритмы для проектирования и проверки качества пользовательского интерфейса. Программная реализация автоматизированной системы осуществлялась на языке Java для серверной части и на JavaScript для клиентской части. Были использованы несколько модулей исходного кода инструментов Quant-UX, в том числе модули для редактирования прототипов, интерфейсных элементов и видеозаписи.Разработанное веб-приложение способно: автоматизировать создание прототипов интерфейсов для всех типов экранов; планировать тесты и добавлять тестовые задания; проводить A/B-тестирование; определять фокус внимания пользователя на каждом интерфейсе; определять маршруты движения указателя мыши; определить среднее время выполнения заданий; записывать видео по шагам во время юзабилити-тестирования.