Автоматизированное проектирование пользовательских интерфейсов Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.514

С. В. Шибанов, А. А. Пашкин

АВТОМАТИЗИРОВАННОЕ ПРОЕКТИРОВАНИЕ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ

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

Ключевые слова: пользовательский интерфейс, автоматизированное проектирование, конструктор, генератор кода, анализ качества, эффективность, производительность, СОМБ.

Введение

Трудно переоценить роль пользовательских интерфейсов (ПИ) в современных приложениях. Интерфейс оказывает значительное влияние на скорость и качество выполнения работы пользователем. Чем он проще, понятнее, доступнее и удобнее, тем качественнее будет выполнена работа.

Качество пользовательского интерфейса можно отнести к отдельным свойствам программного обеспечения. Если интерфейс не будет удовлетворять требованиям стандартов и руководящих документов по проектированию, то пользоваться им будет как минимум непросто. Стандартизация интерфейсов появилась неслучайно. Если бы каждый разработчик создавал интерфейс по-своему, не соблюдая требований стандартов и общепризнанных норм проектирования, это привело бы к тому, что пользователь при знакомстве с очередным интерфейсом мог испытывать определенные трудности. Представьте, например, что разработчик поменял местами главное меню, располагаемое вверху главного окна, и статусную строку, располагаемую внизу. Какова была бы реакция пользователя? Как правило, человеческое восприятие работает по принципу «слева-направо» и «сверху-вниз», но никак не наоборот.

В современных реалиях разработка программных продуктов набирает колоссальные обороты, а ее скорость и качество при этом должны постоянно возрастать. Кроме того, разработка качественного пользовательского интерфейса требует много времени, которого, как правило, нет у заказчика. Также немаловажным фактором является конкурентоспособность продукта, чему способствует наличие качественного, интуитивно понятного интерфейса. Таким образом, актуальность быстрой разработки качественного интерфейса очевидна.

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

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

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

Обзор современных средств автоматизации разработки пользовательского интерфейса

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

Современные конструкторы пользовательских интерфейсов можно разделить на две категории: конструкторы, встраиваемые в интегрированные среды разработки (Integrated Development Environment, IDE), и автономные конструкторы. К первой группе можно отнести такие IDE со встроенными конструкторами интерфейсов, как Visual Studio, Delphi, Qt Creator, NetBeans. Данные среды разработки предлагают разработчику конструировать их в том же месте, в котором происходит непосредственное кодирование программного обеспечения. Разработчик, как правило, проектирует отдельные оконные формы, переходы по которым осуществляются во время кодирования. Одним из недостатков описанных выше систем является их избыточная сложность и невозможность воспользоваться конструктором без запуска среды разработки. Также эти решения значительно дороже автономных конструкторов.

Автономные конструкторы пользовательских интерфейсов - например, Glade -представляют собой отдельные программы, позволяющие производить визуальное проектирование интерфейса, в результате чего получается сгенерированный код, который впоследствии компилируется в исполняемый файл вместе с остальным исходным кодом. Плюсы данных решений в том, что они являются легковесными, относительно дешевыми и простыми в управлении при достаточно высоком уровне качества разработанных интерфейсов.

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

- добавление, удаление, размещение компонентов на экране;

- редактирование свойств компонентов;

- генерация исходного кода инициализации компонентов.

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

Вышеперечисленные функции реализуются следующими компонентами конструктора:

- палитра компонентов, позволяющая произвести выбор типа компонента и его создание;

- редактор свойств, предоставляющий средства для гибкой настройки внешнего вида и поведения компонента;

- генератор исходного кода, являющийся унифицированным средством для создания кода инициализации компонента из его настроек.

Конструктор Windows Forms из IDE Visual Studio (рис. l) является типичным представителем инструментальных средств, относящихся к первой группе, и обеспечивает быструю разработку интерфейса при создании приложений для OC Windows. Он позволяет наглядно разрабатывать формы на стороне клиента. Компоненты интерфейса можно перетащить на поверхность конструктора из палитры компонентов. Невизуальные компоненты, добавляемые в конструктор Windows Forms, размещаются в области компонентов под рабочим пространством, поэтому к ним легко получить доступ, не загромождая рабочее пространство [3].

Рис. 1. Конструктор Windows Forms от Microsoft

