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

Размещено на http://www.allbest.ru/

Лабораторная работа №1. Разработка пользовательского интерфейса: этапы предварительного и высокоуровневого проектирования

1. Цели работы

Целями лабораторной работы являются:

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

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

2. Краткие теоретические сведения

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

Наиболее общий шаблон профиля содержит в себе следующие разделы:

социальные характеристики;

навыки и умения работы с компьютером;

мотивационно-целевая среда;

рабочая среда;

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

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

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

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

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

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

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

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

не используют в названиях разделов фраз (желательно не больше 2 слов);

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

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

названия разделов меню, к которым относятся каскадные меню, заканчивают стрелкой;

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

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

допускают использовать включение в меню пиктограмм;

измененным цветом показывают недоступность некоторых разделов меню в ходе работы с приложением;

допускают делать недоступные разделы невидимыми.

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

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

3. Задание на лабораторную работу

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

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

4. Порядок выполнения работы

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

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

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

Таблица 1

Пользователи	Менеджер по направлению товара	Представители обслуживающего персонала
Социальные характеристики	Мужчины, женщины Взрослые Русскоязычные Средний уровень владения компьютером	Женщины Взрослые Русскоязычные Низкий уровень владения компьютером
Мотивационно целевая среда	Прямая производственная необходимость, удобство Мотивация к обучению высокая	Производственная необходимость, Престиж Мотивация к обучению низкая
Навыки и умения	Должны иметь значительный тренинг работы с программой	Прошли предварительный тренинг работы с программой
Требования к ПО ИС	Возможность использования ПО ИС в локальной сети Отсутствие жестких ограничений по времени Обеспечение текущей информацией по содержанию заказов Обеспечение текущей информацией по товарам Возможность проводить обобщение информации по заказам	Возможность использования программы одновременно с телефонным общением с клиентом Время реакции ПО ИС, допустимое для ожидания клиента Обеспечение текущей информацией по содержанию заказов Обеспечение текущей информацией по товарам Возможность формирования новых заказов
Задачи пользователя	Просмотр/фильтрация информации по заказам/клиентам/товарам Сортировка информации по заказам/клиентам/товарам Агрегирование информации по заказам/клиентам/товарам	Просмотр данных по товарам Создание/поиск/модификация заказа Сохранение/печать заказа Формирование счета по заказу
Рабочая среда	Стандартизированные ПК, локальная сеть	Стандартизированные ПК, специализированное телефонное обслуживание

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

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

создать новый заказ (1);

сложный поиск заказа (2);

редактирование заказа (3);

добавление клиента из списка клиентов в заказ (4);

ввод/редактирование клиента в списке клиентов (5);

выбор товара из списка товаров (6);

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

просмотр подробных данных о товаре (8);

добавление товара из списка товаров в заказ (9);

сохранение заказа (10);

печать заказа (11);

формирование счета (12).

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

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

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

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

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

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

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

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

по заказам (функции 1,2,3,4,9,10,11,12): по общему журналу заказов и по конкретному (текущему) заказу;

по клиентам (функции 4,5): по списку клиентов в целом и по конкретному клиенту;

по товарам (функции 6,7,8,9): по списку товаров и по данному товару подробно.

Таким образом, можно вести речь о наличии в приложении трех функциональных блоков и шести экранных форм:

Журнал заказов;

Текущий заказ;

Список клиентов;

Карта клиента;

Список товаров;

Карта товара.

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

Размещено на http://www.allbest.ru/

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

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

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

создать новый заказ;

задать атрибуты поиска заказа;

найти заказ по текущим атрибутам поиска;

открыть текущий заказ на редактирование;

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

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

просмотреть список клиентов;

выбрать клиента из списка клиентов;

добавить атрибуты текущего клиента к поиску заказа;

ввести данные нового клиента в текущий заказ;

редактировать данные текущего клиента в списке клиентов;

добавить текущего клиента в текущий заказ;

сохранить данные о текущем клиенте;

просмотреть список товаров;

задать атрибуты поиска товаров;

найти товар по текущим атрибутам;

выбрать товар из списка товаров;

просмотреть подробные данные текущего товара;

добавить атрибуты текущего товара к поиску заказа;

редактировать данные по текущему товару в текущем заказе;

добавить данные текущего товара в текущий заказ;

сохранить текущий заказ;

распечатать информацию по текущему заказу;

сформировать счет по текущему заказу.

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

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

