Задача: Проектирование интерфейса
Эта задача разъясняет, как спроектировать GUI с упором на удобство работы.
Дисциплины: Анализ и проектирование
Назначение
  • Спроектировать пользовательский интерфейс, отвечающий требованиям к удобству работы с ним и допускающий их повышение
Взаимосвязи
Основное описание

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

Шаги
Опишите характеристики участвующих пользователей

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

Совместно с системным аналитиком определите, нужно ли внести какие-либо изменения в описание субъекта, чтобы отразить заданные характеристики. Подробные сведения приведены в разделе Рекомендация по рабочему продукту: субъект, характеристики.

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

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

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

Попытайтесь сгруппировать элементы пользовательского интерфейса в одном основном окне, если они должны быть показаны вместе или в пространственном отношении к другим элементам пользовательского интерфейса. Конечно, это не всегда возможно из-за ограничений на размер экрана. Заметьте, что средние размеры объектов - это важное значение на этом шаге, поскольку они указывают, сколько примерно объектов нужно будет показывать одновременно. Если объектов слишком много, то они могут не поместиться в одном окне; в этом случае лучше разместить объекты компактно в основном окне, а затем определить отдельные основные окна для каждого объекта (или набора объектов).

Далее приведены некоторые признаки основных окон:

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

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

Определите навигационную карту

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

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

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

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

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

Представления навигационной карты могут быть самыми разными. Ниже приведены некоторые примеры:

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

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

Детализируйте макет элементов пользовательского интерфейса

На данный момент, высокоуровневый макет пользовательского интерфейса завершен:

  • Основные окна заданы.
  • Элементы пользовательского интерфейса и их навигационные пути определены (см. раздел Навигационная карта).

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

Спроектируйте визуализацию основных окон

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

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

Пример:

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

  • жалобы и вопросы клиентов по времени
  • продукты, приобретенные клиентом, по времени
  • квитанции, выписанные клиентам, по времени

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

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

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

Для каждого основного окна определите одно или несколько меню и опции меню. Например, в редакторе документов есть меню Правка, объединяющее родственные операции, такие как Вырезать, Скопировать и т.п.

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

Если в окне предстоит визуализировать большое число объектов, то может потребоваться спроектировать пользовательские действия, в которых участвуют эти объекты. Ниже приведены некоторые примеры таких пользовательских действий:

  • поиск среди нескольких объектов
  • сортировка нескольких объектов
  • просмотр иерархий нескольких объектов
  • выбор нескольких объектов

Дополнительная информация приведена в разделе Рекомендация: пользовательский интерфейс (общие сведения).

Спроектируйте прочие функции

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

  • как поддерживать управление окнами
  • какую информацию о сеансе, например текущую позицию курсора, позицию строки прокрутки, открытые окна, размеры окон, относительные положения окон и т.п., следует хранить в периоды между сеансами
  • следует ли поддерживать интерфейсы одного документа или нескольких документов (SDI или MDI) в основных окнах

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

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

Дополнительная информация приведена в разделе Рекомендация: пользовательский интерфейс (общие сведения).

Дополнительные сведения