1. Человеко-машинное взаимодействие
Зайдуллин С.С.
КГТУ им. А.Н.Туполева
1

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

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

4. Сбор и анализ информации
от пользователей
1.
2.
3.
4.
5.
Определение профиля пользователей
Анализ стоящих перед пользователями задач
Анализ требований
Анализ рабочей среды пользователей
Проверка на соответствие потребностям пользователя
4

5. Разработка пользовательского
интерфейса
1.
2.
3.
4.
5.
6.
Определение цели с точки зрения удобства
применения продукта
Разработка задач и сценария действий пользователей (сценария диалога с пользователем)
Выделение целей и операций интерфейса
Определение визуального представления
системы
Разработка меню объектов и окон
Оценка и оптимизация визуальной разработки
5

6. Прототипирование интерфейса

создание серии
статических
экранных форм;
Поиск клиентов
Регистрационное имя
Фамилия
Имя
Отчество
Гостиница
Результаты поиска:
Справка


Найти
Закрыть
разработка интерактивной
презентации;
создание демонстрационных
программ.
6

7. Тестирование на удобство
применения
Данный этап является ключевым элементом процесса проектирования ПИ.
Его цель заключается в оценке поведения, действий и степени удовлетворения
пользователей в процессе взаимодействия
с программной системой.
В данной лабораторной работе этот
этап не рассматривается!
7

8. Базовые компоненты
справочной системы
 Базовая
справка объясняет пользователю
сущность и назначение системы.
 Обзорная справка рекламирует пользователю
функции системы.
 Справка предметной области
 Процедурная справка отвечает на вопрос «Как
это сделать?»
 Контекстная справка
 Справка состояния отвечает на вопрос «Что
происходит в настоящий момент?»
 Сообщения об ошибках
8

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

10. Сбор и анализ информации
от пользователей
Профиль
пользователей
Всё население (владение русским языком: ДА).
Цели
пользователей
Отдых, получение информации (новости), образование,
элемент интерьера.
Типичные
задачи
1) Просмотр расписания,
2) Отбор конкретных передач,
3) Программирование телевизора,
4) Настройка телевизора,
5) Просмотр видео,
6) Переключение каналов и т.п.
10

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

12. Разработка ПИ: сценарии
действий
Знакомство
с расписанием:
Открыть расписание. → Просмотреть расписание.
Отбор передач:
Открыть расписание. → Пометить интересные
передачи. → Перенести в Избранное.
Программирование телевизора:
Открыть Автоматическое управление (Автомат). →
Заполнить программу Автоматического управления.
Настройка телевизора:
Открыть пульт. → Настроить телевизор.
Просмотр видео:
Переключиться на видео.
Переключение канала:
Открыть пульт. → Переключить канал.
12

13. Разработка ПИ: объекты
Телевизор
Расписание
Помощь
Избранное
Монитор
Экран
Часы
Пульт
Автомат
13

14. Разработка ПИ: операции
Телевизор:
включить; выключить; открыть;
закрыть; помощь.
Монитор: включить; выключить; открыть; закрыть;
помощь.
Экран: включить; выключить; открыть; закрыть;
пульт, помощь.
Пульт: открыть; закрыть; настроить экран;
расписание; избранное; помощь.
Автомат: открыть; закрыть; очистить, заполнить;
включить; выключить; помощь.
Расписание: открыть; закрыть; очистить, передать
в избранное; помощь.
Избранное: открыть; закрыть; очистить, заполнить;
передать в автомат; помощь.
Часы: открыть, закрыть.
Помощь: открыть, закрыть.
14

15. Порядок выполнения
1.
2.
3.
4.
5.
Изучить результаты выполнения первых
трёх шагов проектирования ПИ, приведённые на предыдущих слайдах.
Выполнить оставшиеся не реализованными
шаги (4-6) по разработке интерфейса.
Построить граф сценария ПИ.
Разработать бумажный прототип
программы.
Согласовать сценарий и полученный
прототип с преподавателем.
На основе бумажного прототипа создать
электронный статический прототип
в системе моделирования Visio.
15

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

17. Порядок выполнения
ВНИМАНИЕ: Данная лабораторная работа
должна выполняться в два этапа:
– Первый этап завершается на п.п. 4 данного
задания. Разрешение на переход ко второму этапу
выдаёт преподаватель после оценки качества
промежуточного отчёта.
– Второй этап завершается составлением итогового отчёта (п.п. 8). Итоговый отчёт должен
включать описания всех трёх реализованных
прототипов проектируемой системы компьютерного телевидения, а также – макет её справочной системы.
17

18. Содержание отчёта
1.
2.
Постановка задачи. Краткое описание подлежащих реализации функций проектируемой системы компьютерного телевидения.
Результаты разработки интерфейса, в том
числе:
 сценарий диалога;
 бумажный прототип интерфейса, утверждённый
преподавателем;
 твёрдая копия электронного статического
прототипа (Visio);
 твёрдая копия динамического прототипа (Power
Point).
18

19. Содержание отчёта
3.
Описание макета справочной системы. В
частности для каждого из существующих
типов компонентов справки необходимо
указать:
 будет ли он реализовываться в системе
компьютерного телевидения;
 в какой форме и на каком носителе будет
представлен;
 какое примерное содержание и дизайн будет
иметь при окончательной реализации справочной системы компьютерного телевидения
(рекомендации).
19

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

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