Интегрированная среда разработки NetBeans (рис. 2) позволяет быстро и легко разрабатывать настольные, мобильные и веб-приложения Java, а также приложения HTML5 с использованием технологий HTML, JavaScript и CSS. IDE также предоставляет многофункциональные наборы средств для разработчиков PHP и C/C++. Это бесплатное программное обеспечение с открытым исходным кодом, которое имеет большое сообщество пользователей и разработчиков по всему миру. C помощью редакторов и функций перетаскивания в среде IDE можно быстро и эффективно разрабатывать графические интерфейсы для приложений Java SE, HTML5, Java EE, PHP, C/C++ и Java ME. NetBeans GUI Builder автоматически обрабатывает правильные интервалы между строками и выравнивание для приложений Java SE, поддерживая редактирование внутри строки [2].

Glade - конструктор пользовательского интерфейса для работы в среде GNOME, который позволяет отделить внешнее представление программы от ее логики работы (рис. 3). Glade - свободно распространяемое приложение для визуального создания графических интерфейсов на основе кроссплатформенной библиотеки GTK+. А вот Glade# -это набор связей с libglade на языке C#, т.е. библиотека в составе пакета C# для создания пользовательского интерфейса.

Anagrams.java »1 ЕЗЭ© Palette я В

Sour« [ Design ] History | ЦЛХПЬЫ • t £ Swing Containers л

'0 Use the Palette window to add a component to the designer. Q Panel Tabbed Pane

Split Pane

File Ipfj Scroll Pane

Tool Bar

Scrambled Word:

Jri Desktop Pane PI Internal Frame . * i Layered Pane

Your Guess:

E Swing Controls

utei Label

Iokj Button -

(on) Toggle Button

B- Check Box

Radio Button

Button Group

[ Suess I New Word I dd Combo Box

El L*t

Рис. 2. Конструктор GUI Builder от NetBeans

~ О Q 'Нкохрапгиныи L

Фалл Мрвик« U*ii Прооиы Сидевла

■ Jeiciem

l* r»l t*

ГГПЭ Я1ГГ

ЕГЕО

» ^IICIM«|M

CI z) IB Zi L) Ы1 e*

E П П - : « в

<i 9 Э .ft

» Vnpoa.nCt 1*0 И QTCCf»-, .

¡г е д. ц й. 2 1

К к , С Щ L_ \f " 'J l_t l_t

«Е0Е и - В F I •> «

► j^TJit uwvea

► Tejgoewc tywf*-

т Различим.- пилжгпл

□ !t С P □ n □

П_

► Cnei*UMDHpONItti<

* ъ'прл1дчп1ниг GTX -

Л -_J

t 0*

Ksajpimce

i »

ф-Кнопка пмЬора гяовстпа йл^лгигл.гтап ii7.rjct*rrof>i Основное VtiiKMM Обшк Сигмами ^

№WM№ ГруПЛв: Актами й:

Нгчуиствмт^льммй: Рисовать индикатор:

Ргпмяние границы Зшатимть фежус по щелчку: Горкзс«та»1ьл<№ пиржниапниг дне

меменюа:

й м pwi И Л1И И Г /|ПС

нцнциик Алсмсн I эк:

Г

нет

Да

Нсригльиый т

|я.» 1:J

0,50

Рис. 3. Конструктор Glade

До создания Glade разработка пользовательского интерфейса была крайне неудобным и длительным занятием. Весь интерфейс описывался непосредственно на языке C++ и до компиляции и запуска программы нельзя было посмотреть, как этот интерфейс выглядит на экране. Glade позволил перенести разработку интерфейса на более качественный, визуальный уровень [1].

Существующие на данный момент конструкторы пользовательских интерфейсов, при всех своих достоинствах, имеют ряд ограничений:

- отсутствует возможность проектирования визуальной составляющей проекта целиком, переходы между окнами разработчик кодирует вручную;

- отсутствует возможность выполнения автоматизированного тестирования и оценки качества разработанного пользовательского интерфейса, в результате чего требуется дополнительное время на тестирование и отладку.

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

Прототип инструментальнъ/х средств автоматизированного проектирования пользовательских интерфейсов

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

На рис. 4 представлен графический интерфейс спроектированного автоматизированного конструктора пользовательского интерфейса. Главное окно состоит из шести областей (перечислены слева-направо, сверху-вниз):

- палитра компонентов;

- область проектирования интерфейса;

- панель гибкой настройки свойств компонентов;

- иерархия созданных компонентов;

- область сгенерированного кода;

- область текстовой подсказки.

Рис. 4. Элементы графического интерфейса конструктора ОшБоБе81§пег

