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


Содержание

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

На странице Standard палитры компонентов Delphi 4 появился новый компонент TActionList. Этот компонент предназначен для упорядочения обработчиков событий различных интерфейсных элементов (меню, инструментальных панелей, кнопок и др.). Нередко при использовании широкого спектра интерфейсных элементов и изменения их поведения на этапе выполнения (например, изменения доступности некоторых элементов меню) отслеживание связей интерфейсных элементов и имеющихся в приложении процедур становится затруднительным. Теперь можно имеющиеся в приложении процедуры сделать обработчиками событий компонентов TAction, коллекция которых может быть свойством Actions компонента TActionList.

Рассмотрим в качестве иллюстрации следующий пример. Поместим на форму компонент TImageList, добавим в него какие-нибудь изображения из каталога Common Files\Borland Shared\Images\Buttons (например, FileOpen.bmp, FileNew.bmp, FileSave.bmp, FileClose.bmp).

Рис. 8 Добавление элементов в ImageList.

Далее поместим на форму компонент TActionList. С помощью его редактора свойств создадим несколько объектов TAction, присвоим им имена, установим соответствующие значения свойств Caption и ImageIndex и создадим какие-нибудь обработчики событий OnExecute для каждого из них.

Рис. 9 Редактор свойств компонента TActionList.

Теперь поместим на форму компонент TToolBar, добавиви к нему четыре кнопки TToolButton, четыре компонента TButton, одно главное меню и одно popup-меню. У всех этих компонентов есть свойство Action, и если выбрать его из выпадающего списка, соответствующий интерфейсный элемент будет обладать соответствующим набором свойств (надписью, графическим изображением) и обработчиком событий OnClick (у компонентов TMainMenu, TPopupMenu и TToolBar перед этим следует установить значение свойства Images, выбрав компонент Imagelist1).

Рис. 10 Главное меню и форма приложения, использующего компонент TActionList.

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

«Плавающие» окна и инструментальные панели (dockable tool windows)

Одним из новшеств в создании пользовательского интерфейса приложений, отвечающего современным стандартам, является поддержка «плавающих» окон и инструментальных панелей. Все наследники TControl могут быть превращены в дочерние «плавающие» окна (наподобие инструментальных панелей MS Office), а наследники компонента TWinControl могут выполнять роль объектов, к которым эти окна могут приcтыковываться. Помимо этого, «плавающие» формы могут образовывать страницы многостраничного блокнота, что само по себе является новшеством в создании пользовательских интерфейсов.

Рассмотрим простейший пример, иллюстрирующий эти возможности. Создадим проект, содержащий три формы. На главную форму поместим кнопку и компонент TPageControl (рис. 11).

Рис. 11 Главная форма приложения с блокнотом, действующим как «docking site»

Установим следующие значения свойств компонентов приложения:

Компонент Свойство Значение
PageControl1 Align alBottom
DockSite True
DragKind dkDock
Form2 UseDockManager True
DragKind dkDock
DragMode dmAutomatic
Form3 UseDockManager True
DragKind dkDock
DragMode dmAutomatic

Сошлемся на модули, связанные с формами Form2 и Form3, в модуле, связанном с главной формой приложения, и создадим обработчик события, связанного с нажатием на кнопку:

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

Рис. 12 «Плавающие» панели, помещенные в блокнот, на этапе выполнения.

Отметим, что можно также превратить в «плавающие» окна интерфейсные элементы форм, например, панели.

Следует также обратить внимание на то, что сама среда разработки Delphi 4 почти целиком состоит из «плавающих» форм и панелей. В частности, почти все окна отладчика, Code Explorer, инспектор объектов, менеджер проектов, элементы инструментальной панели выполнены в виде «плавающих» форм.

Другие дополнительные возможности

Из других новых возможностей Delphi 4, связанных с созданием пользовательского интерфейса, следует отметить возможность ограничения размеров компонентов и форм. Теперь наследники компонента TControl в Delphi 4 обладают свойством Constraints, определяющим максимальное и минимальное возможное значение ширины и высоты компонента или формы, при этом это свойство передается компоненту-контейнеру, содержащему такой компонент, если последний имеет свойство Align, отличное от alNone.

Из дополнительных интерфейсных элементов особенно хотелось бы отметить TControlBar — компонент, служащий контейнером для любого интерфейсного элемента Delphi и позволяющий пользователю перемещать внутри него интерфейсные элементы по своему усмотрению на этапе выполнения.

Рис. 13 Компонент TControlBar — на этапе выполнения можно перемещать интерфейсные элементы внутри него.

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

GUI Machine

Прототипирование десктопных и веб-приложений

19-22 мая компания АЛЕЕ СОФТВЕР будет принимать участие в международном салоне “Комплексная безопасность 2015″, который пройдет в Москве на ВДНХ. Цель данного мероприятия – обеспечить эффективное… Подробнее

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

Мы рады сообщить, что в начале апреля 2015 года изменилась ценовая политика нашего продукта. Мы сделали ее еще более привлекательной и доступной для вас. Теперь… Подробнее

25 января 2013 года между АЛЕЕ Софтвер и Белорусским государственным университетомбыл заключен договор о предоставлении 32 академических лицензий на программу GUI Machine — современный инструмент прототипирования и проектирования интерфейсов…. Подробнее

Политехнический Университет Санкт-Петербурга (СПбГПУ) и Волжский Политехнический Институт (ВПИ) стали участниками академической программы «АЛЕЕ СОФТВЕР» по лицензированию учебных заведений. Они получили право использования программного продукта — среды прототипирования интерфейсов GUI Machine — в… Подробнее

Методы и средства разработки пользовательского интерфейса: современное состояние

Клещев А.С., Грибова В.В. 25.03.2001

Интерфейс имеет важное значение для любой программной системы и является неотъемлемой ее составляющей, ориентированной, прежде всего, на конечного пользователя. Именно через интерфейс пользователь судит о прикладной программе в целом; более того, часто решение об использовании прикладной программы пользователь принимает по тому, насколько ему удобен и понятен пользовательский интерфейс. Вместе с тем, трудоемкость проектирования и разработки интерфейса достаточно велика. По оценкам специалистов в среднем она составляет более половины времени реализации проекта [1]. Актуальным является снижение затрат на разработку и сопровождение программных систем или разработка эффективного программного инструментария, где под эффективностью понимается простота разработки, легкость сопровождения и удобство работы с программой [2].

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

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

В литературе не существует единой общепринятой классификации средств для разработки пользовательского интерфейса. Так, в [3] программное обеспечение для разработки пользовательского интерфейса разделяется на две основные группы – инструментарий для разработки пользовательского интерфейса (toolkits) и высокоуровневые средства разработки интерфейса (higher-level development tools). Инструментарий для разработки пользовательского интерфейса, как правило, включает в себя библиотеку примитивов компонентов интерфейса (меню, кнопки, полосы прокрутки и др.) и предназначен для использования программистами. Высокоуровневые средства разработки интерфейса могут быть использованы непрограммистами и снабжены языком, который позволяет специфицировать функции ввода-вывода, а также определять, используя технику непосредственного манипулирования, интерфейсные элементы. К таким средствам авторы относят построители диалога (interface builders) и СУПИ – системы управления пользовательским интерфейсом (User Interface Management Systems – UIMS). Помимо СУПИ, некоторые авторы используют такие термины, как User Interface Development Systems (UIDS) – системы разработки пользовательского интерфейса, User Interface Design Environment (UIDE) – среда разработки пользовательского интерфейса и др.

