Graphic user interface prototyping as an integral part of software development

Abstract

The paper describes approaches to the GUI prototype creating

Full Text

В разработке программного обеспечения (ПО) одной из самых важных частей производственного процесса является проектирование. Само проектирование ПО как процесс создания проекта программного обеспечения можно разбить (очень условно) на 2 большие части: проектирование функционала и проектирование интерфейса. Для проектирования функционала используются такие средства, как UML и IDEF0, которые уже стали промышленными стандартами при разработке ПО. В проектировании графического интерфейса пользователя нет устоявшихся стандартов, есть отдельные рекомендации, приемы, законы дизайна, традиции, условия эксплуатирования ПО и т.д. При этом важной, но не всегда правильно выполняемой, частью этого процесса является прототипирование, или макетирование, т.е. создание макета или прототипа будущей системы. Макеты могут быть разными: бумажными, презентационными, имитационными и т.д., вплоть до точного соответствия будущей программе. Большинство современных сред программирования позволяет создавать некое подобие макетов, но это сопряжено с определёнными знаниями конкретной среды и конкретного языка. В то же время при создании большого проекта пользовательским интерфейсом, как правило, занимается отдельный человек, который не обязательно участвует в программировании. Поэтому удобно иметь инструмент для прототипирования интерфейсов, приспособленный для быстрого создания достаточно сложных макетов. В качестве подобных инструментов применялись различные пакеты программ: MS Visio, Corel Draw, Adobe Photoshop, Inkscape, GIMP. Эти программы не являются специализированными инструментами прототипирования графического интерфейса пользователя, но в силу наличия графических средств позволяют создавать приемлемые макеты. В последнее время проявляются тенденции по использованию специализированных инструментов, приспособленных именно для создания прототипов графического интерфейса пользователя. Причем макеты можно создавать для всех видов ПО: десктопных приложений, веб-сайтов, программ для смартфонов. Например, российская разработка Alee GUI Machine позволяет создавать макет работающей программы с имитацией работы всех нужных кнопок, окон, списков и т.д., с использованием фиктивного или реального наполнения, реализуя переходы между окнами. Реализована возможность создания запускного файла для демонстрации макета, например, заказчику ПО или сайта. Польза от создания макета выражается в следующем: · возможность рассмотреть будущий интерфейс программы с реальным взаимодействием его частей без программирования функционала, что уменьшает расходы по изменению интерфейса (т.к. чем раньше интерфейс будет приведен к своему окончательному виду, тем дешевле будет итоговый продукт); · более наглядная демонстрация будущих возможностей конечному пользователю или заказчику; · проверка юзабилити будущего графического интерфейса пользователя; · тестирование нестандартных, новых подходов к интерфейсу. Именно прототипирование графического интерфейса пользователя могло привести к тенденции отделения разработки графического интерфейса от программирования функционала, т.е. не просто разработка дизайна интерфейса, а потом его реализация, а параллельная разработка функциональной и графической составляющей проекта по созданию ПО. Изначально подобный подход практиковался в ОС Linux [1]. Для программирования с использованием библиотеки GTK+ использовался редактор графических интерфейсов Glade, код которого сохранялся в виде xml-файла, который потом можно подключить к любой разрабатываемой программе. Аналогичный подход был использован и для библиотеки Qt, с использованием специальной программы Qt Designer, хотя в последствии эта связка была заменена на единую IDE QtCreator. Сейчас активно развивается еще одни проект по раздельному созданию графического интерфейса пользователя — JavaFX Scene Builder. Это среда для разработки графического интерфейса программ на языке Java с использованием JavaFX 2.0 [2]. При этом можно использовать html и css для задания внешнего вида графических элементов, что делает интерфейс более насыщенным и удобным для восприятия конечным пользователем. Получаемый в итоге fxml-файл (файл с описанием созданного интерфейса в формате xml) можно подключить к любому java-проекту либо использовать в качестве макета для демонстрации заказчику или для тестирования интерфейса на пользователях. Таким образом, отделяя разработку графического интерфейса от программирования функционала, можно сразу решить проблему создания прототипа, т.к. постепенно создаваемый и тестируемый графический интерфейс и будет выступать в роли различных версий макетов. Естественно, это накладывает определенные правила на совместную работу различных специалистов: проектировщика интерфейсов, дизайнера и кодера, но в итоге должно способствовать созданию более качественного продукта. В плане построения курса обучения студентов IT-направлений необходимо учитывать специфику прототипирования во всех предметах, связанных с программированием и разработкой ПО. В этом отношении имеет смысл использовать макетирование как сквозную тему предметов подготовки в области IT. Например, на предметах, связанных с компьютерной графикой, делать упор на графические особенности пользовательского интерфейса, сочетаемость цветов и т.д. На предметах, связанных с человеко-машинным взаимодействием, можно уделять внимание именно юзабилити, удобству использования различных интерфейсов. В предметах цикла разработки и проектирования ПО особое место нужно уделять проектированию интерфейса как отдельно стоящей составляющей части всего процесса создания программ. Предметы цикла программирования должны охватывать разнообразные библиотеки для создания графических пользовательских интерфейсов. В то же время должен быть отдельный предмет, связанный с тестированием как функционала программы, так и интерфейса, в котором более полно можно будет раскрыть принципы создания макетов и их тестирования.