1.Действия над объектами. В качестве объектов выступают заказ, клиент, товар (таблица 2).

Таблица 2 Группа Действия

Действия	Объект	Примечания
Создать	Заказ Клиент	1 10
Открыть	Заказ Клиент Товар	4 11 18
Сохранить	Заказ Клиент	22 13
Выбрать (отобрать для добавления)	Клиент Товар Атрибуты клиента Атрибуты товара	12 (в заказ) 21 (в заказ) 9 (к поиску) 19 (к поиску)
Печать	Заказ	23
Счет	Заказ	24

2. Поиск. Специфическое действие, выделено отдельно; объекты - заказ (3), товар (16).

3. Работа со списками. Объекты - клиент, заказ (таблица 3).

Таблица 3 Списки

Списки	Операции	Примечания
Клиенты	Просмотреть Открыть для выбора (добавления) в заказ	7 5
Товары	Просмотреть Открыть для выбора (добавления) в заказ	14 6

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

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

Рассмотрим состояния меню для приведенного примера.

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

Таблица 4 Журнал заказов (состояние М1)

Действия	Поиск	Списки
Создать (1) Открыть (4) Сохранить Выбрать Печать Счет	Найти (3)	Клиенты (7) Товары (14)

Таблица 5 Текущий заказ (состояние М2)

Действия	Поиск	Списки
Создать Открыть Сохранить (22) Выбрать Печать (23) Счет (24)		Клиенты (5) Товары (6)

Таблица 6 Список клиентов (состояние М3, переход по команде 7)

Действия	Поиск	Списки
Создать (10) Открыть (11) Сохранить Выбрать (9) Печать Счет

Таблица 7 Список клиентов (состояние М4, переход по команде 5)

Действия	Поиск	Списки
Создать (10) Открыть (11) Сохранить Выбрать (12) Печать Счет

Таблица 8 Карта клиента (состояние М5)

Действия	Поиск	Списки
Создать Открыть Сохранить Выбрать (13) Печать Счет

Таблица 9 Список товаров (состояние М6, переход по команде 14)

Действия	Поиск	Списки
Создать Открыть (18) Сохранить Выбрать (19) Печать Счет	Найти (16)

Таблица 10 Список товаров (состояние М7, переход по команде 6)

Действия	Поиск	Списки
Создать Открыть (18) Сохранить Выбрать (21) Печать Счет	Найти (16)

Таблица 11 Карта товара (состояние М8)

Действия	Поиск	Списки

Граф состояний меню можно представить следующим образом (рисунок 2).

Размещено на http://www.allbest.ru/

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

5. Требования к оформлению отчета

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

название и цели работы;

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

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

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

описание структуры главного меню приложения;

граф состояний меню;

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

общие выводы, сделанные в процессе выполнения лабораторной работы.

Лабораторная работа №2. Низкоуровневое проектирование интерфейса: количественная оценка и построение прототипа

1. Цели работы

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

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

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

Закрепить принципы обоснования выбора прототипа интерфейса по его количественной оценке.

2. Краткие теоретические сведения

Для анализа качества интерфейсов используется множество количественных и эвристических методов. Одним из лучших подходов к количественному анализу моделей интерфейсов является классическая модель GOMS (goals, objects, methods and selection rules).

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

Таблица 1

Нажатие клавиши клавиатуры, включая клавиши Alt, Ctrl, Shift	0,28 с	К
Нажатие клавиши мыши	0,1 с	М
Указание - перемещение курсора мыши, чтобы указать какую-либо позицию на экране монитора	1,1 с	П
Перемещение- перенос руки пользователя с клавиатуры на мышь или обратно	0,4 с	В
Ментальная подготовка - мысленный выбор пользователем своего следующего элементарного действия	1,2	Д
Ответ - реакция системы на элементарное действие пользователя	-	Р

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

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

Таблица 2

Правило 0 Начальная расстановка операторов Д	Операторы Д следует устанавливать перед всеми операторами К и М (нажатие клавиши), также перед всеми операторами П, предназначенными для выбора команд. Но перед операторами П, предназначенными для указания на аргументы этих команд, ставить оператор Д не следует.
Правило 1 Удаление ожидаемых операторов Д	Если оператор, следующий за оператором Д, является полностью ожидаемым с точки зрения оператора, предшествующего Д, то этот оператор Д может быть удален. Если пользователь перемещает мышь с намерением нажать на ее кнопку по достижении цели движения, то в соответствии с этим правилом следует удалить оператор Д, установленный по правилу 0. Так последовательность действий П Д К преобразуется в П К.
Правило 2 Удаление операторов Д внутри когнитивных единиц	Если строка Д К Д К Д К… принадлежит когнитивной единице, то следует удалить все операторы Д, кроме первого. Когнитивной единицей является непрерывная последовательность вводимых символов, которые образуют название команды или аргумент. Например Y, перемещать, 4564.23 - это когнитивные единицы.
Правило 3 Удаление операторов Д перед последовательными разделителями	Если оператор К означает лишний разделитель, стоящий в конце когнитивной единицы (например, разделитель команды, следующий сразу за разделителем аргумента этой команды), то следует удалить оператор Д , стоящий перед ним.
Правило 4 Удаление операторов Д, которые являются прерывателями команд	Если оператор К является разделителем, стоящим после постоянной строки (например, название команды или любая последовательность символов, которая каждый раз вводится в неизменном виде), то следует удалить оператор Д, стоящий перед ним. (Добавление разделителя станет привычным действием, и поэтому разделитель станет частью строки и не будет требовать специального оператора Д.) Но если оператор К является разделителем строки аргументов или любой другой изменяемой строки, то оператор Д следует сохранить перед ним.
Правило 5 Удаление перекрывающих операторов Д	Любую часть оператора Д, которая перекрывает оператор Р, означающий задержку, связанную с ожиданием ответа компьютера, учитывать не следует.

В этих правилах под строкой понимается некоторая последовательность символов.

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

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

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

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

Информация измеряется в битах. Один бит представляет собой один из двух альтернативных вариантов (0 или 1; да или нет) и является единицей информации. При количестве n равновероятных вариантов суммарное количество передаваемой информации определяется как log2n

Количество информации для каждого варианта определяется как

(1/n)log2n (1)

Если вероятности для каждой альтернативы не являются равными и i-я альтернатива имеет вероятность p(i), то информация, передаваемая этой альтернативой определяется как

p(i)log2(1/p(i)) (2)

Общее количество информации является суммой по всем вариантам выражений (1) или (2)

При использовании мыши в качестве устройства ввода информации, количество информации оценивают подобным же образом. Если экран поделен на две равные области: одна соответствует «да», а вторая соответствует «нет», то щелчок мыши в одной из этих областей будет передавать 1 бит информации. Если имеется n равновероятных объектов, то нажатием на один из них сообщается log2n бит информации. Если объекты имеют разные вероятности, используется сумма значений количества информации, полученные по формуле (2).

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

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

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

3. Задание на лабораторную работу

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

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

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

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

4. Порядок выполнения работы

Рассмотрим пример с разработкой пользовательского интерфейса приложения создаваемого для мелкой фирмы (лабораторная работа №1). Программное обеспечение предполагает наличие справочников:

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

2) со списком товаров, реализуемых фирмой. Пользователь не может вносить в него изменений.

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

Основные экранные формы известны из результата выполнения лабораторной работы №1:

Журнал заказов;

Текущий заказ;

Список клиентов;

Карта клиента;

Список товаров;

Карта товара.

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

создать новый заказ;

задать атрибуты поиска заказа;

найти заказ по текущим атрибутам поиска;

открыть текущий заказ на редактирование;

просмотреть список клиентов;

просмотреть список товаров;

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

Выполним на примере первой из операций, связанной с созданием нового заказа, расчет времени по правилам GOMS.

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

перемещение руки к мыши, В;

указание на раздел меню Действия, П;

нажатие клавиши мыши, М;

указание на команду Создать, П;

нажатие клавиши мыши, М.

В соответствии с правилом 0 расстановки ментальных операторов Д получим следующую последовательность операторов

В Д П Д М Д П Д М

В соответствии с правилом 1 следует удалить ожидаемые операторы Д

В Д П М Д П М

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

0,4+1,2+1,1+0,1+1,2+1,1+0,1=5,2 с.

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

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

перемещение руки к мыши, В;

указание на командную кнопку Создать, П;

нажатие клавиши мыши, М.

При расстановке операторов Д здесь также используются правила 0 и 1. Результирующая последовательность выглядит как

В Д П М

Общее время на выполнение операции составляет

0,4+1,2+1,1+0,1=2,8 с.

Это почти в 2 раза быстрее, чем предыдущий вариант выполнения команды.

При использовании «горячих» клавиш, например традиционного для создания нового объекта сочетания клавиш Ctrl+N, операция состоит из следующих действий:

перемещение руки к клавиатуре, В;

нажатие клавиши Ctrl, К;

нажатие клавиши N, К.

Согласно правилу 0 получаем последовательность операторов

В Д К Д К

Правило 1 в данном случае не работает, зато используется правило 2, согласно которому удаляются операторы Д внутри когнитивных единиц, каковой является комбинация клавиш Ctrl+N. Результирующая последовательность представлена как

В Д К К

Это соответствует времени

0,4+1,2+20,28=2,16 с.

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

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

перейти к первой записи;

перейти к предыдущей записи;

перейти к следующей записи;

перейти к последней записи.

Рассмотрим оба этих варианта.

При использовании клавиш клавиатуры имеем:

перемещение руки к клавиатуре, В;

нажатие клавиши Home, К;

нажатие n раз клавиши ,К.

Результирующая последовательность операторов

В Д К Д К Д К Д К…

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

0,4+1,2+0,28+n(1,2+0,28)=1,88+n1,68 с.

При использовании командных кнопок навигации получим:

перемещение руки к мыши, В;

нажатие кнопки Перейти к первой записи, М;

нажатие n раз кнопки Перейти к следующей записи, М.

Результирующая последовательность составляется аналогичным образом

В Д П М Д П М Д М Д М…

Расчет по времени

0,4+1,2+1,1+0,1+1,2+1,1+0,1+(n-1)(1,2+0,1)=5,2+(n-1)1,3 с

В зависимости от расположения нужной записи в журнале (значения n) предпочтительным может оказаться тот или иной вариант.

Гораздо проще для пользователя вариант с использованием техники прямого манипулирования, с использованием скроллинга - прокрутки. Рассмотрим, какие шаги должен выполнить пользователь в этом случае:

перемещение руки к мыши, В;

указание на область прокрутки, П;

нажатие клавиши мыши, М;

прокручивание скроллинга, С;

указание на нужную запись списка, П;

нажатие на клавиатуру мыши, М.

Здесь необходимо дать некоторые пояснения. При выполнении шага (3), осуществляется нажатие на клавишу мыши и ее удерживание. Время, поставленное в соответствие оператору М, учитывает как нажатие, так и отпускание клавиши, поэтому шаг (3) реально выполняется за 0,05 с (М/2). Но тогда после выполнения шага (4), необходимо учесть время, требуемое для отпускания клавиши мыши, что составляет 0,05 с (М/2). В приведенной выше последовательности действий, нажатие и отпускание мыши объединено в один шаг. Такое объединение становится возможным, потому что, согласно правилу 1 в последовательности (М/2) С (М/2) операторы Д не вставляются.

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

Результирующая последовательность операторов выглядит как В Д П М С Д П М

Это соответствует оценке времени 0,4+1,2+1,1+0,1+3+1,2+1,1+0,1=8,2 с.

При «удачном» расположении записи в журнале, пользователю вообще не придется работать с прокруткой. Последовательность операторов его действий будет выглядеть как В Д П М что составляет по времени 2,8 с.

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

Аналогичные рассуждения можно привести относительно других операций.

Примерный вид экранной формы Журнал заказов приведен на рисунке 1.

Рисунок 1 Экранная форма Журнал заказов

Рассмотрим, каким образом дается оценка производительности элементов интерфейса данной формы. В качестве примера выберем предложенную реализацию для операции поиска по данным справочников. Предусмотрено два варианта справочников: клиентов и товаров. Причем, для задания атрибутов поиска предполагается выполнять переход к формам этих справочников. В начальном прототипе формы переход осуществлялся путем нажатия на командную кнопку Просмотреть или командную кнопку Найти. Будем считать равновероятным выбор одного из двух справочников; вероятность использования кнопки Просмотреть оценим в 30% (p=0,3), кнопки Найти - 70% (p=0,7). Вероятности различных вариантов составят:

выбор клиента по кнопке Просмотреть - 0,50,3=0,15;

выбор товара по кнопке Просмотреть - 0,50,3=0,15;

выбор клиента по кнопке Найти- 0,50,7=0,35;

выбор товара по кнопке Найти- 0,50,7=0,35.

Информационное содержание рассматриваемого фрагмента интерфейса как

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

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

Информационная производительность

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

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

5. Требования к оформлению отчета

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

название и цели работы;

внешний вид разработанных экранных форм с описанием навигации по ним;

описание навигации по приложению с использованием элементов управления на спроектированных формах;

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

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

при необходимости скорректированные формы;

общие выводы, сделанные в процессе выполнения лабораторной работы.

Лабораторная работа № 3. Проектирование справочной системы

Цель работы: изучение методики создания файлов справочной системы Windows (*.hlp) при разработке приложений.

Краткие теоретические сведения.

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

Создание файлов или нескольких файлов, содержащих темы справок, например, с помощью Microsoft Word.

Компиляция справки в файл и отладка всей справочной системы, с помощью специальных программ, например, HCRTF - Microsoft Help Workshop.

При создании справочной системы необходимо в первую очередь продумать систему в целом. А именно решить следующие вопросы:

об информации, выносимой в основное, дополнительное, всплывающие окна;

о включении разделов в предметный указатель и окно содержания;

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

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

При создании файлов тем справок можно использовать текстовый редактор Microsoft Word, созданный файл должен сохраняться в формате RTF.

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

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

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

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

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

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

{bmc имя файла }- размещение рисунка как обычного символа по ходу текста;

{bml имя файла} - размещение рисунка с левой стороны;

{bmr имя файла } - размещение рисунка с правой стороны.

Темы могут содержать горячие области: выделенные слова или кнопки, позволяющие пользователю выполнять переход от одной темы к другой. Кнопка вставляется командой {button надпись, список макросов}. В этой команде указывается текст надписи, которая будет присутствовать на изображаемой кнопке, а также перечень макросов, выполняемых при ее нажатии. Рассмотрение всего множества макросов, которые можно использовать при проектировании справочной системы выходит за рамки данной лабораторной работы. Описание этих макросов можно получить в файле hcw.hlp .

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

Таблица 1

Символ сноски	Назначение сноски
	Обозначает уникальный идентификатор темы. По нему на данную тему могут ссылаться другие темы. Этому идентификатору ставится в соответствие номер, по которому на данную тему ссылается использующее справку приложение.
K	Позволяет отображать тематику кадра в предметном указателе. Название темы в предметном указателе представляет собой текст сноски K. Для одного кадра можно ввести несколько обозначений, разделяемых точкой с запятой. Пример KОбъект Поле; Объекты В предметном указателе две строки «Объект Поле» и «Объекты» будут вызывать один и тот же кадр. Можно сформировать двух уровневые ссылки: темы первого и второго уровня разделяются запятой. Пример KОбъект Поле, Создание; Объект Поле, Ввод данных; Объект Поле, Модификация свойств Кроме того, элементы, указанные в сносках K, используются при организации переходов между темами переход по ключевым словам (с помощью макроса Klink)
$	Определяет заголовок данной темы, используется в некоторых режимах работы, например, Поиск, Назад и др. Например, если указанное пользователем ключевое слово соответствует нескольким темам, то от пользователя требуется уточнение. В этом случае появляется окно Найденные разделы. В нем отображается текст сносок $. Поэтому сноски $ включают только в те кадры, которые имеют в своих сносках K элементы Klink, используемые в сносках K других кадров.
A	Используется для организации перехода по ключевым словам (с помощью макроса Alink)
+	Используется для указания последовательности просмотра тем. Включаются в кадр только тогда, когда соответствующие кнопки (кнопки Browse) предусмотрены в окне справки. Если сноски + включены в кадр, но их значения не указаны, последовательность просмотра тем будет установлена автоматически в соответствие с последовательностью тем в файле. Тексты сносок могут быть номерами или идентификаторами.
!	Используется для указания макросов, которые должны сработать перед появлением окна темы (для сложных справочных систем).
*	Используется для указания связанных друг с другом тем, которые должны быть встроены в справку (при создании справочных систем связанных программных продуктов).
>	Используется для указания идентификатора окна, в котором должна отображаться тема

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

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

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

Переходы по ключевым словам позволяют осуществлять два макроса, имеющие одинаковый синтаксис Klink и Alink. Например,

Klink ("<список ключевых слов>", <тип>, "<идентификатор темы>", <имя окна>)

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

Таблица 2