В [4] инструментарий для разработки интерфейса разделен на три группы, которые определяются следующим образом. В первую группу входит инструментарий для поддержки создания интерфейса написанием кода – UIMS и Toolkits; во вторую – интерактивные инструментальные средства, позволяющие сконструировать интерфейс из “заготовок” (кнопок, меню, полос прокрутки и т.д.), – Interface Builders; третий тип основан на создании интерфейса путем связывания отдельно созданных его компонент – Component Architectures.

Как замечено в [2], терминология данного направления окончательно не сформировалась и в настоящее время также является предметом исследования. Однако в большинстве работ для ссылки на специализированные средства для разработки интерфейса приводится термин СУПИ, который и будет использоваться в данной работе.

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

Можно выделить несколько основных способов спецификации интерфейса [2].

1. Языковой, когда применяются специальные языки для задания синтаксиса интерфейса (декларативные, объектно-ориентированные, языки событий и др.).

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

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

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

Основной концепцией СУПИ является отделение разработки пользовательского интерфейса от остального приложения. В настоящее время идея раздельного проектирования интерфейса и приложения либо закреплена в определении СУПИ, либо является основным его свойством [5].

В [6] состав СУПИ определен как набор инструментов этапа разработки и периода исполнения. Инструменты этапа разработки оперируют с моделями интерфейса для построения их проектов. Они могут разделяться на две группы: интерактивные инструменты, например редакторы моделей, и автоматические инструменты, например генератор форм. Инструменты периода исполнения используют модель интерфейса для поддержки деятельности пользователя, например, для сбора и анализа используемых данных.

Функциями СУПИ является содействие и облегчение разработки и сопровождения пользовательского интерфейса, а также управление взаимодействием между пользователем и прикладной программой.

Поведение интерфейса и прикладной программы определяется характером взаимодействия с пользователем. Можно выделить три различных типа взаимодействия [2]: инициатива диалога принадлежит пользователю, прикладной программе либо является смешанной.

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

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

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

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

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

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

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

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

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

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

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

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

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

Таким образом, в состав пользовательского интерфейса входят:

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

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

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

В работах [3,6,12] также предложено начинать проектирование интерфейса с моделирования задачи и предметной области. Для этого пользователю предлагается на неформальном языке описать постановку задачи, из которой автоматически выделяются понятия предметной области и действия с ними. Следующими этапами является формализация полученной постановки задачи путем отсеивания ненужных элементов, организация классов выделенных элементов, задание области и типов их допустимых значений, действий над ними с целью создания полноценной модели предметной области. В качестве преимуществ подобного способа извлечения задачи авторы указывают на снижение степени непонимания между разработчиком и пользователем, вовлечение пользователя в проект с самого начала его реализации и построение им каркаса модели задачи и модели предметной области. Однако вызывает сомнение возможность использования данного подхода для решения задач со сложной моделью предметной области, имеющей большой объем и сложную структуру системы понятий, необходимую для решения задачи, обеспечения пользователя интеллектуальной поддержкой, поскольку каркас и элементы модели (термины и понятия) выделяются на основе неформального описания задачи пользователем. Наш опыт проектирования сложных систем, например экспертной системы “Консультант-2″ [13] и, в частности, ее интерфейса, показал, что процесс формирования системы понятий, бесспорно, должен осуществляться при активном участии высококвалифицированных специалистов предметной области на основе серьезного предшествующего ее анализа с целью последующей формализации. Инструментарий для проектирования интерфейса поэтому должен быть ориентирован скорее на разработчика интерфейса, чем на конечного его пользователя.

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

Следует отметить, что во всех существующих Toolkits отсутствуют специальные средства для проектирования пользовательского интерфейса исходя из его составляющих [4]. Поэтому разработчики интерфейса вынуждены проектировать все его части вместе, явно не отделяя одну составляющую от другой, хотя проектирование различных его составляющих требует использования различных типов понятий и уровней абстракции. Технология разработки интерфейса данными средствами организована таким образом, что разработчик выбирает интерфейсный элемент и “нанизывает” на него содержание интерфейса, а не наоборот, в соответствии со структурой и содержанием (системой понятий) предлагаются формы ее представления (возможно, автоматически формируются). Разрабатывая таким образом интерфейс, его разработчик должен корректировать структуру и содержание исходных данных под формы, предлагаемые в инструментальном средстве.

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

В [12] сделана попытка связать систему понятий и систему сообщений. Для этого в инструментарии имеется база данных, в которой хранится информация о том, какими интерфейсными элементами удобнее представлять те или иные виды данных. На основе этой базы данных разработчик может назначать примитивы элементам либо группам данных и затем автоматически генерировать прототип интерфейса. Такой подход удобен для вербального представления данных, однако графическое представление зависит от предметной области, поэтому в данном случае предлагаемые в базе данных примитивы не могут быть использованы для формирования сообщений.

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

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

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

Средства генерации объяснений результатов работы программной системы представлены в работе [11]. Для этого разработчикам интерфейса предлагается специальный макроязык, на котором они могут описать шаблон объяснения. Однако данный язык позволяет представить объяснение только в вербальном виде, имеет ограниченные средства по форматированию текста объяснения и содержит ограничение на формат результатов работы программной системы – только в виде кортежей отношений. Множество других систем генерации объяснений ориентированы исключительно на экспертные системы, они зависят от машины логического вывода, а также требуют включения дополнительных знаний в базу зна- ний [5]. В [15] авторы предлагают средства для автоматической генерации средств помощи по представлению базы знаний.

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

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

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

1. Myers B.A. and Rosson M.B. “Survey on User Interface Programming,” Proceedings SIGCHI’92: Human Factors in Computing Systems. Monterrey, CA, May 3-7, 1992. P. 195-202.

2. Клименко С., Уразметов В. Графические интер- фейсы и средства их разработки // Матер. конф.: Инду- стрия программирования – 96. www.uniyar.ac.ru/network/ atm/forum/koi/if/prg/prg96/73/htm.

3. Puerta, A. R. Supporting User–Centred Design of Adaptive User Interfaces Via Interface Models. First Annual Workshop On Real–Time Intelligent User Interfaces For Decision Support And Information Visualization, San–Francisco, January 1998. 10 p.

4. Brad A. Myers. A Brief History of Human Computer Interaction Technology // ACM interactions. Vol. 5, №. 2. March 1998. P. 44-54.

5. Lowgren J. Knowledge–Based Design Support and Discourse Management in User Interface Management Systems. Linkoping Studies in Science and Technology. Dissertations №239, 1989.

6. Puerta, A.R., and Maulsby, D. Management of Interface Design Knowledge with MOBI–D. IUI97: International Conference on Intelligent User Interfaces, Orlando, January 1997. P. 249–252.

7. Pressman R. S. Software Engineering: Practitioners Approach European 3d Rev. ed. McGraw–Hills Inc., 1994. 802 p.

