1 - Ольга Пескова

Учебный курс
«Проектирование интерфейса
пользователя»
Преподаватель:
к. т. н. Пескова Ольга Вадимовна
Лекция №6
Концептуальное
проектирование
Разработка инфраструктуры
пользовательского интерфейса
Место в общем плане проектирования
1
Исследование
пользователей, предметной
области
2
Собранные данные
Стратегия дизайна
Профили групп
Моделирование
Персонажи
Контекстные сценарии
пользователей и контекстов
использования
3
Выработка требований
к проектированию
пользовательских, бизнеса и
технологических
Функциональные,
информационные
требования
4
Информационная архитектура
Общая структура взаимодействия
Сценарии ключевого пути
Проверочные сценарии
Концепция пользовательского интерфейса
Оценка/проверка
Концептуальное
проектирование
общей структуры и
взаимодействия
продукта
5
Детальное
проектирование
поведения, формы и
наполнения
Спецификации
формы, поведения и
содержания
6
Спецификации
программной системы
Выработка требований
к разработке
Проектирование интерфейса пользователя. Лекция №6.
3
Разработка общей инфраструктуры
пользовательского интерфейса
Инфраструктура
взаимодействия
• Результат: грубые наброски
экранов и вариантов поведения
Визуальная
инфраструктура
• Результат: детальный макет
типовых экранов
Физическая
инфраструктура
• Результат: форма (физическая
модель)
Проектирование интерфейса пользователя. Лекция №6.
4
Инфраструктура взаимодействия. Этапы
1
• Определение технической платформы, форм-фактора,
типа приложения и способов управления
2
• Разработка информационной архитектуры
3
• Создание ключевых сценариев (навигационной модели)
4
• Определение функциональных и информационных элементов
• Определение функциональных групп и иерархических связей
между ними
5
• Макетирование инфраструктуры взаимодействия
6
• Создание и выполнение проверочных сценариев для
верификации решений
Процесс имеет итерационный характер.
Порядок этапов с 3-его по 5-ый зависит от стиля мышления проектировщика.
Проектирование интерфейса пользователя. Лекция №6.
5
1
Инфраструктура взаимодействия.
Монопольный тип интерфейса
Проектирование интерфейса пользователя. Лекция №6.
6
1
Инфраструктура взаимодействия.
Временный тип интерфейса
Проектирование интерфейса пользователя. Лекция №6.
7
1
Инфраструктура взаимодействия.
Фоновый тип интерфейса
Проектирование интерфейса пользователя. Лекция №6.
8
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса
Фоновый тип
Утилиты
«Настольные»
приложения (ПК)
MS Office,
Adobe Photoshop
и др.
Проводник,
настройка принтера,
Widgets и др.
Сервисные
киоски
Информационные
веб-сайты
Сервисные
веб-сайты
Монопольный
тип
Продукты в
веб-среде
Вебприложения
Временный
тип
Интернетприложения
Киоски
Информационные
киоски
Портативные
устройства
(телефоны, КПК)
Прочие встроенные системы
(банкоматы, фотоаппараты,
управление станками и др.)
Проектирование интерфейса пользователя. Лекция №6.
9
1
Инфраструктура взаимодействия.
«Настольные» приложения
•
•
•
Проектирование интерфейса пользователя. Лекция №6.
монопольный,
временный,
фоновый.
10
Инфраструктура взаимодействия.
Продукты в веб-среде
1
•
•
•
•
информационные веб-сайты;
сервисные веб-сайты;
веб-приложения;
интернет-приложения.
баланс между монопольным и временным
типом
Проектирование интерфейса пользователя. Лекция №6.
11
1
Инфраструктура взаимодействия.
Информационные веб-сайты
Проектирование интерфейса пользователя. Лекция №6.
12
1
Инфраструктура взаимодействия.
Сервисные веб-сайты
Проектирование интерфейса пользователя. Лекция №6.
13
1
Инфраструктура взаимодействия.
Веб-приложения
Проектирование интерфейса пользователя. Лекция №6.
14
1
Инфраструктура взаимодействия.
Интернет-приложения
RSS-reader
Проектирование интерфейса пользователя. Лекция №6.
15
1
Инфраструктура взаимодействия.
Встроенные системы и портативные устройства
Платёжные терминалы
Palm’s Tungsten T
Apple iPod
Информационные киоски
Автомобильная приборная
панель Nissan Connect
Проектирование интерфейса пользователя. Лекция №6.
16
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (1)
Мысленный эксперимент. Как изменится Microsoft OneNote 2010 при
различных требованиях пользователя и среды?
Предположим три условных измерения:
1) цели пользователя (содержания работы пользователя ):
• «утилита» – решает одну простую задачу;
• «работа» – ПО для рабочего процесса;
• «погружение» – увлекательный и/или игровой процесс;
2) вовлечённость пользователя:
• «демон»;
• «кратковременное»;
• «суверенное»;
3) техническая платформа:
• «настольное приложение»;
• «мобильное приложение»;
• «веб-продукт»;
• «киоск»;
• др.
Проектирование интерфейса пользователя. Лекция №6.
17
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (2)
Вариант №1.
Обычный режим Microsoft OneNote 2010 — цифровая записная книжка, в которой можно:
• собрать все заметки, сведения из различных источников, снимки экрана и др. в виде
записных книг;
• использовать механизм поиска;
• организовывать совместную работу.
Проектирование интерфейса пользователя. Лекция №6.
18
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (3)
Вариант №2.
Штатный режим "заметки на полях" Microsoft OneNote 2010 — быстрое создание простой
текстовой заметки с сохранением в Неподшитые заметки.
Проектирование интерфейса пользователя. Лекция №6.
19
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (4)
Вариант №3.
Microsoft OneNote web application - хранение и работа заметок в глобальной сети.
Проектирование интерфейса пользователя. Лекция №6.
20
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (5)
Вариант №4.
Microsoft OneNote Mobile 2010 для Windows® phone.
Желательно эффективно реализовать возможность ввода рукописных заметок с
последующим их преобразованием в печатный текст.
Проектирование интерфейса пользователя. Лекция №6.
21
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (6)
Вариант №5.
Microsoft OneNote. Предположение.
OneNote мог бы вести себя как демон, например, фоном отслеживая поведение других
пользователей в совместных записных книгах и создавая оповещения об этих изменениях.
Проектирование интерфейса пользователя. Лекция №6.
22
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (7)
Вариант №6.
Microsoft OneNote. Предположение.
Легко представить, что процесс систематизации накопленных заметок и прочих сведений
совместно с механизмами рецензирования и "связанных заметок" превратят взаимодействие
в суверенный тип.
Проектирование интерфейса пользователя. Лекция №6.
23
1
Инфраструктура взаимодействия.
Техническая платформа и тип интерфейса. Пример (8)
Вариант №7.
Microsoft OneNote. Фантастическое предположение.
Накопленные заметки и сведения автоматических систематизировались бы и представлялись
в форме погружения в "красочный мир" манипуляции данными, например, по технологии
подобной MS Pivot.
http://www.getpivot.com/
Проектирование интерфейса пользователя. Лекция №6.
24