Данный интерфейс является масштабируемым и позволяет пользователю в зависимости от его потребностей изменять положение и размер основных элементов интерфейса.

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

Промежуточный XML-файл с графом компонентов необходим для последующей генерации файлов исходных кодов, которые будут включены в исполняемый файл. Планируется реализация генератора кода на двух языках программирования C и C#. Для реализации автоматизированного средства проектирования и генератора кода выбран язык программирования C# как один из самых гибких и быстроразвивающихся языков программирования платформы .NET, которая обеспечивает требуемую безопасность, высокую скорость выполнения и наличие необходимых библиотек классов. Граф компонентов строится с использованием средства получения метаданных об объектах и классах -отражения (Reflection).

Chi Idrens Properties И Childrens Properties И Childrens Properties

Childrens Properties ^^И Childrens Properties

Рис. 5. Дерево компонентов, построенных в GuiDoDesigner

При генерации кода важнейшее значение имеет порядок инициализации компонентов и их свойств, поэтому для корректного упорядочивания используется алгоритм сортировки с учетом иерархий. Данный алгоритм может быть также применен при сортировке зависимостей в файле решений *^1п. В основе алгоритма лежит понятие поколений компонентов. Упрощенно алгоритм можно описать как циклический выбор элементов одного поколения и поиск их детей. Алгоритм повторяется до тех пор, пока есть хотя бы один неучтенный компонент.

Для анализа интерфейсов должны быть выработаны критерии оценки и соответствующие им количественные шкалы, опирающиеся, в первую очередь, на общепризнанные стандарты в области проектирования. Существует множество методов количественного анализа пользовательских интерфейсов. Условно их можно разделить на следующие группы [4, 5]:

1. Аналитические методы, позволяющие смоделировать и провести анализ выполнения той или иной задачи оператором и на основании полученных данных произвести оценку качества ПИ.

2. Экспериментальные, направленные на получение качественных и количественных оценок при выполнении профессиональных задач оператором с помощью ПИ. Мо-

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

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

4. Экспертные, позволяющие при исследовании ПИ экспертами выявлять достоинства и недостатки, которые в дальнейшем необходимо устранить.

В данном случае рассматриваются аналитические методы: GOMS, KLM, а также методика оценки сложности системы Тима Комбера и Джона Мэлтби. GOMS - это семейство методов, позволяющих оценить время выполнения задачи как основной критерий качества. KLM является одной из разновидностей метода GOMS, в которой используются только операторы. Методика оценки сложности системы Тима Комбера и Джона Мэлтби базируется на типах элементов интерфейса и их характеристиках.

Библиографический список

1. Работаем с Mono: Разработка пользовательского интерфейса с использованием Glade#. - URL: https://www.ibm.com/developerworks/ru/library/l-Mono_4/ (дата обращения: 12.05.2016).

2. Гул, С. Введение в разработку графического интерфейса / С. Гул, Т. Павек. - URL: https://netbeans.org/kb/docs/java/gui-functionality_ru.html (дата обращения: 12.05.2016).

3. Конструктор Windows Forms. - URL: https://msdn.microsoft.com/ru-ru/library/e06hs424(v = vs.100).aspx (дата обращения: 12.05.2016).

4. Методы оценки качества биомедицинских систем и технологий / К. В. Зайченко, А. И. Краснова, Н. А. Назаренко, П. И. Падерно, Г. Н. Пахарьков. - СПб. : Изд-во СПбГУАП, 2011. - 150 с.

5. Купер, А. Алан Купер об интерфейсе. Основы проектирования взаимодействия / А. Купер, Р. Рейман, Д. Кронин. - СПб. : Символ-Плюс, 2009. - 688 с.

Шибанов Сергей Владимирович

кандидат технических наук, доцент, кафедра математического обеспечения и применения ЭВМ,

Пензенский государственный университет E-mail: serega@pnzgu.ru

Пашкин Алексей Александрович

магистрант,

Пензенский государственный университет E-mail: nymphetmn@gmail.com

УДК 004.514 Шибанов, С. В.

Автоматизированное проектирование пользовательских интерфейсов / С. В. Шибанов, А. А. Пашкин // Вестник Пензенского государственного университета. - 2016. - № 4 (16). - C. 67-73.

Shibanov Sergey Vladimirovich

candidate of technical sciences, associate professor, sub-department of mathematical software and use of computers, Penza State University

Pashkin Aleksey Aleksandrovich

master degree student, Penza State University