8. Коутс P., Влейминк И. Интерфейс “человек-компьютер”/ Пер. с англ. – М.: Мир, 1990.- 501 с

9. Bruce A. Wooley Explanation Component of Software Systems. www.acm.org/ crossroads/xrds5–1/explain.html.

10. Бауэр Ф. Л., Гооз Г. Информатика. Вводный курс: В 2 ч. /Пер. с нем. –М.: Мир, 1990. – Ч.1. – 336 с., ил.

11. Грибова В.В., Клещев А.С. Инструментальный комплекс для разработки пользовательского интерфейса в экспертных системах // Программные продукты и системы. – 1999. – №1. – С. 30-34.

12. Puerta, A.R. A Model–Based Interface Development Environment. IEEE Software, 14(4), July/August 1997. Р. 41–47.

13. Черняховская М.Ю. Оценка ЭС медицинской диагностики “Консультант–2″ на архивном материале нескольких клиник. – Владивосток, 1989. – 30 с. (Препр. ИАПУ ДВО РАН).

14. Скопин И.Н. Разработка интерфейсов программных систем // Системная информатика. – 1998. – Вып.6. – С.123–173.

15. Foley, J., Kim, W.C., Kovacevic S., Murray, K., UIDE: An Intelligent User Interface Design Environment, in ACM Press, 1991.

Статья опубликована в выпуске №1 международного журнала “Программные продукты и системы” за 2001 год

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

Лекция 14

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

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

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

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

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

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

Верх айсберга — информация для пользователей (цвет, анимация, звук, форма объектов, расположение информации на экране, графика) составляет всего 10% и является отнюдь не самой важной составляющей пользовательского интерфейса.

Илон Маск рекомендует:  Взаимодействие microsoft excel с приложениями net позднее связывание

Следующая часть пользовательского интерфейса (30% модели проектировщика) — это техника общения с пользователем и обратная связь с ним.

И, наконец, нижняя часть айсберга (60%) модели проектировщика — наиболее важная его часть — это свойства объектов и связи между ними.

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

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

Для создания у пользователя такого ощущения «внутренней свободы» интер­фейс должен обладать целым рядом свойств :

Дружественность интерфейса (Принцип «прощения пользователя»)

Принцип «обратной связи».

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

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

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

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

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

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


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

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

Принцип «обратной связи». Необходимо всегда обеспечивать обратную связь для действий пользователя. Каждое дей­ствие пользователя должно получать визуальное, а иногда и звуковое подтверж­дение того, что программное обеспечение восприняло введенную команду; при этом вид реакции, по возможности, должен учитывать природу выполненного действия.

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

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

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

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

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

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

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

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

Метафорический принцип положен и в основу технологии WISIWIG — немедленную визуализацию на экране результатов действий. Это означает, что экран должен имитировать средства полиграфической печати, и если пользователь хочет напечатать часть текста курсивом, то он и на экране должен быть набран курсивом. Если файл уничтожается, то пользователь видит, что файл исчезает из изображенного на экране списка файлов. Интерфейс в естественной форме обеспечивает пользователя информацией о состоянии объекта, подтверждая, что действие было выполнено. Можно сказать, что эта метафора более точно соответствует формуле «Ты видишь то, что получил в результате своих действий».

Гибкость интерфейса. Гибкость интерфейса — это его способность учитывать уровень подготовки и производительность труда пользователя. Свойство гибкости предполагает возможность изменения структуры диалога и/или входных данных. Концепция гибкого (адаптивного) интерфейса в настоящее время является одной из основных облас­тей исследования взаимодействия человека и ЭВМ. Основная проблема состоит не в том, как организовать изменения в диалоге, а в том, какие признаки нужно использовать для определения необходимости внесения изменений и их сути.

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

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

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

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

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

Субъективная удовлетворенность пользователя при работе с системой (которая количественно может быть выражена в процентах или оценкой по n-бальной шкале).

Современными видами интерфейсов являются:

1) Командный интерфейс. Командный интерфейс называется так по тому, что в этом виде интерфейса человек подает «команды» компьютеру, а компьютер их выполняет и выдает результат человеку. Командный интерфейс реализован в виде пакетной технологии и технологии командной строки.

2) WIMP — интерфейс (Window — окно, Image — образ, Menu — меню, Pointer — указатель). Характерной особенностью этого вида интерфейса является то, что диалог с пользователем ведется не с помощью команд, а с помощью графических образов — меню, окон, других элементов. Хотя и в этом интерфейсе подаются команды машине, но это делается «опосредственно», через графические образы. Этот вид интерфейса реализован на двух уровнях технологий: простой графический интерфейс и «чистый» WIMP — интерфейс.

3) SILK — интерфейс (Speech — речь, Image — образ, Language — язык, Knowlege — знание). Этот вид интерфейса наиболее приближен к обычной, человеческой форме общения. В рамках этого интерфейса идет обычный «разговор» человека и компьютера. При этом компьютер находит для себя команды, анализируя человеческую речь и находя в ней ключевые фразы. Результат выполнения команд он также преобразует в понятную человеку форму. Этот вид интерфейса наиболее требователен к аппаратным ресурсам компьютера, и поэтому его применяют в основном для военных целей.

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

Аннотация научной статьи по автоматике и вычислительной технике, автор научной работы — Шибанов Сергей Владимирович, Пашкин Алексей Александрович

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

