Разработка графического интерфейса

Ключевым средством взаимодействия пользователя с программой является графический пользовательский интерфейс (Graphical User Interface, GUI). GUI любого программного продукта является одним из ключевых факторов его популярности.

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

На практике программирование Windows-приложений предполагает экстенсивное использование различных инструментальных средств и мастеров. Таким образом, учитывая стандарты выбранной операционной системы, программное средство будет иметь оконный интерфейс. Это обусловлено, прежде всего, тем, что окна являются основными элементами графического интерфейса в операционных системах (ОС) семейства «Windows». Они представляют собой прямоугольные области, которые имеют свои настройки, свойства и типы .

Графическая часть обучающего блока включает в себя окна четырех типов:

Главное окно -- содержит все элементы навигации по программе, а также дополнительную информацию, необходимую для удобства работы с ПС;

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

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

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

Главное окно программы будет содержать следующие элементы управления и вывода информации:

Заголовок окна, который содержит название программы и назначение окна;

Кнопки системного меню, которые отвечают за изменение размера, минимизацию и закрытие программы;

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

Область приветствия;

Область вывода дня недели, текущей даты и времени;

Пользовательская панель инструментов, содержащая кнопки для доступа к основным функциям программы;

Административная панель, включает в себя кнопку для доступа к административным элементам управления ПС;

Строка состояния, отображающая информацию обо всех режимах работы программы.

Схема главного окна графического интерфейса (вид окна для административной учетной записи) представлена на рисунке 3.2

Рисунок 3.2 -- Схема главного окна графического интерфейса: 1 -- заголовок окна; 2 -- кнопки системного меню; 3 -- область названия окна; 4 -- строка состояния; 5 -- область приветствия; 6 -- область вывода дня недели, даты и времени; 7 -- административная панель; 8 -- пользовательская панель; 9 -- кнопка для доступа к стадии обучения; 10 -- кнопка для доступа к стадии тестирования; 11 -- кнопка для вывода статистики и графиков; 12 -- выход; 13 -- кнопка для доступа в административную часть приложения

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

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

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

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

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

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

Традиционный графический подход к интерфейсу с пользователем связан с работами Сазерленда, Ньюмена и др. , в котором взаимодействие базируется на использовании графического дисплея с регенерацией и светового пера. Дальнейшее развитие графического диалога связано с прогрессом в области систем интерактивной машинной графики, который привел к регламентации в виде международных стандартов.
GKS - первый международный графический стандарт. В нем впервые зафиксированы концепции "рабочих станций" и логических устройств ввода (клавиатура, выбор, локатор, валюатор, указатель, ввод последовательности координат). К сожалению задуман во время превосходства парадигмы векторного рисования. Отсюда слабость поддержки диалога: отсутствие возможности ввода новых устройств или видоизменения изображения устройства на экране даже из прикладной программы (пользователя графического пакета), что приводит к необходимости использования в основном символьного ввода при организации диалога. Реализация диалога в GKS прерогатива прикладной программы, возможности раздельного проектирования не предполагается.
Второе направление графики - растровая графика оказала чрезвычайно большое влияние на все последующее развитие интерактивных систем. Все основные черты интерфейса с пользователем на современных рабочих станциях суть производные от работ Xerox PARC: управление окнами

• использование графических символов ("икон") для представления объектов
• стиль взаимодействия, называемый непосредственным манипулированием
• популярность "мыши" как устройства позиционирования на экране
• объектно-ориентированный стиль программирования.

С тех пор система классификации инструментария для создания и управления пользовательским интерфейсом рассматривается на трех уровнях:

1. системы управления окнами (WMS - Window Manager System);
2. специализированный инструментарий;
   • обычный (MacIntosh, SunView . . .)
   • объектно-ориентированный (Smalltalk-80, Andrew, InterView)
3. системы управления пользовательским интерфейсом.

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

Системы управления окнами (WMS)

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

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

Интерфейс со стороны оператора и прикладной программы содержит команды заведения/уничтожения окон, изменения их размеров и положения, поднятие наверх, сжатия окна до пиктограммы и восстановления. Содержит графическую библиотеку вывода (только основные примитивы) и обработчик событий. Тем самым есть некие механизмы для реализации пользовательского интерфейса.
Возможны реализации WMS двух типов: базовая система (Kernel System), работающая на одной машине, и сетевая (Network oriented), реализуемая на основе модели клиент-сервер.

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

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

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

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

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

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

¦ При активизации всех пиктограмм, как отмечалось выше, следует использовать двойной щелчок мышью. А для получения аналогичного результата для пиктограмм объектов, которые активизируются одинарным щелчком мышью, рекомендуется также запрограммировать двойной щелчок. Многие опции, например из меню Control Panel, выглядят как пиктограммы, но являются объектами, которые активизируются одинарным щелчком мышью. Следует предусмотреть возможное поведение пользователей при работе с такими объектами (т.е. допустить, что они будут дважды щелкать по ним мышью) и помочь им достигнуть желаемого результата.

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

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

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

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

Эргономических требований к графическим интерфейсам пользователя оказалось явно недостаточно с развитием «мультимедиа» (multimedia) - интерактивных систем, обеспечивающих работы с неподвижными изображениями и движущимся видео, анимированной компьютерной графикой и текстом, речью и высококачественным звуком. Эргономические исследования и разработки этих систем представляют сложную и в профессиональном отношении увлекательную задачу.

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

1) понять назначение программного продукта во всех деталях путем тесного общения с пользователями, проводя зачастую с ними целые рабочие дни, чтобы лучше понять стиль их работы и индивидуальные привычки;

2) создание интерфейса - это работо не одиночки, а представителей трех областей: специалиста, который выясняет мнение пользователей об основных элементах интерфейса и описывает их; разработчика интерфейса и создателя графики;

3) один опытный сотрудник должен быть нозначен экспертом по интерфейсу и посредником между рабочей группой и пользователями;

4) проверка, создание макета и снова проверка, так как даже если совершенно точно понято назначение программного продукта, невозможно предусмотреть все потребности пользователей.

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

yadobr 14 января 2014 в 09:10

Проектирование графического интерфейса пользователя

• Интерфейсы

Введение

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

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

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

Общие принципы

Какие ЭИ создать?

Какой должен быть дизайн ЭИ?

На самом деле, дизайн ЭИ - тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

Как правильно расположить ЭИ на экране?

Как ЭИ должны себя вести?

В заключении

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

Литература

Джеф Раскин , «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер , «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер , «Психбольница в руках пациентов»