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

Лекция 10

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

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

1. Проектирование интерфейса как междисциплинарная деятельность

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

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

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

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

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

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

2. Интерфейс: от прототипа к реализации

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

Впечатление и ощущение от GUI-интерфейса служит "двигателем торговли" при продаже программного продукта заказчику. Прототипы GUI-интерфейса могут служить двоякой цели оценки "ощущения" от GUI-экранов и передачи его функций. Истинное "впечатление" становится доступным на этапе реализации.

3. Руководящие принципы проектирования интерфейса, ориентированного на пользователя

Центральным звеном при проектировании GUI-интерфейса выступает пользователь. Это замечание послужило основанием для ряда приводимых ниже рекомендаций разработчикам ПО. Руководящие принципы опубликованы производителями GUI интерфейсов.

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

3.1. Контроль - на стороне пользователя

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

Типичный поток управления в человеко-машинном взаимодействии: событие, инициированное пользователем (выбор пункта меню, щелчок мышью, перемещение указателя мыши по экрану и т.д.), может привести к открытию окна GUI-интерфейса или вызову программы - как правило, программы на языках 4GL или SQL в рамках приложения ИС. Программа временно перехватывает контроль у пользователя.

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

3.2. Согласованность

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

1. Соответствие стандартам поставщика GUI-интерфейса.

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

Оба аспекта одинаково важны, и второй (на который оказывают влияние разработчики) не должен противоречить первому. Если приложение разрабатывается для Windows, то следует обеспечить "впечатление и ощущение", свойственные работе в системе Windows.

Разработчик GUI-интерфейса не должен слишком увлекаться творчеством и предлагать необычные новшества. Это может плохо сказаться на уверенности и умении пользователей. Пользователям следует представлять знакомую среду, поведение которой предсказуемо. Как заметил Трайсман (Treisman), можно представить, какова была бы реакция автомобилистов, если бы производитель автомобилей выпустил на рынок новую машину, у которой поменяли местами педали скорости и тормоза!

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

3.3. Индивидуализация и настройка

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

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

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

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

3.4. Терпимость к ошибкам

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

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

3.5. Обратная связь

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

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

3.6. Эстетичность и удобство

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

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

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

4. Оконный интерфейс

Проектирование GUI-интерфейса характеризуется двумя основными аспектами - проектированием окон и проектированием элементов ввода и редактирования информации в окна. Оба аспекта зависят от базовой среды GUI. Последующее рассмотрение концентрируется на среде Microsoft Windows.

Типичное Windows-приложение состоит из единственного главного окна приложения (primary window). Главное окно поддерживается набором всплывающих окон (pop-up window), вторичных окон (secondary window). Вторичные окна поддерживают действия пользователя с главным окном. Многие действия, поддерживаемые вторичными окнами, представляют собой набор основных операций над базой данных - так называемый набор CRUD-операций. (CRUD - популярная аббревиатура, которая обозначает четыре основных операции над данными: Create, Read, Update, Delete ("Создать", "Читать", "Обновить", "Удалить").

4.1. Главное окно

Главное окно имеет границу (рамку). Рамка содержит строку заголовка для окна, строку меню, панели инструментов, строку состояния, а также отображаемое и модифицируемое содержимое окна. Горизонтальные и вертикальные полосы прокрутки используются для прокрутки, при необходимости, содержимого окна.

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

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

4.2. Вторичное окно

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

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

Окно входа в систему- простой пример вторичного окна.

У вторичного окна отсутствуют какие-либо "строки": строка меню, панель инструментов, полосы прокрутки или строка состояния. События инициируются пользователем посредством командных кнопок (кнопок запуска действий), таких как кнопки OK, Cancel (Отмена), Help (Помощь).

Вторичные окна выступают в виде различных экранных форм и масок. Перечислим основные типы вторичных окон.

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

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

В системе Microsoft Windows папка со вкладками называется листом свойств, снабженным вкладками (tabbed property sheet), а каждая из вкладок называется страницей свойств (property page).

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

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

5. Зависимость между окнами

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

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

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

5.1. Документ и его представление

Проектирование GUI-интерфейса в среде Microsoft Windows непосредственно зависит от классов, поставляемых компанией Microsoft, которые реализуют объекты и элементы управления Windows - API-интерфейса Windows (application programming interface - интерфейс прикладного программирования). Соответствующая библиотека классов называется библиотекой MFC (Microsoft Foundation Classes - базовые классы Microsoft).

Программирование для Windows связано с порождением и использованием объектов MFC, а также с созданием специфичных для приложения классов, наследующих исходные функциональные возможности классов MFC. Программирование для Windows требует также принятия на вооружение специфической структуры, определяющей зависимости и взаимодействие между окнами. Эта структура известна как подход к программированию на основе механизма документ/представление (document/view.

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

Обычно на экране отображается только фрагмент данных, хранимых в объекте CDocument. Этот фрагмент называется представлением (view). Объект представления является производным объектом класса CView. Для одного документа может существовать множество представлений. С технической точки зрения объект CView и окно (фрейм), в котором он отображается, - это не одно и то же.

5.2. Однодокументный интерфейс

В случае некоторых простых приложений проект GUI-интерфейса может состоять из единственного главного окна, в котором одновременно отображается только один открытый документ. Библиотека MFC поддерживает эту возможность, которая получила распространение под названием SDI-иптерфейса (single document interface - однодокументный интерфейс).

5.3. Многодокументный интерфейс

Для более сложных приложений безусловно может потребоваться открывать одновременно несколько документов. Документы могут быть однотипными, однако, зачастую они принадлежат разным типам. Библиотека MFC поддерживает возможность, которая получила распространение под названием MDI-интерфейса (multiple document interface - многодокументный интерфейс).

MDI-приложение все так же использует только одно главное окно. Это окно называется родительским окном (parent window). Однако, MDI-приложение позволяет открывать несколько документов внутри фрейма родительского окна. Каждый документ называется дочерним окном (child window). Логически каждое дочернее окно ведет себя так, как если бы оно было главным окном, которое может появиться только внутри родительского окна (но не на рабочем столе компьютера).

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

6. Навигация по окнам

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

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

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

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

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

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

Состояния {окна)

- Главное окно

Панель в главном окне

Окно просмотра строк

Окно просмотра деревьев

Web-страница

- Вторичное окно

Диалоговое окно

Окно сообщений

Папка со вкладками

- Типы данных окон

Текстовое поле

Комбинированное окно

Спиновое окно

Колонка

Строка

Группа полей

Виды деятельности (элемент управления окном)

- Пункт выпадающего меню

- Пункт всплывающего меню

- Кнопка панели инструментов

- Командная кнопка

- Двойной щелчок мышью

- Выбор из списка

- Клавиша клавиатуры

- Функциональная клавиша клавиатуры

- Комбинация клавиш клавиатуры

- Бегунок полосы прокрутки

- Кнопка закрытия окна

Резюме

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

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

В интерфейсе системы Microsoft Windows различают главное окно и вторичное окно. Главное окно может быть окном просмотра строк, окном просмотра деревьев или Web-страницей. Вторичное окно может быть диалоговым окном, папкой со вкладками, выпадающим списком или окном сообщений. Вторичное окно может быть по отношению к своему главному окну модальным или немодальным. Дальнейшее уточнение зависимостей между окнами осуществляется применительно к использованию SDI интерфейса или MDI-интерфейса.

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