Похожие темы научных работ по автоматике и вычислительной технике , автор научной работы — Шибанов Сергей Владимирович, Пашкин Алексей Александрович,

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные конструкторы пользовательских интерфейсов можно разделить на две категории: конструкторы, встраиваемые в интегрированные среды разработки (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

File Ipfj Scroll Pane

Jri Desktop Pane PI Internal Frame . * i Layered Pane

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

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

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

Задача с точки зрения UI-дизайна

Отправная точка — это не только определение задачи, которую надо решить, но и её понимание с точки зрения ваших клиентов.

Главная задача клиента — чётко сформулировать идею правильным людям с подходящими навыками. Тогда разработанный интерфейс точно можно будет использовать.

20 ноября в 18:30, Москва, беcплатно

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

Разработайте собственный алгоритм подхода к дизайну

Сформируйте простой порядок действий для разработки UI-дизайна вашего приложения. Вот некоторые рекомендованные шаги:

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

Диаграмма пользовательских маршрутов

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

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

Важно максимально всё упростить, уменьшив беспорядок и удалив ненужные шаги. Это действительно поможет на начальном этапе наполнить ваш UI-дизайн.

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

  • прямоугольник — для представления изображений на экране;
  • ромб — для представления доступных пользователю решений;
  • стрелка — для отображения связей между экранами и решениями.

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

Планирование облегчает реализацию, поэтому всегда делите задачи на более мелкие части.

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

Дорабатывайте и совершенствуйте их, чтобы сделать ваше приложение как можно лучше.

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

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

Вот ещё несколько отличных ресурсов:

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

Создание каркасов

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

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

Обратите внимание на SneakPeekIt. В нём есть большое количество шаблонов, которые можно распечатать и использовать в своих эскизах. Это совершенно бесплатный инструмент для вдохновения.

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

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

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

Создание макетов приложения

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

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

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

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

Непрерывное чередование эпох от настольных ПК к Web и мобильным устройствам способствует развитию пользовательских интерфейсов. Что происходит сейчас в этой области, какие применяются методы и каковы перспективы?

Под влиянием непрерывных изменений, обусловленных чередованием эпох от настольных ПК к Web и мобильным устройствам, активно развиваются пользовательские интерфейсы. Что происходит сейчас в области разработки пользовательских интерфейсов, какие применяются методы и каковы перспективы их развития?

Всякий раз, включая компьютер, вы имеете дело с пользовательским интерфейсом (User Interface, UI), который кажется простым и очевидным, но, чтобы он стал таким, в индустрии было вложено немало труда. Оглянемся на 1990-е годы, когда настольные компьютеры стали повсеместными, и приведем хронологию развития технологий UI. Рассмотрим также, как развивались средства программирования UI и что они собой представляют сегодня. В табл. 1 приведен перечень основных задач разработки UI, на базе которых проводился анализ различных технологий реализации пользовательских интерфейсов, распределенных по категориям. Каждая из этих категорий включает технологии, решающие одну или более задач примерно одинаковыми способами.

Таблица 1. Основные задачи при разработке пользовательских интерфейсов

Формы ввода с привязкой к СУБД

Одну из главных категорий средств разработки UI образуют инструментарии, ориентированные на формы ввода данных с привязкой к реляционным СУБД. Суть данного подхода состоит в создании UI для приложений путем построения форм, отображающих значения полей базы в соответствующих элементах управления: текстовых полях, списках, кнопках-флажках, таблицах и т. п. Инструментарий позволяет выполнять навигацию по такой форме и устанавливать прямую связь между элементами управления и данными в базе. Разработчику не нужно заботиться о блокировках, передаче, преобразовании и обновлении данных — когда пользователь, например, переключает номер записи в форме, ее остальные поля обновляются автоматически. Аналогично, если пользователь меняет значение в поле, привязанном к какой-либо записи из базы, это изменение мгновенно в ней сохраняется. Чтобы добиться этого, не нужно специально писать код — достаточно задекларировать привязку элемента управления или всей формы к источнику данных. Таким образом, поддержка привязки к данным в инструментах этой категории — одна из сильных сторон данного метода. Задачи планировки и стилизации UI в таких средах решаются с помощью дизайнеров форм и специализированных объектно-ориентированных API. Для управления поведением UI обычно предлагаются обработчики событий (представляющие собой методы, реализованные на основном языке программирования среды разработки), тогда как для контроля вводимых значений используются выражения (в том числе регулярные). Типичные представители этой многочисленной категории инструментариев — Microsoft Access и Oracle Forms.

Обработчики шаблонов

Технологии построения пользовательских интерфейсов на базе шаблонов, реализованных на языках разметки, начали повсеместно применяться с середины 1990-х. Основные преимущества шаблонов — гибкость и широта возможностей создания динамических пользовательских веб-интерфейсов, особенно с точки зрения разработки структуры и планировки. Вначале в таких инструментариях использовались шаблоны, в которых планировка и структура UI задавались с помощью языка разметки, а привязка к данным осуществлялась с помощью небольших блоков на языке высокого уровня (Java, C#, PHP, Python и т. д.). Последние могли использоваться в комбинации с разметкой; например, путем внедрения тегов разметки в цикл на Java могли создаваться итеративные визуальные элементы наподобие таблиц и списков. Необходимость частой смены синтаксиса внутри веб-страницы затрудняла разработку и коррекцию кода для программистов, поэтому около десяти лет назад начался переход с языков высокого уровня на специализированные библиотеки тегов разметки и языки выражений, созданные для конкретных веб-технологий.

Теги разметки стали использовать для реализации типовых функций веб-приложений, а выражения — для доступа к данным и вызова функций, хранимых в серверных объектах. Типичный представитель этой группы — технология JavaServer Pages (JSP), библиотека тегов которой JSP Standard Tag Library поддерживает такие задачи, как: манипуляция с XML-документами, циклы, условия, опрос СУБД (привязка к данным) и интернационализация (форматирование данных). Язык выражений JSP — EL, служащий средством привязки к данным, предлагает удобную нотацию для работы с объектами и свойствами приложения.

Существует целый ряд похожих на JSP инструментариев веб-разработки: для планировки и задания структуры (в них используются шаблоны), для привязки к данным с помощью языка выражений, а поведение UI задается с помощью обработчиков событий, реализованных средствами языка ECMAScript и интерфейса программирования Document Object Model. Форматирование данных выполняется с помощью специализированных библиотек тегов, для стилизации внешнего вида обычно применяется CSS (Cascading Style Sheets). Популярные представители этой категории инструментов: ASP, PHP, Struts, WebWork, Struts2, Spring MVC, Spyce и Ruby on Rails.

Объектно-ориентированные и событийные инструменты

Значительная доля инструментариев для создания UI базируется на объектно-ориентированной модели. Обычно эти инструментарии предлагают библиотеку готовых элементов UI, и их главными преимуществами являются простота составления многократно используемых блоков из простых компонентов и интуитивно понятный, гибкий процесс программирования поведения и взаимодействия, основанный на обработчиках событий. В этих инструментариях все задачи разработки UI решаются с использованием специализированных объектных API. К данной категории относятся среды: Visual Basic, MFC, AWT, Swing, SWT, Delphi, Google Web Toolkit, Cocoa Touch UIKit, Vaadin и др. Сюда же можно отнести инструментарий Nokia Qt, предлагающий ряд оригинальных концепций. В некоторых инструментариях вся сложность взаимодействия между элементами структуры UI реализуется с помощью обработчиков событий, а в Qt в дополнение к ним есть «сигналы» и «слоты»: сигнал передается компонентом UI всякий раз, когда происходит определенное событие. Слот — это метод, вызываемый в ответ на определенный сигнал, который можно декларативно связать с каким угодно количеством слотов, и наоборот, один слот может получать сколько угодно сигналов. Элемент, передающий сигнал, «не знает», какой слот его получит. Таким образом, элементы пользовательского интерфейса слабо связаны соединениями «сигнал-слот». Данный механизм способствует использованию принципа инкапсуляции и предоставляет возможность декларативно задавать поведение UI.

Илон Маск рекомендует:  Dos fn 2ah дать системную дату

Гибриды

Гибридные технологии относительно новы в мире разработки UI общего назначения — наряду с шаблонами и языками выражений в подобных инструментариях применяется объектный API. Типичный представитель — JavaServer Faces: библиотеки тегов служат для описания структуры и планировки, а также для форматирования данных; язык выражений — для привязки элементов и событий к серверным объектам и коду приложений; объектный API — для отображения элементов, управления их состоянием, обработки событий и контроля ввода. Другие популярные инструментарии в этой категории: ASP.NET MVC, Apache Wicket, Apache Tapestry, Apache Click и ZK Framework.

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

Декларативные инструментарии


Такие инструменты — новейшее направление в области средств разработки UI. Для указания структуры пользовательского интерфейса в них используются языки на основе XML и JSON (JavaScript Object Notation), а для остальных задач разработки UI применяется преимущественно декларативная нотация. В отличие от гибридных подходов, в основном рассчитанных на веб-интерфейсы, декларативные применяются еще в разработке нативных приложений для мобильных и настольных платформ.

API пользовательского интерфейса Android — событийно-зависимый, объектно-ориентированный, но наряду с основным в ОС есть вспомогательный API, базирующийся на XML, который позволяет декларировать структуру и планировку пользовательского интерфейса, а также стилизовать его элементы и управлять их свойствами. Декларативное описание интерфейса нагляднее показывает его структуру и помогает в отладке; позволяет без перекомпиляции менять планировку; помогает адаптироваться к различным платформам, размерам экрана и соотношениям его сторон. При создании более динамических пользовательских интерфейсов указывать и менять структуру элементов можно и программно — с помощью объектных API, но привязка к данным не поддерживается. Существует, правда, Android-Binding — стороннее решение с открытым кодом, позволяющее привязывать элементы пользовательского интерфейса к моделям данных.

Создавать UI для программ Windows и функционально богатых интернет-приложений, основанных, соответственно, на технологиях Windows Platform Foundation и Microsoft Silverlight, можно с использованием другого XML-словаря — eXtensible Application Markup Language (XAML). Он позволяет задавать структуру, планировку и стиль UI, а кроме того, в отличие от языка разметки Android, в нем поддерживается привязка к данным и возможность обработки событий.

В Nokia разработчикам рекомендуют Qt Quick — кросс-платформный инструментарий для настольных, мобильных и встраиваемых ОС, поддерживающий QML (декларативный скриптовый язык на основе синтаксиса JSON). Описание пользовательского интерфейса имеет иерархическую структуру, а поведение программируется на ECMAScript. Здесь, как и в обычном Qt, поддерживается механизм «сигнал-слот». Qt Quick поддерживает возможность привязки свойств элементов UI к модели данных, а также концепцию машины состояний, позволяющую графически моделировать поведение интерфейса.

Еще один пример — Enyo, кросс-платформный инструментарий для создания UI на ECMAScript, в котором структура интерфейса задается декларативно, а поведение регулируется обработчиками событий. События обрабатываются тремя способами: на уровне отдельных компонентов UI, путем передачи от потомка к родителю без прямой привязки, а также за счет шировоковещательной трансляции и подписки на такие сообщения (тоже без прямой привязки). Благодаря слабой связи элементов UI расширяются возможности многократного использования и инкапсуляции больших фрагментов интерфейса. По сути, основное достоинство Enyo — это модель инкапсуляции, благодаря которой UI можно компоновать из многократно используемых самодостаточных строительных блоков с заданными интерфейсами. Данная модель способствует абстрагированию и охватывает все архитектурные уровни UI. Участники проекта Enyo работают над реализацией поддержки привязки к данным.

Eclipse XML Window Toolkit — еще один инструментарий, ориентированный на декларативное описание UI. Первоначальная задача его создания состояла в объединении в Eclipse всех инструментов разработки UI, включая SWT, JFace, Eclipse Forms и другие — все их элементы так или иначе имеют соответствия в XWT. Структура и планировка UI в XWT задаются с помощью языка на основе XML, а для привязки к данным (доступа к Java-объектам приложения) используется язык выражений. Обработка событий программируется на Java, а для стилизации элементов интерфейса используется CSS. Механизм исполнения приложений XWT реализован в виде Java-апплета и элемента ActiveX, то есть может работать практически в любом браузере.

В этой категории существует немало похожих инструментов: в AmpleSDK, например, в качестве языка описания UI используется XUL, функции ECMAScript применяются для программирования динамического поведения, CSS — для стилизации. В Dojo Toolkit интерфейс задается декларативно и предусмотрены широкий выбор готовых элементов, объектное хранилище для доступа к данным и обработчик событий на основе ECMAScript с механизмом публикации-подписки. Инструментарий поддерживает интернационализацию, развитый API для опроса данных, модуляризацию и множественное наследование классов.

Инструментарии на основе моделей

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

Анализируя поколения модельно-ориентированных подходов к разработке UI начиная с 1990-х, можно прийти к выводу [2], что сегодня имеется общепринятое представление об уровнях абстракции и типах моделей, подходящих для разработки современных пользовательских интерфейсов, однако до сих пор нет единого мнения (стандартов) относительно информации (семантики), которую должны содержать различные модели. Считать базовыми можно модели задач, диалогов и презентации: презентационная модель решает задачи структурирования, планирования и стилизации; модель задач отвечает за привязку к данным — для каждой задачи указываются объекты UI и логики, с которыми предстоит работать; диалоговая модель охватывает поведенческие аспекты. Пример модели задач — Concurrent-TaskTrees (CTT), ее можно использовать совместно с языком MARIA, который реализует остальные модели UI [3]. CTT в сочетании с MARIA представляет собой полноценный модельно-ориентированный инструментарий. Довольно большое семейство средств моделирования UI полагается также на язык UML, модели «сущность-связь» или подобные. Профили UML широко применяются в построении пользовательских интерфейсов бизнес-приложений. Существуют и другие активно используемые инструментарии — например, WebRatio, UMLi, Intellium Virtual Enterprise и SOLoist.

Обобщенные пользовательские интерфейсы

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

Тенденции и сложности

На рисунке представлена хронология появления различных инструментариев разработки UI, распределение их по категориям и основным областям применения, а в табл. 2 указаны способы, которыми каждая из технологий решает различные задачи разработки UI.

Рис. 1. Хронология развития технологий разработки пользовательских интерфейсов; отмечен переход от императивных API, привязанных к конкретным технологиям, стандартам и декларированию
S — на основе стандартов, C — на основе специализированных технологий, D — полностью или большей частью декларативные методы, I — полностью или большей частью императивные методы.
Таблица 2. Решение различных задач разработки UI в рамках разных подходов

Для веб-разработки с целью развития общеупотребительных технологий характерны две противоположные тенденции. После технологий на основе шаблонов появились инструментарии с объектно-ориентированными API, которые чаще всего дополнялись шаблонами (в случае гибридных подходов) либо полностью заменяли их (GWT и Vaadin). В принципе, это вполне логично, учитывая общее превосходство объектно-ориентированных языков над шаблонными (наследование, полиморфизм, инкапсуляция, параметризация, многократное использование и т. д.), потребность в развитых концепциях и механизмах для составления обширных структур UI, а также «историю успеха» объектно-ориентированных API в эпоху настольных ПК.

Примечательно, что по сравнению с императивными и объектно-ориентированными способами формирования UI сегодня стали шире применяться декларативные — например, общеупотребительными становятся HTML, XML, XPath, CSS, JSON и подобные нотации. Большая часть структуры UI, как правило, статична, так что декларативные нотации отлично справляются с задачами структурирования, планировки и привязки к данным. Но поведенческие аспекты UI по-прежнему реализуются по классической событийно-зависимой парадигме, хотя есть исключения — когда применяются декларативные средства.

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

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

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

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

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

Особенности проектирования «инфографичных» пользовательских интерфейсов программных приложений для универсальной платформы Windows (UWP)

В процессе создания сложных технических систем и порождаемых в них технических средах в деятельности операторов наблюдается тенденция «очеловечивания» техники. Работа с техническими устройствами сопровождается появлением у пользователей чувства присутствия. Пользователь в ходе взаимодействия с техническими устройствами используют только ту часть устройства, которая доступна его интерпретациям. По мере развития технических устройств и опыта взаимодействия с техническими устройствами у пользователя растет чувство присутствия. Создается иммерсивная среда — любая искусственная физическая или виртуальная среда в её единстве с включенным, погруженным в неё субъектом [80].

Новые принципы проектирования

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

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

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

Рисунок 40 Использование типографской сетки и иерархии в пользовательском интерфейсе.

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

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

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

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

Принцип естественной цифровой среды при проектировании пользовательских интерфейсов предусматривает переход к «инфогра- фичности» (рис. 416) взамен используемой ранее «иконографичности» (рис. 41а). Внедрение принципа «инфографики» означает предоставление пользователю только той информации, которая ему необходима, и исключение информации, которая отвлекает пользователя.

Рисунок 41 «Иконографика» и «инфографика»

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

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

Читайте также:

  1. Intel Smart Memory Access
  2. Microsoft Access.
  3. V. Основные методы проектирования ИС
  4. Автоматизация инвестиционного проектирования
  5. Автоматизированная разработка планов
  6. Анализ обеспеченности предприятия основными средствами производства
  7. В.3. Разработка бюджета маркетинга
  8. Вопрос 4. Принцип разрешения международных споров мирными средствами
  9. Генерация Web-страниц визуальными средствами Microsoft Access
  10. ДИЗАЙН — ПРОЕКТИРОВАНИЯ
  11. ЕКСПОРТ ОБ’ЄКТІВ БД ACCESS
  12. Задачи дискретной оптимизации, решение средствами MS Excel

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

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

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

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

• в меню Вид выбрать команду Панели инструментов, а затем подкоманду Настройка;

• на вкладке Панели инструментов нажать кнопку [Создать];

• в поле Панель инструментов ввести необходимое имя и на­жать кнопку [ОК];

• на вкладке Панели инструментов нажать кнопку [Свойства];

• установить требуемые свойства и нажать кнопку [Закрыть].

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

• добавить кнопки из диалогового окна Настройка;

• переместить или скопировать кнопку с другой панели инст­рументов.

1. К панели инструментов можно добавить меню пользователя.

2. Панели инструментов, содержащие кнопки, запускающие суще­ствующие макросы, создаются автоматически. Специальную панель ин­струментов можно присоединить к форме или отчету.

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

• в меню Вид выбрать команду Панели инструментов и подко­манду Настройка;

• на вкладке Панели инструментов нажать кнопку [Создать];

• в поле Панель инструментов ввести имя и нажать кнопку [ОК];

• на вкладке Панели инструментов нажать кнопку [Свойства];

• в поле со списком Тип выбрать пункт Контекстное меню;

• установить или снять флажок [Настройка] и нажать кнопку [Закрыть].

После выполнения указанных операций контекстное меню бу­дет добавлено на панель инструментов.

Итак, мы рассмотрели некоторые общие приемы построения систем меню при разработке пользовательского интерфейса. Те­перь дадим некоторые практические рекомендации.

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

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

Примеры форм-заставок с ниспадающим и кнопочным меню приведены на рис. 9.1.

Создание ниспадающего меню можно организовать в виде оп­ределенной последовательности макросов.

На рис. 9.2 показан макрос Новое меню, заменивший традици­онное меню системы Access. Макрос Новое меню состоит из следу­ющих пунктов: Ведение баз данных, Маршрут обработки, Операци­онная технология, Потребность в материалах, О системе.

Для каждого из пунктов Нового меню разрабатывается соответ­ствующий макрос, устанавливающий состав подменю следующе­го уровня. На рис. 9.3 показан макрос Меню_Заполнение базы дан­ных, устанавливающий состав подменю для пункта Ведение базы данных. Данный макрос состоит из трех макрокоманд, каждая из которых запускает соответствующий макрос. Назначение каждого запускаемого на выполнение макроса состоит в открытии соот­ветствующей формы ввода данных. Рассмотренным способом можно проектировать многоуровневые меню.

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

На рис. 9.4 показан пример кнопочной формы.

Из приведенных примеров видно, что на поле формы можно вставлять рисунки, которые могут ее «украсить».

На рис. 9.5 для примера показана форма с фотографией.

Дата добавления: 2014-01-07 ; Просмотров: 1585 ; Нарушение авторских прав? ;

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

Тема 3.2 Разработка пользовательских интерфейсов

Тема 3.2 Разработка пользовательских интерфейсов

1. Типы пользовательских интерфейсов и этапы их разработки.

2. Психофизические особенности человека, связанные с восприятием, запоминанием и обработкой информации.

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

4. Классификации диалогов и общие принципы их разработки.

5. Основные компоненты графических пользовательских интерфейсов.

6. Реализация диалогов в графическом пользовательском интерфейсе.

7. Пользовательские интерфейсы прямого манипулирования и их проектирование.

8. Интеллектуальные элементы пользовательских интерфейсов.

На ранних этапах развития вычислительной техники пользовательский интерфейс рассматривался как средство общения человека с операционной системой и был достаточно примитивным.

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

1. Типы пользовательских интерфейсов и этапы их разработки

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

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

Обмен информацией осуществляется передачей сообщений и управляющих сигналов.

Сообщение – порция информации, участвующая в диалоговом обмене.

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

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

Пользователь генерирует сообщения типа:

— запрос операции или функции,

— ввод или изменение информации,

— выбор поля кадра.

Получает в ответ:

— подсказки или справки,

— приказы, требующие действий,

— сообщения об ошибках, нуждающиеся в ответных действиях,

— изменение формата кадра.

Основные устройства, обеспечивающие выполнение операций ввода-вывода.

Для вывода сообщений:

— монохромные и цветные мониторы – вывод оперативной текстовой и графической информации;

— принтеры – получение «твердой копии» текстовой и графической информации;

— графопостроители – получение твердой копии графической информации;

— синтезаторы речи – речевой вывод;

— звукогенераторы – вывод музыки.

Для ввода сообщений:

— клавиатура – текстовый ввод;

— планшеты – графический ввод;

— сканеры – графический ввод;

— манипуляторы, световое перо, сенсорный экран – позиционирование и выбор информации на экране.


Рисунок 1 – Типы интерфейсов

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

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

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

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

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

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

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

— меню различных типов: ниспадающее, кнопочное, контекстное;

— разного рода компоненты ввода данных.

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

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

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

Этапы разработки пользовательского интерфейса. Разработка пользовательского интерфейса включает те же основные этапы, что и разработка программного обеспечения:

— постановка задачи – определение типа интерфейса и общих требований к нему;

— анализ требований и определение спецификаций – определение сценариев использования и пользовательской модели интерфейса;

— проектирование – проектирование диалогов и их реализация в виде процессов ввода-вывода;

— реализация – программирование и тестирование интерфейсных процессов.

2. Психофизические особенности человека, связанные с восприятием, запоминанием и обработкой

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

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

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

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

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

Восприятие во многом основано на мотивации. Например, если человек голоден, то он в первую очередь будет замечать все съедобное, а если устал – то, войдя в комнату, он в первую очередь увидит диван или кровать.

Илон Маск рекомендует:  Псевдокласс optional в CSS

В процессе переработки информации мозг сравнивает поступающие данные с предыдущими.

При смене кадра мозг на некоторое время блокируется: он «осваивает» новую картинку, выделяя наиболее существенные детали. А значит, если необходима быстрая реакция пользователя, то резко менять картину не стоит.

Краткосрочная память – самое «узкое» место «системы обработки информации» человека. Ее емкость приблизительно равна 7+2 несвязанных объектов. Не востребованная информация хранится в краткосрочной памяти не более 30 с.

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

Долговременная память человека – хранилище информации с неограниченной емкостью и временем хранения. Однако доступ к этой информации непрост: по всей вероятности, механизмы извлечения информации из памяти имеют ассоциативный характер. Специальная методика запоминания информации (мнемоника) использует именно это свойство памяти: для запоминания информации ее «привязывают» к тем данным, которые память уже хранит и позволяет легко получить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

— уровнем подготовки в предметной области разрабатываемого программного обеспечения;

— интуитивными моделями выполнения операций в этой предметной области;

— уровнем подготовки в области владения компьютером;

— устоявшимися стереотипами работы с компьютером.

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

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

Рисунок 2 – Процесс проектирования пользовательского интерфейса

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

Критерии оценки интерфейса пользователем. Основные критерии интерфейсов пользователя:

— простота освоения и запоминания операций системы – конкретно оценивают время освоения и продолжительность сохранения информации в памяти;

— скорость достижения результатов при использовании системы – определяется количеством вводимых или выбираемых мышью команд и настроек;

— субъективная удовлетворенность при эксплуатации системы (удобство работы, утомляемость и т. д.).

Наилучшими характеристиками для пользователей-профессионалов обладают интерфейсы со свободной навигацией, а для пользователей-непрофессионалов – интерфейсы прямого манипулирования. Замечено, что при выполнении операции копирования файлов большинство профессионалов используют оболочки типа Far, а непрофессионалы – «перетаскивание объектов» Windows.

4. Классификация диалогов и общие принципы их разработки

Типы диалога. Тип диалога определяет, кто из «собеседников» управляет процессом обмена информацией.

Различают два типа диалога:

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

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

Форма диалога. Никакой диалог невозможен, если не существует языка, понятного «собеседникам». Описание языка, на котором ведется диалог, включает определение его синтаксиса – правил, определяющих допустимые конструкции (слова, предложения) языка или его форму, и семантики – правил, определяющих смысл синтаксически корректных конструкций языка или его содержание.

Различают три формы диалога:

Фразовая форма предполагает «общение» с пользователем на естественном языке или его подмножестве. Содержание диалога составляют повелительные, повествовательные и вопросительные предложения и ответы на вопросы.

Чаще всего используют диалоги, предполагающие односложные ответы.

Программа: Введите свой возраст (полных лет):

При обработке фраз оперируют понятием словоформа.

Словоформа – отрезок текста между двумя соседними пробелами или знаками препинания.

Морфологический анализ — обработка словоформ вне связи с контекстом.

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

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

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

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

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

Недостатки фразовой формы:

— большие затраты ресурсов;

— отсутствие гарантии однозначной интерпретации формулировок;

— необходимость ввода длинных грамматически правильных фраз.

Достоинство фразовой формы – свободное общение с системой.

Директивная форма — использование команд (директив) специально разработанного формального языка.

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

Команду можно вводить:

— в виде строки текста, специально разработанного формата (команды MS DOS в командной строке);

— нажатием некоторой комбинации клавиш (комбинации «быстрого доступа» Windows-приложений);

— посредством манипулирования мышью («перетаскиванием» пиктограмм);

— комбинацией второго и третьего способов.

Достоинства директивной формы:

— небольшой объем вводимой информации;

— гибкость – возможности выбора операции, ограничивается набором допустимых команд;

— ориентация на диалог, управляемый пользователем;

— использование минимальной области экрана или не использование ее вообще;

— возможность совмещения с другими формами.

Недостатки директивной формы:

— практическое отсутствие подсказок на экране, что требует запоминания вводимых команд и их синтаксиса;

— почти полное отсутствие обратной связи о состоянии инициированных процессов;

— необходимость навыков ввода текстовой информации или манипуляций мышью;

— отсутствие возможности настройки пользователем.

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

Табличная форма – пользователь выбирает ответ из предложенных программой. Язык диалога имеет простейший синтаксис и однозначную семантику, что достаточно легко реализовать. Форма удобна для пользователя, так как выбрать всегда проще, что существенно для пользователя-непрофессионала. Эту форму можно использовать, если множество возможных ответов на конкретный вопрос конечно. Если количество возможных ответов велико (более 20), то применение табличной формы может оказаться нецелесообразным.

Достоинства табличной формы:

— сокращение количества ошибок ввода: пользователь не вводит информацию, а указывает на нее;

— сокращение времени обучения пользователя;

— возможность совмещения с другими формами;

— в некоторых случаях возможность настройки пользователем.

Недостатки табличной формы:

— необходимость наличия навыков навигации по экрану;

— использование сравнительно большой площади экрана для изображения визуальных компонентов;

— интенсивное использование ресурсов компьютера, связанное с необходимостью постоянного обновления информации на экране.

Типы и формы диалога выбирают независимо друг от друга: любая форма применима для обоих типов диалогов.

Синхронные — диалоги, происходящие в процессе нормальной работы программного обеспечения.

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

Разработка диалогов. Стадии проектирования и реализации диалогов:

— определение множества необходимых диалогов, их основных сообщений и возможных сценариев – проектирование абстрактных диалогов;

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

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


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

Кроме сценариев используют диаграммы состояний интерфейса или графы диалога.

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

Каждый маршрут на графе соответствует возможному варианту диалога.

Рисунок 3 – Графы абстрактного диалога:

а – диалог, управляемый системой; б – диалог, управляемый пользователем

5. Основные компоненты графических пользовательских интерфейсов

Графические пользовательские интерфейсы поддерживаются операционными системами Windows, Apple Macintosh, OS/2 и т. д. Для таких интерфейсов разработаны наборы стандартных компонентов взаимодействия с пользователем для каждой операционной системы.

Интерфейсы строятся по технологии WIMP: W – Windows (окна), I – Icons (пиктограммы), M – Mouse (мышь), P — Pop-up (всплывающие или выпадающие меню). Основные элементы графических интерфейсов: окна, пиктограммы, комноненты ввода-вывода и мышь, которую используют в качестве указующего устройства и устройства прямого манипулирования объектами на экране.

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

5 категорий окон:

— основные окна (окна приложений);

— дочерние или подчиненные окна;

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

Дочернее окно Windows используют в многодокументных программных интерфейсах (MDI). Это окно не содержит меню. В строке заголовка – специальное имя, идентифицирующее связанный с ним документ или файл. Пиктограммы всех дочерних окон одинаковы.

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

Оно может содержать:

— строку заголовка с кнопкой системного меню;

— компоненты, обеспечивающие пользователю возможность ввода или выбора ответа;

— вспомогательные компоненты, обеспечивающие подсказку (поле просмотра или кнопка справки).

Размер окна не изменяем, но по экрану его можно перемещать.

Информационные окна двух типов:

Окна сообщений содержат: заголовок с кнопкой системного меню, текст сообщения, одна или несколько кнопок реакции пользователя (Yes, No, Cancel).

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

Окна меню Windows используют как открывающиеся панели иерархического меню или как контекстные меню.

Каждой строке окна меню может соответствовать:

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

— окно диалога, что обозначается тремя точками.

Добавляется указание клавиш быстрого вызова.

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

— программные, связанные с соответствующей программой;

— пиктограммы дочерних окон, обеспечивающие доступ к различным документам;

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

— пиктограммы объектов, для прямого манипулирования объектами.

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

По реакции на воздействие различают типы адресатов:

— указание и выбор (развертывание пиктограмм, определение активного окна);

— буксировка и «резиновая нить» (перенос объекта или его границ);

— экранные кнопки и «скользящие» барьеры (выполнение или циклически повторяемых действий (выполнение некоторых операций или рисование, подразумеваемых при активизации определенной области экрана — кнопки)).

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

Компоненты ввода-вывода. Интерфейсы включают несколько меню: основное или «ниспадающее» иерархическое меню, пиктографические меню (панели инструментов) и контекстные меню для разных ситуаций. Любое из указанных меню представляет собой компонент ввода-вывода, реализующий диалог с пользователем, используя табличную форму.

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

Другие формы ввода-вывода:

6. Реализация диалогов в графическом пользовательском интерфейсе

Диалоги обоих типов:

Реализация диалогов, управляемых пользователем. Для реализации применяют меню различных видов:

— контекстные и кнопочные.

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

Меню. Меню проектируют на основе графов диалогов разрабатываемого программного обеспечения. Если число операций не превышает 5, то обычно используют кнопки. Если число операций не более 9-10, то – одноуровневое меню. Если число операций более 10, то используют «ниспадающее» двухуровневое иерархическое меню.

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

Традиционно (обычно в текстовых и графических редакторах):

последний пункт Справка.

Количество уровней иерархического меню не должно превышать 2-3 (сложно искать). Число операций в окне не должно превышать7-8 операций.

Если число операций превышает 70-80. Разработчики Microsoft Word предложили адаптивное иерархического меню, где содержимое окна меню второго уровня постоянно меняется, отображая только те операции, которые использует пользователь. Если пользователь не находит нужной операции, то через несколько секунд или при нажатии специальной кнопки Word демонстрирует окно меню полностью.

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

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

Интерфейсы используют директивную форму диалога: ввод команды осуществляется при выполнении определенных действий с пиктограммой объекта мышью. Основными элементами этих интерфейсов являются: метафоры, объекты, представления объектов и технологии Drag and Drop («перетащил и бросил»).

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

Интерфейс прямого манипулирования должен обеспечить пользователю среду, содержащую знакомые элементы, с которыми пользователь не раз встречался в профессиональной деятельности или в быту, и предоставлять ему возможность манипулирования отдельными объектами. (Метафора “Выбрасывание мусора” — для удаления файлов).

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

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

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

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

Объекты интерфейса прямого манипулирования и их представления.

Три основные типа объектов интерфейсов прямого манипулирования:

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

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

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

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

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

Различие между типами объектов является условным, так как один и тот же объект в разных ситуациях может вести себя то, как объект-данные, то, как объект-устройство, то, как объект-контейнер (принтер – объект-устройство, может обладать свойства объекта-контейнера, может содержать объекты-данные в очереди на печать; представление в виде пиктограммы, окна очереди на печать, окна настроек; имя представления целесообразно указывать в заголовке окна объекта).

Технология Drag and Drop. Основные принципы прямого манипулирования, описанные в руководстве по разработке пользовательских интерфейсов фирмы IBM:

— результат перемещения объекта должен соответствовать ожиданиям пользователя;

— пользователи не должны неожиданно терять информацию;

— пользователь должен иметь возможность отменить неправильное действие.

Основные принципы визуализации операции прямого манипулирования:

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

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

— целевое выделения – используется для идентификации пункта назначения, показывая, таким образом, куда «упадет» объект, если его отпустить в текущий момент времени;

— визуализация действия – используется для обозначения времени ожидания завершения операции, обычно с этой целью применяют анимацию или изменение формы курсора на «песочные часы».

Существует два вида пунктов назначения: один принимает объект, а другой его копию (Пользователь «бросает» документ в «корзину» – уничтожается сам документ, а если на принтер, то передается копия документа).

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

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

— анализ объектов, определение их типов и представлений, а также перечня операций с этими объектами;

— уточнение взаимодействия объектов и построение матрицы прямого манипулирования;

— определение визуальных представлений объектов;

— разработка меню окон объектов и контекстных меню;

— создание прототипа интерфейса;

— тестирование на удобство использования.

8 Интеллектуальные элементы пользовательских интерфейсов

Элементы пользовательских интерфейсов: Мастер, Советчик, Агент. Сделано множество попыток создания социализированного пользовательского интерфейса. В основе такого интерфейс лежит идея создания персонифицированного, т. е. «имеющего личность», интерфейса. Развлекающие программы, такие как Cats(кошки) и Dogs(собаки), реализующие сложное поведение домашних животных в разных ситуациях, показывают, что технически это вполне решаемая задача.

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

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

Мастер реализует последовательный или древовидный сценарий диалога. Его целесообразно использовать для решения хорошо структурированных, последовательных задач.

При этом необходимо:

— предоставить пользователю возможность возврата на предыдущий шаг;

— предусмотреть возможность отмены работы Мастера;

— нумеровать шаги и сообщать пользователю количество шагов Мастера, особенное, если таких шагов больше трех;

— пояснить пользователю каждый шаг;

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

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

программы-агенты, настраиваемые на выполнение указанных задач;

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

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

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

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

В литературе не существует единой общепринятой классификации средств для разработки пользовательского интерфейса. Так, программное обеспечение для разработки пользовательского интерфейса можно разделить на две основные группы — инструментарий для разработки пользовательского интерфейса (toolkits) и высокоуровневые средства разработки интерфейса (higher-level development tools). Инструментарий для разработки пользовательского интерфейса, как правило, включает в себя библиотеку примитивов компонентов интерфейса (меню, кнопки, полосы прокрутки и др.) и предназначен для использования программистами. Высокоуровневые средства разработки интерфейса могут быть использованы непрограммистами и снабжены языком, который позволяет специфицировать функции ввода-вывода, а также определять, используя технику непосредственного манипулирования, интерфейсные элементы. К таким средствам относятся построители диалога (interface builders) и СУПИ — системы управления пользовательским интерфейсом (User Interface Management Systems — UIMS). Помимо СУПИ, некоторые авторы используют такие термины, как User Interface Development Systems (UIDS) — системы разработки пользовательского интерфейса, User Interface Design Environment (UIDE) — среда разработки пользовательского интерфейса и др.

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

1. Языковой, когда применяются специальные языки для задания синтаксиса интерфейса (декларативные, объектно-ориентированные, языки событий и др.).

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

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

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

Основной концепцией СУПИ является отделение разработки пользовательского интерфейса от остального приложения. В настоящее время идея раздельного проектирования интерфейса и приложения либо закреплена в определении СУПИ либо является основным его свойством.

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

Функциями СУПИ является содействие и облегчение разработки и сопровождения пользовательского интерфейса, а также управление взаимодействием между пользователем и прикладной программой.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL