1

Человеко-машинное взаимодействиеЧеловеко-машинное взаимодействие

Зайдуллин С.С.КГТУ им. А.Н.Туполева

2

Лабораторная работа 3 Лабораторная работа 3

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

Цель работы: Практическое освоение основных принципов разработки и прототипирования пользовательского интерфейса.

3

Общие сведенияОбщие сведения

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

Этапы итерационного процесса проектирования интерфейса:1 - Анализ; 3 - Построение;2 - Разработка; 4 - Тестирование.

4 1

3 2

4 1

3 2

4 1

3 2

4 1

3 2

4

Сбор и Сбор и анализанализ информации информации от пользователейот пользователей1. Определение профиля пользователей2. Анализ стоящих перед пользователя-

ми задач3. Анализ требований4. Анализ рабочей среды пользователей5. Проверка на соответствие потребнос-

тям пользователя

5

РазработкаРазработка пользовательского пользовательского интерфейсаинтерфейса1. Определение цели с точки зрения удобства

применения продукта2. Разработка задач и сценария действий поль-

зователей (сценария диалога с пользовате-лем)

3. Выделение целей и операций интерфейса4. Определение визуального представления

системы5. Разработка меню объектов и окон6. Оценка и оптимизация визуальной разра-

ботки

6

ПрототипированиеПрототипирование интерфейса интерфейса

создание сериистатическихэкранных форм;

разработка интерактивной презентации;

создание демонстрационных программ.

Поиск клиентов

Регистрационное имя

Фамилия

Имя

Отчество

Гостиница

Результаты поиска:

ЗакрытьНайтиСправка

7

ТестированиеТестирование на удобство на удобство примененияприменения

Данный этап является ключевым эле-ментом процесса проектирования ПИ.

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

В данной лабораторной работе этот этап не рассматривается!

8

Базовые компоненты Базовые компоненты справочной системысправочной системы Базовая справка объясняет пользователю

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

функции системы. Справка предметной области Процедурная справка отвечает на вопрос «Как

это сделать?» Контекстная справка Справка состояния отвечает на вопрос «Что

происходит в настоящий момент?» Сообщения об ошибках

9

ЗаданиеЗадание

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

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

Необходимо завершить проект.

10

Сбор и анализ информации Сбор и анализ информации от пользователейот пользователейПрофильпользова-телей

Всё население (владение русским языком: ДА).

Целипользова-телей

Отдых, получение информации (новости), образование, элемент интерьера.

Типичныезадачи

1) Просмотр расписания,2) Отбор конкретных передач,3) Программирование телевизора,4) Настройка телевизора,5) Просмотр видео,6) Переключение каналов и т.п.

11

Разработка ПИ: критерии Разработка ПИ: критерии удобства примененияудобства применения

Лёгкость изучения, запоминания и применения правил пользования (после однократного прочтения руководства 75% пользователей смогут управлять телевизором).

12

Разработка ПИ: сценарииРазработка ПИ: сценариидействийдействий

Знакомство с расписанием:Открыть расписание. Просмотреть расписание.Отбор передач:Открыть расписание. Пометить интересные

передачи. Перенести в Избранное.Программирование телевизора:Открыть Автоматическое управление (Автомат).

Заполнить программу Автоматического управления.Настройка телевизора:Открыть пульт. Настроить телевизор.Просмотр видео:Переключиться на видео.Переключение канала:Открыть пульт. Переключить канал.

13

Разработка ПИ: объектыРазработка ПИ: объекты

Помощь

Телевизор Расписание

Избранное

Монитор

Часы

Экран

Пульт

Автомат

14

Разработка ПИ: операцииРазработка ПИ: операцииТелевизор: включить; выключить; открыть; закрыть;

помощь.Монитор: включить; выключить; открыть; закрыть;

помощь.Экран: включить; выключить; открыть; закрыть; пульт,

помощь.Пульт: открыть; закрыть; настроить экран; расписание;

избранное; помощь.Автомат: открыть; закрыть; очистить, заполнить;

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

избранное; помощь.Избранное: открыть; закрыть; очистить, заполнить;

передать в автомат; помощь.Часы: открыть, закрыть.Помощь: открыть, закрыть.

15

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

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

2. Выполнить оставшиеся не реализованными шаги (4-6) по разработке интерфейса. Построить граф сценария ПИ.

3. Разработать бумажный прототип программы.4. Согласовать сценарий и полученный

прототип с преподавателем.5. На основе бумажного прототипа создать

электронный статический прототип в системе моделирования Visio.

16

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

6. Построить прототип программы в виде интерактивной презентации в среде Power Point.

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

8. Оформить результаты лабораторной работы.

17

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

ВНИМАНИЕ: Данная лабораторная работа должна выполняться в два этапа:

– Первый этап завершается на п.п. 4 данного задания. Разрешение на переход ко второму этапу выдаёт преподаватель после оценки качества промежуточного отчёта.

– Второй этап завершается составлением итого-вого отчёта (п.п. 8). Итоговый отчёт должен включать описания всех трёх реализованных прототипов проектируемой системы компью-терного телевидения, а также – макет её спра-вочной системы.

18

Содержание отчётаСодержание отчёта1. Постановка задачи. Краткое описание под-

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

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

преподавателем; твёрдая копия электронного статического

прототипа (Visio); твёрдая копия динамического прототипа (Power

Point).

19

Содержание отчётаСодержание отчёта3. Описание макета справочной системы. В

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

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

представлен; какое примерное содержание и дизайн будет

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

20

Контрольные вопросыКонтрольные вопросы

Перечислите этапы, составляющие процесс проектирования ПИ.

Перечислите основные задачи проектирова-ния ПИ, решаемые во время сбора и анализа информации от пользователя?

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

21

Контрольные вопросыКонтрольные вопросы Какие типы сценариев диалога с пользовате-

лем вам известны, и какой из них реализован в данной лабораторной работе?

Из каких компонентов может состоять справка программной системы? Какие из них были реализованы в рамках данной лабораторной работы?

Сравните функциональные возможности по созданию прототипов использованных в данной лабораторной работе программных инструментов (Microsoft Visio и Microsoft Power Point).