Символическое значение	Численное значение	Описание значения
JUMP	1	Если найдена только одна тема, соответствующая ключевым словам, то на нее сразу осуществляется переход
TITLE	2	Если ключевое слово находится более чем в одном файле справки (при справке, состоящей из нескольких файлов), то в окне Найденные разделы после названия темы пишется имя файла, определенное в файле содержания (*.cnt)
TEST	4	Возвращается величина указывающая нашлось или нет хотя бы одно соответствие ключевым словам.

<идентификатор темы> определяет, что если не найдено соответствия ключевым словам, то появляется всплывающее окно с текстом, содержащимся в теме, на которую указывает данный идентификатор. Если идентификатор не задан, то при безуспешном поиске появляется окно с текстом «Дополнительные сведения отсутствуют».

<имя окна> задает окно для отображения. Если этот параметр не задан, то используется окно, заданное в кадре темы или окно по умолчанию.

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

Объект Поле!Klink (Объект Поле; Объекты) позволяет осуществить ввод данных.

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

В тексте может быть использован оператор вида

{button Объекты, Alink (Объекты)}

Это приведет к появлению в кадре кнопки с надписью «Объекты», при нажатии на которую будет осуществляться поиск тем, у которых ключевое слово присутствует в сносках A.

Когда сформированы темы проектируемой справочной системы, разработана ее структура, решен вопрос об общем стиле справки, переходят ко второму этапу проектирования - компиляции справки в файл *.hlp .

Компиляция и отладка справочной системы может проводиться с использованием программы HCRTF - Microsoft Help Workshop, расположенной в каталоге Delphi…\Help\Tools. Эта программа позволяет создать файл Проекта справки, без которого ее нельзя компилировать, файл содержания справки, а также проверить справочную систему в работе.

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

Выполнить File|New и в открывшемся окне выбрать опцию Help Project.

В окне Project File Name задать имя и каталог файла Проекта справки (каталог выбрать тот, в котором лежит файл текстов тем .rtf).

В открывшемся окне Проекта нажать кнопку Files….

В появившемся окне Topic Files нажать кнопку Add… и выбрать среди файлов подготовленный файл текстов справки.

Нажать OK.

Когда файл проекта создан, необходимо сохранить и откомпилировать его - кнопка Save and Compile, использовать ее следует каждый раз при изменении файла Проекта. После компиляции можно просмотреть сведения о результатах компиляции, и если она завершилась удачно (указан размер файла) просмотреть файл справочной системы. Просмотр и работа по отладке выполняется с помощью команды File|Run WinHelp.

Чтобы создать новый файл содержания необходимо выполнить команду File|New и в окне New выбрать опцию Help Contents, в результате чего появится окно с загруженным в него файлом содержания. В верхнем левом поле ввода задается имя файла *.hlp, верхнем правом поле ввода задается заголовок, который должен появиться в окне при работе со справочной системой. Нижнее поле ввода заполняется с помощью кнопок Add Above … и Add Below…. Каждая его строка соответствует либо заголовку (будет отображаться в виде закрытой книги), либо теме (отображается в виде листа с вопросом). Для заголовка задается только его текст, для темы задается название и идентификатор. Кнопки позволяют формировать многоуровневую структуру файла содержания. Кнопка Edit… позволяет редактировать выделенную строку, а кнопка Remove… удалять.

Файл содержания имеет расширение *.cnt.

Задание на лабораторную работу

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

Порядок выполнения работы

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

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

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

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

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

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

Сформировать файл тем справок в виде файла *.rtf .

Сформировать файл справочной системы *.hlp, создав файл Проекта справки и откомпилировав его средствами программы MS Help Workshop (HCRTF).

Используя те же средства создания справочной системы, сформировать файл содержания *.cnt.

Требования к оформлению отчета

Отчет по лабораторной работе должен содержать:

цель работы;

описание приложения (вариант задания);

структуру справочной системы в виде карты;

комментарии, поясняющие содержание обзорной, предметной и процедурной справок;

текст файла тем справок в формате rtf (включая скрытый текст);

обоснования применения использованных в файле сносок;

выводы по работе.

При защите лабораторной работы необходимо представить электронные версии разработанных файлов *.hlp и *.cnt.

Лабораторная работа № 4 Создание прототипа интерфейса и его тестирование

1. Цель лабораторной работы

Приобретение умений по формированию электронного прототипа - демонстрационного ролика интерфейса.

Приобретение практических навыков по созданию тестовых заданий.

Закрепление теоретических знаний и приобретение практических навыков по проведению тестирования интерфейса.

2. Краткие теоретические сведения

...